Here's part of "The Secret Guide to Computers," copyright by Russ Walter, 29th edition. For newer info, read the 32nd edition at www.SecretFun.com.

Web-page design

When using the Internet’s World Wide Web, don’t be just a looker; be a creator! Create your own Web pages and let everybody else in the world see them!

 

Angelfire

The easiest way to create your own Web pages is to use a Web site called Angelfire. It’s free!

Angelfire is at www.angelfire.com. It used to be an independent company, but now it’s owned by Lycos.

Angelfire’s main competitors are Tripod (which is at www.tripod.com and also owned by Lycos), Geo Cities (which is at www.geocities.com and owned by Yahoo) and Talk City (which is at www.talkcity.com, partly owned by NBC & Hearst & Cox & Intel & New York Life Insurance & Softbank & John Sculley, and affiliated with Microsoft & Compaq & AT&T & Bell South & Borders). I prefer Angelfire because it’s the fastest, easiest, and least restrictive. If you’re adventuresome, go ahead: experiment with all four of those sites.

Restrictions

Angelfire lets you create any Web pages you wish, as long as you keep them “clean”, so they don’t contain content or links to anything that’s:

unlawful, harmful, hateful, harassing, stalking, or containing viruses

defamatory, libelous, ethnically objectionable, or pirated (copied without permission)

privacy-invading (or vulgar or pornographic), especially if involving minors or viewable by minors

required to stay private (by copyright laws or an employer’s nondisclosure agreement)

selling explosives, weapons, securities, or non-existent goods

selling alcohol, tobacco, controlled drugs (or pharmaceuticals), or unpackaged food

advertising gambling (or raffles requiring a fee) or pyramid schemes

Unfortunately, Angelfire will automatically put an ad on your Web page and restrict you (to 20 megabytes of Angelfire’s disk space, with a limit of 1 gigabyte of transfers per month between Angelfire’s disk and people viewing your Web page), unless you pay extra (to get a fancier plan):

Plan’s                                          Disk      Transfer     Forced    Your own .com name,

name               Cost                space  bandwidth      ad?             such as joe.com     x

Free       free                                    20M      1G/month      yes            no

Neon       $5/month + $10 setup         25M      5G/month      no             no

Argon         $9/month + $15 setup         50M    10G/month      no             yes, with   5 e-mail addresses

Xenon   $12/month + $15 setup       100M    20G/month      no             yes, with 10 e-mail addresses

Kypton $15/month + $15 setup       150M    30G/month      no             yes, with 15 e-mail addresses

Launch Angelfire

Using your Web browser (such as Microsoft Internet Explorer or Netscape Navigator), go to “www.angelfire.com”. Here’s what to do next.…

Register

If you haven’t registered with Angelfire yet, do this:

Click “SIGN UP”. Click the first box’s down-arrow key.

You’ll see an alphabetical list of categories. The list begins with states & provinces (starting with “ab” for Alberta and “ak” for Alaska), then hobbies (“scifi”, “pokemon”, “journal”, “games”, “tv”, “zine”, “stars”, “music”, “celeb”, “art”, “anime”), then music types (“band”, “indie”, “rock”, “pop”, “punk”, “rnb”, “electronic”, “jazz”, “folk”, “blues”, “80s”, “hiphop”, “musicals”), then other interests (“biz”, “mac”, “linux”, “amiga”, “gundam”, “emo”, “goth”, “film”, “weird”, “wrestling”, “trek”, “extreme”, “apes”, super”, “comics”, “poetry”, “realm”, “retro”, “grrl”, “ego”, “d”, “dc”, and “rpg”). To see the whole list, use the scroll arrows. Some of the list’s choices have digits afterwards: for example, if too many people chose “scifi” already, the next group of people are given a choice of “scifi2”.

From that list of categories, click whichever category you wish. Write your choice on a sheet of paper. Then press the TAB key.


Invent a name for your site. The name must be short: no more than 20 characters. The characters can be capital letters, small letters, digits, or underlines. For best results in explaining your site’s name to friends later, avoid capital letters and underlines: use just small letters and digits. Make the site be your own name (such as “joan”) or your company’s name (if the head of your company gives you permission) or the topic that the site will be about (such as “baseball”) or any other name you wish. Type the name, also write it on a sheet of paper. Then press the TAB key.

Invent a password. It must be at least 3 characters long. The characters can be capital letters, small letters, or digits. Type the password, also write it on a sheet of paper. Then press the TAB key.

Type the password again, then press the TAB key again.

Click the Title box, click a title (Mrs. or Ms or Mr.), press TAB, type your first name, press TAB, type your last name, press TAB, type your street address, press TAB, type your city, press TAB, and fill in the rest of the form. Then click “Submit”.

(If the computer says “URL already in use”, click your Web browser’s Back button, double-click the site name you invented, invent a different site name instead, type it, write it on a sheet of paper, press TAB, type your password again, press TAB, type your password yet again, and press ENTER.)

Click “Build your homepage now!”

Create a simple Web page

The computer will say “WEB SHELL”. Click “index.html” then the Edit button.

You see a form. To create a Web page, just fill in that form! It’s organized into 12 steps.

In step 1’s Background box, you see “white”. If you want your Web page to have a yellow background instead, click the box’s down-arrow then “yellow”.

Don’t bother fiddling with steps 2-4. Skip past them.

In step 5’s Title box, type the title that you want to appear at the top of your page (such as “Joan’s Home Page”).

Make step 6’s first box be blank (by triple-clicking in it and then pressing the DELETE key).

In step 7’s Title box, type the title of whatever simple list you want to put on your home page. (For example, type “Here’s a list of my favorite foods:”.) The computer assumes you want the list to include 3 items. If you want the list to include more items, change the “3” to a bigger number (by clicking the 3, then clicking how many items you want, then clicking the “refresh” button, then scrolling down to Step 7 again). Then in the numbered boxes below, type each item that you want on the list. (For example, type “ice cream” in box 1, “strawberries” in box 2, and “turkey” in box 3.)

