- Hour 2 -

Creating a Web Page

This chapter will guide you through the creation of your first Web page. The best way to follow along with this chapter is to actually create a Web page as you read, using the sample page developed here in the book as a model. If you're a little nervous about jumping right in, you might want to read this chapter once to get the general idea, and then go through it again at your computer while you work on your own page.

As mentioned in Chapter 1, "Welcome to HTML," you can use any text editor or word processor to create HTML Web pages. Though you'll eventually want to use an editor specially designed for HTML, for this chapter I recommend you use the editor or word processor you're most familiar with. That way you won't have to learn a new software program at the same time you're starting to learn HTML. Even a simple text editor like Windows Notepad will work just fine. To Do: Before you begin working with this chapter, you should start with some text that you want to put on a Web page.

1. Find (or write) a few paragraphs of text about yourself, your company, or the intended subject of your Web pages.

2. Be sure to save it as plain, standard ASCII text. Notepad and most simple text editors always save files as plain text, but you may need to choose it as an option if you're using a word processor. For most word processors, you'll see a check box labeled plain text or ASCII text when you select File | Save As....

3. As you go through this chapter, you will add HTML commands (called tags) to the text file, making it into a Web page. You can do this with the same text editor or word processor you used to type the text in the first place.

4. Always give files containing HTML tags a name ending in .htm or .html when you save them.

Tags That Every HTML Page Must Have

Figure 2.1 shows the text you would type and save to create the simplest possible HTML page. If you opened this file with a Web browser such as Netscape Navigator, you would see the page in Figure 2.2.

In Figure 2.1, as in every HTML page, the words starting with < and ending with > are actually coded commands. These coded commands are called HTML tags because they "tag" pieces of text and tell the Web browser what kind of text it is. This allows the Web browser to display the text appropriately.

New Term: An HTML tag is a coded command used to indicate how part of a Web page should be displayed.

Just A Minute: In Figure 2.1, and most other figures in this book, HTML tags are printed darker than the rest of the text so you can easily spot them. When you type your own HTML files, all the text will be the same color (unless you are using a special HTML editing program that uses color to highlight tags, as HTMLED does).

Figure 2.1. Every Web page you create must include the <HTML>, <HEAD>, <TITLE>, and <BODY> tags.

Figure 2.2. When you view the Web page in Figure 2.1 with a Web browser, only the actual title and body text show up.

Most HTML tags have two parts: an opening tag, to indicate where a piece of text begins, and a closing tag, to show where the piece of text ends. Closing tags start with a / (forward slash) just after the < symbol.

For example, the <BODY> tag in Figure 2.1 tells the Web browser where the actual body text of the page begins, and </BODY> indicates where it ends. Everything between the <BODY> and </BODY> tags will appear in the main display area of the Web browser window, where you see "Hello world!" in Figure 2.2.

Netscape Navigator displays any text between <TITLE> and </TITLE> at the very top of the Netscape window, as in Figure 2.2. (Some older Web browsers display the title in its own special little box instead.) The title text will also be used to identify the page on the Netscape Navigator Bookmarks menu, or the Microsoft Internet Explorer Favorites menu, whenever someone selects Add Bookmark or Add to Favorites.

You will use the <BODY> and <TITLE> tags in every HTML page you create because every Web page needs a title and some body text. You will also use the other two tags shown in Figure 2.1, <HTML> and <HEAD>. Putting <HTML> at the very beginning of a document simply indicates that this is a Web page. The </HTML> at the end indicates that the Web page is over.

Don't ask me to explain why you have to put <HEAD> in front of the <TITLE> tag and </HEAD> after the </TITLE> tag. You just do. (Chapter 22, "HTML Tags for Site Management," reveals some other advanced header information that can go between <HEAD> and </HEAD>, but none of it is necessary for most Web pages.)

