The Digital Amateur: Building a Web Page (part 2)

by Brad Rodriguez, VE3RHJ

By now, you should have obtained a copy of Netscape 3 Gold, signed up for some space on a web host, created an extremely basic index.html file, and uploaded it to your host. Great! But it's just one page, and it doesn't lead anywhere. Probably you'll want to create several pages for all the nifty things you do. And probably you know some other Internet pages that are relevant to yours. You need to create links from your main page.

You've used web page links in your surfing. A link is a few words of text which are highlighted -- commonly underlined, and displayed in blue. When you click on the link with your mouse, your browser goes to a new web page. Now you can put links on your page, so that visitors can click on them and view other pages...either more of your pages, or someone else's pages.

Creating additional web pages

Creating additional web pages is exactly the same as creating your first page -- except when the time comes to save your page, you don't name it index.html, you give it a different name. Here's a refresher on the procedure:

Start Netscape 3 Gold.

Click File/New Document/Blank.

Type your headings and text.

Click File/Save As...

Navigate to your web page folder, such as C:\Webpages.

Type a file name for your new page, like myshack.html.

Click the Save button.

About step 6: you can use any file name you like, but it must end with .htm or .html . If you don't do this, your web page may not display correctly (or at all). It's a good idea to use a meaningful file name: myshack.html and qrptransmitter.html will be easier to remember than page1.html and page2.html. It's also a convention to use all lower-case letters. You can use upper-case letters -- like Myshack.html or even MYSHACK.HTML, but you and your visitors must always remember to type them exactly the same way! If you stay with lower-case, you never have to remember.

To illustrate this, I've typed both parts of this article as HTML files. Since the article is about building web pages, I've named the files webpage1.html and webpage2.html. (In this case, these are descriptive names.) Now, I have to link them to my main index.html page.

Linking additional pages to your main page

Here's how to use Netscape 3 Gold to edit an existing web page on your computer:

Start Netscape 3 Gold.

Click File/Open File.

Navigate to your web page folder. If you've been working with other pages, Open File may already be in the right folder.

Click on the file name (like index.html), then click the Open button.

Presto! You're back in your main web page. Now you can type more text, and turn some of the text into links.

Remember that a link appears as highlighted text. So type something that describes the page you're linking to. For my article, I typed the text "Building a Web Page, Part 1." Click and drag the mouse to select the text you want to turn into a link. Then click Insert/Link. (If you prefer, you can click, instead, on the Make Link button on the bottom toolbar -- it's the button with a picture of a piece of chain. A link, get it?) A "Properties" window will open.

In the "Link to a page location or local file" box, type the name of the new web page file (in my example, webpage1.html). Be careful to type only the name of the file, not the full "path" (disk drive and directory). Then press Enter, or click the OK button. Now, you're back in your index page, but the "link text" is highlighted in blue and underlined.

That's it! You can repeat this process to link to as many additional pages as you'd like. Remember, each link requires two things: some identifying text (the "link text"), and a file name. Only the link text will actually appear on your web page. So make it descriptive! If necessary, you can add more description as "ordinary" text (not highlighted as part of the link). When you're done, remember to click File/Save to save your changes to disk.

Uploading your new pages

Now you have to copy your new files -- and the index.html file, since you've changed it -- to your web host. You can copy files one at a time, as you edit them, with File/Publish. But if you want to upload several files, there's an easier way:

Make sure you've saved all your web pages to disk.

If you're not currently editing a page, start Netscape 3 Gold and use File/Open File to edit index.html (or any other web page in its folder).

Dial up your Internet Service Provider (with Dial-up Networking, or whatever you use).

In Netscape 3 Gold, click File/Publish.

Check that the upload location, user name, and password are still set. They should be whatever you specified when you first uploaded index.html. The password will appear as a line of asterisks (*****).

Near the top of the "Publish Files" window, click the button "All files in document's folder". Then click the OK button.

Step 6 tells Netscape to automatically copy all the files in your web page folder to your web host. This is why it's important to keep all your web pages -- and nothing else -- in one folder. With one click, you can upload them all!

