Beginners Guide to HTML

Getting started

Hypertext Markup Language (HTML) is a text based languages that formats pages for viewing in a 'Browser'. You can compose an HTML document using any simple text editor like 'Notepad' or 'Wordpad' providing the document is saved with an .html or .htm file extension.

HTML code consists of a series of instructions placed inside special brackets to make what are called HTML 'Tags' These are placed either side of the text or object you wish to place in your document.

The layout of the document is split into two distinct parts:

The HEAD comes first and is contained between <HEAD> and </HEAD> tags. It usually contains non-visible information about the web page like: content, title, author, keywords, styles and, in modern pages, Javascript functions.

After the HEAD comes the BODY which is contained between <BODY> and </BODY> tags. This is where all the content, text and images, is placed. The first <BODY> tag also contains page settings which set the background colour (bgcolor), background wallpaper (background) and colours for text, active hyperlinks (alink=), and visited hyperlinks (vlink=). (Notice American spellings for 'color' and later on 'center'. These must be adhered to.)

Other tags placed within the BODY tags determine how things appear on the web page. The main ones are listed here:

<FONT></FONT> is where typeface, style, size, colour and alignment are controlled and can contain other tags as follows:
- <B></B> for BOLD text.
- <I></I> for ITALIC text.
- <U></U> for UNDERLINED text.
- <P></P> for each new PARAGRAPH.
- <H1 - H6></H1 - /H6> for standard HEADINGS. (H1-largest, H6-smallest)
- <HR></HR> for a Horizontal RULE.
<UL></UL> and <OL></OL> define Unordered and Ordered Lists, like this list we are in now. With <Li> and </Li> defining each list item.
<TABLE></TABLE> denotes a TABLE which can have any number of ROWS and COLUMNS. Within a TABLE you have <TD></TD> and <TR></TR> tags which define each Table Data cell and each Table Row.
<FORM></FORM> tags contain information used in the layout of interactive FORMS which are used to Input data and information to the web site.

Other common tags used within the BODY of the document are:

<A HREF=> </A> which define Hypertext LINKS and ANCHOR points.
<APPLET> </APPLET> for inserting Java APPLETs. (small Java Functions)
<MAP> </MAP> for defining areas on an image MAP.
<IMG> is a tag that has no corresponding </IMG> tag and is used to place images on the page.
<BR> is also used on its own and is used to insert a line BReak.(carriage return)

Finally each web page has to start with an <HTML> tag at the very beginning and end with </HTML> placed at the very end.

A complete list of all the tags and their functions can be found on the HTML Reference Page.

Example page

Try setting up the following text in 'Notepad', (try 'copy' and 'paste' to save time), save it as testpage.html then open it in your Internet Browser to view the results. Try changing some of the values and observe what happens.

<HTML>
<HEAD>

<TITLE>HTML Testpage</TITLE>

</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#00CCFF" background="">
<H1>HTML Testpage</H1><HR>
<P ALIGN="CENTER"><FONT FACE="ARIAL" SIZE="2" COLOR="#0000FF">The following text is centralised on the page as denoted by the "CENTER" comment in the paragraph tag.</P>
<P ALIGN="left"><B>This line is a new paragraph in BOLD with LEFT alignment</B></P>
<P ALIGN="right"><I>This line is italic and aligned to the right</I></P>

</BODY>
</HTML>

End of Testpage

If you copy this page or type it afresh in 'Notepad' try changing things like font size (from 1-6), align settings (left, right, center) and colour. Try replacing "#0000FF" with "#FF0000" or "#00FF00" and see what happens. If these figures are totally confusing to you, click the link at the bottom of the page to Colour Hex settings.

Your finished HTML page should start out looking like this:

HTML Testpage

The following text is centralised on the page as denoted by the "CENTER" comment in the paragraph tag.

This line is a new paragraph in BOLD with LEFT alignment

This line is italic and aligned to the right

Visit the following pages to learn more:

HTML Reference Page
Colour Hex settings explained
Putting images on your web page
Guide to using Tables
Guide to using Forms
Cute HTML - a simple HTML text editor
Javascript - a simple guide
DHTML - guide plus examples