In step 8’s Title box, type the title of whatever list of Web sites you want to put on your home page. (For example, type “Here are Web sites you might enjoy:”.) The computer assumes you want the list to include 4 items. If you want the list to include more items, change the “4” to a bigger number (by clicking the 4, then clicking how many items you want, then clicking the “refresh” button, then scrolling down to Step 8 again). Then for each pair of boxes below, type a Web address (such as “http://www.realtor.com”) in the left box and type an English description (such as “house hunting”) in the right-hand box. Make sure you type the “http://”.

In step 9’s box, type whatever paragraphs you want to put on your home page. If you’re typing more than one paragraph, separate the paragraphs from each other by doing this:

At the end of each paragraph, press the ENTER key twice.

At the beginning of each paragraph, type the symbol <p>. To type the <p>, make sure you type the symbol “<” (by holding down the SHIFT key while typing a comma), then type the letter “p”, then type the symbol “>” (by holding down the SHIFT key while typing a period). For example, if you want a paragraph to begin by saying “Motherhood is maddening!”, begin the paragraph by typing this:

<p>Motherhood is maddening!

While typing paragraphs, you can use these tricks.…

To italicize a phrase,           type <i>   before the phrase. Type </i>   after the phrase.

To make a phrase be bold,   type <b>  before the phrase. Type </b>  after the phrase.

To make a phrase have huge characters, type <font size=5> before the phrase. Type </font> after the phrase. You can choose five font sizes: 1 (tiny), 2 (small), 3 (medium), 4 (big), 5 (huge), 6 (gigantic), 7 (monster).

At the end of each paragraph,    press ENTER twice, then type <p> once.

At the end of each line in a list, press ENTER then type <br>, which stands for “line break”.

To draw a line across the page,   type <hr>, which stands for “horizontal rule”, then press ENTER.

To type a heading (with gigantic bold characters), type <h1> then the heading’s words then </h1> then press ENTER. You can choose 6 heading sizes: h1 (gigantic), h2 (huge), h3 (big), h4 (medium), h5 (small), h6 (tiny).

To type “house hunting” and make it be underlined and make it link to www.realtor.com, type this:

<a href=http://www.realtor.com>house hunting</a>

To make a phrase be red, type <font color=red> before the phrase. Type </font> after the phrase.

Angelfire understands names for 152 colors, such as yellow, orange, red, purple, blue, green, pink, brown, lime, aqua, fuchsia, white, gray, and black. (To see the complete list, click step 1’s “View colors in convenient popup window”.)

Those tricks are called the HyperText Markup Language (HTML). Those tricks won’t take effect until you finish inventing your page.

Don’t bother fiddling with step 10. Skip past it.

Click step 11’s “Yes” button. Click step 12’s “Yes” button.

Congratulations! You finished filling the form!

Preview Click the “preview” button. You see how your Web page will look to the public.

At the top of the page, an ad appears. That’s how Angelfire makes money: by selling ads. The ad will change often, automatically; you have no control over which ad is shown.

Near the page’s bottom, you see a counter, which temporarily says “999999”. Later, when you finish designing the page, the counter will reset itself to 000000. Each time a person views your page, the counter will increase, so it will count how many times your page gets viewed by the public.

Below the counter, you see your e-mail address, which the public can click to send you e-mail messages.

Do you like how your Web page looks?

Click your browser’s Back button. You see the 12-step form again. To improve your Web page, make any changes you wish on that form.

Save When you’re satisfied, click the Save button.

Congratulations! You’ve created a Web page! Tell your friends! For example, if you chose “jazz” for your category and chose “joan” for your site’s name, your site’s full name is “www.angelfire.com/jazz/joan”.

You can visit the Web site I created for The Secret Guide to Computers using that method. My site’s full name is “www.angelfire.com/nh/secret”.


Edit your Web page

Afterwards, here’s how you can edit the page you created.

Using your Web browser, go to “www.angelfire.com”. Click “LOG IN”.

The computer should say “WEB SHELL”. If the computer doesn’t say “WEB SHELL” yet, do this log-in procedure:

In the Member Name box, type your category, then a slash, then your site’s name, like this: “jazz/joan”.

Click in the Password box. Type the Angelfire password you invented. Click “Log In”. If the computer asks, “Do you want Windows to remember this password?” press ENTER.

The computer will say “WEB SHELL”.

Click “index.html” then “Edit”, then edit the 12 steps however you wish.

Extra Web pages

The first Web page you created has “index.html” at the end of the name. For example, if your site is named “www.angelfire.com/jazz/joan”, the first Web page you created is named “www.angelfire.com/jazz/joan/index.html”, though you don’t have to bother typing the “/index.html” to access it.

You can create extra Web pages. Each page’s name must end in “.html”.

For example, here’s how to create a page called “fun.html”:

Using your Web browser, go to “www.angelfire.com”. Click “LOG IN”.

Make sure the computer says “WEB SHELL”. (If the computer doesn’t say “WEB SHELL” yet, do the log-in procedure, to make the computer say “WEB SHELL”.)

Click in the Name box. Type “fun.html” then click Create. The computer will say “Create a New Page”.

The computer will offer 3 special steps, but you can ignore them and just click “Submit”.

Then you’ll see the usual 12-step form. Fill it in and then click Save.

Once you’ve done that, congratulations: you’ve created a new Web page called “fun.html”. Anybody on the Internet can access it. For example, if your site is named “www.angelfire.com/jazz/joan”, people can access your
fun.html page by asking for “www.angelfire.com/jazz/joan/fun.html”.

Better yet, make your main page link to fun.html, by mentioning “fun.html” in your main page, in form 2’s step 8 or 9. In those steps, you can mention just “fun.html” without having to type “http://www.angelfire.com/nh/joan/fun.html”.


HTML

Every page on the Internet’s Web is written in a computer language called the HyperText Markup Language (HTML).

Warning: if someone claims to know “HTML”, it could mean “HyperText Markup Language” or “How To Make Love”. Ask which!

Simple HTML programming

Suppose you want to create a Web page that says:

We love you

Notice that the word “love” is italicized (slanted).

To create that Web page, write this HTML program:

We <i>love</i> you

Here’s what that program means:

The <i> is an HTML tag that means “italics”. Each HTML tag is enclosed in the symbols <>, which are called angle brackets.

The </i> is an HTML tag that means “end the italics”, because the symbol / means “end the”. The <i> shows where to begin the italics; the </i> shows where to end the italics.

How to type the program Here’s the easiest way to type that HTML program if your computer contains Windows 95, 98, Me, or XP.

Launch Notepad. Here’s how:

Turn the computer on. Click Start (at the screen’s bottom left corner) then Programs then Accessories then Notepad. You see the Notepad window.

Make the Notepad window consume the screen’s bottom right quarter. Here’s how:

If the Notepad window is maximized (consumes the whole screen), make the window smaller by clicking the restore button (which is next to the X button).

Drag the window’s bottom right corner to the screen’s bottom right corner. Drag the window’s top right corner to the screen’s center. Then the window consumes the screen’s bottom right quarter.

Make Notepad do word wrapping. Here’s how:

For Windows XP, click “Format”. For Windows 95, 98, and Me, click “Edit” instead.

You see “Word Wrap”. If there’s no check mark in front of “Word Wrap”, put a check mark there (by clicking “Word Wrap”).

Click in the middle of the Notepad window. Type the HTML program, like this:

We <i>love</i> you

Save the program Save the program onto your desktop, and give it a name that ends in “.html”. Here’s how:

Click “File” then “Save”. Click the “Save in” box then “Desktop”. Click the “File name” box, then type any name ending in “.html” (such as “joan.html”); to be safe, use just small letters (no capitals, no spaces). Press ENTER.

Your program’s icon arrives on the desktop but might be covered by the Notepad window. Move the Notepad window (by dragging its blue title bar) until you see your program’s icon.

The icon has an “e” on it. The “e” means the program works with Microsoft Internet Explorer. It works with Microsoft Internet Explorer because the program is written in HTML and ends in .html.

Run the program Double-click your program’s icon. That makes the computer run your program.

If a “Connect To” window appears, click “Cancel” once or twice, to make the “Connect To” window go away.

If your computer’s been set up properly (to use Microsoft Internet Explorer as the main Web browser), you’ll see a Microsoft Internet Explorer window that shows the result of running your program; it shows a Web page that says:

We love you

Edit the program If you typed and ran the program recently, here’s how to edit it.

At the screen’s bottom, to the right of the Start button, you see a wide button for Notebook. Click it. That makes the Notebook window appear and be the active window. Then make any changes you wish to your HTML program. For example, if you want the Web page to say “We tickle you”, change “love” to “tickle” (by dragging across “love” and then typing “tickle”).

Go ahead: make that change and any other changes you wish! Experiment! Go wild!

After you’ve edited the program, save the edited version (by clicking “File” then “Save”).

To run that program, click in the Microsoft Internet Explorer window (which hides behind the Notepad window), so the Microsoft Internet Explorer window becomes the active window. Then click the Refresh button, which makes Microsoft Internet Explorer re-examine your program and run your program’s new version.

Edit old programs Here’s how to edit an old program that you haven’t typed or run recently.

If you’re using Windows Me or XP, do this:

Find the program’s icon on the desktop. Right-click that icon. Click “Open with” then “Notepad”.

Make the Notepad window consume the screen’s bottom right quarter. Make Notepad do word wrapping.

If you’re using Windows 95 or 98 (which lack the “Open with” command), you must do this instead:

Launch Notepad (by clicking Start then Programs the Accessories then Notepad).

Make the Notepad window consume the screen’s bottom right quarter. Make Notepad do word wrapping.

Click “File” then “Open”. Click the “Look in” box then “Desktop”. Click the “Files of type” box then “All Files”. Double-click your program’s icon.

Then you see your HTML program. Edit it. When you finish editing, click “File” then “Save”.

Simple HTML commands

Here are simple HTML commands you can give.

Italicize To make a phrase be italicized (like this), type <i> before the phrase; type </i> after the phrase.

Bold To make a phrase be bold (like this), type <b> before the phrase; type </b> after the phrase. To make a phrase be bold italic (like this), type <b><i> before the phrase; type </i></b> after the phrase.

Paragraph If your document contains more than one paragraph, put <p> at the beginning of each paragraph. For example, if you want a paragraph to begin by saying “Motherhood is maddening!”, begin the paragraph by typing this:

<p>Motherhood is maddening!

At the end of each paragraph, press the ENTER key twice. Then when you run the program, the computer will put a blank line below each paragraph.

Title To create a title, type <title> before it and </title> after it. For example, to make your title say “Joan’s Home Page”, type this:

<title>Joan's Home Page</title>

When you run the program, the computer will put the title in the blue title bar at the Web page’s top.


Fonts

You learned to italicize by saying <i> and </i>, and to create bold by saying <b> and </b>. Here are other ways to change the text’s font….

Size You can make the computer can produce text in 7 sizes. Font size 1 is the smallest; Font size 7 is the biggest. Here’s how big they are:

This is font size 1. It is 8 points tall.

This is font size 2. It is 10 points tall.

This is font size 3. It is 12 points tall.

This is font size 4. It is 14 points tall.

This is font size 5. It is 18 points tall.

This is font size 6, 24 points tall.

Font size 7, 36 points.

That’s how big the font sizes and point size look on paper and a 14-inch monitor. (On a slightly bigger monitor, the font sizes and point sizes look slightly bigger.)

Normally, the computer makes your Web page have font size 3. To make a phrase be font size 5, say <font size=5> before the phrase; say </font> after the phrase.

You can make part of a phrase be one size bigger, by saying <big> before that part and saying </big> after that part. For example, if the computer is making a phrase be font size 5 because you said <font size=5>, you can make part of that phrase be slightly bigger (font size 6) by saying <big> before that part and saying </big> after that part. To make part of a phrase be one size smaller, say <small> before that part and say </small> after that part.

If you said <font size=7> and then try to say <big>, the computer will ignore the <big>, since the computer can’t go bigger than font size 7. If you said <font size=1> and then try to say <small>, the computer will ignore the <small>, since the computer can’t go smaller than font size 1.

To make a phrase be subscript (like this), say <sub> before the phrase, </sub> afterwards. To make a phrase be superscript (like this), say <sup> before the phrase, </sup> afterwards.

Heading To create a heading (such as a chapter title or a newspaper headline), say <h1> at the heading’s beginning and </h1> at the heading’s end, like this —

<h1>Chapter 2: Laura giggles at death</h1>

or like this:

<h1>USA declares war on hangnails</h1>

To do that, make sure you type the symbol “<”, then the letter “h”, then the number one, then the symbol “>”, then the rest.

The <h1> makes the computer automatically create a new paragraph in font size 6 and bold. Saying <h1> is similar to saying <p><font size=6><b>.

If you want the heading to be centered (instead of at the screen’s left edge), say <h1 align=center> instead of just <h1>.

If you say <h2> instead of <h1>, the computer will make the font size slightly smaller (5 instead of 6), so you’ll be creating a “less dramatic heading”, a subheading. If you say <h2> at the heading’s beginning, say </h2> at the heading’s end.

You can create headings in 6 sizes:

<h1> produces font size 6

<h2> produces font size 5

<h3> produces font size 4

<h4> produces font size 3

<h5> produces font size 2

<h6> produces font size 1

To create a heading in font size 7, say <h1><big> at the heading’s beginning, and say </big></h1> at the heading’s end.

Tt Normally, the computer makes the text’s typeface be Times New Roman (which looks like this). If you want a phrase’s typeface to be Courier New (which looks like this and imitates a typewriter and a Teletype), say <tt> before the phrase, </tt> afterwards.

Arial If you want a phrase’s typeface to be Arial (which looks like this), say
<font face=Arial> before the phrase, </font> afterwards.

If you want a phrase to be font size 7 and Arial, say <font size=7 face=Arial> before the phrase; </font> afterwards.

Warning: the typical Mac or Unix computer comes with Helvetica instead of Arial. If a person using a Mac or Unix tries to view your Web page, that person’s Web browser might ignore the <font face=Arial>.

Compliance

If you want to create a Web page whose title is “Joan’s Home Page” and whose body says “We love you”, you can write this HTML program:

<title>Joan's Home Page</title>

We <i>love</i> you

Although that program works with most versions of most Web browsers, you’re supposed to add some extra lines, for 3 reasons:

to help other programmers understand your program

to make sure the program works with all browsers

to prevent getting fired from your programming job

Head & body You’re supposed to divide the program into two parts. The first part, called the head, begins with <head> and ends with </head> includes the title. The second part, called the body, begins with <body> and ends with </body> and includes the paragraphs. So your program should look like this:

<head>

<title>Joan's Home Page</title>

</head>

      

<body>

We <i>love</i> you

</body>

The <html> warning To make your program even better, you’re supposed to begin the whole program by saying <html> and end the whole program by saying </html>, to emphasize that the whole program is written in HTML rather than a different computer language. So your program should look like this:

<html>

<head>

<title>Joan's Home Page</title>

</head>

 

<body>

We <i>love</i> you

</body>

</html>

Is code compliant? You should include all those extra lines — <head>, </head>, <body>, </body>, <html>, and </html> — to make your program comply with the standards that people expect. Those lines help make your program be compliant.

I usually don’t bother including those lines, since I’m my own boss; but if you’re employed, you should include those lines to keep your job.

Title To be compliant, your program must include a <title> line.

DOCTYPE To be compliant, you’re supposed to also put this line at your program’s top, above the <html> line:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

That line brags that your program document is of this type: it obeys the HTML standard, which is publicly available from the World Wide Web Consortium (W3C), using the document type definition (DTD) for HTML version 4.01 — except that you’re allowing yourself to include some older HTML commands also, to be transitional and help older Web browsers understand your Web page; and you’re doing all this in English (EN).

Actually, you’re supposed to include another line below that, saying what Web site reveals the HTML 4 and 4..01 specifications; so your program is supposed to begin like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

Hardly anybody bothers to include those two lines about DOCTYPE. For example, Yahoo’s Web site (www.yahoo.com) and Microsoft’s Web site (www.microsoft.com) omit both lines.

Even the inventors of HTML 4.01 don’t bother including the second line in their own Web pages.

XHTML HTML 4.01 was invented in 1999. Now committees are working to develop fancier programming language, called the eXtensible HTML (XHTML), which is influenced by the eXtensible Markup Language (XML).

If you want to be compliant with XHTML, adopt these habits:

In commands, use small letters (such as <p>) instead of capitals (such as <P>).

At the end of each paragraph, say </p>.

After each equal sign, put quotation marks; so instead of saying <font size=5>, say <font size="5">.

In XHTML, the top lines say:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml/1-transitional.dtd">


Lists

If you want your Web page to contain a simple list, say <br> at the beginning of each list item.

For example, suppose you want your Web page to say:

Here are the favorite flavors:

chocolate

vanilla

strawberry

To do that, say <p> at the beginning of the paragraph, <br> at the beginning of each list item, like this:

<p>Here are the favorite flavors:

<br>chocolate

<br>vanilla

<br>strawberry

The <br> stands for “break out a new line”.

In XHTML, instead of saying <br> you must say <br /> and make sure to put a blank space before the slash.

Bullets Suppose you want your list to show bullets, like this:

Here are the favorite flavors:

•  chocolate

•  vanilla

•  strawberry

To do that, say <p> at the beginning of the paragraph, <li> at the beginning of each list item, like this:

<p>Here are the favorite flavors:

<li>chocolate

<li>vanilla

<li>strawberry

Suppose you want the bullets to be indented, with a space above the list, like this:

Here are the favorite flavors:

 

      •  chocolate

      •  vanilla

      •  strawberry

To do that, say <ul> above the list, </ul> below the list, like this:

<p>Here are the favorite flavors:

<ul>

<li>chocolate

<li>vanilla

<li>strawberry

</ul>

The <ul> stands for “unordered list”. When you type <ul>, make sure you press the U and L keys on your keyboard (not the number one).

The <ul> accomplishes two goals:

It makes the list be indented.

It makes your program be compliant.

(A list without <ul> is not compliant.)

In XHTML, the end of each list item must say </li>.


Numbers Suppose you want your list to be numbered, like this:

Here are the favorite flavors:

 

    1.  chocolate

    2.  vanilla

    3.  strawberry

To do that, say <ol> above the list, </ol> below the list, like this:

<p>Here are the favorite flavors:

<ol>

<li>chocolate

<li>vanilla

<li>strawberry

</ol>

The <ol> stands for “ordered list”. When you type <ol>, make sure you press the O and L keys on your keyboard.

Tables

You can create a simple table or a fancy table.

Simple table Here’s how to create a simple table:

Tell the computer the text is preformatted, by saying <pre>. Then type the table, by using the SPACE bar and ENTER key to line up the columns. Below the table, say </pre>.

For example, suppose you want your Web page to say:

Here are the bowling scores:

 

NAME        SCORE

 

Jacqueline  200

Ann         137

Ed           75

To do that, say <pre> above the table and </pre> below the table, like this:

<p>Here are the bowling scores:

<pre>

NAME        SCORE

 

Jacqueline  200

Ann         137

Ed           75

</pre>

The <pre> makes the computer use Courier New, as if you had typed <tt>. Courier New is a convenient font for tables, because it makes every character and space have the same width, so you can easily align the table’s columns by pressing the SPACE bar several times.

The <pre> also makes the computer copy each ENTER and SPACE onto the Web page, unedited. (If you don’t say <pre>, the computer turns each ENTER into a SPACE and turns each pair of SPACEs into a single SPACE.)


Fancy table Let’s create a fancy table, so the Web page says:

Here are the bowling scores:

NAME

SCORE

Jacqueline

200

Ann

137

Ed

75

To do that, say <table border=1> above the table, <tr> at the beginning of each table row, <th> at the beginning of each column heading, <td> at the beginning of each data item, and </table> below the table, like this:

<p>Here are the bowling scores:

<table border=1>

<tr><th>NAME<th>SCORE

<tr><td>Jacqueline<td>200

<tr><td>Ann<td>137

<tr><td>Ed<td>75

</table>

The computer automatically makes the columns wide enough to hold their headings and data. The computer automatically makes the column headings be bold and centered.

The border=1 makes the table have a normal border. If you say border=12 instead, the table’s outer border will be much thicker and shaded, forming a beautiful 3-D picture frame that makes the table seem to pop out from the screen and into the human’s face. Try it! You’ll impress your friends!

Links

You learned:

To make a phrase be italicized,   say <i>  before the phrase, </i>  afterwards.

To make a phrase be bold,          say <b>  before the phrase, </b> afterwards.

Link to other Web sites To make the phrase “house hunting” be underlined and link to www.realtor.com, say this:

<a href=http://www.realtor.com>house hunting</a>

Notice that before “house hunting”, you say what
“house hunting” is linked to, by saying
<a href=http://www.realtor.com>, which means “anchor (link) with a hypertext reference to http://www.realtor.com”. After “house hunting”, say </a>.

Make sure you include the “http://”. If you omit that, the link doesn’t work.

Don’t insert extra spaces. For example, don’t insert a space after “http:”; don’t insert a space after “//”.

Most text on your Web page is black (on a white background). Links are underlined and typically blue; but that if the link refers to a Web page that was visited recently, the link turns purple (instead of blue).

Link to your own Web pages To make the phrase “funny jokes” be underlined and link to Web page you created and called “jokes.html”, say this:

<a href=jokes.html>funny jokes</a>

That works just if you earlier invented a Web page named jokes.html and put it on the same disk and in the same folder as the new Web page you’re inventing. For example, if you’re inventing a new Web page on your hard disk’s Desktop, jokes.html must also be a Web page on your hard disk’s Desktop.


Suppose you create a Web page that’s too long to fit on the screen, so when a human tries to read the page the human must scroll down. To let the human avoid scrolling, do this: near the page’s beginning, put a table of contents that links to later parts of the page. Here’s how. To make the phrase “my joys” be underlined and link to a part of the page that discusses your joys, say this:

<a href=#joys>my joys</a>

Tell the computer which part of your page discusses your joys, by beginning that part like this:

<a name=joys></a>

Link to e-mail This book was written by Russ Walter, whose e-mail address is russ@secretfun.com. On your Web page, you can let people write to Russ Walter. Here’s how.…

To make the phrase “write to Russ” be underlined and link to creating an e-mail to “russ@secretfun.com”, say this:

<a href=mailto:russ@secretfun.com>write to Russ</a>

Then when a person accesses your Web page, “write to Russ” will be underlined. If the person clicks “write to Russ”, the computer will automatically run the person’s e-mail client program (such as Outlook Express), automatically click “New”, automatically type “russ@secretfun.com” in the “To” box, and then wait for the person to type an e-mail message to Russ.

Try it! Go put that in your Web page, run your Web page, and write an e-mail to Russ! If you don’t know what to say in the e-mail, just say, “Hi, Russ, I’m testing my Web page’s e-mail link to you.”

Be brave! Let people accessing your Web page write an e-mail to you. For example, if your name is Joan Smith and your e-mail address is “jsmith@secretfun.com”, say this:

<a href=mailto:jsmith@secretfun.com>write to Joan Smith</a>

Custom colors

You can change colors.

Change a phrase Normally, the computer makes your text be black. To make a phrase be red, say <font color=red> before the phrase; say </font> after the phrase.

The computer knows the names of 16 colors:

Light color                                            Dark color

red                        maroon (which is dark red)

blue                       navy   (which is dark blue)

aqua    (which is greenish blue)  teal   (which is dark aqua)

lime    (which is bright green)    green  (which is darker than lime)

fuchsia (which is bright purple)         purple (which is darker than fuchsia)

silver  (which is light gray)     gray   (which is darker than silver)

yellow                     olive  (dark yellow, looks greenish brown)

white                      black

If you want a phrase to be font size 7 and red, say
<font size=7 color=red> before the phrase; say </font> after the phrase.

Change the whole Web page On a normal Web page, the background is white, the text is black, each typical link is blue, and each viewed link is purple.

Your program is supposed to be divided into two parts, called <head> and <body>. Instead of saying just <body>, you can say:

<body bgcolor=yellow text=red link=green vlink=fuchsia>

That makes the background be yellow, the text be red, each typical link be green, and each viewed link be fuchsia. Choose any colors you wish, from the list of 16 colors.

Usually, the background should be a light color (such as white or yellow) and the text should be a dark color (such as black). If you want to be shockingly different, do the reverse: make the background be a dark color (such as black or navy) and make the text be a light color (such as white or yellow). For example, try this:

<body bgcolor=navy text=white link=lime vlink=yellow>

Warning: the human eye gets dizzy when it sees red next to blue, so don’t choose “red text on a blue background” or “blue text on a red background”. If you make the mistake of choosing those combinations, the people viewing your Web site will get dizzy and fall asleep without reading your words. Your Web site will put them into a hypnotic trance. The human eye also has difficulty reading red (or maroon) next to black.


Style sheets

To change the appearance of your whole Web page, create a style sheet.

For example, suppose you want red characters on a yellow background. You learned you can do that by changing <body> to this:

<body bgcolor=yellow text=red>

Here’s a better way: in your <head> section, below the <title>, say this:

<style>

body {color:red; background:yellow}

</style>

That creates this style: throughout the body, make the text color be red, the background yellow. That makes most of the text be red (though normal links will still be blue underlined and the viewed links will still be purple underlined). When you type the second line, make sure you type braces, which look like this: {}. Don’t type parentheses, which look like this: ().

Normally, the text is font size 3, which is 12 points. If you want the text to be slightly bigger (so people can read it more easily), request a bigger point size, such as 13 points, by saying font-size=13pt, like this:

<style>

body {color:red; background:yellow; font-size:13pt}

</style>

That makes most text get bigger, but headings will be unchanged. For example, <h1> headings will still be font size 6 (which is 24 points).

Should you use style sheets? Style sheets were invented recently. They’re new, hip, cool, and recommended.

For example, to get a yellow background, you ought to say background:yellow in the style sheet, rather than bgcolor=yellow in the <body>.

Using style sheets is recommended. Giving older types of commands, such as bgcolor=yellow, is deprecated (which means “pooh-poohed”).

But many people still use older types of commands, such as bgcolor=yellow, since they work even on old computers whose browsers were invented before style sheets.

Links You can change the color of links:

<style>

body {color:red; background:yellow}

:link {color:green}    

:visited {color:fuchsia}

:hover {color:navy}    

</style>

That makes most links be green, recently visited links be fuchsia, and each link temporarily turn navy while the mouse hovers over it.


Headers You learned that you can create big headers by saying <h1>, smaller headers by saying <h2>, and even smaller headers by saying <h3>, <h4>, <h5>, and <h6>. Normally, headers are the same color as the body text. For example, if you made the body text be red, the headers are automatically red also.

To make <h1> headers be blue and all other headers be maroon, say so in the style sheet, like this:

<style>

body {color:red; background:yellow}

:link {color:green}

:visited {color:fuchsia}

:hover {color:navy}

h1 {color:blue}             

h2,h3,h4,h5,h6 {color:maroon}

</style>

To make <h1> headers be blue and also centered (instead of at the screen’s left edge), make the style sheet’s h1 line be this:

h1 {color:blue; text-align:center}

Frankly, I hope you don’t choose those colors! Your Web page will be too wild if you actually make the body text red, the background yellow, the links green, the visited links fuchsia, the hovered links navy, the big headings blue, and the smaller headings maroon. Choose more reasonable colors.

Normally, <h1> headers are font size 6, which is 24 points. To make <h1> headers be even bigger, give a bigger point size, such as by saying:

h1 {color:blue; text-align:center; font-size:40pt}

Paragraphs You learned to put <p> at the beginning of each paragraph. Normally, the <p> makes the computer put a blank line above the paragraph. If you want the computer to omit the blank line and indent the paragraph’s first word, put this line in your style sheet:

p {text-indent:2em; margin-top:0; margin-bottom:0}

Sharing Several Web pages can share a style sheet. Here’s how.

Using Notepad, create the style sheet, but omit the <style> and </style> lines. For example, create this style sheet:

body {color:red; background:yellow}

Save it on your Desktop, but give it a name that ends in .css (which stands for Cascading Style Sheet) instead of .html. For example, name it mystyle.css.

Then create your Web pages; but on each Web page, tell the computer to use the style sheet you created (mystyle.css), by putting this line in the <head> part of the Web page:

<link rel=stylesheet href=mystyle.css>

That tells the computer to create a link, related to your style sheet, which is located at the HTTP reference “mystyle.css”.

Upload

To let the public use your Web page, you must upload your page (copy it from your computer’s hard disk to an Internet-connected hard disk).

Upload to Angelfire For example, here’s how to copy your Web page to Angelfire’s hard disk.

Using your Web browser, go to “www.angelfire.com”. Click “LOG IN”.

Make sure the computer says “WEB SHELL”. (If the computer doesn’t say “WEB SHELL” yet, do the log-in procedure, to make the computer say “WEB SHELL”.)

Click the Browse button. Double-click the file you want to upload (such as “joan” or “index”). Click the Upload button.

That file will now be on Angelfire’s disk.

For example, suppose your Angelfire category is “jazz” and your Angelfire site’s name is “joan”. If the file was joan.html, it’s now available on the Internet as “www.angelfire.com/jazz/joan/joan.html”. If the file was index.html, it’s now available on the Internet as “www.angelfire.com/jazz/joan/index.html” or more simply as “www.angelfire.com/jazz/joan” (since “index.html” is your main page) or even more simply as “angelfire.com/jazz/joan” (since the “www” is optional).

If your Web page includes links to other files (such as other Web pages you created and style sheets), make sure you upload those files also.

FTP The typical ISP lets you also copy your Web page to your ISP’s hard disk by using File Transfer Protocol (FTP). For example, if your ISP is Galaxy Internet Services (GIS), here’s how to copy your Web page to GIS’s hard disk:

Click “Start” then “Programs”. (If you’re using Windows Me, then click “Accessories”).

Click “MS-DOS Prompt”. The computer will say:

C:\WINDOWS>

That should be in a black window that does not consume the whole screen. (If the window consumes the whole screen, so you see no colors, make the window smaller by tapping the ENTER key while holding down the Alt key.)

Type “ftp” and then the name of your ISP’s FTP site. For example, GIS’s FPT site is called “ftp.gis.net”, so you’d type “ftp ftp.gis.net”, to make your screen looks like this:

C:\WINDOWS>ftp ftp.gis.net

At the end of that line, press ENTER.

If you’re not connected to the Internet at the moment, the computer might ask you to type your password. Do so and press ENTER.

The ISP’s computer will say “FTP server” and then “User”. Type the user name that the ISP assigned you (such as “poo”) and press ENTER.

The ISP’s computer will say “Password”. Type the password that the ISP assigned you and press ENTER.

The ISP’s computer will say “logged in” and then say:

ftp>

Now you’re using the ISP’s operating system, which is Unix. You can type Unix commands. At the end of each Unix command, press the ENTER key. (For example, just for fun, type the Unix command “dir” and press ENTER: you’ll see a list of files about you on the ISP’s hard disk; each file’s name is in the rightmost column. If you’d like to see a list of other Unix commands, type “help” or a question mark and press ENTER. To see a command’s purpose, type “help” then a space then the command’s name, then press ENTER.)

If you haven’t done so already, make a directory (folder) called “public_html” on the ISP’s hard disk by typing “mkdir public_html” (and press ENTER).

Next, tell the computer to send (copy) the Desktop’s joan.html file to the ISP’s public_html folder. To accomplish that, type so your screen looks like this:

ftp> send Desktop/joan.html public_html/joan.html

The computer typed the “ftp> ”, but you must type the rest. Type it very carefully! Type forward slashes (/) not backslashes (\), since Unix understands just forward slashes. Type a space after “send” and a space before “public”; those are the only spaces you type. After “public”, type an underline (by holding down the SHIFT key while you tap the key that’s right of the zero key).

The computer will copy the file and say “Transfer complete”.

When you finish using FTP, type “quit” or “bye” and press ENTER. The computer will quit using FTP and quit using Unix and say “C:\WINDOWS>”. Then close the black window by clicking its X box.

That file will now be on the ISP’s disk. For example, if the file was joan.html, it’s now available on the Internet as “www.gis.net/~poo/joan.html. If the file was index.html, it’s now available on the Internet as www.gis.net/~poo/index.html or simply as “www.gis.net/~poo” or even more simply as “gis.net/~poo”. (The symbol “~” is at your keyboard’s top left corner, above the TAB key, and requires you to hold down the SHIFT key.)

If your Web page includes links to other files (such as other Web pages you created and style sheets), make sure you upload those files also.

Special symbols

To put special symbols onto your Web page, type these codes:

Symbol      Symbol’s name        Code you type

©                 copyright                      &copy;

®                 registered                      &reg;

™                trademark                     &trade;

¢                  cent                                 &cent;

£                  British pound                &pound;

¥                  Japanese yen                 &yen;

¼                 fraction 1/4                  &frac14;

½                 fraction 1/2                  &frac12;

¾                 fraction 3/4                  &frac34;

¿                  inverted question          &iquest;

¡                   inverted exclamation    &iexcl;

¹                   superscript 1                 &sup1;

²                   superscript 2                 &sup2;

³                   superscript 3                 &sup3;

<                  less than                       &lt;

>                  greater than                  &gt;

&                    ampersand                    &amp;

é                  e acute                          &eacute;

É                  E acute                         &Eacute;

(similar for á, Á, í, Í, ó, Ó, ú, Ú, ý, Ý)

Comments

In the middle of your program, you can write a comment such as:

<!--I wrote this program while drunk-->

The computer will ignore the comment. The comment won’t affect what appears on the Web page.

To write a comment, begin with this symbol —

<!--

and end with this symbol:

                                    -->

The computer ignores whatever appears between those symbols. Whatever appears between those symbols is a comment. The comment can be short (part of a line) or long (many lines), but make sure you begin it with “<!--” and end with “-->”.

Write comments to help other programmers deal with your program! For example, give your name, the date you wrote the program, and your address or phone number. Also include any technical comments you wish to make about how your program works and what further improvements you hope to make.


Forms

You can make your Web page display a form and let the human fill it in. For example, you can make your Web page say this:

I’m doing a survey of people who view this Web page.

 

Tell me about yourself.

 

                                       ┌─────────────────────┐

What's your favorite ice cream flavor? │                     │

                                       └─────────────────────┘

                                       ┌─────────────────────┐

What's your favorite animal?           │                     │

                                       └─────────────────────┘

This program makes it happen (if your e-mail address is jsmith@secretfun.com):

<p>I'm doing a survey of people who view this Web page.

 

<p>Tell me about yourself.

<form method=post action=mailto:jsmith@secretfun.com>

<pre>

What's your favorite ice cream flavor? <input name=flavor>

What's your favorite animal?           <input name=animal>

</pre>

<input type=submit>

</form>

If you examine that program, you’ll notice these rules:

Above the form, say <form method=post> and give your e-mail address. Below the form, say </form>.

To create each box, say <input> and give a one-word name for the box.

To make the boxes line up, say <pre> above them and </pre> below them.

At form’s bottom, say <input type=submit>.

When a person runs your Web page, here’s what happens. The computer shows the form and waits for the person to fill in the form. Each box is wide enough to show 20 typical characters. If the person types more that the box can show, the writing in the box automatically scrolls to the left, to let the person type more.

Below the form, the computer puts a button labeled “Submit Query”. The person is supposed to click that button after filling in the form. When the person clicks that button, the computer e-mails the box’s contents to the e-mail address mentioned in the <form> command. Here’s how:

First, the computer gives the person this warning: “This form is being submitted using e-mail. Submitting this form will reveal your e-mail address to the recipient, and will send the form data without encrypting it for privacy. You may continue or cancel this submission.”

The computer waits for the person to click “OK”. (If the person clicks “Cancel” instead, the process is stopped.)

The computer automatically runs the person’s e-mail program (such as Outlook Express) and automatically creates a new e-mail.

The e-mail’s “To” is the e-mail address mentioned in the <form> command.

The e-mail’s “Subject” is “Form posted from Microsoft Internet Explorer” (if the person used Microsoft Internet Explorer) or “Form posted from Mozilla” if the person used Netscape Navigator).