Time Saver: You may find it convenient to create and save a "bare-bones" page with just the opening and closing <HTML>, <HEAD>, <TITLE>, and <BODY> tags, similar to the document in Figure 2.1. You can then open that document as a starting point whenever you want to make a new Web page and save yourself from typing out all those "obligatory" tags every time. (This won't be necessary if you use a dedicated HTML editing program, which will usually put these tags in automatically when you begin a new page.)

Paragraphs and Line Breaks

When a Web browser displays HTML pages, it pays no attention to line endings or the number of spaces between words. For example, the two verses in Figure 2.3 are both displayed exactly the same by Netscape Navigator in Figure 2.4, with a single space between all words. When the text reaches the edge of the Netscape window, it automatically wraps down to the next line, no matter where the line breaks were in the original HTML file.

Figure 2.3. In HTML, it makes no difference how many spaces or lines you use when typing your text.

To control where line and paragraph breaks actually appear, you must use HTML tags. The <BR> tag forces a line break, and the <P> tag creates a paragraph break. The only practical difference between these two tags is that <P> inserts an extra blank line between paragraphs, and <BR> does not.

Figure 2.4. The two verses in Figure 2.3 appear identical in a Web browser.

You might have also noticed the <HR> tag in Figure 2.3, which causes a horizontal "rule" line to appear in Figure 2.4. Inserting a horizontal rule with the <HR> tag also causes a line break, even if you don't include a <BR> tag along with it. For a little extra blank space above or below a horizontal rule, you can put a <P> tag before or after the <HR> tag.

Neither the <BR> line break tag nor the <HR> horizontal rule tag needs a closing </BR> or </HR> tag.

Time Saver: The <P> paragraph tag doesn't require a closing </P> tag at the end of the paragraph because a paragraph obviously ends whenever the next one begins. You may occasionally see Web pages which do use the </P> tag to close paragraphs, but this is never necessary.

Figure 2.5 shows the <BR> and <P> tags being used to separate the lines and verses of a nursery rhyme and to separate two paragraphs of text commenting on the rhyme. Figure 2.6 is the resulting Web page.

Figure 2.5. Use the <BR> tag for line breaks, and the <P> tag to skip a line between paragraphs.

Figure 2.6. The <BR> and <P> tags in Figure 2.5 become line and paragraph breaks on this Web page.

To Do: Take a passage of text you have on hand and try your hand at formatting it as proper HTML.

1. Add <HTML><HEAD><TITLE>My Title</TITLE></HEAD><BODY> to the beginning of the text (using your own title for your page Instead of My Title).

2. Add </BODY></HTML> to the very end of the text.

3. Add <P> tags between paragraphs, and <BR> tags anywhere you want single-spaced line breaks.

4. Use <HR> to draw horizontal rules separating major sections of text, or wherever you'd like to see a line across the page.

5. Save the file as mypage.htm (using your own filename instead of mypage). If you are using a word processor, be sure to always save HTML files in plain text or ASCII format.

6. Open the file with Netscape Navigator or Microsoft Internet Explorer to see your Web page!

7. If something doesn't look right, go back to the text editor or word processor to make corrections and save the file again. You will then need to click on Reload (in Netscape Navigator) or Refresh (in Microsoft Internet Explorer) to see the changes you made to the Web page.

Headings

When you browse through Web pages on the Internet, you can't help but notice that most of them have a heading at the top which appears larger and bolder than the rest of the text. Figure 2.8 is a simple Web page, containing examples of the three largest heading sizes that you can make with HTML.

As you can see in Figure 2.7, the HTML to create headings couldn't be simpler. For a big level 1 heading, put an <H1> tag at the beginning and an </H1> tag at the end. For a slightly smaller level 2 heading, use <H2> and </H2> instead, and for a little level 3 heading, use <H3> and </H3>.

Theoretically, you can also use <H4>, <H5>, and <H6> to make progressively less important headings, but nobody uses these very much--after all, what's the point of a heading if it's not big and bold? Besides, most Web browsers don't show a noticeable difference between these and the already-small <H3> headings anyway.

Just A Minute: On many Web pages these days, graphical images of ornately rendered letters and logos are often used in place of the ordinary text headings discussed in this chapter. You'll discover how to create graphics and put them on your pages in Part III, "Web Page Graphics." However, old-fashioned text headings are still widely used, and have two major advantages over graphics headings: n Text headings transfer and display almost instantly, no matter how fast or slow the reader's connection to the Internet is. n Text headings can be seen in all Web browsers and HTML- compatible software, even old DOS and UNIX programs that don't show graphics.

Figure 2.7. Any text between the <H1> and </H1> tags will appear as a large heading. <H2> and <H3> make smaller headings.

Figure 2.8. The <H1>, <H2>, and <H3> tags in Figure 2.7 make the three progressively smaller headings shown here.

It's important to remember the difference between a title and a heading. These two words are often interchangeable in day-to-day English, but when you're talking HTML, <TITLE> gives the entire page an identifying name which isn't displayed on the page itself. The heading tags, on the other hand, cause some text on the page to be displayed with visual emphasis. There can only be one <TITLE> per page, but you can have as many <H1>, <H2>, and <H3> headings as you want, in any order that suits your fancy.

You'll learn to take complete control over the appearance of text on your Web pages in Part II, "Web Page Text." Yet headings provide the easiest and most popular way to draw extra attention to some important text.

Peeking at Other Peoples Pages

If you've even taken a quick peek at the World Wide Web, you know that the simple text pages described in this chapter are only the tip of the HTML iceberg. Now that you know the basics, you may surprise yourself with how much of the rest you can pick up just by looking at other people's pages on the Internet. As mentioned in Chapter 1, you can see the HTML for any page by selecting View | Document Source in Netscape Navigator, or View | Source in Microsoft Internet Explorer.

Don't worry if you aren't yet able to decipher what some HTML tags do, or exactly how to use them yourself. You'll find out all that in the next few chapters. However, sneaking a preview now will show you the tags you do know in action, and give you a taste of what you'll soon be able to do with your Web pages.

Coffee Break: The HTML goodies at my 24-Hour HTML Café are specially designed to be intuitive and easy to understand.

The HTML used in the main entrance page at http://www.mcp.com/sams/books/235-8 may look a bit intimidating now, but you'll see how I developed this sophisticated site step-by-step as you work through each chapter of this book.

You can uncover the humble beginnings of the 24-Hour HTML Café at http://www.mcp.com/sams/books/235-8/cafe2.htm which uses only the tags introduced in this chapter.

Summary

In this chapter, you've been introduced to the most basic and important HTML tags. By adding these coded commands to any plain text document, you can quickly transform it into a bona fide Web page.

The first step in creating a Web page is to put a few obligatory HTML tags at the beginning and end, including a title for the page. You then mark where paragraphs and lines end, and add horizontal rules and headings if you want. Table 2.1 summarizes all the tags introduced in this chapter.

Table 2.1. HTML tags covered in Chapter 2.
Tag Function
<HTML>...</HTML> Encloses the entire HTML document.
<HEAD>...</HEAD> Encloses the head of the HTML document.
<TITLE>...</TITLE> Indicates the title of the document. Used within <HEAD>.
<BODY>...</BODY> Encloses the body of the HTML document.
<P>...</P> A paragraph. The closing tag (</P>) is optional.
<BR> A line break.
<HR> A horizontal rule line.
<H1>...</H1> A first-level heading.
<H2>...</H2> A second-level heading.
<H3>...</H3> A third-level heading.
<H4>...</H4> A fourth-level heading (seldom used).
<H5>...</H5> A fifth-level heading (seldom used).
<H6>...</H6> A sixth-level heading (seldom used).

Q&A

Q Okay, so I've got this HTML Web page on my computer now. How do I get it on the Internet so everyone else can see it?

A Chapter 4, "Publishing Your HTML Pages," explains how to put your pages on the Internet as well as how to get them ready for publishing on a local network or CD-ROM.

Q I want "Fred's Fresh Fish" to appear both at the top of my page and on people's bookmark (or favorites) lists when they bookmark my page. How can I get it to appear both places?

A Make a heading at the top of your page with the same text as the title, like this: 
<HTML><HEAD><TITLE>Fred's Fresh Fish</TITLE></HEAD>

<BODY><H1>Fred's Fresh Fish</H1>

...the rest of the page goes here...

</BODY></HTML>
Q I've seen Web pages on the Internet that don't have <HTML> tags at the beginning. I've also seen pages with some other weird tags in front of the <HTML> tag. You said pages always have to start with <HTML>. What's the deal?

A Many Web browsers will forgive you if you forget to put in the <HTML> tag, and display the page correctly anyway. Yet it's a very good idea to include it because some software does need it to identify the page as valid HTML.

In fact, the official standard goes one step further and recommends that you put a tag at the beginning that looks like this: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN//3.2"> to indicate that your document conforms to the HTML 3.2 standard. No software that I've ever heard of pays any attention to this tag, however. It is not likely to be required in the near future, since so few of the millions of Web pages in the world include it.

Quiz Questions

1. What four tags are required in every HTML page?

2. Insert the appropriate line break and paragraph break tags to format the following poems with a blank line between them:
Good night, God bless you, Go to bed and undress you.
Good night, sweet repose, Half the bed and all the clothes.

3. Write the HTML for the following to appear one after the other:
4. Write a complete HTML Web page with the title "Foo Bar Home Page" and a heading at the top which reads "Happy Hour at the Foo Bar," followed by the words, "Come on down!" in regular type.

Answers

1. <HTML>, <HEAD>, <TITLE>, and <BODY> (along with their closing tags, </HTML>, </HEAD>, </TITLE>, and </BODY>).

2. Good night, God bless you,<BR> 
Go to bed and undress you.

<P>

Good night, sweet repose,<BR>

Half the bed and all the clothes.
3. <H3>We are Proud to Present</H3>
<HR><H1>Orbit</H1>
<H2>The Geometric Juggler</H2><HR>

4. <HTML><HEAD><TITLE>Foo Bar Home Page</TITLE></HEAD>
<BODY><H1>Happy Hour at the Foo Bar</H1>
Come on down!
</B></BODY></HTML>

Activities