With the basics behind you, it's time to start creating your first HTML pages. As has already been mentioned, the basic building block of an HTML page is text. To create these pages, all you really need is a text editor and a Web browser for testing your creation (you'll eventually need a graphics program to create and edit your graphics, too). So let's look at the basic tools for Web publishing, and then create your own HTML template.
I've already mentioned it above-all you need is a text editor.
In Windows 95, that's Notepad or WordPad. For Mac users, SimpleText
is the perfect HTML editor. UNIX users can opt for VI or Emacs.
Basically, all you need to remember is that HTML pages, while
they include the .htm or
.html file extensions, are
simply ASCII text files. Any program that generates ASCII text
files will work fine as an HTML editor-even a word processor like
WordPerfect or Microsoft Word.
| Tip |
If you create an HTML page in a word processor, don't forget to use the Save As command to save it as an ASCII text file. |
You'll also need a Web browser to check on the appearance of your Web page as you create it. All Web browsers should have the ability to load local pages from your hard drive, just as they can load HTML pages across the Web. Check the menu of your Web browser (if it's a graphical browser) for a command like File, Open (see fig. 6.1).
You may have heard of some dedicated HTML editing programs that are designed to make your work in HTML easier. They do indeed exist, and they can be very useful. Unfortunately, many of them also hide the HTML codes from the designer, so they would be difficult for us to use as you learn how HTML works. Once you understand HTML, though, it can be a great benefit to use one of these browsers. I'll talk about some of them in Chapters 27, 28, and 29.
The first HTML tags you're going to look at are the document tags. These are the tags that are required for every HTML page you create. They define the different parts of the document.
Just like a magazine article, an HTML document has two distinct parts-a head and a body. The head of the HTML document is where you enter the title of the page. It's also used for some more advanced commands that you'll study later in Chapters, 10, 19, 22 and 23.
To create the head portion of your HTML document and to give the document a title, type the following in your text editor:
<HEAD>
<TITLE>My First Page</TITLE>
</HEAD>
This tells a Web browser what information should be considered to be in the head portion of of the document, and what it should call the document in the title bar of the browser window.
If you've got a head, then you'll need a body, right? The body is where you'll do most of your work-you'll enter text, headlines, graphics, and all your other Web goodies. To add the body section, start after the </HEAD> tag, and enter the following:
<BODY>
</BODY>
Between these two tags, you'll eventually enter the rest of the text and graphics for your Web page.
There's one last thing you need to consider. In order that all Web browsers understand that this is an HTML document (remember that you're saving it as ASCII text, so the browser could be confused), you need to add some tags on either side of the head and body tags you've created. Above the first <HEAD> tag, enter the following:
<HTML>
After the last </BODY> tag, type the following:
</HTML>
Now, at least as far as your Web browser is concerned, you have a complete Web document!
Let's take what you know and create a template. By saving this template as a generic text file, you'll have a quick way to create new HTML files-simply load the template and use the File, Save As command to save it as your new Web page.
Start by entering the following in a blank text file:
<HTML>
<HEAD>
<TITLE>Enter Title Here</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
And that's it. Now save this as an ASCII text file called template.html
(or template.htm if you're
using DOS or Windows 3.1). Now, whenever you're ready to create
a new HTML document, simply load template.html
into your text editor and use the Save As command to rename it.
| Note |
If you use a word processor to create your HTML files, you may notice that sometimes you get more than one option for saving files as ASCII text. So which one is right? Fortunately, it doesn't really matter. The big problem comes in editing the text on different platforms since DOS-based machines (including Windows) and Macs treat returns and linefeeds differently. If you plan to edit a Mac-created HTML file on a DOS machine, for instance, choose DOS text when you save it. Funny little newline characters will now appear in a Mac text editor, but everything will look good on the DOS side. |
When learning a new programming language, it's traditional that the first program you create is designed to say "Hello World." Well, HTML isn't a programming language-but I can use the Hello World example to prove that your template is a complete Web document.
Load the template.html file into your text editor, and use the Save As command to rename it hello_world.html or something similar. Now, edit the document so that it looks like this:
<HTML>
<HEAD>
<TITLE>Hello World Page</TITLE>
</HEAD>
<BODY>
Hello World!
</BODY>
</HTML>
Select the File, Save command from your text editor. Now load your Web browser and select the Open File (or similar) command from the File menu. In the dialog box, find the document hello_world.html and select OK to load it into your Web browser. If everything goes as planned, your browser should display something similar to figure 6.2.
Figure 6.2 : The Hello World page as viewed in Microsoft Internet Explorer.
And that's a Web page!
In creating your HTML template, you've already dealt with some of the most basic tags in HTML. The first thing you should notice about these HTML tags is that all tags include < and > on either side of the tag's command. This is how HTML recognizes tags. If you don't use the brackets, then a Web browser will assume your commands are text that you want displayed-even if that text is the same as an HTML command.
While a Web browser would consider the following to be a tag:
<HTML>
that same Web browser would interpret the following as text to be displayed on-screen:
HTML
| Tip |
Tags are not case-sensitive, so they don't have to be all uppercase-even though that's how they appear in this book. I suggest you type them as uppercase, though, since it makes them stand out in your text editor. |
Because tags aren't considered text by the document, they also don't show up in the document. If the browser interprets something as a tag, it won't appear in the browser window.
You may have noticed that for every tag, such as the title tag, you actually entered two different HTML commands-an "on" tag and an "off" tag. The off tag is the same as the on tag, except for the / after the <.
In HTML, tags that include both an on and an off tag are called container tags. These tags wrap around text in your document and perform some sort of formatting on the text. They hold, or contain, the text between the two tags. The title, HTML, head, and body tags are all container tags-the relevant text goes between the on and off tags.
Container tags always have the following form:
<TAG>text being formatted or defined</TAG>
In fact, you've already been introduced to a fairly common container tag in the first chapter of this book, the <EM> (emphasis tag). An example of the emphasis tag would be:
Here's some <EM>really important</EM> text.
Because <EM> is an implicit formatting tag, it's up to the browser to decide what to do to the text between the on and off tags. But only the words really important will be affected in this example, since they're the only text that is being "contained" by the tags.
All other tags in HTML fall into one other category, called empty tags. These tags have only an on tag-there are no off tags. The reason for this is that empty tags don't act on blocks of text. Instead, they do something all on their own. An example of this would be the <HR> (horizontal rule) tag. This tag draws a line across the width of your document. For example:
The following is a horizontal line:
<HR>
The rest of this is just more text.
When viewed in a Web browser, the two sentences will be separated by a horizontal line, as in figure 6.3.
Figure 6.3 : Here are your two sentences, separated by a horizontal line.
With your template prepared, and with an understanding of the two types of tags in HTML, you're ready to enter text on a Web page. As mentioned earlier, all the text that you enter on a page should come between the <BODY> and </BODY> tags. Like <EM>, the body tags are container tags that tell a Web browser what parts of the HTML document should be displayed in the browser window.
You've seen that you can just type text into an HTML document and it will be displayed in the browser. Technically, though, most of the text you type should be in another container tag: the <P> (paragraph) tag. This tag is used to show a Web browser what text in your document constitutes a paragraph. For the most part, Web browsers ignore more than one space between words and will ignore returns that you add to your HTML file while you're creating it.
In order to give the appearance of paragraphs, then, you have to use the paragraph container tag. The paragraph tag uses the following format:
<P>Here is the text for my paragraph. It doesn't matter how long it is, how many spaces are between the words or when I decide to hit the return key. It will create a new paragraph only when I end the tag and begin with another one.
</P>
<P> Here's the next paragraph. </P>
| Note |
Although it is technically a container tag, the </P> tag is not required at the ends of paragraphs by HTML 2.0. This tends to cause a little confusion. Many people end up using <P> as an empty tag, assuming that it's designed to insert a line break at the end of paragraphs (or even to create multiple blank lines). That's not its purpose. Using <P> as a container, as I've shown previously, gets the most reliable results in all different types of browsers. In the spirit of good HTML, the container is used to isolate all the text you want to call a "paragraph." Then it lets the browser render that in the way its programmers feel is most appropriate. |
Like the emphasis tag, the paragraph container tells the Web browser that all of the text between the on and off tags is in a single paragraph. When you start another paragraph, the Web browser will drop down a line between the two.
Here's that same example, except you'll throw in some spaces. Remember, spaces and returns almost never affect the way the text will be displayed on the screen. In a paragraph container, the browser will ignore more than one space and any returns.
<P>Here is the text for my paragraph.
It doesn't matter how long it is, how many spaces are between the words
or when I decide to hit the return key. It will create a new paragraph
only when I end the tag and begin with another one. </P>
<P> Here's the next paragraph. </P>
Both this example and the previous example will be displayed in the Web browser in exactly the same way.
But what if you want to decide where a line is going to end Consider the example of entering an address in a Web document, as follows:
<P>
Richard Smith
14234 Main Street
Anycity, ST 00001
</P>
It looks about right when you type it into your text editor. However, when it displays in a Web browser, it looks like figure 6.4.
Figure 6.4 : The Post Office would never deliver this.
We already know what the problem is: Web browsers ignore extra spaces and returns! But if you put each of those lines in a paragraph container, you'd end up with a space between each line-and that would look wrong, too.
The answer is the empty tag <BR>, which forces a line return in your Web document. Properly formatted, your address would look like this:
<P>
Richard Smith<BR>
14234 Main Street<BR>
Anycity, ST 00001<BR>
</P>
And it would look just right in your Web browser, just as in figure 6.5.
Figure 6.5 : This addres looks much better.
There's one other tag I'd like to discuss in this chapter, called
the comment tag. This tag is fairly unique, in that it's actually
used to make the Web browser ignore anything the tag contains.
That can be text, hypertext links, image links, even small scripts
and programs.
| Tip |
It's best to delete obsolete links and tags from your documents, rather than just using the comment tag. Some browsers will display certain tags even if they are "commented out." |
For now, you'll use the comment tag to hide text. The point in hiding the text is that it allows you to create a private message that is intended to remind you of something or to help those who view the raw HTML document to understand what you're doing. That's why it's called the comment tag. For instance:
<!--This is a comment that won't display in a browser-->
The comment tag isn't the most elegant in HTML, but it usually works. Anything you type between <!-- and --> should be ignored by the browser. Even multiple lines are ignored-as with most tags, the comment tag ignores returns.
Generally, you'll use the comment tag for your own benefit-perhaps
to mark a point in a particular HTML document where you need to
remember to update some text, or perhaps to explain a particularly
confusing part of your page. Since it's fairly easy for anyone
to view your raw HTML document, you might also use the comment
tag to create a copyright message or give information about yourself
(see the sidebar).
| Viewing the Source of Web Pages |
Ever been out on the Web looking at a particularly well-designed HTML document-and wondering how they did it? If you'd like to, most browsers will let you view the document source for any Web page they can load. This allows you to download the raw HTML codes and ASCII text, just as if you'd created the page yourself. To do this, select the View Document command in the Edit menu of your Web browser (the command may differ slightly, so look for a similar name if you can't find View Document). What results is the plain ASCII text file that was used to create that Web page. Depending on your browser, this source file will either be displayed in the browser window, or saved to your hard drive and displayed in the default text editor. If the source is displayed in the browser window, then select File, Save As to save the source to your hard drive. Now you might be able to imagine how comments can come in handy. If you would rather not have people copy and use the source from your Web pages (or if your pages contain otherwise copyrighted material that you want to protect), you can use the comment tag to let others know that you consider the page your property. For instance: <!--Contents of this document Copyright 1996 Todd Stauffer. Please do not copy or otherwise reproduce the source HTML code of this document without permission.--> Of course, that's not to say that you shouldn't also offer a visible copyright notice or other legal disclaimers. But comments within the code tend to talk directly to folks a little more HTML-savvy. Using a comment tag like this is a great way to encourage other Web designers to ask you before using your HTML pages for their own private use. (But if they don't ask, any legal problems are your own I'm afraid.) |
| Note |
Don't let this confuse you, but the comment tag is an unusual one. It's not really a container tag, since it doesn't have two similar tags that are differentiated only by / in the second tag. At the same time, it's difficult to describe as an empty tag, since it does do something to text in the document. |
Let's take everything you've learned and build a complete Web page. Start by loading the template and using Save As to create a new document for this example. (Call it test1.html or something similar.)
Now, create a document that looks something like Listing 6.1. You should have to change only the title text; enter the other text between the body tags.
Listing 6.1 test1.html Testing Tags
<HTML>
<HEAD>
<TITLE>The Testing Tags Page</TITLE>
<!--This page is Copyright 1996 Todd Stauffer-->
</HEAD>
<BODY>
<P>On this page we're reviewing the different types of tags that we've learned in this chapter. For instance, this is the first paragraph.</P>
<P>In the second paragraph, I'm going to include the name and address of one of my favorite people. Hopefully it's formatted correctly.<BR>
Tom Smith<BR>
1010 Lovers Lane<BR>
Anywhere, US 10001<BR>
</P>
<HR>
<P>Now I'll start a <EM>completely new</EM> idea, since it's coming after a horizontal line.</P>
<!--Don't forget to update this page with the completely new idea here.-->
</BODY>
</HTML>
When you've finished entering the text and tags (you can use your own text if you like; just try to use all of the tags we've reviewed in the chapter), use the Save command in your text editor. Now switch to your Web browser, and load your new page using the Open File (or similar) command.
If everything went well, it should look something like figure 6.6.
A good text editor and a Web browser program are all you need to start creating Web pages. Using these tools, you can create a template for your Web pages that includes all of the appropriate document tags. Since these are almost always the same for every HTML document, you can reuse the template without retyping.
There are two basic types of HTML tags: container tags and empty tags. The major difference between the two is that container tags feature both an on and an off component (usually the same tag, with a slash (/) before the name of the off tag). This is because container tags act on specific blocks of text, while empty tags generally perform some function on their own.
The most basic tags for entering text are the paragraph, line break, comment, and horizontal line tags. The comment tag is a special case-it's designed to keep text from being displayed by a Web browser. Entering text on a Web page is a simple matter of typing between the body tags, with an eye given to using the basic tags correctly.