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 guide 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.
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.
Figure 2.1. Every Web page you create must include
the <HTML>, <HEAD>, <TITLE>, and <BODY>
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 guidemarks menu, or the Microsoft Internet Explorer Favorites menu, whenever someone selects Add guidemark 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.)
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.
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.
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.
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.
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.
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.
<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>
Go to bed and undress you. <P> Good night, sweet repose,<BR> Half the bed and all the clothes.