MA foundation Creating webpages using XHTML (part 2) Simon Mahony CCH.
-
Upload
ethan-trujillo -
Category
Documents
-
view
212 -
download
0
Transcript of MA foundation Creating webpages using XHTML (part 2) Simon Mahony CCH.
![Page 1: MA foundation Creating webpages using XHTML (part 2) Simon Mahony CCH.](https://reader036.fdocuments.us/reader036/viewer/2022082917/5516104e550346d46f8b61f5/html5/thumbnails/1.jpg)
MA foundation
Creating webpages using XHTML (part 2)
Simon Mahony CCH
![Page 2: MA foundation Creating webpages using XHTML (part 2) Simon Mahony CCH.](https://reader036.fdocuments.us/reader036/viewer/2022082917/5516104e550346d46f8b61f5/html5/thumbnails/2.jpg)
Adding tables
![Page 3: MA foundation Creating webpages using XHTML (part 2) Simon Mahony CCH.](https://reader036.fdocuments.us/reader036/viewer/2022082917/5516104e550346d46f8b61f5/html5/thumbnails/3.jpg)
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>
![Page 4: MA foundation Creating webpages using XHTML (part 2) Simon Mahony CCH.](https://reader036.fdocuments.us/reader036/viewer/2022082917/5516104e550346d46f8b61f5/html5/thumbnails/4.jpg)
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>
![Page 5: MA foundation Creating webpages using XHTML (part 2) Simon Mahony CCH.](https://reader036.fdocuments.us/reader036/viewer/2022082917/5516104e550346d46f8b61f5/html5/thumbnails/5.jpg)
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.
![Page 6: MA foundation Creating webpages using XHTML (part 2) Simon Mahony CCH.](https://reader036.fdocuments.us/reader036/viewer/2022082917/5516104e550346d46f8b61f5/html5/thumbnails/6.jpg)
<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>
![Page 7: MA foundation Creating webpages using XHTML (part 2) Simon Mahony CCH.](https://reader036.fdocuments.us/reader036/viewer/2022082917/5516104e550346d46f8b61f5/html5/thumbnails/7.jpg)
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:
é = é
![Page 8: MA foundation Creating webpages using XHTML (part 2) Simon Mahony CCH.](https://reader036.fdocuments.us/reader036/viewer/2022082917/5516104e550346d46f8b61f5/html5/thumbnails/8.jpg)
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>
![Page 9: MA foundation Creating webpages using XHTML (part 2) Simon Mahony CCH.](https://reader036.fdocuments.us/reader036/viewer/2022082917/5516104e550346d46f8b61f5/html5/thumbnails/9.jpg)
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>
![Page 10: MA foundation Creating webpages using XHTML (part 2) Simon Mahony CCH.](https://reader036.fdocuments.us/reader036/viewer/2022082917/5516104e550346d46f8b61f5/html5/thumbnails/10.jpg)
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>
![Page 11: MA foundation Creating webpages using XHTML (part 2) Simon Mahony CCH.](https://reader036.fdocuments.us/reader036/viewer/2022082917/5516104e550346d46f8b61f5/html5/thumbnails/11.jpg)
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>
![Page 12: MA foundation Creating webpages using XHTML (part 2) Simon Mahony CCH.](https://reader036.fdocuments.us/reader036/viewer/2022082917/5516104e550346d46f8b61f5/html5/thumbnails/12.jpg)
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
![Page 13: MA foundation Creating webpages using XHTML (part 2) Simon Mahony CCH.](https://reader036.fdocuments.us/reader036/viewer/2022082917/5516104e550346d46f8b61f5/html5/thumbnails/13.jpg)
Possible pages
• index.html
• officers.html
• members.html
• publications.html
• contacts.html
![Page 14: MA foundation Creating webpages using XHTML (part 2) Simon Mahony CCH.](https://reader036.fdocuments.us/reader036/viewer/2022082917/5516104e550346d46f8b61f5/html5/thumbnails/14.jpg)
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.
![Page 15: MA foundation Creating webpages using XHTML (part 2) Simon Mahony CCH.](https://reader036.fdocuments.us/reader036/viewer/2022082917/5516104e550346d46f8b61f5/html5/thumbnails/15.jpg)
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?