MA foundation

Creating webpages using XHTML (part 2)

Simon Mahony CCH

Adding tables

Structure of a table

<table>

<tr>

<td>Column 1 data</td>

<td>Column 2 data</td>

</tr>

<tr>

<td>Column 1 Data</td>

<td>Column 2 Data</td>

</tr>

</table>

Table headings

<table>

<tr>

<th>Column 1 Heading</th>

<th>Column 2 Heading</th>

</tr>

<tr>

<td>Column 1 Data</td>

<td>Column 2 Data</td>

</tr>

</table>

Adding extra information

<table summary="description of the content">

<caption>a caption for my table</caption>

NB: the caption must be INSIDE the table and immediately following the *table* tag.

<table summary="a description of the content">

<caption>a caption for my table</caption>

<tr> <th>Column 1 Heading</th> <th>Column 2 Heading</th>

</tr> <tr>

<td>Column 1 Data</td> <td>Column 2 Data</td>

</tr> </table>

Using special characters• How would you display < or > in html?

• Non-standard characters or ones with a function in html need special treatment

• Syntax: ampersand+code+semi-colon

Eg: &amp; = &

&lt; = <

&gt; = >&quot; = "

Also other languages:

&eacute; = é

Adding navigation• Link to an external website

<a href="http://www.google.com">link to Google</a>

• Internal links within the page<a href="#top">back to top of page</a>

Needs a *bookmark* to link to: <a id="top"></a>

• Link to another page in the same site(assumes files are in the same folder)

<a href="second.html">link to second page</a>

Adding extra information to links

• A title attribute:This will show up in a *tooltip*

<a href="http://www.google.co.uk" title="a link to Google ">link to Google</a>

• Opening in a new window

<a href="http://www.google.co.uk" title="a link to Google. Opens in a new window " target= " _blank " >link to Google</a>

Navigation menu

• Unordered List (Vertical) menu: <ul> <li><a href="index.html">Home</a></li> <li><a href="page2.html">second page</a></li>

<li><a href="page3.html">third page</a></li></ul> • Line of Links (Horizontal) menu: <div id="navigation"> <a href="index.html">Home</a> |

<a href="page2.html">second page</a> | <a href="page3.html">third page</a>

</div>

Structural divisions of the webpage

• The <div> element defines logical and structural divisions of a webpage

• EG: header, footer, content etc

• <div id="header">stuff in the header</div>

• <div id="content">main page content</div>

• <div id="footer">stuff in the footer</div>

Multi-page website

• Organise your material (break document up into component parts)

• Select pages and file names (headings)

• Always name first page: index.html

• Make names meaningfulshort / lower case / letters numbers / no spaces /

underscores / start with letter

• Use the *template* re-named for each file

Possible pages

• index.html

• officers.html

• members.html

• publications.html

• contacts.html

Validating your pages

• http://validator.w3.org/• Validate by Direct Input

• Note that errors often have a *knock on* effect so start with the first one and re-validate.

• If you have an error in the *head* then copy and paste your code into a fresh template. These errors are usually caused by incorrectly saving/moving the file.

Usability• Not everyone views webpages as we do• Consider the visually impaired • The colour blind• Users with *slow* connections• The additional information we have added

to links, tables, etc.• Navigation• Avoid frustrating users• Fonts (sans-serif)• Design and layout• More?