Eriginal   [:-)  Building a Website in XHTML 1.0 | Article 1.2
Article 1.2
    "The internet, is that thing still around?" Homer Simpson  
San Pedro 2207. Photo Credit: Mark O'Connor

  		 

Page 1 | 2 | 3 | 4 | 5 | 6

focus Introduction: Nesting Page Elements
In the previous article we discussed tags and containers (the page elements). One of the basic rules of writing valid XHTML 1.0 code is to not incorrectly nest elements, i.e. the document needs to be well formed.

Let's now look at some of the elements we are likely to use to display information within the <body> container of a web page. In doing this we will look at a specific example which is frequently misadvised in internet forums, this is how to deal with whitespace at the end of a form. This will introduce additional concepts to us such as styling and CSS.

focus Elements in the <body> Containter
We use elements in the body container to control how information is displayed. There are therefore elements which denote the begining of a paragraph <p>, the start of a table <table>, a bullet point item in a list <li>, a line or horizontal rule <hr /> (note the use of the backslash indicating it doesn't have a natural closing tag).

Lets introduce and look at some of the more common tags and the ones we will start to use in this and succeeding articles. If the tag in the table below doesn't include a backslash it means the tag has a natural closing tag, i.e. </p> to denote the end of a paragraph.

TagWhat does it do
<p> Denotes the start of a paragraph
<b> Emboldens text
<form> Denotes the start of a form
<input /> Denotes a form element, i.e. an input area for a user
<table> Denotes the start of a table
<thead> Denotes the header row of a table (table header), i.e. where the titles will be
<th> Denotes a table header, i.e. a column title
<tbody> Denotes the start of the body of the table (table body) where the data is
<tr> Denotes the start of a table row (table row)
<td> Denotes the start of a table cell (table data)
<div> A styling container
<ul> Denotes the start of a bulleted list (ul = unordered list)
<ol> Denotes the start of an ordered list, i.e as in a numbered list (ol = ordered list)
<li> Denotes the start of a list item. Can be included in either an <ul> or <ol> container.

There are reasonably natural and logical rules governing how these elements can be nested. If your code does otherwise it will contain errors. At its simplest lets look at the natural nesting of a table

focus Nesting in a Table
The natural nesting in a table is as follows, using a table with two columns and two rows of data.

<table>
 <thead>
 <tr>
  <th>  Title A   </th>
  <th>  Title B   </th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>  Cell 1 Column A   </td>
  <td>  Cell 1 Column B   </td>
 </tr>
 <tr>
  <td>  Cell 2 Column A   </td>
  <td>  Cell 2 Column B   </td>
 </tr>
 </tbody>
</table>

Using the table example we can easily see how natural nesting works, for example the end of a table row will not appear before the end of a table cell. Putting it simply containers need to be closed in the same order in which they were opened.

Containers need to be closed in the same order in which there were opened, and all containers need to be closed.

focus Nesting Problems
Nesting errors typically arise from three sources

  1. Style elements not separated from the content by using CSS stylesheets. This can result in a lot of tags in the page which are difficult to control and ensure they close in the right order.
  2. Tables being used to control design and form elements included within the table
  3. Programs to build websites are out of date and don't as a matter of course close all the containers

focus CSS (Cascading Style Sheets)
At this point we will introduce the concept of styling as we need to use it in our example to emphasise the result.

CSS controls the format of the web page content such as the font used, the size of the text, the background colors etc. As most web sites use uniform styling throughout their pages it makes sense for the CSS style to be written only once but used by all the pages. Some key benefits are

  • Style is separated from content
  • There is only one file where global changes can be made to the whole website.
  • Smaller web pages which are quicker to load into web Browsers.
  • Easier to manage, administer and change web sites.
  • Easier to validate and optimise your code to enable successful indexing by Search Engines

A useful and tidy convention to follow in organising your web site is to make sub folders. One of these subfolders will contain your CSS file. Your structure might look like the example below where the style folder contains your CSS file; the scripts contains your external javascript or CGI files; your image folder contains any photographs or images used on your web site.

folder style
folder scripts
folder images

So whenever we want to use a style to format our web page we simply include a link to the CSS file between the head tags of our web page. If we save or name our CSS file as mystyle.css we will include it in our web page by using the following syntax

<link rel="stylesheet" type="text/css" href="style/mystyle.css" />

I find the best place to devise a stylesheet is with a text editor. When you're ready to save your work just remember to save the file as a .css file which you can do by changing the save file as type to All and enclosing the filename in quotes as in "mystyle.css".

We will return to styling in a future article but for now its useful to understand the basic syntax, and it's really very simple. Essentially what we style are our tags such as a paragraph <p>. So in our CSS file we do two things

  1. Say which tag or container we are styling
  2. List the style or formatting attributes we want to apply to that container

We enclose the style attributes between curly braces { }. Lets apply some styling to a paragraph

p {
font-family: arial, verdana, helvetica, monospace;
color: #000080;
font-size: 70%;
letter-spacing: 1.5pt;
}

The above style applied to our paragraphs will make the font face Arial, the color of the text blue, the text size will be approximately 11px (Browser defaults are normally 16px. We reduce the size to 70% to ensure relative text sizing) and letter spacing at one and a half points.

Lets now incorporate this styling into our example.

As we're doing this example on the fly without saving it to the server we will add this style element to the head section of the document as an alternative to including the attributes in a separate file. To do so we need to include the formatting between <style> tags. Click view below to see the difference.


focus Form Nested in Table
Although tables should be used for data rather than styling it is still very common to find them in design to control layout as they are very easy to manipulate. We use them in our example to illustrate nesting errors and how to write the code properly so that it validates as XHTML 1.0.

First lets add some style to our table cells and give them a border.

td {
border: 1px solid #8690ab;
padding: 0px;
border-spacing: 0px;
font-family: arial, verdana, helvetica, monospace;
color: #000080;
font-size: 70%;
letter-spacing: 1.5pt;
}

Lets now add in a table to our example. We saw how to do this earlier.


You can see that our exmple page is already quite long. This would shrink considerably were we to take out the style elements and save them in a separate file. The less code there is on the page the easier it is to see what is going on. You have more visibility. To prevent creating one of the longest pages in the world our next examples of nesting errors will be done as snapshots.

focus WhiteSpace in a Form
Form elements can be used for navigation. The most common type is a jump box, like the one we use at the top of our web pages. If the jumpbox is nested in a table it can spoil the overall style as the bottoms of forms are naturally padded out with whitespace. Consider this example where the form is correctly nested in the table cell but includes annoying whitespace.

Navigation

 

A typical solution is to remove the whitespace by abandoning natural nesting rules and placing the form tag outside of the <td> closing tag, as in this example

Navigation

 

The whitespace is gone and visually the table looks a lot better, however the code is incorrect. The page will not validate and may create some accessibility issues for users.

The solution is to use CSS to control the style and adhere to the natural rules in nesting tables as in this example

Navigation

 

With CSS we can simply state that the bottom margin of the form will be 0px and this gets rid of our whitespace and ensures that our code is still vaild XHTML 1.0. The snippet below shows the code.

<td>
<form name="jumpbox" action="#" style="margin-bottom: 0px">
<select name="jump"
<option selected="selected">Select a subject...... </option>
</select>
</form>
</td>

focus Next Article
In the next article we will look at scripts, typically javascripts. The internet is full of free codes you may like to add to your web page to make it more interactive, but if you include them there are two things you need to consider

  1. Will the script impact accessibility
  2. How to include the code and still have a valid XHTML 1.0 document

We will return to CSS in another article and work through some of the nesting rules such as not placing a table within a paragraph container etc. Until then.............

Mark O'Connor 12th May, 2006

Page 1 | 2 | 3 | 4 | 5 | 6

<articles>