Advanced Internet: Writing Web Pages Workshop

These notes can be accessed at
http://minich.com/interneteducation/writingwebpages/index.htm

instructor: Mr. Curt Minich

Learn how to write your own home page. The course will introduce the basics of HTML (Hypertext Markup Language), the language used to create Web pages. Students will use a WYSIWYG Web authoring program to easily create Web pages and they will learn how Web pages can be uploaded to a Web server via FTP programs. Students will examine the role and requirements of Web page graphics.

1. Demonstration of writing a web page with a WYSIWYG authoring application, Netscape Composer.

Web pages are formatted with Hypertext Markup Language (HTML). That is, "behind-the-scenes" there are codes that line up and arrange a web page on your computer screen so that it looks nice. One could use practically any word processor application like Microsoft Word or WordPerfect to write a web page as long as he or she knew the special HTML codes. Fortunately, the most recent versions of most word processors, including Word and WordPerfect, allow you to write web pages as you would any other document as long as you are sure to save the file in the correct HTML format.   That is, you do not have to know the special HTML codes. However, it is difficult to create a really nice-looking web page that way.

There are a number of WYSIWYG web authoring applications, though, that do a much better job than Word and WordPerfect. They also allow an author to create web pages without having to know any HTML codes in a "what-you-see-is-what-you-get" environment. These programs range in price from free to over $300.

We will be using a free WYSIWYG program named Netscape Composer, which is part of the Netscape Communicator version 4 suite. It is free to download from the Netscape web site! However, you can know download Netscape Communicator version 6.2, which includes a newer version of Netscape Composer.

It is quite intuitive to learn how to use Netscape Composer since it uses standard toolbar symbols like many word processor programs.

2. Introduction to Netscape Composer.

If you are using Netscape Communicator to surf (browse) the Web, then you already have Netscape Composer loaded on your computer. Simply click the menu command "File/New/Blank Page" and Netscape Composer will load and display a blank web page.

If you are using AOL or you surf the Web with Internet Explorer, you will need to download the latest version of Netscape onto your computer. You can still surf the Web with your "other" browser (AOL browser, Internet Explorer, etc.) but you will need to use Netscape Composer to actually write web pages.

3. Use the Netscape Web Page Templates to create quick web pages.

You can use these templates by choosing "File/Open/Page From Template" from the Netscape menu bar and then clicking the Netscape Templates button. Or, you can simply visit http://home.netscape.com/browsers/templates/index.html

Then, you select "File/Edit Page" or "File/Edit Document" from the menu bar to launch Netscape Composer.

4. Modify a web page with some of Netscape Composer's basic tools.

The key to really unlocking the power of Netscape Composer (or any WYSIWYG web authoring application) is to understand the tools on its toolbar.

Modify one of the Netscape templates by highlighting pieces of text with your mouse and simply typing your own phrases over top of them.

Experiment with the other toolbar tools such as centering, bold (the dark "A"), text size (the number) and text color. You often have to highlight pieces of text before selecting these tools in order to apply the change.

Don't forget to save the document when you are finished modifying it.

5. Add an interesting background, graphic, and an animated GIF to your web page by "borrowing" them from Netscape's Web Site Tool Chest.

