home Java Script MS Access Perl HTML Delphi C ++ Visual Basic Java CGIPerl MS Excel Front Page 98 Windows 98 Ms Word Builder PHP Assembler Link to us Links |
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.
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.
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.)
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.
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.
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.
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.
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). |
<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.