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!

 

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 (which also owns a similar site, Tripod, at www.tripod.com).

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:

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):

Create an account

Using your Web browser (such as Microsoft Internet Explorer), go to angelfire.com. Click “Try It Now for Free!” then “Sign up for one of these plans today!” (which you see when you scroll down).

Click in the “Your New Website” box. Your Website will be named “http://______.angelfire.com”. Invent a name to put in the blank. The name cannot contain capital letters or spaces: it must be made of just lower-case letters, digits, dashes, and periods. Type the name you invented (such as “secretguide”) then click in the Password box. If the name you invented is okay, the computer says “User name Available”; otherwise the computer says “User name Unavailable” (probably because somebody else picked that name) and you must try again to pick a name.

Next, invent a password (which must be at least 6 characters long, with no spaces). Type the password in the Password box, press the Tab key, type the password again, click “Next”, and click “Next” again.

The computer will say “Welcome”. Answer the questions about your birthday, security, usage, gender, and newsletters, then click “Confirm”.

Angelfire Customer Service will send you an email whose subject is “Welcome to Angelfire”. Find it in your email’s Inbox. Click the first link in the email.

The computer will say “Your account has been activated”. Click “Start Building Now” then “Create a New Website”.

Change the text

You’re using a Website-creation program called Webon (pronounced “web on”). It shows a Web page containing 5 blocks of text. In each block of text, switch those words to your words. Here’s how to do that:

Format the text

You can easily format the text in blocks 3, 4, and 5. To do that, drag across the phrase you want to change (so the phrase temporarily appears in white letters on a blue background), then do one of these things:

Notice that to format a phrase, you must drag across the phrase beforehand. For example, if you want a phrase to be bold, you must drag across the phrase before you click the Bold button.

Undo

If you make a typing mistake, here’s how to undo it: while holding down the Ctrl key, tap the Z key.

That method undoes your last typing mistake, but it can’t undo your last two typing mistakes, and it can’t undo formatting. If you format a phrase wrong, format it again correctly.

Change the style

You’ve been using a style called Working Comp. To use a different style instead, click “Styles” (which is at the screen’s top). You start seeing a list of 152 styles, in alphabetical order. To see the rest of the list, click “Next” several times. To go back toward the list’s beginning, click “Previous” several times. If a style interests you, put the mouse pointer on it without clicking; then you see a slightly larger picture of the style.

Click whichever style you like. Then you see the words you wrote, reformatted to fit in that style.

If you don’t like that style, try clicking “Revert”, which takes you back to a style you used before (such as Working Comp).

When you’ve finished picking a style, click “Text” (which is near the screen’s top-left corner).

Add links

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

This book was written by Russ Walter, whose email address is Russ@SecretFun.com. Here’s how to make your Web page let people send an email to Russ Walter, by clicking “write to Russ”:

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 email client program (such as Outlook Express), automatically click “Create Mail”, automatically type “Russ@SecretFun.com” in the “To” box, and wait for the person to type an email message to Russ.

Final steps

When you finish editing your Website, click “Save” (which is near the screen’s top-right corner) then “Publish” (which is next to “Save”) then “Publish to the main page of the site” then the green “Publish” button. The computer says, “Congratulations! Your site was published…”

If you want to edit further, click “Keep Working”; otherwise, exit by doing this:

Edit your site

To edit a Website you created before, do this:

Extra pages

Here’s how to put extra pages onto your Website.

While you’re editing the first page you created, click “Pages” (which is at the top) then the “Create a new page” icon. (That icon is near the screen’s top-left corner, under “Text”, and shows a  single sheet of paper with a green plus sign.)

Invent a title for the page (such as “My Family”); type it and press Enter.

Now the screen’s left edge shows you have 2 pages. The first page (which you created before) was automatically called “Home”. If the new page you’re creating is called “My Family”, the screen’s left edge shows this list of pages:

If you want to create a 3^rd page, click the “Create a new page” icon again, type the new page’s title (such as “Our Friends”) and press Enter again, so the screen’s left edge looks like this:

The screen’s bottom is still devoted to showing what you typed on page 1. To switch your view to page 2 or page 3, click the page’s name in that list of pages, then click the “Jump to a page” icon (which is a sheet of paper with a green arrow). That makes the screen’s bottom show the page you requested. The heading you requested is at the screen’s top and has the page name you invented. There’s no subheading. The sidebar is at the left instead of the right. The main content section, sidebar, and footer are all blank, waiting for you to type your words there. Below the heading you also see this navigation bar —

which your readers can click on to jump from page to page, after you’ve finished creating your Website.

To see normal editing tools again (such as the Bold button), click “Text” (which is near the screen’s top-left corner).

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!

HTML uses these commands:

Simple example

Suppose you want to create a Web page that says:

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

To create that Web page, write this HTML program:

Here’s what that program means:

To type that program, you can use two free methods: Notepad or Angelfire. I’ll explain both.

Typing in Notepad

If your computer contains Windows, the easiest way to type that HTML program is to use Notepad, as follows.…

Launch Notepad. Here’s how:

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

Make Notepad do word wrapping. Here’s how:

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

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

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 Edge (or Microsoft Internet Explorer). It works with Microsoft Edge (or 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 Edge or Microsoft Internet Explorer as the main Web browser), you’ll see a window that shows the result of running your program; it shows a Web page that says:

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. (In Windows 10, the button is underlined.) 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 (or Microsoft Edge) window (which hides behind the Notepad window), so that Microsoft window becomes the active window. Then click the Refresh button (a circling arrow), which makes Microsoft 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.

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

If you see “Notepad”, click it. Otherwise, do the following:

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

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

Typing in Angelfire

Here’s how to type an HTML program by using Angelfire instead of Notepad.…

Go to www.angelfire.com. Start creating a Web page, using the methods I described on pages 544-545.

While you’re typing & editing the main content section, click “Add-ons” (which is at the top). You see 27 add-ons. Drag “Custom HTML” (which is the last add-on) until it’s below the typing in the main content section and is in the middle of a big black box that suddenly appears.

After several seconds, the computer says this sentence:

Move the mouse pointer to that sentence, without clicking. Then above that sentence, you see “Edit”. Click that “Edit”.

The computer says this sentence:

In the box below that sentence, drag across the sentence that’s already there (which begins with “<p>”) then type your HTML program instead. For example, type:

When you finish typing your program in the box, click the green “Save” button (which you must scroll down to see).

Then you see a box showing the result of your programming:

If you want to edit your program further, move the mouse pointer to that box (without clicking), then click the “Edit” above that box, then edit your program further, then click the green “Save” button again (after scrolling down to see it).

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:

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:

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:

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 _{before the phrase,} afterwards. To make a phrase be superscript (^{like this}), say ^{before the phrase,} 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 —

or like this:

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:

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.

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:

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

Head & body You’re supposed to divide the program into 2 parts. The first part, called the head, begins with <head> and ends with </head> and 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:

(If you’re typing into the middle of an Angelfire page, do not type a head, since Angelfire gave the page a head already.)

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:

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:

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 letting yourself 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:

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 XHTML, the top lines say:

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:

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

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:

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

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

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

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:

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

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

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

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 table that’s simple or fancy.

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

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

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

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:

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:

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

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:

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:

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

Link to email This book was written by Russ Walter, whose email 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 email to “Russ@SecretFun.com”, say this:

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 email client program (such as Outlook Express), automatically click “Create Mail”, automatically type “Russ@SecretFun.com” in the “To” box, and then wait for the person to type an email message to Russ.

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

Be brave! Let people accessing your Web page write an email to you. For example, if your name is Joan Smith and your email address is “jSmith@SecretFun.com”, say this:

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:

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 2 parts, called <head> and <body>. Instead of saying just <body>, you can say:

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:

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.

Upload

To let the public use your Web page, make sure your Web page is on the Internet. Here’s how.

If you created the Web page by using Angelfire’s Webon, make sure you published your page (by clicking the blue “Save” and “Publish” buttons at Webon’s top-right corner).

