Webpage Creation and XHTML: Session II

This session, we will go over some more features of XHTML. The following will teach you how to:

1. Force line breaks
2. Introduce non-breaking spaces
3. Use entities for special characters
4. Link into the middle of pages
5. Use preformatted text
6. Flow text around images
7. Create tables

In this session we will be using Dreamweaver, a popular web-editing program to implement these more advanced webpage elements. You can download a trial version of Dreamweaver from http://www.adobe.com/downloads/.

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>J.W. England Library<br />
University of the Sciences in Philadelphia<br />
600 South Forty-third Street<br />
Philadelphia, PA 19104-4495</p>

How to introduce non-breaking spaces

Browsers automatically wrap text to fit within the margins. Sometimes you will want to prevent the browser from wrapping text between two particular words. For example, when you have several words that you do not want broken up when the browser wraps the text.

Non-breaking spaces ( ) can be introduced wherever space characters appear in the markup:

I do not want the following three words broken up when the text is wrapped: Sweet and Sour.

How to use entities for special characters

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

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:

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>This is the Second Section</h2>

You make the heading into a potential target for a hypertext link by enclosing its contents with

<a name="identifier"> .... </a>

For example:

<h2><a name="sharks">All about Sharks</a></h2>

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

<ul>
  <li>Introduction</li>
  <li>About Whales</li>
  <li><a href="#sharks">About Sharks</a></li>
  <li>About Dolphins</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.usip.edu/index.html", then the link becomes:

<a href="http://www.usip.edu/index.html#sharks">About Sharks</a>

Preformatted Text

One of the advantage of the Web is that text is automatically wrapped into lines fitting within the current window size. Sometimes though, you will want to disable this behavior. For example when including samples of program code. You do this using the pre element. For instance:

<pre>
    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }
</pre>

Which renders as:

    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }

Note that all line breaks and spaces are rendered exactly as they appear in the HTML.

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="sample.jpg" alt="Photo of Pharmacist" align="left" height="146" width="200" /> 
This image will display to the left, while the text will be flowed around the right side of the image.</p>

which renders as:

This image will display to the left, while the text will be flowed around the right side of the image.

The following uses align="right"

<p><img src="sample.jpg" alt="Photo of Pharmacist" align="right" height="146" width="200" /> 
Now the text will be flowed around the left side of the image.</p>

which renders as:

Now the text will be flowed around the left side of the image.

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

<p><img src="sample.jpg" alt="Photo of Pharmacist"
width="200" height="146" 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>Color</th></tr>
<tr><td>2005</td><td>Green</td></tr>
<tr><td>2006</td><td>Blue</td></tr>
<tr><td>2007</td><td>Yellow</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.

In Dreamweaver (and other visual editors), creating tables is much easier as you do not have to hand-code your tables.

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">

In Dreamweaver, simply enter a value in the CellPad field of the Properties window for your table.

This has the effect:

Cell Spacing

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

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

In Dreamweaver, enter a value in the CellSpace field of the Properties window for your table.

This 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%">

In Dreamweaver, enter a value in the W (width) field of the Properties window for your table and change the mode to percentage (%).

This 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>Color</th></tr>
<tr align="center"><td>2005</td><td>Green</td></tr>
<tr align="center"><td>2006</td><td>Blue</td></tr>
<tr align="center"><td>2007</td><td>Yellow</td></tr>
</table>

In Dreamweaver, select the column, then choose "Center" in the Horz field of the Properties window for your table.

This has thefollowing 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.

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%">
  <tbody>
    <tr align="center"><th rowspan="2">Year</th><th colspan="3">Color</th></tr>
    <tr align="center"><th>Green</th><th>Blue</th><th>Yellow</th></tr>
    <tr align="center"><td>2005</td><td>99</td><td>55</td><td>66</td></tr>
    <tr align="center"><td>2006</td><td>120</td><td>25</td><td>88</td></tr>
  </tbody>
</table>

In Dreamweaver, you can simply select the two cells you would like to merge and click on the Merge Cell button in the Properties window for your table.

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>Color</th></tr>
<tr><td>2005</td><td>Green</td></tr>
<tr><td>2006</td><td>Blue</td></tr>
<tr><td>2007</td><td>Yellow</td></tr>
</table>

In Dreamweaver, enter a "0" in the Border field of the Properties window for your table.

If you leave out the cellspacing attribute, the default border is set to be 1 pixel wide and you will get a thin gap between the cells, as shown below:

Web page created by: Eva Agbada, MS/MSIS
J.W. England Library
University of the Sciences in Philadelphia
Last updated:3/17/2008