HTML - Structure of webpage and Tags

Topic: HTML

Basic Structure of a Web Page
Getting Started
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.

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).

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 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.
Here's an example of a simple HTML document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

<TITLE>My first HTML document</TITLE>

</HEAD>

<BODY>

Hello world!

</BODY>

</HTML>
Instruction

Save the file as sample.html.
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 . 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 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 . The slash (/) defines this as an end tag; this lets the browser know it's supposed to stop what it's doing. So the 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.

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>

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.

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 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).

This is the third line.

</BODY>

</HTML>