CFT2111 Introduction to Website Development Module Leader: Matthew Mantle

1. CFT2111 Introduction to Website Development Module Leader: Matthew Mantle e-mail: m.e.mantle@hud.ac.uk

2. Assignment • READ THE ASSIGNMENT SPECIFICATION! • These slides only provide an overview • You are required to assemble a portfolio of html and CSS work. • The pages submitted should contain substantial, genuine content. • This will provide an opportunity for you to show a range of html and CSS features and an understanding of how to structure html documents.

3. Assignment Content • Content • You don’t need to write the content for yourself! • The choice of content is important • Needs to give you a chance to show off a range of features • Nice if it is cohesive • All the pages have something in common like a mini website • Ideas • Football team, band, hobbies, personal website • Any text, images etc. that you haven’t created yourself must be clearly referenced

4. Specific Requirements • The portfolio must be developed using HTML 5 and the CSS 2.1 specification. • All html and CSS documents must be valid according to the W3C validator (http://validator.w3.org/) • The portfolio should consist of between four and eight inter-linked pages. • One page must demonstrate the use of html tables. This file must be named tables.html • One page must demonstrate the use of html forms. This file must be named forms.html. You aren't required to write any code that will process the data entered into this form. • One page must demonstrate the use of text related tags: paragraphs, lists, headings etc. This file must be named text.html. • The portfolio must demonstrate the use of hyperlinks. The pages in the site should be linked together using relative URLs with suitable navigation throughout.

5. Specific Requirements (cont.) • All html pages in the portfolio must link to a single CSS file. This file must be named style.css. There should be no use of the style attribute or the <style> element in the web site. • The portfolio should work fully in both Google Chrome 5 and Mozilla Firefox 3.6. • Pages should be viewable on monitors with screen resolutions of 1024 × 768 without users having to scroll horizontally. • The portfolio should have a cohesive, consistent design, demonstrate good application of basic web design principles and be easy to navigate. • Consideration to accessibility should be given in the use of both CSS and html.

6. Submission Details • Submission Details • You are required to submit the following zipped folder to the module’s digital dropbox on Blackboard by midnight on Thursday 25th November 2010 • A word document, filename assets.doc. This document must reference the assets used in the portfolio that you have not created yourself (images, text from other websites etc.). • The portfolio needs to have the directory structure specified in the assignment specification

7. Assessment Criteria • The assignment has a weighting of 40% • Assignment 2 is 60% • The assignment spec provides detailed assessment criteria • The components are • HTML(35%) • CSS (35%) • Design (20%) • Validation reports (10%)

8. Academic Misconduct • Don’t cheat e.g. • Taking a complete html or CSS solution from the web / a book and handing it in as your own • Working too closely with your peers • If you use a CSS technique that you find on the web/book etc. You must reference it in the code and declare it during your presentation • If you use assets that you haven’t created yourself, you must reference where you have obtained them from! • The penalties for academic misconduct are severe!

9. Assignment Advice • Start work on this early! • Give yourself plenty of time on the hand-in day to get your work in the required format • Validate your documents plenty of time before the hand-in date • Make any necessary corrections! • Ask for advice • Week 9 is officially down to be used for formative feedback • Happy to look at your assignment work in any other practical sessions between now and the hand-in date.

10. Finishing of html • We have looked at all the main features of html • Text related tags • Inserting images and hyperlinks • There are more tags but they are used in exactly the same way as the ones we have already looked at • To finish off • Tables

11. html Tables <table border="1"> <tr> <td>Top left</td> <td>Top right</td> </tr> <tr> <td>Bottom left</td> <td>Bottom right</td> </tr> </table> • The <table> tags define the start and end of the table • Each row is defined by the table row tags (<tr>) • Each table cell is defined by the table date (<td>) tags

12. Colspan and Rowspan • Table data tags can feature the attributes colspan and rowspan. • These attributes change the table from its conventional basic grid <table border="1"> <tr> <td colspan="2">1</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> • Colspan is used to expand cells horizontally

13. Colspan and Rowspan • Rowspan is used to expand cells vertically <table border="1"> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> </tr> </table>

14. Tables and Validation <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD html 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/html1-strict.dtd"> <html xmlns="http://www.w3.org/1999/html" xml:lang="en" lang="en"> <head> <title>Tables</title> </head> <body> <table border="1"> <tr> <td colspan="2">1</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> </body> </html> • Tables, like any other form of html content, go in the body of a document. • We can think of tables as being ‘block level’ elements • i.e. we don’t have to nest them inside paragraphs, h1s etc.

15. Table Sizes • As a default tables contract to the smallest size possible • i.e. the size of the contents of the table • The attributes width and height can be used to control the size of tables • Can be used with the table or td tags • Sizes can be specified using pixel or percentage values • Percentage values size a table to a percentage of the browser window. • <table border=“2” width=“80%”> • Html tables can be used as a page layout device • But to really control how our pages look we need to use Cascading Style Sheets (CSS)

16. Accessible Tables • Tables cause problems for devices with small screens and for screen readers • Screen Readers ‘linearise’ tables. They read the contents from left to right, one row at a time • Cell 1 • Cell 2 • Cell 3 • Cell 4 Screen reader would read the information to the user as • For a simple table structure this is okay

17. Accessible Tables • Problems can occur when we get complex table structures or nested tables • Site Header and Logo • Advertising Banner • Link 1 • Link 2 • Link 3 • Link 4 • Page Title • Link 5 • Link 6 • Main Content • Advert 1 • Advert 2 Screen reader would read the information to the user as • For this reason we shouldn’t use tables a page layout device!

18. Using Tables • Tables should really only be used for displaying data e.g. • Timetables, Event listings, Product catalog, Track listings <table> <tr> <td>Name</td><td>Mark</td> </tr> <tr> <td>Fred Smith </td><td>76</td> </tr> <tr> <td>Mike Jones </td><td>45</td> </tr> <tr> <td>Kim Dim </td><td>67</td> </tr> <tr> <td>Pete Neat </td><td>45</td> </tr> </table>

19. Enhancing Accessibility • We can make tables even more accessible by using table heading cells <th> <th> cells are usually displayed in bold by most browsers <table> <tr> <th>Name</th><th>Mark</th> </tr> <tr> <td>Fred Smith </td><td>76</td> </tr> <tr> <td>Mike Jones </td><td>45</td> </tr> <tr> <td>Kim Dim </td><td>67</td> </tr> <tr> <td>Pete Neat </td><td>45</td> </tr> </table>

20. Enhancing Accessibility • We can make tables even more accessible by using table heading cells <th> <th> cells are displayed in bold by most browsers <table> <tr> <th>Name</th><th>Mark</th> </tr> <tr> <td>Fred Smith </td><th>76</th> </tr> <tr> <td>Mike Jones </td><th>45</th> </tr> <tr> <td>Kim Dim </td><th>67</th> </tr> <tr> <td>Pete Neat </td><th>45</th> </tr> </table> • The screen reader will output • Name Fred Jones • Mark 76 • Name Mike Smith • Mark 45 • The heading will be read out before each value for the column • In this example it’s a little pointless, but for complex tables it is very useful

21. Enhancing Accessibility • To add a title for the table we should use the caption element <table border="1"> <caption>Student Results</caption> <tr> <th>Name</th><th>Mark</th> </tr> <tr> <td>Fred Smith </td><td>76</td> </tr> <tr> <td>Mike Jones </td><td>45</td> </tr> <tr> <td>Kim Dim </td><td>67</td> </tr> <tr> <td>Pete Neat </td><td>45</td> </tr> </table> Student Results

22. Tables and CSS • The table, tr, th, td and caption tags can be targeted by CSS just like any other tags table{ font-family:Arial, Sans Serif; text-align:center; border-collapse:separate; background-color:#aaaaaa; color:#ffffff; width:300px; } caption{ font-size:1.2em; text-align:center; color:#666666; } th{ font-weight:bold; } td{ background-color:#666666; }

23. Tables and CSS table{ font-family:Arial, Sans Serif; text-align:center; border-collapse:separate; background-color:#aaaaaa; color:#ffffff; width:300px; } caption{ font-size:1.2em; text-align:center; color:#666666; } th{ font-weight:bold; } td{ background-color:#666666; } • Most of these properties are self-explanatory • Border-collapse is unique to tables • It specifies whether or not table cells will have their own border’s or shard borders between cells • It is used to control the appearance of gaps between table cells