HTML - learn to code HTML

Introduction

HTML stands for HyperText Markup Language it is the language that all webpages are fundamentally written in, whether the code is produced by the user (static html page) or by a program such as a Perl script (dynamic html). All browsers understand html although some interpret it in different ways.

The Evolution of HTML

• 1989.3, Tim Berners-Lee proposed the famous "mesh".
• 1992, first version of HTML: has anchors, paragraphs, lists and headings, but no table, no image and no form.
• 1994, HTML 2.0: A major step, adding primitive image, form, imagemap.
• 1996, HTML 3.2: Introduced tables, applets, text flow around images, font, subscript.
• 1998, HTML 4.0: Introduced Stylesheets, better tables and forms, objects and frames
• HTML+ (1993) and HTML 3.0 (1995): too aggresive, not standard.

Note: what we are tracing here is "W3C HTML", which is different from HTML that major browser vendors support at same time scale. The latter is usually more aggresive.

Creating a simple HTML page

A HTML document is made up of two sections, the HEAD and the BODY. The HEAD contains information about the page such as the TITLE, and details about the author. Javascript can also be placed in the HEAD of the document. The BODY contains the actual code that is displayed on the users computer screen.

Webpages are created by the use of TAGS, these tags are placed around the content of that particular element. For example the whole HTML document is placed between HTML and /HTML tags, indicated that the text the appears between these tags, is HTML code.

A basic HTML page looks like this

As you can see, this is really very simple. You don't need to write this code yourself, you can use programs such as Frontpage or Dreamweaver, to write the code for you, but it's a good idea to at least have a clue what's going on.

Here is how to add an important heading:

and here is a slightly less important heading:

Each paragraph you write should start with a <p> tag. The </p> is optional, unlike the end tags for elements like headings. For example:

Adding a bit of emphasis

You can emphasise one or more words with the <em> tag, for instance:

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.

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:

The alt attribute is used to give the short description, in this case "My friend Peter".

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> (anchor) tag.

This a link to Google.

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

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

Note that you always need to end the list with the </ul> end tag, but that the </li> is optional and can be omitted.

The second kind of list is a numbered list, often called an ordered list. It uses the <ol> and <li> tags. For instance

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 omitted.

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

The end tags </dt> and </dd> are optional and can be omitted. Note that lists can be nested, one within another. For instance

You can also make use of paragraphs and headings etc. for longer list items.

Including tables in your Webpage

When you create a table,you need use the following tags: <table><tr><td></td></tr></table>. The table begins with the tag <table>,and ends with </table>.The tag <tr> represents table rows, and the tag <td> represents table cells.

You can also use the attributes rowspan and colspan,it indicates a table cell can span multiple rows or columns.

For instance:

Each table cell can include list, table etc.

So now you know the basics, to learn more try looking at the source of any webpage. There are many different TAGS available to the web developer, and many ways they can be used. So just try experimenting and see what happens.

Additional Resources

W3 Schools HTML Tutorial

A Beginner's Guide to HTML

World Wide Web Consortium