Languages
Pages
Legal
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: & = &
< = <
> = >" = "
Also other languages:
é = é
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?