HTML - what it is and how to use it

HTML - summary notes

The standard is now XHTML: http://www.alistapart.com/stories/betterliving/

An HTML document is one that has been divided into its logical parts (i.e. headers, paragraphs, lists, quotes) and those parts have been 'marked up' with short labels. The labels are called tags. The combination of tags and the text within those tags is called an HTML 'Element'.

Most structural 'elements' of an HTML document are enclosed within two tags - an opening tag and a closing tag. It is a good idea to think of elements as containers, e.g the tells that browser that this is the start of a paragraph and tells the browser that this is the end of the paragraph.

Why is labelling the structure of a document a good thing?

Documents 'marked up' correctly will work for people using a variety of different browsers and computers. The logical structure of the document will always be displayed correctly - but the presentation (i.e. the look of the page) can be left to the browser or a style sheet.

HTML documents are divided into two main sections; the HEAD section and the BODY section. The HEAD section contains META information; which is information about the document.

The BODY section contains the content of the document, i.e. the bits that are displayed by the Web browser. The most important META information is the title of the document - as represented by the TITLE element.

The entire document is enclosed (or contained) within HTML tags; an opening <HTML> and a closing </HTML>.

Here is a summary:

<HTML> <HEAD> <TITLE> The title of your document goes here </TITLE> </HEAD> <BODY> The content of the document goes here </BODY> </HTML>

Block and Inline Elements

Elements in the body part of the document can be divided into 'Block' elements and 'Inline' elements.

Block elements - defined distinct blocks of text, typically preceded and followed by a line break - and stretching the full width of the page. Paragraphs, headers, and blockquotes are block elements.

Inline elements are elements that appear within the flow of the text, e.g. STRONG, A, EM, IMG.

Some common HTML Elements

Paragraphs: some text

Headers: <Hn>some text</Hn> were n = a number 1 to 6.

Blockquotes: <BLOCKQUOTE>some text</BLOCKQUOTE>

Links: <A HREF="url">link text</A>

Images: <IMG SRC="url">

Unordered Lists: <UL> <LI>list text</LI> </UL> <OL> <LI>list text</LI> </OL>

Some common HTML elements and their attributes

BODY tag attributes.

BGCOLOR="hexidecimal colour code or colour name"

BACKGROUND="url"

TEXT="hexidecimal colour code or colour name"

LINK="hexidecimal colour code or colour name"

VLINK="hexidecimal colour code or colour name"

An example:

<BODY BGCOLOR="#FFFFFF" BACKGROUND="background.gif"

TEXT="#000000" LINK="blue" VLINK="purple">

Websafe colour picker: www.catnmoose.com/wsc.shtml

IMG tag attributes.

ALIGN="left or right"
WIDTH="number of pixels"
HEIGHT="number of pixels"
ALT="alternative description"
BORDER="0 for no border or thickness in pixels"
VSPACE="number of pixels"
HSPACE="number of pixels"
TITLE="number of pixels"

An example

A simple guide to HTML: http://htmlguide.alphalink.com.au/htmlguide/

see W3c's HTML 4 additions: http://www.w3.org/WAI/References/HTML4-access see http://www.w3.org/MarkUp/Guide/ see http://www.w3.org/TR/REC-html40/

[ Register for updates ]