research diary
edim 2002
Week 13:
Building version two template and XHTML 1.0
Prior to beginning the web diary a version of the finished web site, version 1, was completed using frames. This site was designed using a template from a web site that I previously designed and contained many problems; it is an example of bad design.
Version 2 of the Word Up web sites uses tables for page layout. An attached
Cascading Style Sheet handled text formatting and background colours for
cells. The pages conform to the latest web page design goal, XHTML. Attempting
to build a web site using valid XHTML 1.0 code presented a number of challengers.
1. Viewing XHTML files locally on a browser.
The World Wide Web Consortium (W3C) offers an online validation service. Users can upload files to check for valid code. For a page to be validated it has to have the correct Document Type Definition (DTD) and name space convention. An example of the correct code, which appears at the very beginning of a XHTML page, is show below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
Once the correct code is insert however it cannot be viewed locally from a web browser. The browser can’t phrase the document in other words they do not know how to mark up file. If the document were online the browser would be able to access the dtd file on the w3c web site (http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd) and display the file correctly.
This is a real pain for developers I avoided the problem by removing the XHTML DTD header and selected XHTML strict from the DTD pull down menu on the validation site (see figure 1). The service then checks for validation with the implied DTD. Once the site is finally ready for public release the DTD headers could be inserted and the documents put online.
figure 1. W3C validation service allowing users to select DTD.
2. Tables in XHTML
A table controls the page layout in version 2. In XHTML tables are constructed very differently to HTML 4.0. Controlling the width of a table column was previously implemented by added a width value to a table data cell (TD). The following code shows the old way of marking up a table.
<table width = "100%">
<tr>
<td width="20%">left column</td>
<td width= "80%">right column</td>
</tr>
</table>
The width of the left column will be 20% and the right column will be 80%. In XHML applying a width value to a TD tag is illegal, the page won’t validate. New tags <colgroup> and <col> now control column widths. Below is one method for constructing a two-column table.
<table width = "100%">
<colgroup span= "2">
<col width= "20%"/><col width= "80%"/>
</colgroup>
<tr>
<td>left column</td>
<td>right column</td>
</tr>
</table>
This is the correct code but Macromedia Ultra Dev and Netscape 4.7 on a Mac don’t render the table in the desired way. Netscape 4.7 rendered the tables with incorrect column widths and fails to recognise styles add to <col> tags. For example <col width= "20%" class= "blue"> where "blue" defines the background colour blue, should render the whole column with a blue background. Only adding the styles to the <td> tags themselves produced the desires background style.
<td class= "blue">left column</td>
Internet Explore 5.0 rendered the layout table and a scaleable table using
percentage values was created for the whole site.
<table width="100%" border="0" cellspacing="0"
cellpadding="5">
<colgroup>
<col width="10%" class="leftmargin"/>
<col width="5%"/>
<col width="5%"/>
<col width="60%"/>
<col width="20%"/>
</colgroup>
<tr>
<td> </td>
<td> </td>
............
Break return problem in Netscape 4.7
XTHML doesn’t allow open tags. All tags should be closed such as <p>text
etc</p> or have a closing symbol inserted in the tag itself. So <br>
in html 4.0 would be marked up as <br/> in XHTML. Netscape 4.7 however
has a hard time dealing with <br/> and ignores them.
Research Document<br/>
EDIM<br/>
Victoria University.
Returns
Research Document EDIM Victoria University.
All the text is rendered on the same line.
To construct the home page which is a list of links to articles and poems.
I fell back on using a definition list.
<dl>
<dt><a href="ruddock.htm">Ruddock Detained On Temption
Island.</a></dt>
<dd><div><img src="../images/ruddock.jpg" width="82"
height="83" alt="Philip Ruddock behind bars"/></div><b>Minister
caught illegally entering pleasure playpen.</b>….</dd>
<dd> </dd>
<dt><a href="populate.htm">Howard Endorses Lesbian
IVF plan.</a></dt>
<dd><b>"We must populate or perish."</b>
<br/>
In a radical policy back flip....
</dd>
.....</dl>
I could deal with some rendering problems on the home page but other content
had to be rendered precisely. Word up feature poems that would make so sense
rendered on one line. The other trick I pulled out of the bag was using
the old <pre> tag for inserting preformatted text.
<pre class="poem">Acid fumes are bad today
much worse than yesterday.
I’m not an expert from the EPA.
But fuck me,
when I can taste it?!!!
</pre>