This is a short introduction to writing HTML.
Many people still write HTML
by hand using tools such as NotePad. Even if you don't intend to edit HTML
directly and instead plan to use an HTML editor this guide will help you become
comfortable with the basics of authoring
HTML. p.s. a good way to learn is to look at how other people have coded
their html pages. To do this, click on the "View" menu and then on "Source".
This page will teach you how to:
start with a title
add headings and paragraphs
add emphasis to your text
add images
add links to other pages
use various kinds of lists
Start with a title Every HTML document needs a title. Here is what you need to type:
<title>My first HTML document</title>
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. Most browsers show the title in the window caption bar.
Add headings and paragraphs 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>
at the end of the paragraph is optional, unlike the end tags for elements like headings.
Adding a bit of emphasis
You can emphasize 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.
The simple way to add an image is using the
<img> tag. If you have an image file called "peter.jpg" in
the same folder/directory as your HTML file. It is 200 pixels wide by 150
pixels high, add the image to your site using:
<img src="peter.jpg" width="200" height="150">
The src attribute names the image file. The width and height aren't
strictly necessary but help to speed the display of your Web page.
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>.
You can turn an image into a hypertext link, for example, the following
allows you to click on the company logo to get to the home page:
<a href="/"><img src="logo.gif" alt="home page"></a>
Utilising 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.
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 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.
Getting Further Information
W3C's Recommendation for HTML
4.0 is the authorative specification for HTML. However, it is a technical
specification. For a less technical 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. XHTML
1.0 is now a W3C Recommendation.