The e-mail’s “Message” is blank, but the e-mail includes an Attachment, which is a Notepad document. That document is called “POSTDATA.ATT” (if the person used Microsoft Internet Explorer) or “Form posted from Mozilla.dat” (if the person used Netscape Navigator). For example, if the person said the favorite ice cream flavor is strawberry and the favorite animal is guinea pig, the document says this:

flavor=strawberry&animal=guinea+pig

The computer tries to send the e-mail. If the computer is not attached to the Internet at the moment, the computer either asks the person to connect or else just puts the e-mail in the Outbox (which is a holding area for e-mail that will be sent automatically when Internet connection is reestablished).

Then the computer stops running the e-mail program and returns to showing the Web page that contained the form.

When you receive the e-mail, try to open the attachment. The computer will ask whether you want to open it or save it.

If you’re using Windows Me, do this:

Click “Open it” then “OK”.

If the attachment is called “POSTDATA.ATT”, it opens immediately.

If the attachment is called “Form posted from Mozilla.dat”, the computer warns “You are attempting to open a file of type .dat”. To respond to the warning, press ENTER then click “Notepad” (from the scrolling list of programs) then press ENTER again.


If you’re using Windows 98, do this:

Click “Save it to disk” then “OK”.

Click in the “Save in” box, then click “Desktop” then press ENTER.

