MS FrontPage —

HTML 101

FrontPage is about to work miracles for you, but what's going on behind the curtain doesn't have to remain a complete mystery. In fact, even if you don't plan on writing one iota of HTML, familiarity with the language's basics can help you understand why FrontPage behaves the way it does. What follows is an ultra-fast HTML primer. It's quite a bit less than you'd actually need to write your own Web pages by hand, but it'll get you started if you need to take a peek at some of the HTML that FrontPage generates.

A Web page is nothing more than a simple text file containing HTML. When a Web browser summons an HTML file, it transforms this HTML into the kind of Web pages you're used to looking at online. You could actually create your entire site using only Notepad, Windows's bare-bones text editor.

Inside every HTML document you'll find two kinds of information: the actual content that appears in a Web browser ("Ike's Trip to Patagonia" and everything he has to say about it, for example) and some strange-looking fragments of text enclosed in brackets (< >) that are called HTML tags. These tags tell browsers how to display your content: how big it should be, how it should be formatted, and so on. Tags are easy to pick out. Just look for the brackets (< >) in this sample HTML page:

<html>
<head>
<title>Sample HTML Document</title>
</head>
<body>
<p>
This is sample text on a sample page.
Text can be <b>bold</b> or <i>italic</i> or plain.
</p>
</body>
</html>

Here's a breakdown of what's happening in that mini Web page:

  • The <html> tag tells the browser what kind of document it has encountered.

  • The <head> tags contain basic information about the page. For example, the document title appears here. (The text of the title appears between its own <title> tags so a browser can find and display it.) If this were a more complex page, the head might also include some style information or even a script that animates text or pictures.

  • The <body> tags surround the star of the show: the content of your page. Everything between these tags is what viewers will see in their browsers.

  • <p> indicates the beginning of a paragraph and </p> the end of the paragraph.

A tag actually consists of two parts: an opening tag and a closing tag. The closing tag is identical to the opening tag except that it contains a forward slash (/). When a browser comes across an opening tag, like the <b> bold tag in the example above, it applies the tag to everything that follows until the closing tag appears. In other words, tags enclose all the content they affect. So, all text between the opening <b> bold tag and the closing </b> bold tag will appear as bolded text. As you can see in the code just shown, each tag has an accompanying closing tag somewhere. The closing tag can be one character away or miles down the page. For instance, the closing </html> tag doesn't appear until the end of the document. That's because everything between the <html> tags is HTML. There are a few tags that don't require a closing tag, but they're the exception to the rule.

If you want to see more examples of HTML, just hop online. You can view the HTML code of any page on the Web. Depending on what browser you're using, select View » Source or View » Page Source, and a separate window opens displaying the page's HTML code.