Usually, it takes graphics to make a web page stand out from others. There are many web sites from which you can obtain free graphics, just do a search with Yahoo looking for "free web graphics". But Netscape offers some free ones at the Netscape Web Site Tool Chest (http://home.netscape.com/navigator/vgold3.0/using/index.html). Visit that web page and choose the "Buttons" link. If you are using a Windows computer, click your right mouse button over top of any of the images that you see on the web page. Choose the "Save Image As..." option to save the graphic on your hard drive (in the same folder that you have your newly created web page saved). If you are using a Macintosh computer, click and hold the mouse button down over top of any of the images that you see and then choose the "Save Image As.." option. You have now downloaded the image to your hard drive.

Now that you have the image saved on your hard drive, you can "insert" it into any of the web pages that you have created using Netscape Composer. Simply choose "Insert/Image..." from the menu bar and then click "Choose File..." You will have to navigate through your hard drive's folders to find and select the image that you have just downloaded. While it is technically possible to follow this process and download any image from any web page on the Internet, you may not have the legal right to use it on your web page for copyright reasons. You may have to learn how to create your own images and graphics using a program like Microsoft Image Composer, Adobe Photoshop, or Paint Shop Pro. Microsoft Word could even be used to create simple graphics.

6. Introduction to HTML codes and tags.

You may be satisfied to use Netscape Composer for all of your web page authoring. However, there comes a time when many web authors need to learn at least some of the HTML codes that really control the way a web page looks. For example, sometimes you cannot achieve the look that you want for a web page with Netscape Composer no matter how hard you try.

Probably, the easiest way to learn HTML is to look at the underlying HTML of web pages that others have created. To do this, you can visit any web page with Netscape Navigator (or any web browser) and choose "View/Page Source", or something similar, from the menu bar. You will see the complicated HTML code that was really used to create that web page. By comparing features of the web page to sections of the HTML, you can pick up features of the code.

Visit Mr. Minich's Example Web Page and view its corresponding HTML source for an introductory example.

You can also choose "View/Page Source" with Netscape Composer or the "View/Source" menu command in Internet Explorer to see the HTML behind any Web page on the Internet.

7. Modify a web page by editing its HTML code.

Now, see if you can purposefully change a feature or two of one of your template pages by editing its HTML code with Netscape Composer. First, save the template page by choosing "File/Save".  Next, choose the "Edit/HTML Source" menu option in Netscape Composer. Hopefully, a word processor application will launch and show the page's HTML in a new window.

If it does not, you will probably have to choose "Edit/Preferences" from the menu bar and then choose "Composer" on the left of the screen. Click the "Choose" button next to External Editors, HTML Source and find a word processor or text processor program on your computer. I would recommend choosing the application, NotePad, which is in the Windows folder or simply type "C:/WINDOWS/Notepad.exe" into the entry area under External Editors, HTML Source. Now, repeat the steps above to edit the HTML source of your template web page.

Once you are able to view the HTML source in a word processor program, you can highlight and change any text that you recognize from your web page. For example, look between the <TITLE> and the </TITLE> tags. You can overwrite that text to change the official title of your web page (which appears at the VERY top of the browser window).

You can change any HTML code that you would like in this editing mode but be careful because one slight mistake could make your web page unreadable by a browser.

8. Explanation of how web pages are served by web servers and how a web page is uploaded.

Only when a web page is uploaded to an active web server, can it be viewed on the WWW by others. You can view your web page at anytime though by choosing "File/Browse Page" in Netscape Composer or by choosing "File/Open Page" from the menu bar and then clicking "Choose File..."

Once you upload your web page to your Internet Service Provider's (ISP) web server, the page can be viewed by anyone with an Internet connection. While they cannot change or modify your web page, neither can you without downloading it again, making the necessary change(s), and then uploading it again. Actually, you do not have to download it, if you still have a copy of the original on your computer's hard drive.

9.  Use someone else's web page by saving it locally to your hard disk and then editing it with Composer.

You can always copy another web page besides the Netscape templates by downloading any web page to your hard drive. While copying graphics this way is usually illegal, I do not believe it is criminal to copy another person's HTML format as long as you replace the text and graphics with your own.

To do this simply find a cool web page with Netscape Navigator (or any web browser) and choose "File/Save As..." from the menu bar. Be careful to then select the "Save As" type "HTML Files" or "Source" (depending on what browser you are using.) This will allow you to copy the web page to your hard drive. You can then open it with Netscape Composer or any word processor and eventually upload it to your own ISP's web server.

10. Demonstration of the process of uploading a web page with an FTP program.

As I have said, a web page cannot be viewed by others until it has been uploaded to a web server. Your ISP (the company through him you obtained your Internet account) probably allows you to store at least 2 MB of web pages on its web server. You must call their help phone number or visit their web site to be sure. Some other companies (such as GeoCities at www.geocities.com) allow you to upload your web pages for free.

They will need to tell you the exact process to use in order to upload your web pages. Many times they will give you an File Transfer Protocol (FTP) address to which you can upload your web pages by using your Internet account's user name and password. You may need to use an FTP program in order to do this. FTP programs can usually be obtained as freeware or shareware downloads (do a search at Yahoo for "FTP programs"). A popular FTP program for Windows computers is "WS_FTP" and a popular one for Macintosh computers is "Fetch".

Unfortunately, the uploading process indicated here can be the most difficult part of successfully authoring a Web page.

11. Introduction to other WYSIWYG authoring programs that you can purchase.

As you obtain more experience writing web pages, you may find yourself wanting to do more sophisticated pages. You may at that time want to purchase better WYSIWYG web authoring programs than Netscape Composer which has some limitations. Some such programs are
  • Microsoft FrontPage
  • Macromedia Dreamweaver
  • Adobe GoLive
  • NetObjects Fusion
  • many others can be found by searching download.com for "web page authoring programs"

You can also learn a lot of free web authoring tips by searching for such with all of the major search engines. There are many tutorials available on the Web.

12. Another guide to writing Web pages using Netscape Composer.