Close you the window of your e-mail client (such as Outlook Express).

On the desktop, you see the attachment’s icon (labeled “Postdata.att” or “Form posted from Mozill…”).

Open that icon by using Notepad. (To do that, run Notepad then click File then Open then the “Look in” box then Desktop then “Files of type” then “All Files” then scroll to “Postdata.att” or “Form posted from Mozilla” and double-click it.)


Customize Here’s how to customize the form.

If you want a box to be 30 characters wide instead of 20, say “size=30” like this:

What's your favorite ice cream flavor? <input name=flavor size=30>

If you want the “Submit Query” button to say instead “Click here to transmit”, say so in the type=submit line, like this:

<input type=submit value="Click here to transmit">

You can put a Reset button to the right of the “Submit Query” button:

<input type=submit><input type=reset>

You can make the Reset button say “Click here to erase and start over”:

<input type=submit><input type=reset value="Click here to erase and start over">

Check boxes Your form can include check boxes, so your Web page says:

Check all that apply:

q You have a pet dog.

q You have a pet cat.

q You can bark like a dog.

q You got arrested for being sneaky as a cat.

To do that, say this below the </pre>:

<p>Check all that apply:

<br><input type=checkbox name=dog>You have a pet dog.

<br><input type=checkbox name=cat>You have a pet cat.

