All chapters...

Table of contents
Introduction
A simple HTML document
Images
Lists
Links
Tables
Frames
Forms
Cascading style sheets
JavaScript
Programming in PHP
Server side includes
CGI & Perl
Extended characters
Examples of colours
Learn more
Software
Recent changes
Alphabetical index

In this chapter...

The basic HTML document
Force loading a page
The LINK element
Horizontal rulers
Paragraphs
Break
Headings
Font style elements
Pre-formatted text
Superscript and subscript
Using style sheets
Comments
Download example

Taalkeuze...

U hebt gekozen om Engels als eerste taal te gebruiken.

Klik hier om te kiezen voor Nederlands.

A simple HTML document

In this chapter I demonstrate how to build a basic, simple HTML document. In this chapter you learn enough to make a simple page for the world wide web. At the end of this chapter you can download a simple HTML document to experiment with.

The basic HTML document

A basic HTML document looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML LANG="en">

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

<META NAME="keywords" CONTENT="HTML, CSS, JavaScript">
<META NAME="copyright" CONTENT="copyright 1995-2005 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 .php which means they include PHP scripts. Be careful that on Unix and Linux servers there is a distinction between lowercase and uppercase letters in filenames, so MyFile.html will be considered different from myfile.html.

The <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> tells the browser that your document is conform to HTML 4.01 specifications (strict). 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.

These standards are important. They are what keeps the web the way it is: anyone can publish for anyone. Some software manufacturers have a tendency to develop their own "standards". I would strongly recommend you publish your documents in accordance with the open standards of the W3C. These pages comply entirely to the HTML 4 and CSS 2 standards.

The <HTML> element signals the start of your document. It will include two main parts: the header (enclosed by the <HEAD> and </HEAD> tags) and the body (enclosed by the <BODY> and </BODY> tags). The document then ends with an </HTML> element. The header of your document contains information that may not be displayed to the user but that is used by the browser. Strictly speaking, the HTML, HEAD and BODY elements are optional and you are not required to have them in your document. However, they are a good way of structuring your work.

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. You can use the LANG attribute also with other elements such as <P> and <LI>, for example if you have small pieces of text in other languages.

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 "WebThings: A simple HTML document" 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 elements is also used by a browser when the reader bookmarks a page.

The <META NAME="keywords" CONTENT="HTML, CSS, JavaScript"> allows you to include keywords that are read by search engines. It is not obligatory to include keywords. Not all search engines use these keywords, some simply search your whole document. You can use the <META NAME="copyright" CONTENT="copyright 1995-2005 by Jan Weijers"> element to put copyright information in the header of your document. For example, these are the META elements in the document you are looking at:

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

Force loading a page

A very special use of the META element 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="3; url=basic.php#_force">
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1>Just wait for 3 seconds to go back</H1>
</BODY>

This document is saved here under the name basic_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 element 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 element, so it is useful to always include a normal link.

The LINK element

The LINK element is used to define the relations between a set of documents. The LINK element is used between the HEAD start and end tags. 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.php and that there are a previous and next chapter. Most commonly, the LINK element is used to specify a cascading style sheet. For example:

This is the link that is included in all pages of WebThings and that indicates the style sheet.

Horizontal rulers

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

<HR>

Which displays a horizontal ruler like this:

Additionally, you can set the width and height of a horizontal ruler like this:

A line of 5 pixels thickness and a 250 pixels wide. This is an example of using a STYLE attribute. More about that in the chapter on style sheets. By default the HR element is aligned in the centre.

In the past you could use the HR element with WIDTH, SIZE, ALIGN and NOSHADE attributes but this is no longer part of HTML 4.01. These attributes have been "deprecated" which means they are no longer officially part of HTML but browsers should continue to support them.

Paragraphs

The <P> tag marks a regular paragraph of text. A paragraph ends with the </P> tag. All browsers will ignore returns, linefeeds and extra spaces in a text. If you do not format a text with paragraph and break tags, the text will be displayed continuous. The <P> tag adds white space above the paragraph and the </P> tag below.

<P>Semper ubi sub ubi. Quone modo nunc, ... magno suo cum periculo deicerentur.</P>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.

Break

<BR> is the break tag which, who'd ever guess, inserts a simple line break. Whereas the paragraph tag inserts empty (vertical) space, the break tag continues the text on the next line without adding space. It looks like this:

<P>This is<BR> a sentence with a<BR> couple of breaks in it.</P>

This is
a sentence with a
couple of breaks in it.

Headings

The H element takes care of titles and subtitles in a document. There are six sizes of headings available:

<H1>Heading of size 1</H1>
<H2>Heading of size 2</H2>
<H3>Heading of size 3</H3>
<H4>Heading of size 4</H4>
<H5>Heading of size 5</H5>
<H6>Heading of size 6</H6>

Heading of size 1

Heading of size 2

Heading of size 3

Heading of size 4

Heading of size 5

Heading of size 6

As you can see, "left" is the default alignment for the header, so if you specify no alignment it will be on the left. You can use style sheets or style attributes to set the colour, font, size, alignment and other attributes of the header.

Font style elements

The following font style elements are available:

<TT>teletype or monospaced text</TT>
<I>italic text style</I>
<B>bold text style</B>
<BIG>places text in a large font</BIG>
<SMALL>places text in a small font</SMALL>

teletype or monospaced text
italic text style
bold text style
places text in a large font
places text in a small font

<EM>Emphasis</EM>
<STRONG>Stronger emphasis</STRONG>
<CODE>Code sample</CODE>
<SAMP>Sample text</SAMP>
<KBD>Keyboard; text to be typed</KBD>
<VAR>Used for variable names</VAR>
<DFN>Definitions</DFN>
<CITE>a citation</CIT>

Emphasis
Stronger emphasis
Code sample
Sample text
Keyboard; text to be typed
Used for variable names
Definitions
a citation

Probably, many of these style and phrase elements look very similar and in practice you will only use one or two of them. Additionally, since HTML 4 it is preferable to use style sheets or style attributes to do this kind of formatting.

Pre-formatted text

As written above, browsers will ignore normal line breaks and returns, which is why you need the <P> and <BR> tags. Also, any extra spaces will be ignored. If you try to use spaces to put text to the right or the centre of the page this will be the result:

right middle left

As you can see, the browser takes out all the spaces and returns. A way to work around this is to use the tags for pre-formatted text: a <PRE> tag before a </PRE> after. These tags tell the browser that you have put in spaces and returns with the specific aim to lay-out the text. It also tells the browser to use a fixed-width font.

<PRE>
                        right
            middle
left
</PRE>

See how it looks now:

                        right
            middle
left

You could use pre-formatted text to create simple tables but you have many more possibilities with tables if you use the <TABLE> tag. If you want to put ASCII formatted text on the web, using the PRE element is the fastest way to do it.

Superscript and subscript

Superscript and subscript are done as follows:

Example<SUP>superscript</SUP>
Example<SUB>subscript</SUB>

Example^superscript
Example_subscript

Using style sheets

There are many more options to format text using style sheets. Remember, HTML is only intended to mark-up text and any lay--out is supposed to be done in CSS. Here is just one example:

<P STYLE="font-family:times, serif; font_size:14px: font-weight:bold; text-decoration:underline; color:#FF6600; margin-left:150px;">Only some of the possibilities of CSS</P>

Only some of the possibilities of CSS

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 elements will be considered a comment and should be ignored by the browser. Be aware, however, that your comments can be made visible. If you choose "view source" in your browser, you will be able to see a comment I put below this paragraph.

Download example

Here you can download a simple HTML file for you to experiment with. If includes all of the examples dicussed above. If you click on the link it will open in your browser but if you right-click on it (control click on Apple) you can download the file:

An instant example

Open it in you HTML editor or text editor, change it and view it in a browser.

Feedback welcome...

Please let me know your opinion about this guide, information you would like to be added or any errors you have discovered. Click here.

Open standards...

This site conforms completely to open standards of the World Wide Web Consortium (W3C). Click on the logos to verify that.