HTML for Absolute Beginners, by Jon Storm.
Go to : Beginner's HTML Index; Jargon dictionary; Ultraspace; Jon Storm.

Useful HTML tags

On

Off

What it does

<B>

</B>

Make text bold

<I>

</I>

Put text in italics

<U>

</U>

Underline text (not recommended because it looks too much like a link)

<PRE>

</PRE>

Treat Returns as Returns (rather than spaces as in normal HTML). Often also uses different font.

<CENTER>

</CENTER>

Centres text (must use US spelling)

<H1>, <H2>, <H3> (1 is biggest)

</H1> etc

Creates a heading
     

<FONT COLOR="colour name" (or hex number)>

</FONT>

Change the text colour (must use US spelling)

<FONT SIZE=number> 1-7, 7 biggest

</FONT>

Change the text to given size

<FONT SIZE=+1, +2, -1, -2 etc;

</FONT>

Make text 1 or 2 sizes larger or smaller (has no effect if that would be bigger than 7 or smaller than 1)

<FONT FACE="font name">

</FONT>

Changes the typeface (often has no effect)
     

<P>

-

Start new paragraph

<BR>

-

Move onto a new line

<BR CLEAR=ALL>

-

Move to first line below graphic
     

<A HREF="web address">link text

</A>

Creates a link

<IMG SRC="filename">

-

Displays an image

Important attributes

Attributes are included inside the angle brackets < > of the tag they affect, usually to modify how it will appear. Occasionally the tag doesn't work without them. One obvious example of this is a link : <A> needs the HREF attribute to tell it where the link is to go to, eg <A HREF="http://www.jonstorm.com">Jon Storm's website</A>. Certain tags, like <FONT> for example, often have multiple attributes, separated by spaces. It doesn't matter which order you put attributes in.

This is by no means a complete list of attributes, just a few particularly useful ones.

For a heading : ALIGN="right" ("left" is the default, so is rarely included).

For an image : ALIGN="left", "right", "bottom", "top" (image position - and "left" or "right" causes the text to wrap around the picture); WIDTH=width in pixels, HEIGHT=height in pixels; ALT="text" (description of image). If the image is part of a link, BORDER=0 removes the highlight border around the image. Ideally you should always provide WIDTH, HEIGHT and ALT attributes for every image : <IMG SRC="mypic.jpg" ALIGN="right" HEIGHT=300 WIDTH=200 ALT="A portrait of me">.

Changing the whole page

The overall look of your page is mostly changed by adding attributes to the <BODY> tag. Lots of them. They include BGCOLOR="colour name or hex code" (change the colour of the "paper"); TEXT="colour name etc" (change the colour of the text); LINK="colour" (change the standard link colour); VLINK="colour" (change the colour of visited links); ALINK="colour" (change the colour of the currently active link); BACKGROUND="image file name" (use an image for the "paper" instead of a colour).

If you use BACKGROUND, you can optionally add BGPROPERTIES="fixed", which makes the text scroll against a fixed image, rather than the background image scrolling with the text. (See the Ultraspace main page for an example of the BGPROPERTIES attribute at work).

You don't have to add all these attributes to the <BODY> tag, but they are very useful for creating your very own individual style. Just make sure you pick combinations which are visible - for example, black text on a black background is a bad idea!

Copyright © Jon Storm 2000, 2001.

Go to : Beginner's HTML Index; Jargon dictionary; Ultraspace; Jon Storm.