CONTENTS

• Getting Started
• Tag Daze: Understanding HTML's Tags
•  Some Actual HTML
• Adding a Title
• Fleshing Out Your Page with Text
• How to Do Paragraphs
• The Least You Need to Know

Getting Started

As you saw before, some Web pages look truly spectacular. To achieve these impressive effects, all you really need for creating a basic page is a lowly text editor. Yes, even a brain-dead program (like Notepad for Windows or SimpleText for Macintosh) is more than adequate for doing the HTML thing. (Although,  there are HTML "editors" that can take some of the drudgery out of page production. More about some of them in Part 4.

For your note 99.9 percent of all the Web pages in the world are really just simple text files. The Web's beauty secret is that it's actually the Web browsers that determine how a page looks. When you surf to a Web page, the browser reads in the text, scours the file for HTML markings, and then displays the page accordingly. So, for example, you can mark in your text file that you want a certain word to appear as bold. When the browser comes to that part of the document, it goes right ahead and formats the word in a bold font. The browser handles all this work behind the scenes, and you never have to give it a second thought (or even a first thought, for that matter).

Crank Out a New Text File

So, to get to the point at long last, all you really need to do to get started is launch a new document in your favorite text editor.

If you prefer, it's okay to use a word processor such as Windows' Write, Windows 95's WordPad, or Microsoft Word. One caveat, though: don't try to format the document in any way (such as adding italics or centering paragraphs). Not only do you run the risk of having a browser choke on these extra formatting codes, but every Web browser on the face of the Earth will completely ignore your efforts. Remember, the only way to make a browser do your bidding and display your Web page properly is to use the appropriate HTML codes.

The Edit-Save-Browse Cycle

 That is, make sure you save your work regularly. Keep in mind that most Web browsers only know how to deal with files that end with the .HTML extension (such as MYPAGE.HTML). If your system balks at extensions longer than three characters (for example, if you have a DOS or Windows 3.1 system), just use .HTM, for now. You can always change it after you send the file to the hosting provider's computer. ( more about this in Chapter 9.)

1. Add some text and HTML stuff to your text file.
2. Save the file.
3. Load the file into your browser of choice to see how things look.
4. Lather. Rinse. Repeat steps 1 through 3. Note that once the file is loaded in the browser, you need only choose the program's "Reload" command to see the effects of your changes.

Tag Daze: Understanding HTML's Tags

As mentioned earlier, the magic of the Web is wrought by browser programs that read text files and then decipher the HTML nuggets that you've sprinkled hither and thither. These HTML tidbits are markers-called tags-that spell out how you want things to look. For example, if you want a word on your page to appear in bold text, you surround that word with the appropriate tags for boldfacing text.

In general, tags use the following format:

<TAG>The text to be affected by the tag</TAG>

The TAG part is a code (usually a one- or two-letter abbreviation, but sometimes an entire word) that specifies the type of effect you want. You always surround these codes with angle brackets <>; the brackets tell the Web browser that it's dealing with a chunk of HTML and not just some random text.

For example, the tag for bold is <B>. So if you want the phrase "My Home Page" to appear in bold, you type the following into your document:

<B>My Home Page</B>

The first <B> tells the browser to start display it in bold. This continues until the browser reaches the </B>. The slash (/) defines this as an end tag; this lets the browser know it's supposed to stop what it's doing. So the </B> tells the browser to stop display it in bold, there are tags for lots of other effects, including italics, paragraphs, headings, page titles, lists, and lots more. HTML is just the sum total of all these tags.

Some Actual HTML

Your HTML files will always lead off with the <HTML> tag. This tag doesn't do a whole heckuva lot except tell any Web browser that tries to read the file that it's dealing with a file that contains HTML knickknacks. Similarly, the last line in your document will always be the corresponding end tag: </HTML>. You can think of this end tag as the HTML equivalent for "The End." So each of your Web pages will start off looking like this:

<HTML>

</HTML>

The next items serve to divide the document into two sections: the head and the body. The head section is like an introduction to the page. Web browsers use the head to glean various types of information about the page. Although there are a number of items that can appear in the head section, the only one that makes any real sense to us mere mortals is the title of the page (more about in the next section).

To define the head, you add a <HEAD> tag and a </HEAD> tag immediately below the <HTML> tag you typed in earlier. So your Web page should now look like this:

<HTML>

<HEAD>

</HEAD>

</HTML>

The body section is where you enter the text and other fun stuff that will actually appear on the Web page. To define the body, you place a <BODY> tag and a </BODY> tag after the head section (that is, below the </HEAD> tag), as follows:

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

It's not exactly a work of art, is it?

Adding a Title

If you try loading your Web page into a browser, you'll just get a whole lot of nothingness because you haven't given the browser anything meaty into which it can sink its teeth. The first snack you can offer a hungry browser program is the title of the Web page. The page's title is just about what you might think it is: the overall name of the page (not to be confused with the name of the file you're creating). The title appears in the title bar of the browser's window.