<br><input type=checkbox name=bark>You can bark like a dog.

<br><input type=checkbox name=purr>You can purr like a cat.

<p>

If the person clicks the “You have a pet dog” and “You can bark like a dog” boxes, check marks appear on those boxes and the e-mail will say:

dog=on&bark=on

Radio buttons Your form can include radio buttons, so your Web page says:

Choose just one:

m You are male.

m You are female.

Each radio button acts like a check box, except that the button is round (instead of square), clicking it makes the middle get a dot (instead of a check mark), and just one button can be selected (since clicking a button makes all other buttons get unselected).

To create those radio buttons, say this below the </pre>:

<p>Choose just one:

<br><input type=radio name=sex value=male>You are male.

<br><input type=radio name=sex value=female>You are female.

<p>

If the person clicks the “You are male” button, a dot appears in that button and the e-mail will say:

sex=male

 

FrontPage

You’ve learned how to create a simple Web page by using Angelfire’s 2-form process. To create fancier Web pages, use FrontPage instead, which is a program available from Microsoft.

Several versions of Front Page have been invented. The newest version is FrontPage XP. The previous version was FrontPage 2000, which came free as part of Microsoft Office 2000’s premium or developer edition. A stripped-down version, called FrontPage Express, came free as part of Internet Explorer 4. (Explorer 4 is no longer distributed, but it came free as part of Windows 98’s first edition.)

