 |
 |
Chapter 4Laying the Foundation:
|
| Using a Word Processor? |
|
By now you've probably figured out the biggest problem associated with fashioning a Web page out of a text file: there's no way to know what the page will look like once it's been foisted onto the Web! Fortunately, all is not lost. Most browsers are more than happy to let you load a text file right from the confines of your computer's hard disk. This means you can test drive your page without first having to put it on the Web. So here's the basic cycle you'll be using to build your pages:
- Add some text and HTML stuff (I'll define what this "stuff" is in the next section) to your text file.
- Save the file.
- Load the file into your browser of choice to see how things look.
- 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.
As a public service (it's a tough job but, hey, somebody's gotta do it), I've compiled the appropriate instructions from a few popular browsers for loading a file from your hard disk:
- In Netscape, pull down the File menu, select the Open File command (or you can press Ctrl+O), and then choose the file from the Open dialog box that appears. To reload the file, pull down the View menu and select Reload (or press Ctrl+R).
- In NCSA Mosaic, select the File menu's Open Local File command (or press Ctrl+L) and then pinpoint the file in the Open dialog box. To reload the file, select the Navigate menu's Reload command, or press R.
- In Microsoft's Internet Explorer, select the File menu's Open command (or press Ctrl+O), select the Open File button in the Open Internet Address dialog box that appears, and then pick out the file you need. You can reload the file by selecting the View menu's Refresh command, or by pressing F5.
Tag Daze: Understanding HTML's Tags
As I 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 "BeDazzler Home Page" to appear in bold, you type the following into your document:
<B>BeDazzler Home Page</B>
The first <B> says to the browser, in effect, "Listen up, Browser Boy! You know the text that comes after this? Be a good fellow and 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, "Okay, okay. Ixnay on the oldbay!" As you'll see, 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.
And Now, Some Actual HTML
Okay, you're ready to get down to some brass HTML tacks. (Halle-freakin'-lujah, I hear you saying.) You'll begin by cobbling together a few HTML tags that constitute the underlying skeleton of all Web pages.
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, which I'll talk 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>
Hmm. It's not exactly a work of art, is it? On the excitement scale, these
opening moves rank right up there with watching the grass grow and tuning in to
C-SPAN on a slow news day. Well, just file it under "Necessary Evils" and move
on.
| A Not-So-Necessary Evil? |
|
A Page by Any Other Name: 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). If someone views the page in a graphical browser (such as Netscape or Mosaic), 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 Sweet Home Page," you enter it as follows:
<TITLE>My Home Sweet 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>
The following figure shows this document loaded into the Windows 95 version of Netscape Navigator. Notice how the title appears in the window's title bar.
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, she may add it to her list of bookmarks (hey, it could happen). The browser will display the page title in the bookmark list, so it's important that the title makes sense when she looks at 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 Sweet 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. Ha! 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. I'll tell you 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.
| More Character Assassinations |
|
- 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 I 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 Sweet 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>
| Hey, Where's the </P> Tag? |
|
The following figure shows how this looks in the browser. As you can see, the first two lines appear beside each other, despite the fact that they're on separate lines in the original text. However, the third line sits nicely in its own paragraph thanks to the <P> tag that precedes it.
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.