Later, when you change these files, or add new files, you'll have to decide whether you want to upload them one at a time or all at once. It's never harmful to upload everything, even if only one or two of the files have changed. You'll just replace some files on the host with identical copies. But when you have a lot of files in your web folder, it can take quite a bit of time to send them all. When that happens, you may want to upload just the changed pages. You'll need to keep a list of the filenames that have been changed. After you click "All files in the document's folder," you'll see a list of filenames in the box underneath, highlighted (white letters in a blue bar). These are the files that will be uploaded. You can deselect any file by single-clicking on its filename with the mouse. (A second click will re-select the file.) When you have just the files you want, click the OK button.

Linking to other web pages on the Internet

You can create links from your page to any web page -- not just your own pages. To do this, you'll need the URL (Uniform Resource Locator) of the "target" web page. The URL is the thing that begins with http://; it's the complete Internet "address" of the web page. For example, http://ve3rhj.freeservers.com is the URL of my web page. Your web browser should tell you this when you're looking at a web page. (In Netscape, it's displayed in the "Location" bar, just below the Back/Forward/etc. toolbar.)

To link to someone else's web page, write some link text, select it, and click Insert/Link just as before. But now, instead of typing a file name, type the complete URL. You must type everything, even the http://, and you must type it exactly, including any upper-case characters and any funny symbols. (If you're an experienced Windows user, you can often use Cut and Paste to copy a URL from your web browser or email program.) Then click OK.

Let's say you want a link from your page to the GBARC page. Type "Georgian Bay Amateur Radio Club", then click and drag to select this text. Click Insert/Link. Type http://greynet.net/~gbarc in the "Link to a page location or local file" box (the funny character before "gbarc" is a tilde, which should be in some obscure corner of your keyboard.) Then click OK. That's it!

After you upload your pages to the web host, it's a good idea to check your links. Use your web browser to look at your web page, and click on all the links to make sure they work. If they don't, it's usually because you made a mistake when typing the URL.

Removing a link

Sometimes, when you start typing text after a link, Netscape 3 Gold will assume that the new text is part of the link. As you type, it will appear in blue and underlined. Go ahead and type. When you're done, click and drag to select the new text -- the text you don't want in blue -- click Insert/Link, and then click the "Remove Link" button. This will change the selected text back to normal (black).

Changing the appearance of your text

You can click-and-drag to select a block of text, and then use the following buttons on the second toolbar to change its format. (Move the mouse pointer onto a tool button, and leave it there, to see the full name of that button pop up.)

"Paragraph Style" applies to the entire paragraph. You'll most often use Normal, Heading 1, Heading 2, and Heading 3.

"Bullet List" changes several lines of text to a list with bullets (like this one). Click again to turn this off (revert to normal paragraphs).

"Numbered List" changes several lines of text to a numbered list (like the lists above). You'll see # symbols while you're editing. When you view the page with the browser, the entries in the list will be numbered. Click again to turn this off (revert to normal paragraphs).

"Decrease Indent" removes one level of indenting from the selected lines.

"Increase Indent" indents the selected lines one level. Press again for more indenting. Use "Decrease Indent" to remove the indenting.

"Align Left" causes the selected lines to be aligned along the left margin. This is the most common appearance for text (the same as you get with a typewriter).

"Center" centers the selected lines on the page. This is useful for titles and headings.

"Align Right" causes the selected lines to be aligned along the right margin. This is mostly for special effects.

The first seven buttons on the third toolbar control the appearance of characters (the font). Select some text, and you can do the following:

"Decrease Font Size" makes the characters one size smaller. Don't overuse this or the characters may become unreadable.

"Increase Font Size" makes the characters one size larger. Don't overuse this either; a web page with really big letters is like shouting (and just as polite).

"Font Size" is most useful to reset the font size to "+0" (normal).

"Bold" makes the characters bold face.

"Italic" makes the characters italic.

"Fixed Width" changes to a font where all the characters have the same width. This is sometimes useful when you are presenting text which is spaced out in columns.

"Font Color" lets you change the color of the text. Try to avoid the colors that have special meanings (like blue or purple, both of which indicate a link to another web page!)

The best way to learn about these effects is to select a block of text, and try them!

Next time

In the next installment I'll describe how to add images (pictures) to your web page. I'll also describe how to add document information to help search engines find your page.