Advanced HTML & CSS tutorial for tables, email links & lists

These are essential web page design features, but that you do not need to learn immediately.

References to further refinements and anything else that you may need can be found at:

• W3 Schools HTML Tutorial
• W3 Schools CSS Tutorial

HTML Lists

"Lists" are essential web page design features. In particular, it is becoming popular to use "list" code for the navigation links. However, this requires the skillful use of CSS to adjust margins, "list markers," and other behavior which can vary between browsers. Therefore, I suggest that you just have fun using lists anywhere you need to "make a point" in your text.

The three most important kinds of lists are:

• <ul>: An "un-ordered list." Each "list item" or <li> line is begun with a bullet as the "list marker." (You are now looking at an "un-ordered list." Using CSS, the bullet can be replaced with other symbols or with images.)
• <ol>: An "ordered list." Each "list item" is automatically marked with a number.
• <dl>: A "definition list." This is used to make a list of terms followed by their definitions.

<ul>
<li>Code for an un-ordered list.</li>
<li>Code for an un-ordered list.</li>
<li>Code for an un-ordered list.</li>
</ul>

The above source code will normally display as:

• Code for an un-ordered list.
• Code for an un-ordered list.
• Code for an un-ordered list.

<ol><li>Code for an ordered list.</li>
<li>Code for an ordered list.</li>
<li>Code for an ordered list.</li>
</ol>

The above source code will normally display as:

1. Code for an ordered list.
2. Code for an ordered list.
3. Code for an ordered list.

For the <dl> definition list, I prefer not to use the "normal" display mode. In my opinion, this tends to be ungainly. Therefore, on my beginner.css style sheet, I have specified:
dt, dd {display:inline}

This means that I can use the <dl> codes to display definitions right alongside (inline with) normal text. Or any way that I want. Therefore--if using my beginner.css style sheet--then for the <dl> to appear to be a typical "list" you will need <br /> line-break tags. A few &nbsp; spacers also may be needed to imitate the normal indentation.

<dl>
<dt>Bean.</dt><dd>A vegetable seed.</dd><br />
&nbsp; &nbsp; <dt>Apple.</dt><dd>A popular fruit.</dd><br />
&nbsp; &nbsp; <dt>Lettuce.</dt><dd>A leafy vegetable.</dd>
</dl><br /><br />

With beginner.css the above will display as:

Bean.

A vegetable seed.

   

Apple.

A popular fruit.

   

Lettuce.

A leafy vegetable.

Spam resistant email links

You might also want to write clickable "send email" links. The standard way to do this is:
<a href="mailto:myemail@address.com">Click here to send me an email.</a>
(Not recommended.)

The above works, of course. However, spam robots are trained to collect such emails. It is better to use Javascript. This alone is not foolproof--and neither are "spam filters." Never post your "private" email address on a website. I also "date" my public email addresses, and change them occassionally to slow down the spam. Here is how I do it. (Just change the bold letters to the appropriate parts of your email address.)

<script type="text/javascript">
<!--Spam resistant script courtesy of www.Kwik-n-free.com
var name = "myemail2007";
var domain = "address.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '<\/a>');
//--></script>

This displays as:

Using a <table> for the links margin

In ancient days, before CSS, a <table> was used to make a links margin. This is no longer needed. However, the Kwik-n-free website template still uses a table to add stability. Tables also have other uses. Therefore, you might as well take a brief look at how this is done.

Caution: one wrong move, or one missing slash (/) and your entire page can be put out of whack. But--after pulling on your hair a number of times--you may realize that you are having fun! Once you get the hang of it, tables are like piecing together a jigsaw puzzle.

table=table
tr="table row"
td="table cell"
valign="vertical alignment" (Also can use CSS "vertical-align:")
align="horizontal alignment" (Also can use CSS "align:")

<table><tr><td colspan="2" cellspacing="0" width="100%">
All code for the top of the page, including logo and title, etc., goes here. The colspan="2" means that this single cell will "span" the same width as the 2 cells or "columns" of cells that come below.</td></tr>

<tr><td class="sideleft" align="center" valign="top">
Any number of links can go here.
<a href="/web-design/page-a.php">page-a</a><br />
<a href="/web-design/page-b.php">page-b</a><br />
<a href="/web-design/page-c.php">page-c</a><br />
<a href="/web-design/page-d.php">page-d</a>
</td>
<td class="maintext" valign="top">
Any amount of main text can go here. Any amount of main text can go here. Any amount of main text can go here.</td></tr></table>

If you need to know more abut tables: click here for the W3 Schools Complete Reference for HTML Tables.