HTML: QuickIntro - an introduction to Hypertext Markup Language

All HTML documents should declare a Document Type Definition (DTD). There are 3 choices: Strict, Transitional and Frameset. The first two are demonstrated below.

Each HTML document should also define a character encoding set. Demonstrated here are 2 choices: 'iso-8859-1' for Western European languages and 'utf-8' Unicode worldwide for truly global coverage of language character sets.

1.

Simple basic page template: a 'Transitional' HTML template.

Declare a Document Type Definition (DTD): 'HTML 4.01 Transitional'.

Defining a suitable character set: 'iso-8859-1' (Western Europe).

2.

Simple basic page template: a 'Strict' HTML template.

Declare a Document Type Definition (DTD): 'HTML 4.01 Strict'.

Defining the character set: 'utf-8' (Unicode, worldwide).

Both the above templates include meta 'description' and 'keywords' content which can be incorporated into a search engine optimization (SEO) strategy.

3.

Headings and paragraphs. Use of basic HTML elements including headings <h1></h1> to <h6></h6> and paragraphs <p></p>.

Adding attributes.

4.

List types. Further use of basic HTML elements.

Example of nesting elements in an unordered list: <ul> with <li>.

Examples of more list types and nesting lists within lists.

Ordered list <ol> with <li> and a definition list <dl> with <dt> and <dd>.

This short introduction page to HTML cannot possibly give you examples of the use of all the elements and their attributes. What this page does do however is give you an idea of how the elements are used and the format of the syntax for their use.

For the full set of elements available in HTML 4.01 see the HTML 4.01 element and attribute reference.

5.

Building a table. The use of tables for layout purposes has fallen out of favour (favor) but they have a legitimate and traditional use in display and layout of data.

Example of using a simple table to display data.

Use of <table>, <caption>, <tr>, <th>, <td>, together with the attributes 'cellspacing', 'cellpadding', 'rowspan', 'colspan'.

6.

Working with images. Use of the <img> element.

Setting a placeholder for an image: defines the size of the image within the page before the image has loaded. This allows the page to format correctly around the loading image thereby any text surrounding the image loads to its correct position on the page and is not forced into a new position to make space for a loading image. A courtesy to a visitor if they are reading the text while waiting for the image to load.

Use of the 'alt' and 'title' attributes to create a text description if the image fails to load and tooltip text when the mouse cursor hovers over the image.

7.

Hyperlinks. Standard text links using the <a></a> element.

How to create a link using:

1. a full absolute path

2. an absolute path if the resource is on the same domain

3. a relative path

4. an example of use of '../' to access a resource in a higher directory (folder)

5. an internal link to an anchor or jump point within a web page

6. a link that opens a web page in a new window

7. a link incorporating an image

8. open an email client application and add subject line to email.

View a table of special characters for (X)HTML code markup.

These values must be used for displaying special characters when writing XHTML (HTML) code markup. Example of special characters include: & " < > © ® ½.

For example if I wish to place in a web page the words: 'lost & found' which includes the use of the special character '&' then I will need to write that character with its equivalent numeric entity value: &#38; in the source code of the document.

Table includes entities 34, 38, 60, 62 and entity references for ISO 8859-1 characters: 160 to 255 inclusive. Selection of other special characters from utf-8.

8.

Summary. A web page that incorporates the above in one demonstration page.