back

More advanced features

Having mastered the basics, it is time to move on to more advanced features. The following will teach you how to:

• force line breaks
• introduce non-breaking spaces
• use entities for special characters
• link into the middle of pages
• use preformatted text
• flow text around images
• define clickable regions within images
• create tables
• use roll-overs and other tricks

How to force line breaks

Just occasionally, you will want to force a line break. You do this using the br element, for example when you want to include a postal address:

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>

The br element never needs an end-tag. In general, elements that don't take end-tags are known as empty elements.

How to introduce non-breaking spaces

Browsers automatically wrap text to fit within the margins. Line breaks can be introduced wherever space characters appear in the markup. Sometimes you will want to prevent the browser from wrapping text between two particular words. For instance between two words in a brand name such as "Coca Cola". The trick is to use   in place of the space character, for example:

Sweetened carbonated beverages, such as Coca Cola,
have attained world-wide popularity.

How to use entities for special characters

For copyright notices, or trademarks it is customary to include the appropriate signs:

Note HTML 4.0 defines ™ for the trademark sign but this is not yet as widely supported as ™

There are a number of other entities you may find useful:

And then, there are entities for accented characters and miscellaneous symbols in the Latin-1 character set:

You can also use numeric character entities for the greek letters and mathematical symbols defined in Unicode. For more details, take a look at the list specified in the HTML 4 specification. Note that the entity names for these characters aren't recognized in Navigator 4, so you are recommended to stick to the numeric entities instead.

Linking into the middle of Web pages

Imagine you have written a long Web page with a table of contents near the start. How do you make the entries in the table contents into hypertext links to the corresponding sections?

Let's assume that each section starts with a heading, for instance:

<h2>Local Night Spots</h2>

You make the heading into a potential target for a hypertext link by enclosing its contents with <a ID=identifier> .... </a>

<h2><a ID="night-spots">Local Night Spots</a></h2>

The name attribute specifies the name you will use to identify the link target, in this case: "night-spots". The table of contents can now include a hypertext link using this name, for instance:

<ul>
  ...
  <li><a href="#night-spots">Local Night Spots</a></li>
  ...
</ul>

The # character is needed before the target name. If the target is in a different document, then you need to place the web address of that document before the # character. For example if the document is in "http://www.bath.co.uk/", then the link becomes:

<a href="http://www.bath.co.uk/#night-spots">Local Night Spots</a>

In the future, you will eventually be able to define link targets without the need for the <a> element. The new method is much easier, as all you need to do is to add an id attribute to the heading, for instance:

<h2 id="night-spots">Local Night Spots</h2>

This method doesn't work for 4th generation or earlier browsers, so it should be used with care while these browsers are still in use!

Flowing text around images

With HTML, you can choose whether any given image is treated as part of the current text line or is floated to the left or right margins. You control this via the align attribute. If the align attribute is set to left the image floats to the left margin. If it is set to right the image floats to the right margin. For instance:

<p><img src="sun.jpg" alt="sunburst graphic"
width="32" height="21" align="left"> This text will be
flowed around the right side of the graphic.</p>

which renders as:

This text will be flowed around the right side of the graphic.

The following uses align="right"

<p><img src="sun.jpg" alt="sunburst graphic"
width="32" height="21" align="right"> This text will be
flowed around the left side of the graphic.</p>

which renders as:

This text will be flowed around the left side of the graphic.

To force rendering to continue below the floated image you can use the <br clear=all> element, for example:

<p><img src="sun.jpg" alt="sunburst graphic"
width="32" height="21" align="left"> This text will be
flowed around the right side of the graphic.<br clear="all">
This starts a new line below the floated image.</p>

which renders as:

This text will be flowed around the right side of the graphic.
This starts a new line below the floated image.

Tables

Tables are used for information as well as for layout. You can stretch tables to fill the margins, specify a fixed width or leave it to the browser to automatically size the table to match the contents.

Tables consist of one or more rows of table cells. Here is a simple example:

The markup for this is:

<table border="1">
<tr><th>Year</th><th>Sales</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>

The table element acts as the container for the table. The border attribute specifies the border width in pixels. The tr element acts as a container for each table row. The th and td elements act as containers for heading and data cells respectively.

Cell Padding

You can increase the amount of padding for all cells using the cellpadding attribute on the table element. For instance, to set the padding to 10 pixels:

<table border="1" cellpadding="10">

this has the effect:

Cell Spacing

By contrast the cellspacing attribute sets the space between the cells. Setting the cell spacing to 10:

<table border="1" cellpadding="10" cellspacing="10">

