Tips, tricks, infos on how to create websites.

Home » Archives » April 2008

The HTML Document

April 1, 2008

So far, you’ve been considering HTML snippets—portions of a complete HTML document.

To create a true HTML document, you need a minimum of three container tags:

<html>, <head>, and <body>. These three tags work together to describe the basic structure of your page.

• <html>
This tag wraps everything else in your Web page. It tells the browser that you’re using HTML.

• <head>
This tag designates the header portion of your document. The header can include some optional information about your Web page, including the title (which is displayed in your browser’s title bar), search keywords, and a style sheet.

• <body>
This tag holds the meat of your Web page, including the actual content you want to display to the world.

There’s only one right way to combine these tags. Here’s the correct arrangement:

<html>

<head> </head> <body> </body>

</html>

Every Web page uses this basic framework. The ellipsis (…) shows where you’ll want to insert additional information. The spaces in between the lines aren’t required; they’re just to help you see the tag structure more easily.

Almost all browsers let you bend these rules, and create a document that lacks these three basic tags.

To transform this barebones template into a real document, you just need to start adding some content. For example, let’s say you’re starting a basic info page. Here’s a very basic first go at it:

<html>

<head> </head>

<body>

I am Jason Morales. Born from the land of Cotabato <b>off the

hizzle</b>.

</body>

</html>

The only change is the addition of text in the <body> section. A single <b> tag is also used, just to dress it up a little. Before you go any further, you may want to try creating this sample file in your own text editor, and opening it in your favorite Web browser.

Posted by website at 12:22 am | permalink | Add comment

Telling the Browser to Ignore a Tag

What if I want the text "<b>" to appear on my web page?

Example, if you want to write the following bit of text :
The number 7 < 4 is wrong because 7 is bigger than 4.

When the browser reaches the less than (<) symbol, it becomes bewildered. It assume you’re starting a tag, and the text following "2 is clearly false..l" is part of a long tag name. Obviously this isn’t what you intented. The end result is unpredictable, but usually the text after the <character disappears into a nonexisting tag. To solve this problem, you need to replace angle brackets wit the corresponding HTML character entity. Character entities always begin with an ampersand (&) and end with a semicolon (;). The character entity for the less than symbol is &lt; because the lt stands for "less than". Similarly, &gt; is the character entity for the greater symbol.

Here’s the correct example:
The number 7 &lt; 4 is wrong, because 7 is bigger than 4.

In your text editor, this dosn’t look what you want. But when the browser interprets this document, it automatically changes the &lt; into a , character, without confusing it with a tag.

Posted by website at 12:00 am | permalink | Add comment