Neil Macmillan & Associates HTML Refinements

	Linked Images	Bullet Styles	E-mail Link
Comment	Font Size	Extended Characters	Tables

The Webmaster's Bookstore

Using Images as Links

<A HREF = "http://www.mala.bc.ca"><IMG SRC="graphics/mallogo.gif" ALT="Malaspina University-College Logo" WIDTH=264 HEIGHT=123></A>
<A HREF = "http://www.mala.bc.ca"><IMG SRC="graphics/mallogo.gif" ALT="Malaspina University-College Logo" WIDTH=264 HEIGHT=123 BORDER=0></A>(For Right Hand Side Version)

Different Bullet Styles

Or we can use a use a small graphic

First item

Second item

Third item

<DL>
<DD> <IMG ALIGN=BOTTOM SRC="graphics/pencil.gif" > First item
<DD> <IMG ALIGN=BOTTOM SRC="graphics/pencil.gif" > Second item
<DD> <IMG ALIGN=BOTTOM SRC="graphics/pencil.gif" > Third item
</DL>

E-mail Link

<A HREF = "mailto:neil@nmacmillan.com">neil@nmacmillan.com</A>

The above line will produce the following effect: neil@nmacmillan.com

Clicking on the link launches an e-mail program with the correct e-mail address entered in the 'To' field.

Comment Line

<!---Disables a line or section of text or HTML Code--->

Use this to test alternative ideas on your page without destroying a previous version

Controlling Font Size

This is size 1 text
This is size 2 text
This is size 3 text -------------------- The normal, default size
This is size 4 text
This is size 5 text
This is size 6 text
This is size 7 text

Instead of using Numbers 1 through 7 consider using text sizes greater than or smaller than default. In this method, one size larger than default is <FONT SIZE = "+1">, while one size smaller than default is <FONT SIZE = "-1">

Two sizes larger than default is <FONT SIZE = "+2">,
while two sizes smaller than default is <FONT SIZE = "-2"> (which might not be readable at this size).

Extended Characters, Special Characters

Numerical Code Method

Entity Name Method

• IS0-8859 Table of numerical codes and entity names
• Numerical codes only

Tables

Declare your intention to create a table by writing:
<TABLE BORDER CELLPADDING=2>

The default value of BORDER is 1 and specifies the thickness of the table border and lines separating rows and cells. A borderless table can be made by setting BORDER=0 or leaving out the BORDER attribute altogether
(The bulleted list examples above are in a borderless table).
Cellpadding defines space between cell data and the edges of the cell.

The tag </TABLE> defines the end of a table.

The body of the table contains rows and cells within the rows.

To start a Table Row: < TR ALIGN=CENTER > (ALIGN can also = LEFT or RIGHT). VALIGN specifies vertical positioning within cells and can be TOP, MIDDLE or BOTTOM

Alignment commands can be in the <TR> tag if they are to apply to the entire row. Individual data cells can be given alignment attributes which apply to only that cell.

To create a Table Data Cell: <TD> Data Cell Content </TD>
To end a Table Row: </TR>

An example of a simple 3-row table with three data cells on each row:

HTML Markup for this Table

<TABLE BORDER=1 CELLPADDING=2>
<TR ALIGN=CENTER><TD>Cell 1</TD><TD>Cell 2 </TD><TD>Cell 3 </TD></TR>
<TR ALIGN=CENTER><TD>Cell 4 </TD><TD>Cell 5 </TD><TD>Cell 6 </TD></TR>
<TR ALIGN=CENTER><TD>Cell 7 </TD><TD>Cell 8 </TD><TD>Cell 9 </TD></TR>
</TABLE>

The same table with some cells spanning rows and columns, cellpadding and cellspacing each set to 4 and background colors assigned to two cells. Older browsers will not display the background colors:

HTML Markup for this Table

<TABLE BORDER CELLPADDING=4 CELLSPACING=4>
<TR ALIGN=CENTER>
<TD COLSPAN=2 BGCOLOR="#FFCCCC">Cell 1</TD>
<TD>Cell 2 </TD>
</TR>
<TR ALIGN=CENTER>
<TD>Cell 3 </TD>
<TD>Cell 4 </TD>
<TD ROWSPAN=2 BGCOLOR="#CCFFFF">Cell 5 </TD>
</TR>
<TR ALIGN=CENTER>
<TD>Cell 6 </TD>
<TD>Cell 7 </TD>
</TR>
</TABLE>