From Chapter One: Creating Your First Web Page
Let's start off with a bang! Creating web pages is a snap, and I'm going to show you just how easy it is in this first lesson. You're going to type a couple of sentences, and whoosh-bang, you've got a web site!
First, we need to add the HTML tags to tell the browser that this is an HTML page. So...
I'm Techno Termite
Whenever we come across a new word that you may not have heard before, I'll tell you what it means.
Internet Browser A browser is a program like Netscape Navigator or Microsoft Explorer that you use to look at words and text from the Internet.
HTML HyperText Markup Language. "HyperText" is words or phrases that you can click to read more about something. "Markup" is a term borrowed from newspaper editors, who use blue pencils to write instructions on -- "mark up" -- copy that tell the printers how a page should look. We do much the same on the computer: the HyperText Markup Language is the set of instructions you use to tell a web browser, like Netscape, how a page should look.
Tag A tag is a single instruction in HTML that describes how part of the page should look. Most tags come in pairs: one tells the browser when to start whatever it's supposed to do, and its partner tells the browser when the instruction is finished. These ending tags start with a slash (/). So, for example, when you start an HTML page, you use the tag <HTML>, and when you finish the page, you use the tag </HTML>.
To create your first web page
1) Open a new text file.
2) Type <HTML>.
3) Press return.
4) Type I am the cool creator of this wacky web site!
5) Press return.
6) Type </HTML>.
7) Save the file as web01.html. You don't have to close the file or quit your word processing program.
8) Open web01.html in your web browser.
Congratulations! You are a web author -- you've created your first web page! The rest of the book will show you how to add cool things to your web page!
Adding <H1> Headings
Using heading tags, you can make your web pages easier to read and help people find the information they want more quickly.
Heading tags have six levels, from <H1> to <H6>. <H1> headings are the largest; headings get smaller until you reach <H6>. Headings let you organize the information on your web site into subcategories that share similar characteristics. (Headings let you separate the stuff on your page into clumps of stuff that's like other junk.
To add <H1> headings to your web page
1) Open web01.html in your text editor. (If you didn't close it, it should still be open.)
2) With your mouse, position your cursor at the end of the sentence "I am the cool creator of this wacky web site."
3) Press return.
4) Type <H1>My Favorite Games</H1>.
5) Save web01.html.
6) Open web01.html with your web browser. (If your web browser is still showing your page, you can click the Reload or Refresh button.)
Adding <H2> Headings
The heading tags get smaller as you give more details about your subject. You use H2 headings to subordinate your topics ("sub," as in "under," and "ordinate" as in "putting them in order"), so you're organizing one heading under another in a particular order.
To add <H2> headings to your web page
1) Open web01.html in your text editor.
2) With your mouse, position your cursor at the end of the line "<H1>My Favorite Games</H1>."
3) Press return.
4) Type <H2>Indoor</H2>.
5) Press return.
6) Type <H2>Outdoor</H2>.
7) Save web01.html.
8) Open web01.html with your web browser.
Adding <H3> Headings and Details
Now we'll add the headings for specific games you enjoy, and you can say something about them.
To add <H3> headings to your web page
1) Open web01.html in your text editor.
2) Position your cursor at the end of the line <H2>Indoor</H2>.
3) Press return.
4) Type <H3>Chess</H3> (or choose a different game you like, if you want to).
5) Press return.
6) Type I like Chess because it manipulates my mental muscles.
7) Press return.
8) Type <H3>Checkers</H3> (or some other game).
9) Press return.
10) Type I like Checkers because I like to jump around.
(Too lame? Okay, make up your own witty sayings!)
11) Save web01.html.
12) Open web01.html with your web browser.
13) Extra credit: Make your page look like the example on page 19 by adding the outdoor games.
Adding a Graphic Image Your Web Page
Originally, the Internet was used to share text (words) and couldn't display pictures, also called graphics. Since the early 1990s, though, graphical web browsers have become standard, and these let you include pictures, sound, and video clips, as well as words, on your web page.
JPEGs and GIFs
There are two common graphic file types used on the Internet: JPEG and GIF. JPEG stands for the Joint Photographic Experts Group, the committee that decided how JPEG graphics would be encoded. JPEG graphics store color information for each dot in a picture. This allows for gradual color changes and makes JPEG a good choice for storing photographs and scanned images. JPEG files tend to be slightly larger than GIF files. GIF stands for Graphic Interchange Format, and saves storage space by encoding only the specific colors used in the picture. This makes it a good choice for pictures you draw using your computer. These are only general suggestions. Sometimes JPEG files can be smaller or GIF images clearer. You can also choose to save lower-quality JPEG images to make the files use less disk space. You may want to try saving the same picture in both formats and compare the results on your web page.Volunteers spend hundreds of hours scanning or typing great books that belong in the public domain (that means that copyright protections have expired on the book and anyone can use it or publish it) and makes them available via the web. The Gutenberg Project has no pictures on its web site, but through it you can travel to Treasure Island, buckle your swash with the Three Musketeers, or have thousands of other adventures just by downloading -- for free -- a copy of any of the books listed. There are thousands of books available, including a dictionary and an encyclopedia. The Gutenberg Project represents the best spirit of the Internet -- getting information out into the hands of peo