Here’s how to use FrontPage Express and FrontPage 2000. (If you’re using FrontPage XP, follow my instructions for FrontPage 2000, which is similar.)


Launch FrontPage

Get out of any other programs you’re in (by clicking their X buttons). You can also disconnect from the Internet, since FrontPage does not need an Internet connection.

Click “Start” then “Programs” then do this:

For FrontPage Express, click “Internet Explorer” then “FrontPage Express”.

For FrontPage 2000, click “Microsoft FrontPage”; then if the computer asks “Would you like to make it your default editor?” press ENTER.

You’ll see the FrontPage window. If it doesn’t consume the whole screen yet, maximize the window by clicking the resize button, which is next to the X button.

Type your page

FrontPage resembles a word-processing program, such as Microsoft Word or WordPad. Go type whatever you want to appear on your Web page, as if you were typing an ordinary word-processing document. You can use typical word-processing techniques. You do not have to type HTML codes such as <p>, <b>, and <i>; FrontPage will generate the HTML codes for you secretly and automatically.

Here are some suggestions.…

Start by typing a title, such as:

Joan’s Home Page

At the end of that line, change the style to Heading 1 (by clicking the down-arrow that’s next to “Normal” and then clicking “Heading 1”). That makes the title become a big, bold headline. It becomes big instantly, before your very eyes. Wow! Afterwards, press ENTER.

