HTML Basics

Contents: The Basic HTML Document - Force Loading A Page - Base URL For Relative Links - The LINK Element - Horizontal Rulers - Comments

Chapters

Table of Contents
Introduction
Basic HTML
Text
Images
Lists
Anchors
Tables
Frames
Forms
Javascript
SSI
CGI & Perl
Style Sheets
Special characters
Colour examples
HTML resources
Recent Updates
Index

The Basic HTML Document

A basic HTML document looks like this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML LANG=en>

<HEAD>
<TITLE>The title that appears in the window title bar</TITLE>

<META NAME=keywords CONTENT="keyword1, keyword2, keyword3">
<META NAME=copyright CONTENT="copyright 1996 by Jan Weijers">

</HEAD>

<BODY>
The actual text of the document
</BODY>
</HTML>

You can give your document any name, but the extension should be .html or .htm. If a document has a different extension, it usually includes something special. On this site, for example, you will find some documents with the extension .shtml extension, signalling they have server side includes.

The <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> tells the browser that your document is conform to HTML 3.2 specifications. You can find the full specification at the site of the WWW consortium (W3C). The W3C also offers a validator that can check your documents and tell you if they conform to the standards or not.

If your documents conforms to the full HTML 4 standard you can use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">. Finally, you can use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> for documents that contain both HTML 3.2 and HTML 4.0. If your document includes frames you can use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">. These document type elements are not absolutely essential but they do form part of the HTML specification and they will tell syntax checkers and validators what kind of document they are looking at.

The <HTML> tag signals the start of your HTML document. It will include to main parts: the header (enclosed by <HEAD> and </HEAD> tags) and the body (enclosed by <BODY> and </BODY> tags). The document then ends with an </HTML> tag. The LANG attribute specifies the language of the document. It helps text-to-speech software and it helps browsers with things like hyphenation. Some examples of language codes are "nl" for Dutch, "en" for English, "en-Us" for US English, "es" for Spanish and "de" for German. Using the LANG attribute sets the default language for the whole document. If you include, for example, quotes in other languages you can use the LANG attribute also with most other tags such as <P> and <LI>.

The text between the <TITLE> and </TITLE> tags is the text that appears in the title bar of the window, in the way it says "Jan's Guide to Web Authoring: Basics" in the title of this window. You do not have to give your document a title. If you don't, most browsers will show the location of the document in the title bar. The text in the TITLE tags is also used by your browser when you bookmark a page.

The <META NAME=keywords CONTENT="keyword1, keyword2, keyword3"> allows you to include keywords that are read by search engines. It is not obligatory to include keywords. You can use the <META NAME=copyright CONTENT="copyright 1996 by Jan Weijers"> tag to put copyright information in the header of your document. For example, these are the META tags in the document you are looking at:

META tags do not add any direct functionality but are useful to help search engines index your documents. Particularly the keywords META tag is important for this and you shoudl use it.

The text between <BODY> and </BODY> is the actual content of your document.

Force Loading A Page

A very special use of the META tag is the one that forces the browser to load another page. Here is an example of it's use:

<HTML><HEAD><TITLE>The clock is ticking...</TITLE>
<META http-equiv=refresh content="5; url=basics.html#force">
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H1>Just wait for 5 seconds to go back</H1>
</BODY>

This document is saved here under the name refresh.html. If you link to it, and just wait 5 seconds, you will automatically come back to this page.

Try it

As you can see, it is all about a very simple tag in the header of the document. You could even use this to make a guided tour of your site, by taking the browser along a number of pages, for 10 or 15 seconds each. Of course older browsers may not support this tag, so it is useful to always include a normal link.

Base URL For Relative Links

The BASE element defines the basic URL for solving relative URLs. the BASE element is included within the <HEAD> start and end tags.

Including this element means that a relative link in your document like <A HREF=index.html>Home</A> is interpreted as http://www.weijers.net/index.html no matter where the document is. In the absence of a BASE element the browser uses the URL of your document to figure out relative links. Also see the section on relative links.

The LINK Element

The LINK element is is used to include links to style sheets, but can also be used to define the relations between a set of documents. For example, in the header of this document the following link elements could be included:

This will tell the browser that there is a table of contents related to this document that is called index.html and that there are a previous and next chapter. The LINK element is included between the HEAD start and end tags. It has to be said that most browsers appear to ignore the LINK element, except for stylesheets.

Horizontal Rulers

In HTML you can use horizontal rulers (=lines) to make separations between different chapters or sections of your text. The basic tag is:

<HR>

Additionally, you to set the size (thickness, vertical) and width (length, horizontal) of a horizontal rules like this:

A line of 20 pixels thickness and a length of half your window size. The SIZE attribute can be set only in pixels (=points on your screen). The WIDTH attribute can be set in an absolute value in pixels or in a percentage as I did in the example above.

Moreover, you to choose the alignment of the ruler. Possible values are "left", "center" and "right". As you can see in the example above, where no alignment is specified, "center" is the default. Another example:

The same ruler as above, but aligned to the right of your window.

By default most browsers display rulers with a dropshade effect as in the examples above. The Noshade attribute changes this into a solid ruler. For example:

Of course you can also use an image as a ruler, giving you limitless possibilities. See the chapter on images for more about this.

Chapters

Comments

It is also possible to include comments in an HTML file. This can be useful to help you remember what you have been doing if you look at a file again a long time after you created it. The comment looks like this:

Anything in between those two tags will be considered a comment and should be ignored by the browser.

Please send comments and suggestions to me by [email protected].
I will also try to answer any questions you may have.

I'd be pleased if you would visit my home page.