Contents
Home
Revision
Tables
Colours
Styles
Javascript

HTML (Revision)

Below are examples of the basic tags which we learnt in the first workshop. The fundamental principle of using tags, is that the tag must enclose the content, and must have a beginning and an end e.g. <tag> content</tag>. HTML tags are not case sensitive, so that <head> is the same as <HEAD>.

You can copy (<Ctrl-C>) and paste (<Ctrl-V>) the tag examples into your text editor to save time.

The Basic Skeleton

The basic HTML skeleton consists of the <html></html> tag enclosing the entire document, with separate head (document information) and body (document content) sections.

Document Type	<HTML></HTML>	(beginning and end)
Title	<TITLE></TITLE>	(place in head section)
Header	<HEAD></HEAD>	(descriptive info, such as title)
Body	<BODY></BODY>	(contains the text of the page)

Example

<html>
<head>
<title>Your title here</title>
</head>
<body>
</body>
</html>

Body Attributes

link=Colour (link color for document)
vlink=Colour (visited link color for document)
alink=Colour (active link color for document - Netscape)

Paragraphs and Headings

Font formatting can be combined within a single tag e.g.

<font face="verdana, arial, sans-serif" size="2"
    color="#ff0000">This is Verdana size 2 red text</font>

The hex values for non-dithering (safe) browser colours are given in the colour chart.

Paragraph	<P></P> Signifies a new paragraph. Although technically the closing tag is not required it is good form to use it.
Align Paragraph	<P ALIGN="LEFT\|CENTER\|RIGHT"></P>
Heading	<H1> <H2> <H3> <H4> <H5> <H6>
Align Heading	<H? ALIGN="LEFT\|CENTER\|RIGHT"></H?>
Division	<DIV></DIV>
Align Division	<DIV ALIGN="LEFT\|RIGHT\|CENTER\|JUSTIFY"></DIV>
<br>	Inserts a line break
Font Size	<FONT SIZE="?"></FONT> (ranges from 1-7)
Font Color	<FONT COLOR="#AAAAAA"></FONT>
Select Font	<FONT FACE="Arial"></FONT>
Block quote	<BLOCKQUOTE></BLOCKQUOTE> usually displays as indented text)
Subscript	<SUB></SUB>
Superscript	<SUP></SUP>

Examples

<hl align="center">My heading 1</hl>
<h2 align="left">My heading 2</h2>
<h3 align="right">My heading 3</h3>
<h4>My heading 4</h4>
<h5>My heading 5</h5>
<h6>My heading 6</h6>

Paragraphs and simple text effects

<p>Normal text</p>
<p align="left"></p>
<p align="right"></p>
<p align="center"></p>
<p align="justify"></p>

<b>bold</b>
<i>italic</i>
<u>underline</u>

<BLOCKQUOTE>Usually displays as indented text</BLOCKQUOTE>
<pre>Creates preformatted text</pre>
<tt>Creates teletype, or typewriter-style text</tt>
<cite>Creates a citation, usually italic</cite>
<em>Emphasizes a word (with italic or bold)</em>
<strong>Emphasizes a word (with italic or bold)</strong>
<font size="?"></font> (? is a number from 1 to 7)
<font color=?></font> (Sets font color, using name or hex value)

Lists

The main types of lists are unordered (bulleted), ordered (numbered) and definition (lists with descriptions of list items).

<ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul>	Creates a bulleted list item1 item2 item3
<ol> <li>item1</li> <li>item2</li> <li>item3</li> </ol>	Creates a numbered list item1 item2 item3
<dl> <dt>item1</dt> <dd>about1</dd> <dt>item2</dt> <dd>about2</dd> </dl>	Creates a definition list item1 about1 item2 about2

Links

Remember that a URL is an address such as http://www.users.totalise.co.uk/raoufallim

Link	<A HREF="URL"></A>
Link to location on another page	<A HREF="URL#***"></A>
Link to location on current page	<A HREF="#***"></A>
Link to Email	<A HREF="mailto:@"></A>
Define location	<A NAME="***"></A>
Display Image	<IMG SRC="URL">
Alignment	<IMG SRC="URL" ALIGN=TOP\|BOTTOM\|MIDDLE\|LEFT\|RIGHT>
Alternate	<IMG SRC="URL" ALT="***">
Dimensions (pixels)	<IMG SRC="URL" WIDTH=? HEIGHT=?>
Dimensions (% of page)	<IMG SRC="URL" WIDTH=% HEIGHT=%>
Border (pixels)	<IMG SRC="URL" BORDER=?>

HTML

NCSA primer: A straightforward account of HTML (all on one page if preferred) can be downloaded in .zip .pdf or .htm format.
htmlhelp.com: A well laid out site from the Web Design Group with excellent information for all grades of HTML scripters, and a good set of links to other resources.
WebMonkey: Hundreds of tutorials and links to other useful sites
Builder.com: This is a series of basic HTML tutorials

Design

Yale Style Guide: A slightly dogmatic, but very helpful introduction to design concepts on the internet.
WebPagesThatSuck: You can probably guess the style of this web site from its name. Aims to single out the worst, and the best design on the internet.

Cascading Style Sheets

w3: The CSS Specification from the horse's mouth
htmlhelp.com: A good place to get started with learning about cascading style sheets is http://www.htmlhelp.com/reference/css/.

HTML Workshop