This book's goal is to help you create your own Web pages and thus lay claim to a little chunk of personal cyberspace real estate: a home page away from home, if you will. Before you can live in this humble abode, however, you have to "pour the concrete" that will serve as the foundation for the rest of your digital domicile. In this chapter, I'll be showing you a few HTML basics that constitute the underlying structure of all Web pages.
As you saw in the last chapter, some Web pages look truly spectacular. To achieve these impressive effects, you might think you need to stretch a fancy word processing or page layout program to its limits. Or you might think you have to rush out and spend beaucoup bucks for some kind of highfalutin "HTML generator" that's designed specifically for cranking out Web pages. Nah, you're way off. All you really need for creating a basic page is a lowly text editor. Yes, Windows users, even a brain-dead program like Notepad is more than adequate for doing the HTML thing. (Although, having said all that, there are HTML "editors" that can take some of the drudgery out of page production. I'll talk about some of them in Part 4.)
Surely a plain old run-of-the-mill text editor won't let me create anything resembling those beautiful pages I see on the Web.Yes, it will-and stop calling me Shirley. 99.9 percent of all the Web pages in the world are really just simple text files.
So why in the name of Sam Hill do those pages look so good? Any text files I've ever met have been ugly with a capital Ugh!
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 dirty work behind the scenes, and you never have to give it a second thought (or even a first thought, for that matter).
So, to get to the point at long last, all you really need to do to get started is fire up your favorite text editor and launch a new document-if the program doesn't do that for you automatically, as most do. (Of course, that isn't to say there aren't other, equally important, accouterments you may need. For me, a good, strong cup of java is a must. Other optional HTML accessories include the appropriate mood music-something by The Spinners, perhaps?-a copy of Feel the Fear and Do It Anyway, and semi-important things like your creativity and imagination.)
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.
While slaving away on the text file that will become
your Web page, make sure you practice safe computing. 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. (I'll talk more about this in Chapter 9.)
| Using a Word Processor? |
If you're using a word processor to create your Web page, make sure you save the document as a plain text file. A Web browser may gag on an HTML page you save in the word processor's native format. Text files normally use a .TXT extension, so make sure you change it to .HTM or .HTML. |
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:
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:
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.
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? |
To relieve some of the inevitable boredom of these early stages of Web page creation, you'll find some help on the disk that comes with this book. I've included a file named SKELETON.HTM that contains all the tags that make up the bare bones of a Web page. You can use this file as a template each time you start a new Web page. |
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.
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.
Most Windows Web browsers display the page title in the window's title bar (duh).
Here are a few things to keep in mind when thinking of a title for your page:
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:
| More Character Assassinations |
Note, too, that the angle bracket characters < and > are out of bounds because you use them to identify tags. Again, if you need to use them, there are some special codes that'll get the job done. |
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? |
You might have noticed that I didn't use a </P> tag to mark the end of the <P> tag. What gives? Well, the </P> tag exists, but no one ever uses it. Why? Because the end of one paragraph automatically implies the beginning of the next one, so there's no need to toss in the </P>. |
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.
You need to use the <P>tag to create paragraphs in HTML.
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: