A convenient way to fix up markup errors in your HTML is to use the HTML
Tidy utility. This also tidies up the
markup making it easier to read and easier to edit.
Start with a title
Every HTML document needs a title. Here is what you need to type:
<title>My first HTML document</title>
Change the text from "My first HTML document" to suit your own needs. The
title text is preceded by the start tag
<title> and ends with the matching end tag </title>. The title should
be placed at the beginning of your document.
Add headings and paragraphs
If you have used Microsoft Word, you will be familiar with the built in
styles for headings of differing importance. In
HTML there are six levels of headings. H1 is the most important, H2 is
slightly less important, and so on down to
H6, the least important.
Here is how to add an important heading:
<h1>An important heading</h1>
and here is a slightly less important heading:
<h2>A slightly less important heading</h2>
Each paragraph you write should start with a <p> tag. The </p> is
optional, unlike the end tags for elements like
headings. For example:
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
Adding a bit of emphasis
You can emphasise one or more words with the <em> tag, for instance:
This is a really <em>interesting</em> topic!
Adding interest to your pages with images
Images can be used to make your Web pages distinctive and greatly help
to get your message across. The simple
way to add an image is using the <img> tag. Let's assume you have an
image file called "peter.jpeg" in the same
folder/directory as your HTML file. It is 200 pixels wide by 150 pixels
high.
<img src="peter.jpeg" width="200" height="150">
The width and height aren't strictly necessary but help to speed the display
of your Web page. Something is still
missing! People who can't see the image need a description they can read
in its absence. You can add a short
description as follows:
<img src="peter.jpeg" width="200" height="150"
alt="My friend Peter">
The alt attribute is used to give the short description, in this case "My
friend Peter". For complex images, you may
need to also give a longer description. Assuming this has been written
in the file "peter.html", you can add one as
follows using the longdesc attribute:
<img src="peter.jpeg" width="200" height="150"
alt="My friend Peter" longdesc="peter.html">
You can create images in a number of ways, for instance with a digital
camera, by scanning an image in, or
creating one with a painting or drawing program. Most browsers understand
GIF and JPEG image formats. To
avoid long delays while the image is downloaded over the network, you should
avoid using large image files.
Adding links to other pages
What makes the Web so effective is the ability to define links from one
page to another, and to follow links at the
click of a button. A single click can take you right across the world!
Links are defined with the <a> tag. Lets define a link to the page defined in the file "peter.html":
This a link to <a href="peter.html">Peter's page</a>.
The text between the <a> and the </a> is used as the caption for
the link. It is common for the caption to be in blue
underlined text.
To link to a page on another Web site you need to give the full Web address
(commonly called a URL), for instance
to link to www.w3.org you need to write:
This is a link to <a href="http://www.w3.org/">W3C</a>.
Three kinds of lists
HTML supports three kinds of lists. The first kind is a bulletted list,
often called an unordered list. It uses the <ul>
and <li> tags, for instance:
<ul>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ul>
Note that you always need to end the list with the </ul> end tag, but
that the </li> is optional and can be left off. The
second kind of list is a numbered list, often called an ordered list. It
uses the <ol> and <li> tags. For instance:
<ol>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ol>
Like bulletted lists, you always need to end the list with the </ol>
end tag, but the </li> end tag is optional and can
be left off.
The third and final kind of list is the definition list. This allows you
to list terms and their definitions. This kind of list
starts with a <dl> tag and ends with </dl> Each term starts with
a <dt> tag and each definition starts with a <dd>.
For instance:
<dl>
<dt>the first term</dt>
<dd>its definition</dd>
<dt>the second term</dt>
<dd>its definition</dd>
<dt>the third term</dt>
<dd>its definition</dd>
</dl>
The end tags </dt> and </dd> are optional and can be left off. Note
that lists can be nested, one within another. For
instance:
<ol>
<li>the first list item</li>
<li>the second list item</li>
<ul>
<li>first nested item</li>
<li>second nested item</li>
</ul>
<li>the third list item</li>
</ol>
You can also make use of paragraphs and headings etc. for longer list items.
Getting Further Information
W3C's Recommendation for HTML 4.0 is the authorative specification for
HTML. For an easier to read source of
information you may want to purchase one of the many books on HTML, for
example "Raggett on HTML 4",
published 1998 by Addison Wesley.
I plan to extend this guide with additional pages explaining how to add
a touch of style, advanced topics such as
preformatted text, tables and image maps, and a list of common pitfalls.
Best of luck and get writing!