Then start typing the next line of your Web page. The computer will automatically make it be a normal size, not big, not bold. Better yet, instead of typing just a line, type a whole paragraph. Do not indent the paragraph’s beginning. Write whatever you wish. For example, you can write a description of yourself, info about your favorite hobby, or your favorite jokes. If you’re feeling creative, start writing a story or novel.

At the end of that first paragraph, press ENTER just once. Then start writing your next paragraph. The computer will automatically put a blank line between the paragraphs.

To italicize a phrase, click the I button, then type the phrase, then click the I button again. To make a phrase be bold, click the B button, then type the phrase, then click the B button again.


Here’s how to make “house hunting” be underlined and link to www.realtor.com:

Type “house hunting”. Highlight it (by dragging the mouse pointer across it).

Click the Hyperlink button, which has a globe and chain on it. FrontPage Express calls it the “Create or Edit Hyperlink” button.

(If you’re using FrontPage Express, then press your keyboard’s right-arrow key.)

Make the URL box contain “http://www.realtor.com” (not just “www.realtor.com”). Then press ENTER then the left-arrow key.

The computer will make “house hunting” be underlined, blue, and linked so if a person later clicks that spot on your finished Web page, the person will automatically be transported to the “http://www.realtor.com” site.

Save

When you finish typing your Web page (which can be many screenfuls long), click the Save button. Here’s what happens next.…

FrontPage Express: make the Page Title box contain the page’s full title, such as “Joan’s Home Page” (by typing any part of the title that’s missing), then click the “As File” button. Make sure the “Save in” box says “My Documents”. (If it doesn’t, click the box’s down-arrow and then click “My Documents.)

