MA foundation Creating webpages using XHTML (part 2) Simon Mahony CCH

Adding tables

Structure of a table Column 1 data Column 2 data Column 1 Data Column 2 Data

Table headings Column 1 Heading Column 2 Heading Column 1 Data Column 2 Data

Adding extra information a caption for my table NB: the caption must be INSIDE the table and immediately following the *table* tag.

a caption for my table Column 1 Heading Column 2 Heading Column 1 Data Column 2 Data

Using special characters How would you display 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 link to Google Internal links within the page back to top of page Needs a *bookmark* to link to: Link to another page in the same site (assumes files are in the same folder) link to second page

Adding extra information to links A title attribute: This will show up in a *tooltip* link to Google Opening in a new window link to Google

Navigation menu Unordered List (Vertical) menu: Home second page third page Line of Links (Horizontal) menu: Home | second page | third page

Structural divisions of the webpage The element defines logical and structural divisions of a webpage EG: header, footer, content etc stuff in the header main page content stuff in the footer

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 meaningful short / 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 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?