The <TITLE> Tag

To define a title, you surround the text with the <TITLE> and </TITLE> tags. For example, if you want the title of your page to be "My Home Page," you enter it as follows:

<TITLE>My Home Page</TITLE>

Note that you always place the title inside the head section, so your basic HTML document now looks like so:

<HTML>

<HEAD>

<TITLE>My Home Sweet Home Page</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Title Dos and Don'ts

Here are a few things to keep in mind when thinking of a title for your page:

• Do make sure your title describes what the page is all about.
• Don't make your title too long. If you do, the browser may chop it off because there's not enough room to display it in the title bar. 50 or 60 characters are usually the max.
• Do use titles that make sense when someone views them out of context. For example, if someone really likes your page, he/she may add it to his/her list of bookmarks. The browser will display the page title in the bookmark list, so it's important that the title makes sense when he/she looks at his/her bookmarks later on.
• Don't use titles that are cryptic or vague. Titling a page "Link #42" or "A Page" may make sense to you, but your readers may not appreciate it.

Fleshing Out Your Page with Text

With your page title firmly in place, you can now think about putting some flesh on your Web page's bones by entering the text you want to appear in the body of the page. For the most part, you can simply type the text between the <BODY> and </BODY> tags, like so:

<HTML>

<HEAD>

<TITLE>My Home Page</TITLE>

</HEAD>

<BODY>

This text appears in the body of the Web page.

</BODY>

</HTML>

Before you start typing willy-nilly, however, there are a few things you should know:

• You might think you can line things up and create some interesting effects by stringing together two or more spaces. Web browsers will chew up all those extra spaces and spit them out into the nether regions of cyberspace. Why? Well, the philosophy of the Web is that you can use only HTML tags to lay out a document. So a run of multiple spaces (or white space, as it's called) is verboten. (There is a trick you can use to get around this, however: the <PRE> tag. More about it in the next chapter.)
• Tabs, too, fall under the rubric of white space. You can enter tabs all day long, but the browser will ignore them completely.
• Another thing that browsers like to ignore is the carriage return. It may sound reasonable to the likes of you and me that pressing Enter starts a new paragraph, but not in the HTML world. I'll talk more about this in the next section.
• If HTML documents are just plain text, does that mean you're out of luck if you need to use characters such as ", �, and �? Luckily, no, you're not. HTML has special codes for these kinds of characters, and I'll talk about them in the next chapter.

• Word processor users-it bears repeating here-it's not worth your bother to format your text. The browser will cheerfully ignore even the most elaborate formatting jobs because, as usual, browsers only understand HTML-based formatting. (And besides, a document with formatting is, by definition, not a pure text file, so a browser may bite the dust trying to load it.)

How to Do Paragraphs

As mentioned above, carriage returns aren't worth a hill of beans in the World Wide Web. If you type one line, press Enter, and then type a second line, the browser will simply run the two lines together, side by side.

If a new paragraph is what you need, you have to stick the browser's nose in it, so to speak, by using the <P> tag. For example, consider the following text:

<HTML>

<HEAD>

<TITLE>My Home Page</TITLE>

</HEAD>

<BODY>

This text appears in the body of the Web page.

This is the second line (sort of).

<P>

This is the third line.

</BODY>

</HTML>

The Least You Need to Know

This chapter got you started on your way to earning your Web Master merit badge by showing you the basic HTML structure of a Web page. Here's the highlight reel:

• The only thing you need to get started with your Web page is a text editor (such as Windows' Notepad) and a brand new text file.
• HTML is nothing but a series of tags that take the form <TAG>text</TAG>.
• All Web pages begin with the <HTML> tag and end with the </HTML> tag.
• There are two sections in an HTML document. The first section is the head, and you define it by the <HEAD> and </HEAD> tags. The second section is the body, and you surround it by the <BODY> and </BODY> tags.
• You wedge the title of your Web page in between the <TITLE> and </TITLE> tags, and plop the whole thing inside the head section.
• Your Web page text goes inside the body section. If you need to separate your prose into paragraphs, use the <P> tag.

Copyright © 2004 KacMac. All rights reserved.