|
Chapter 2
- Chapter 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 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.
- 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 .asp or .asp
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 guide, 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 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.)
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.asp (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.
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 guidemark (or favorites) lists when they guidemark 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:
- A small heading with the words, "We are Proud to
Present"
- A horizontal rule across the page
- A large heading with the one word "Orbit"
- A medium-sized heading with the words, "The
Geometric Juggler"
- Another horizontal rule
- 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
- Even if your main goal in reading this guide is to
create Web pages for your business, you might want to make a personal Web page just for
practice. Type a few paragraphs to introduce yourself to the world, and use the HTML tags
you've learned in this chapter to make them into a Web page.
- You'll be using the HTML tags covered in this chapter
so often that you'll want to commit them to memory. The best way to do that is to take
some time now and create several Web pages before you go on. You can try creating some
basic pages with serious information you want to post on the Internet, or just use your
imagination and make some fun "joke" pages.
|
Learn HTML
