Here marks the top of the page.
<A NAME = "TOPOFPAGE"></A>



Hello Joe! So, anything I type in here just appears? And if there is no paragraph break (<BR>) then it's all on the same line. Note that this is sometimes better because the user can resize the browser window and the text will flow on.

Unless, of course I decide to use the <PRE> statement.
This is where the text goes      exactly where I type it within notepad.
And I dont even have to specify any line breaks. This style is fixed width 
within the browser. Hey look, you may even have to resize the browser 
window to read this part................depending on the browser, this could be annoying.

BGCOLOR= and BACKGROUND= appear inside a "BODY" statement.
See the colour chart document for different colours.

<BODY BACKGROUND="swirlies.gif"BGPROPERTIES=FIXED>

BGPROPERTIES=FIXED means the bground image does not scroll, but this only works with Internet Explorer.

Something Bold!
Something Italic!
Something Underlined.
Combined underlined, bold and italic.
Note - these are nested, ie: U B I -content- /I /B /U

A very useful type of text effect is the mono-spaced font, or Typewriter Text

Font Sizes
<FONT SIZE = "x"> Try different font sizes e.g. x </FONT>
Try different font sizes e.g. 1
Try different font sizes e.g. 2
Try different font sizes e.g. 3
Try different font sizes e.g. 4
Try different font sizes e.g. 5
Try different font sizes e.g. 6
Try different font sizes e.g. 7
Looks like they only go up to size 7.

<FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">

Hedge your bets by specifying more than one font. The computer will choose the first available one.
The most common fonts are:
(<CENTER> </CENTER>)

Andale,
Mono,
Arial,
Arial Black,
Comic Sans MS,
Courier New,
Georgia,
Impact,
Times Rew Roman,
Trebuchet MS,
Verdana,
If these fonts are not showing up then it's because you haven't got them loaded.

Note that the first statements (HTML, HEAD, BODY) are TAGS
and the FONT (FACE=, BGCOLOR=, BACKGROUND= and SIZE=) statements
are an ATTRIBUTE which goes within a TAG.

Also, regarding syntax - HTML is not case sensitive but it is a good habit to use CAPS for TAGS and attributes. Also, put values in inverted commas - eg: FACE="helvetica" Number values can also be in "".

Try the font COLOR= "value". e.g. #FF0000
Try the font COLOR= "value". e.g. #FFFFFF
Try the font COLOR= "value". e.g. #00000

Headings

Something really cool H1

Something really cool H2

Something really cool H3

Something really cool H4

Something really cool H5

Something really cool H6

You don't need a <BR> after each heading.

Aligning headings

<H2 ALIGN="center">insert text here</H2>

THIS IS ALIGN="left"

<H2 ALIGN="center">insert text here</H2>

THIS IS ALIGN="center"

<H2 ALIGN="right">insert text here</H2>

THIS IS ALIGN="right"

If you need to change the colour of the body text, link, visited link or active link, use:
<BODY TEXT="#000000" LINK="#00FF66" VLINK="#00BB33" ALINK="#00CCFF"> </BODY>

Paragraphs

<P ALIGN="CENTER">
Paragraphs need to have line breaks,
but you can use them for aligning whole blocks of text.
Note: you do not need to have a <BR> before or after a paragraph.
</P>

<P ALIGN="JUSTIFY"> Just in case your browser window is really wide, here is some jabberwocky to fill it out so that you get the idea of the JUSTIFY function. Tremulus rures suffragarit zothecas. Cathedras corrumperet quinquennalis chirographi Quamquam perspicax oratori agnascor concubine. Adlaudabilis cathedras deciperet zothecas Semper quinquennalis quadrupei corrumperet Aquae Sulis. Incredibiliter adlaudabilis matrimonii praemuniet adfabilis agricolae. Aegre quinquennalis cathedras vocificat matrimonii Utcunque ossifragi imputat concubine. Ossifragi insectat quadrupei Semper chirographi corrumperet fragilis saburre Et lascivius apparatus bellis comiter praemuniet bellus umbraculi.
Plane utilitas agricolae corrumperet syrtes. Agricolae imputat lascivius cathedras. Concubine lucide insectat zothecas Quod apparatus bellis aegre spinosus fermentet cathedras. Octavius comiter adquireret bellus catelli Semper adlaudabilis chirographi deciperet saetosus quadrupei. Augustus satis spinosus corrumperet adlaudabilis apparatus bellis Utcunque umbraculi fermentet Caesar Et aegre tremulus concubine verecunde insectat verecundus chirographi. Satis utilitas syrtes agnascor fragilis chirographi. Fiducia suis incredibiliter infeliciter suffragarit rures Quod Octavius praemuniet concubine.
</P>