FrontPage 2000: if the Page Title line doesn’t contain the page’s full title, such as “Joan’s Home Page”, click the Change button, then type the page’s full title, then press ENTER. Make sure the “Save in” box says “My Webs”.

Pick a name for that file. Probably you want that file to become your main Web page; if so, that file should be named “index”; otherwise, invent a one-word name for the file (such as “joans”), using just small letters, no capitals, no spaces. Type the name (such as “index” or “joans”). At the end of the name, press ENTER.

The computer will put the file into your hard disk’s My Documents folder (for FrontPage Express) or My Webs folder (for FrontPage 2000). The computer will put “.htm” at the end of the file’s name.

Exit

Finally, exit from FrontPage (by clicking the X button at the screen’s top right corner).


Upload

To let the public use your Web page, you must upload your page (copy it from your computer’s hard disk to an Internet-connected hard disk).

Upload to Angelfire For example, here’s how to copy your Web page to Angelfire’s hard disk.

Using your Web browser, go to “www.angelfire.com”. Click “LOG IN”.

Make sure the computer says “WEB SHELL”. (If the computer doesn’t say “WEB SHELL” yet, do the log-in procedure, to make the computer say “WEB SHELL”.)

Click the Browse button. Double-click “My Documents”. (For FrontPage 2000, then double-click “My Webs”.) Double-click the file you want to upload (such as “index” or “joans”). Click the Upload button.

That file will now be on Angelfire’s disk, but with an ending of “.html” instead of “.htm”.

For example, suppose your Angelfire category is “jazz” and your Angelfire site’s name is “joan”. If the file was joans.htm, it’s now available on the Internet as “www.angelfire.com/jazz/joan/joans.html”. If the file was index.htm, it’s now available on the Internet as “www.angelfire.com/jazz/joan/index.html” or more simply as “www.angelfire.com/jazz/joan” (since “index.html” is your main page) or even more simply as “angelfire.com/jazz/joan” (since the “www” is optional).

FTP The typical ISP lets you also copy your Web page to your ISP’s hard disk by using File Transfer Protocol (FTP). For example, if your ISP is Galaxy Internet Services (GIS), here’s how to copy your Web page to GIS’s hard disk:

Click “Start” then “Programs” then “MS-DOS Prompt”. The computer will say:

C:\WINDOWS>

That should be in a black window that does not consume the whole screen. (If the window consumes the whole screen, so you see no colors, make the window smaller by tapping the ENTER key while holding down the Alt key.)

Type “ftp” and then the name of your ISP’s FTP site. For example, GIS’s FPT site is called “ftp.gis.net”, so you’d type “ftp ftp.gis.net”, to make your screen looks like this:

C:\WINDOWS>ftp ftp.gis.net

At the end of that line, press ENTER.

If you’re not connected to the Internet at the moment, the computer might ask you to type your password. Do so and press ENTER.

The ISP’s computer will say “FTP server” and then “User”. Type the user name that the ISP assigned you (such as “poo”) and press ENTER.

The ISP’s computer will say “Password”. Type the password that the ISP assigned you and press ENTER.

The ISP’s computer will say “logged in” and then say:

ftp>

Now you’re using the ISP’s operating system, which is Unix. You can type Unix commands. At the end of each Unix command, press the ENTER key. (For example, just for fun, type the Unix command “dir” and press ENTER: you’ll see a list of files about you on the ISP’s hard disk; each file’s name is in the rightmost column. If you’d like to see a list of other Unix commands, type “help” or a question mark and press ENTER. To see a command’s purpose, type “help” then a space then the command’s name, then press ENTER.)

If you haven’t done so already, make a directory (folder) called “public_html” on the ISP’s hard disk by typing “mkdir public_html” (and press ENTER).

Next, tell the computer to send (copy) the My Documents folder’s index.htm file to the ISP’s public_html folder where the file’s name should be changed from “.htm” to “.html”. To accomplish all that, type so your screen looks like this:

ftp> send /"My Documents"/index.htm public_html/index.html

(For FrontPage 2000, instead of saying “My Documents” say “My Documents”/“My Webs”.)

The computer typed the “ftp> ”, but you must type the rest. Type it very carefully! Type forward slashes (/) not backslashes (\), since Unix understands just forward slashes. Type quotation marks around “My Documents”. Put a slash before “My Documents” but not before “public”. Type a space after “send” and a space before “public”; those are the only spaces you type. After “public”, type an underline (by holding down the SHIFT key while you tap the key that’s right of the zero key).

The computer will copy the file and say “Transfer complete”.

When you finish using FTP, type “quit” or “bye” and press ENTER. The computer will quit using FTP and quit using Unix and say “C:\WINDOWS>”. Then close the black window by clicking its X box.

That file will now be on the ISP’s disk, but with an ending of “.html” instead of “.htm”. For example, if the file was index.htm, it’s now available on the Internet as “www.gis.net/~poo/index.html” or simply as “www.gis.net/~poo” or even more simply as “gis.net/~poo”. (The symbol “~” is at your keyboard’s top left corner, above the TAB key, and requires you to hold down the SHIFT key.)


Create your own .com

I invented my own .com and called it “secretfun.com”, so you can access my Web page by typing just “www.secretfun.com”.

You can invent your own .com! Here are two cheap ways to do it.…

Method 1: pay Angelfire

Create a Web site on Angelfire, but make your site fancy by getting an Argon site (for $9 per month, plus $15 setup) or get an even fancier site (Xenon or Krypton). Those Argon, Xenon, and Krypton sites let you create your own .com.

(Page 317 explained how Argon, Xenon, and Krypton differ from each other.)

Method 2: pay Go Daddy

Create a Web site cheaply anywhere (such as a free Angelfire site or a cheap Neon Angelfire site or a free site anywhere else), then buy a domain name (such as a .com name) from a domain registrar such as Go Daddy, which charges:

$8 per year for .com, .org, or .net

$7 per year for .info

$5 per year for .us or .biz

Go Daddy was started by a famous nice guy (Bob Parsons, whose previous venture was called Parsons Technology). You can reach Go Daddy at www.godaddy.com.

Tell Go Daddy to charge you for the domain name (at $9/year or less) and set up a parked site (which is free because it just says “under construction — coming soon”). Then tell Go Daddy to do domain forwarding (which is free) from the parked site to the site you created at Angelfire. You can also tell Go Daddy to do e-mail forwarding (which is free) to your current e-mail address.

For example, I told Go Daddy to do this:

create www.secretfun.com ($9/year)

forward www.secretfun.com to www.angelfire.com/nh/secret (free)

forward russ@secretfun.com to poo@gis.net (free)

So now you can see my Web site (www.angelfire.com/nh/secret) by typing just “www.secretfun.com” (which is easier to remember), and you can send me e-mail by typing “russ@secretfun.com” (which is easier to remember than “poo@gis.net”).

If you wish, Go Daddy can also host your site (so you don’t need to involve Angelfire), but Go Daddy charges more for hosting than Angelfire does. Go Daddy will try to sell you many extra services (for surcharges), but you can decline them all: pay just $8, $7, or $5 per year for a domain name (with free domain forwarding and e-mail forwarding to your current addresses elsewhere).