has the effect:

Table Width

You can set the width of the table using the width attribute. The value is either the width in pixels or a percentage value representing the percentage of the space available between the left and right margins. For instance to set the width to 80% of the margins:

<table border="1" cellpadding="10" width="80%">

which has the effect:

Text Alignment within Cells

By default browsers center heading cells (th), and left align data cells (td). You can change alignment using the align attribute, which can be added to each cell or to the row (tr element). It is used with the values "left", "center" or "right":

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th>Year</th><th>Sales</th></tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
<tr align="center"><td>2002</td><td>$36M</td></tr>
</table>

with the following result:

The valign attribute plays a similar role for the vertical alignment of cell content. It is used with the values "top", "middle" or "bottom", and can be added to each cell or row. By default, heading cells (th) position their content in the middle of the cells while data cells align their content at the top of each cell.

Empty Cells

One quirk is the way browsers deal with empty cells, compare:

with

The former occurs when a cell is empty:

<td></td>

To prevent this, include a non-breaking space:

<td>&nbsp;</td>

Cells that span more than one row or column

Let's extend the above example to break out sales by north and south sales regions:

The heading "Year" now spans two rows, while the heading "Sales" spans three columns. This is done by setting the rowspan and colspan attributes respectively. The markup for the above is:

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th rowspan="2">Year</th><th colspan="3">Sales</th></tr>
<tr align="center"><th>North</th><th>South</th><th>Total</th></tr>
<tr align="center"><td>2000</td><td>$10M</td><td>$8M</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$14M</td><td>$11M</td><td>$25M</td></tr>
</table>

You can simplify this by taking advantage of the fact that browsers don't need the end tags for table cells and rows:

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th rowspan="2">Year<th colspan="3">Sales
<tr align="center"><th>North<th>South<th>Total
<tr align="center"><td>2000<td>$10M<td>$8M<td>$18M
<tr align="center"><td>2001<td>$14M<td>$11M<td>$25M
</table>

Notice that as the heading "Year" spans two rows, the first th element on the second row appears on the second rather than the first column.

Borderless tables

These are commonly used for laying out pages in a gridded fashion. All you need to do is to add border="0" and cellspacing="0" to the table element:

This was produced using the following markup:

<table border="0" cellspacing="0" cellpadding="10">
<tr><th>Year</th><th>Sales</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>

If you leave out the cellspacing attribute you will get a thin gap between the cells, as shown below:

Coloring your tables

This page uses a style sheet to set the background colors for tables, with a different color for heading and data cells. The style rules I used are as follows:

table {
  margin-left: -4%;
  font-family: sans-serif;
  background: white;
  border-width: 2;
  border-color: white;
}
th { font-family: sans-serif; background: rgb(204, 204, 153) }
td { font-family: sans-serif; background: rgb(255, 255, 153) }

The last two lines above set the background color for th and td cells to given red/green/blue values. The numbers are in the range 0 to 255 (fully saturated).

Another way to set the background color is to use the bgcolor attribute. This works with nearly all browsers, and doesn't rely on style sheet support. The first step is to determine the hexadecimal values for the red, green and blue components of the color you wish to use. A convertor is included in the style page.

<table border="0" cellspacing="0" cellpadding="10">
  <tr>
    <th bgcolor="#CCCC99">Year</th>
    <th bgcolor="#CCCC99">Sales</th>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2000</td>
    <td bgcolor="#FFFF66">$18M</td>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2001</td>
    <td bgcolor="#FFFF66">$25M</td>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2002</td>
    <td bgcolor="#FFFF66">$36M</td>
  </tr>
</table>

Roll-Overs and other tricks

A little JavaScript can go a long way to enliven your pages. You will be shown below how to create "rollovers" where the appearence of a link changes as you move the mouse over it.

Roll-Overs

In the most common form, a roll-over consists of an image serving as a hypertext link. While the mouse pointer is over the image, it changes appearence to attract attention to the link. For example, you could add a glow effect, a drop shadow or simply change the background color. Here is an example:

<script type="text/javascript">
if (document.images)
{
    image1 = new Image;
    image2 = new Image;
    image1.src = "enter1.gif";
    image2.src = "enter2.gif";
}

function chgImg(name, image)
{
    if (document.images)
    {
        document[name].src = eval(image+".src");
    }
}
</script>

...

<a href="/" onMouseOver='chgImg("enter", "image2")'
onMouseOut='chgImg("enter", "image1")'><img name="enter"
src="enter1.gif" border="0" alt="Enter if you dare!"></a>

and here is what it looks like ...