Here is a list of special characters which come in handy when typing them would confuse the browser:
They should be typed in lower case.

     &nbsp;     non-breaking space
     &lt;       < less-than symbol
     &gt;       > greater-than symbol
     &amp;      & ampersand
     &quot;     " quotation mark
     &shy;       soft hyphen

There are other special characters too.

Let's check out images now.

There is supposed to be an image here! It's called chef.

<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101
SRC stands for source, and tells you the name, location and size of the image
SRC="../images/chef.gif" means that the image is one folder up and then another folder down in the images directory.

There is another way that this can be done. All references to images can have as their source the complete URL. For example:
http://www.hair.net/~squiggie/LottzaStuff/other/images/chef.gif
This is known as absolute addressing. Relative addressing is quicker and easier for you, but absolute addressing is used when the image is on another server.
Note: Because of UNIX servers, always use lower case names for file and folder names. And - do not use spaces in the names.

You dont have to specify the pixel dimensions but it speeds up display of pages because the browser doesn't have to wait for the image to load before it displays the rest of the page.

Also using this method you can use a 1x1 pixel dot to create any size rectangle.

The ALT="Chef" command goes within the IMG command to specify alternate text instead of the image.

Links

Here is the standard format for inserting a link.
"A" means Anchor.

<BODY>
Go to <A HREF="http://www.yahoo.com/">Yahoo!</A>

</BODY>

Email Links

Create links to email in a similar way as to a web site.
<A HREF="mailto:dm@ausisp.com">Mail!</A>

This results in:
Send me Mail!

Most good email programs should support the addition of a ?subject to the resulting email message:
<A HREF="mailto:dm@ausisp.com?SUBJECT=Enquiry">Mail!</A>

This results in:
Send me Mail! Go on - click on it now!

Make an image link to a website!

Here is the source to make the chef image link to the netscape homepage:

<A HREF="http://home.netscape.com/"><IMG SRC="chef.gif" WIDTH=100 
HEIGHT=80></A>

Go to

You can remove the blue border on the image when you click on it by adding BORDER=0 at the end but still inside the above IMG SRC tag. (After the size specification.)

Download a document.

To download a document, just link to it:

<A HREF="myresume.doc">Download my 
resume</A>
<BR><A HREF="mybio.doc">Download my 
autobiography</A>

Download my resume

Make link open in a new window.

To do this, just add TARGET="_blank" to the HREF tag of your link. E.g.
< A HREF = " http://www.google.com " TARGET = " _blank " > Open Google < /A >
Open Google

GIF Optimiser.

GIF Optimiser is an online tool to reduce the size of GIFs.
Open GIF Optimiser

Make thumbnail images.

To reduce display time, create smaller versions of the images you want to display (less colour depth, less size) and use them as links to your real (larger images). Make the link open in a new window as per above instructions.

Some browsers....

Some browsers will interpret a carriage return (in the source code) in between images as a space when displayed.
So, depending on which browser you use, these three images may or may not have a space in between them.

...and these will be flush up against each other:

Linking to specific places within documents

This will link you to a place within the same html document:
<A HREF="#TOPOFPAGE">here</A>
Click here to go to the top of the page.

You can also link to places in other documents (or the same document)like this:
<A HREF="intro.html#TOPOFPAGE">here</A>
Click here to go to the top of the page.

You have to put a:
<A NAME = "placename"> Optional text <BR></A>
in the place where you want to go to in the document. The text in that place is optional.

Design note

The more you fiddle with exact layout, the less dependable that layout will be. Your finely crafted page may fall apart for more people than you realize. Web page layout is not an exact thing even under the best of circumstances... keep it loose, keep if flexible, test your pages with a couple browsers and at a few resolutions.

Block quote

Check out the BLOCKQUOTE /BLOCKQUOTE tag for easy indenting:

WE THE PEOPLE of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

Ordered and unordered lists

An unordered list starts with a < UL >, and ends with a < /UL >
Each list item begins with a < LI >
For an ordered list you use a < OL, /OL > instead of the < UL, /UL >

An unordered list

Hotdog
Hamburger
Milkshake

An ordered list

Hotdog
Hamburger
Milkshake