If you created the Web page by using Notepad, you must upload your page (copy it from your computer’s hard disk to an Internet-connected hard disk). To upload your page, you need permission from a Web host, which will usually charge you a monthly fee. For example, you can upload to Angelfire if you pay Angelfire $1 per month to get Angelfire’s Entry service (which is better than Angelfire’s Free service). If you’ve upgraded to Angelfire’s Entry service, here’s how to copy your Web page to Angelfire’s hard disk:

If you’re too cheap to pay Angelfire $1 per month, try this crude trick:

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:

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:

Comments

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

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:

This program makes it happen (if your email address is jSmith@SecretFun.com):

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

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 emails the box’s contents to the email address mentioned in the <form> command. Here’s how:

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

For example, if you’re using Windows Me, do this:

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:

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

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

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

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

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

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 email will say:

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

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>:

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

 

I invented my own .com and called it “SecretFun.com”, so you can access my Web page by typing just “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 pay Angelfire extra to get a .com name or switch to Angelfire’s fanciest plan (called “THE Plan”) which includes a domain name at no extra charge.

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:

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

Tell Go Daddy to charge you for the domain name (at $15/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 email forwarding (which is free) to your current email address.

For example, I told Go Daddy to do this:

So now you can see my Web site (angelfire.com/nh/secret) by typing just “SecretFun.com” (which is easier to remember), and you can send me email by typing “Russ@SecretFun.com” (which you might remember easier than “SecretGuide@comcast.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 $15 per year or less for a domain name (with free domain forwarding and email forwarding to your current addresses elsewhere).

To change the appearance of your whole Web page, create a cascading style sheet (CSS).

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

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

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:

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:

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:

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:

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:

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:

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:

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:

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

Pages 545-552 explained how to create Web pages by using HTML. Unfortunately, HTML is not a complete programming language.

For example, HTML lacks commands to do arithmetic. In HTML, there is no command to make the computer do 2+2 and get 4.

HTML lacks commands to create repetitions (which are called loops). In HTML, there is no command to make the computer repeat a task 10 times.

In 1996, a Netscape employee, Brendan Eich, invented an HTML supplement called LiveScript, which lets you create Web pages that do arithmetic, loops, counting, and many other fancy tricks. When folks noticed that LiveScript looks like a stripped-down version of Java, Netscape changed the name “LiveScript” to JavaScript.

JavaScript is included as part of Netscape Navigator (if you have Navigator version 2 or later). JScript (Microsoft’s imitation of JavaScript) is included as part of Internet Explorer (if you have Internet Explorer version 3 or later).

Now every popular computer comes with JavaScript or JScript. That’s because Netscape Navigator is free, Internet Explorer is free, Netscape Navigator & Internet Explorer are both available for IBM and Macs, and Internet Explorer is part of Windows.

Netscape, Microsoft, and the European Computer Manufacturers Association (ECMA) all decided to make JavaScript and JScript resemble each other more, by creating a standard called ECMAScript.

This chapter explains how to use JScript to create powerful Web pages. (JavaScript and ECMAScript are similar.)

Before learning JScript, make sure you’ve learned HTML (by reading pages 545-552).

JScript uses these commands:

Simple program

You can create a Web page that says —

by typing this HTML program:

I explained how on page 546. (If you forget how, reread page 546 and practice it now.)

To create a Web page that makes the computer do 2+2 instead, type instead this HTML program (which includes a JScript program):

The first line, which says <script>, warns the computer that you’re going to start typing a JScript (or JavaScript) program. The next line, which is written in JScript, means: on the Web-page document, write the answer to 2+2. The bottom line, which says </script>, marks the bottom of your JScript program. When you run that program, the computer will do 2+2 and write this answer:

In that example, the first line, <script>, is an HTML tag. Like all HTML tags, it’s enclosed in angle brackets: the symbols <>. That tag marks the beginning of your JScript program. The bottom line, </script>, is an HTML tag that marks the end of your JScript program. Between those two tags, write your JScript program.

Longer example

Let’s make the computer write “We love you”, then write the answer to 2+2, then write “ever and ever”. This program does it:

The first line makes the computer write “We love you”. The next three lines hold the JScript program making the computer write the answer to 2+2, which is 4. The bottom line makes the computer write “ever and ever”. So altogether, the computer will write:

Fancier arithmetic

This program makes the computer write the answer to 8-3:

The computer will write:

This program makes the computer write the answer to -26.3+1:

The computer will write:

Multiplication To multiply, use an asterisk. So to multiply 2 by 6, type this:

The computer will write:

Division To divide, use a slash. So to divide 8 by 4, type this:

The computer will write:

Avoid commas Do not put commas in big numbers. To write four million, do not write 4,000,000; instead, write 4000000.

E notation If the computer’s answer is huge (at least 1000000000000000000000) or tiny (less than .000001), the computer will typically print an e in the answer. The e means “move the decimal point”.

For example, suppose the computer says the answer to a problem is:

The e means, “move the decimal point”. The plus sign means, “towards the right”. Altogether the e+21 means, “move the decimal point towards the right, 21 places.” So look at 1.5864321775908348, and move the decimal point towards the right, 21 places; you get 1586432177590834800000.

So when the computer says the answer is 1.5864321775908348, the computer really means the answer is 1586432177590834800000, approximately. The exact answer might be 1586432177590834800000.2 or 1586432177590834800000.79 or some similar number, but the computer prints just an approximation.

 

Suppose your computer says the answer to a problem is:

After the e, the minus sign means, “towards the left”. So look at 9.23, and move the decimal point towards to left, 7 places. You get:

.000000923

You’ll see e notation rarely: the computer uses it just if the answer is huge or tiny. But when the computer does use e notation, remember to move the decimal point!

The highest number The highest number the computer can handle well is about 1E308, which is 1 followed by 308 zeros. If you try to go much higher, the computer will give up and say the answer is:

The tiniest decimal The tiniest decimal the computer can handle accurately is 1E-309 (which is a decimal point followed by 309 digits, 308 of which are zeros). If you try to go tinier, the computer will either write 0 or give you a rough approximation.

Long decimals If an answer is a decimal that contains many digits, the computer will typically write the first 16 significant digits accurately and the 17^th digit approximately. The computer won’t bother writing later digits.

For example, suppose you ask the computer to write 100 divided by 3, like this:

The computer will write:

Notice that the 17^th digit, the 6, is wrong: it should be 3.

Division by 0 If you try to divide 1 by 0, the computer will say the answer is:

If you try to divide 0 by 0, the computer will say the answer is —

which means “Not a Number”.

Order of operations JScript (and JavaScript) handle order of operations the same as QBasic, Visual Basic, and most other computer languages.

For example, if you type this program —

the computer will “start with 2 then add three 4’s”, so it will write this answer:

You can use parentheses the same way as in algebra. For example, if you type —

the computer will compute 5-2 and write:

Strings

You learned how to put a JScript (or JavaScript) program in the middle of an HTML program. You can also do the opposite, you can put HTML in the middle of a JScript program.

For example, this JScript program makes the computer write “We love you”:

The computer will write:

In that program, the “We <i>love</i> you” is called a string of characters. Each string must begin and end with a quotation mark. Between the quotation marks, put any characters you want the computer to write. A string can include an HTML tag, such as <i>.

Strings with numbers If you bought 750 apples and buy 12 more, how many apples do you have altogether? This program makes the computer write the answer:

The computer will write the answer to 750+12 (which is 762) then the word “ apples” (which includes a blank space), so altogether the computer will write:

This program makes the computer put the answer into a complete sentence:

The computer will write “You have ” then 762 then “apples!”, so altogether the computer will write:

Writing several strings Here’s another example of strings:

The computer will write “fat” then “her”, so altogether the computer will write:

Let’s make the computer write this instead:

To do that, make the computer press the Enter key before her. Here’s how: say <br> (which is the HTML tag to break out a new line), like this —

or like this:

Addition You can add strings together by using the + sign:

Variables

A letter can stand for a number. For example, x can stand for the number 47, as in this program:

The second line says x stands for the number 47. In other words, x is a name for the number 47.

The next line says to write x+2. Since x is 47, the x+2 is 49; so the computer will write:

That’s the only number the computer will write; it won’t write 47.

A letter that stands for a number is called a numeric variable.

A letter can stand for a string. For example, y can stand for the string “We love you”, as in this program:

The computer will write:

A letter that stands for a string is called a string variable.

A variable’s name can be short (such as x) or long (such as town_population_in_2001). It can be as long as you wish! The name can contain letters, digits, and underscores, but not blank spaces. The name must begin with a letter or underscore, not a digit.

Increase The symbol ++ means “increase”. For example, ++n means “increase n”.

This program increases n:

The n starts at 3 and increases to 4, so the computer prints 4.

Saying ++n gives the same answer as n=n+1, but the computer handles ++n faster.

The symbol ++ increases the number by 1, even if the number is a decimal. For example, if x is 17.4 and you say ++x, x will become 18.4.

Decrease The opposite of ++ is --. The symbol -- means “decrease”. For example, --n means “decrease n”. Saying --n gives the same answer as n=n-1 but faster.

Arrays A letter can stand for a list. For example, x can stand for a list, as in this program:

That makes x be a list of three items: “love”, “death”, and the answer to 48+9 (which is 57). The next line makes the computer write all of x, like this:

In x (which is a list), there are 3 items:

The next line says to write x[2]/4, which is 57/4, which is 14.25; but since we didn’t say <br>, the computer writes the 14.25 on the same line as the list, so altogether you see:

A list is called an array.

If you want x to be a list of 3 items but don’t want to list the 3 items yet, you can be vague by saying just —

Later, you can define x by lines such as:

Pop-up boxes

Here’s how to make a box appear suddenly on your screen.

Alert box To create a surprise, make the computer create an alert box:

When a human runs that program, the screen suddenly shows an alert box, which contains this message: “Warning: your hair looks messy today”. (The computer automatically makes the box be in front of the Web page, be centered on the screen, and be wide enough to show the whole message.) The alert box also contains an OK button. The computer waits for the human to read that alert message and click “OK”.

When the human clicks “OK”, the alert box disappears and the computer obeys the program’s next line, which makes the computer write onto the Web page:

In an alert box, the computer uses its alert font, which you cannot change: you cannot switch to italics or bold; you cannot put HTML tags into that message.

Here’s another example:

When a human runs that program, an alert box tells the human “You just won a million dollars”; but when the human clicks “OK”, the Web page says “Oops, I lost it, better luck next time”.

Prompt box To ask the human a question, make the computer create a prompt box:

When a human runs that program, the computer creates a prompt box, which is a window letting the human type info into the computer. (The computer automatically makes the box be in front of the Web page and be slightly above the screen’s center.) It contains this prompt: “What is your name?” It also contains a white box (into which the human can type a response) and an OK button.

The computer waits for the human to type a response. When the human finishes typing a response, the human must click the OK button (or press Enter) to make the window go away.

Then the Web page reappears and the computer makes x be whatever the human typed. For example, if the human typed —

x is Maria, so the computer writes this onto the Web page:

In that program, notice that the prompt line includes these symbols before the last parenthesis:

If you type this instead —

here’s what happens: the white box (into which the human types a name) will temporarily say “Type your name here”, until the human starts typing.

College admissions This program makes the computer write a letter admitting you to the college of your choice:

When you run the program, a prompt box appears, asking “What college would you like to enter?” Type your answer (then click OK or press Enter).

For example, if you type —

the college will be “Harvard”, so the computer will write “You’re admitted to” then “Harvard” then “. I hope you go to ” then “Harvard”, then “.” then the remaining HTML code, like this:

If you type this instead —

the computer will write:

All the writing is onto your screen’s Web page. Afterwards, if you want to copy that writing onto paper, click Internet Explorer’s Print button. (If you don’t see the Print button, make it appear by maximizing the Internet Explorer window.)

Numeric input This program makes the computer predict your future:

When you run the program, the computer asks, “In what year were you born?” If you answer —

y will be 1962, and the computer will write:

Control statements

A program is a list of statements that you want the computer to perform. Here’s how to control which statements the computer performs, and when, and in what order.

If This program makes the computer discuss the human’s age:

When that program is run, the computer asks “How old are you?” and waits for the human’s reply. For example, if the human says —

the age will be 15. Then the computer will print:

Let’s make that program fancier, so if the human is under 18 the computer will also say “You are still a minor”. To do that, just add a line saying:

Notice you must put parentheses after the word “if”. Altogether, the program looks like this:

For example, if the human runs the program and says —

the computer will print:

If instead the human says —

the computer will print just:

Else Let’s teach the computer how to respond to adults.

Here’s how to program the computer so that if the age is less than 18, the computer will say “You are still a minor”, but if the age is not less than 18 the computer will say “You are an adult” instead:

In programs, the word “else” means “otherwise”.
The program says: if the age is less than 18, write “You are still a minor”; otherwise (if the age is not less than 18), write “you are an adult”. So the computer will write “You are still a minor” or else write “You are an adult”, depending on whether the age is less than 18.

Try running that program! If you say you’re 50 years old, the computer will reply by saying:

Fancy relations Java’s “if” statement uses this notation:

Notice that in the “if” statement, you should use double symbols: you should say “==” instead of “=”, say “&&” instead of “&”, and say “||” instead of “|”. If you accidentally say “=” instead of “==”, the computer will gripe. If you accidentally say “&” instead of “&&” or say “|” instead of “||”, the computer will still get the right answers but too slowly.

Braces If a person’s age is less than 18, let’s make the computer write “You are still a minor” and make maturity=0. Here’s how:

Here’s a fancier example:

For Here’s how to write the numbers from 1 to 10:

That means: do repeatedly, for i starting at 1, while i is no more than 10, and increasing i after each time: write i followed by a blank space (to separate i from the next number). The computer will write:

If instead you want to write each number on a separate line, say “<br>” (which means “break for new line”) before each number:

The computer will write:

Let’s get fancier! For each number, let’s make the computer also write the number’s square (what you get when you multiply the number by itself), like this:

Here’s how:

 

To get even fancier, let’s make the computer write that info in a pretty table, like this:

NAME	SCORE
1	1
2	4
3	9
4	16
5	25
6	36
7	49
8	64
9	81
10	100

As I explained on page 549, you do that by saying <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:

Onclick Let’s create a Web page that asks, “What sex are you?” Below that question, let’s put two buttons labeled “Male” and “Female”. If the human clicks the “Male” button, let’s make the computer say “So is Frankenstein”. If the human clicks the “Female” button, let’s make the computer say “So is Mary Poppins”.

To accomplish all that, just type this HTML:

Here’s what each line accomplishes:

Notice these details:

Documentation

On page 551, I said you can write a comment in your HTML program by starting with the symbol “<!--” and ending with the symbol “-->”, like this:

But while you’re writing JavaScript (or JScript) program lines, which comes between <script> and </script>, you must write your comments differently, in JavaScript style: put each comment on a separate line that begins with //, like this:

Emphasize JavaScript To emphasize that your program is written in JavaScript (or a JavaScript clone such as JScript), you can say —

or even say —

instead of saying just <script>.

No JavaScript? Most Web browsers understand JavaScript and JScript programs. But Web browsers that are very old or very primitive don’t understand JavaScript at all.

If your Web-page program contains a JavaScript program, but somebody who lacks JavaScript tries to view your Web page, the page will look very messed up, and the person might even see your raw JavaScript code, including equal signs and words such as “document.write”.

To make sure such a person doesn’t see your raw code on the Web page, say this instead of just <script> —

and say this instead of just </script>:

Also, warn the JavaScript-deprived person that your page requires JavaScript, by putting this line below the </script> line:

Here’s what that line accomplishes: if the person has no JavaScript, the Web page will say “This page requires JavaScript”.