CFT2111

Introduction to Website Development

Module Leader: Matthew Mantle

e-mail: m.e.mantle@hud.ac.uk

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.

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

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.

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.

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

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%)

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!

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.

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

html Tables

Top left Top left

Bottom left Bottom right

<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

Colspan and Rowspan

• Table data tags can feature the attributes colspan and rowspan. – These attributes change the table from its conventional basic grid

1

3 4

<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

Colspan and Rowspan

• Rowspan is used to expand cells vertically

1 2 3

5 6

7 8 9

<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>

<?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 and Validation

• 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.

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)

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

1. Cell 1

2. Cell 2

3. Cell 3

4. Cell 4

Screen reader would read the information to the user as

• For a simple table structure this is okay

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

1. Site Header and Logo

2. Advertising Banner

3. Link 1

4. Link 2

5. Link 3

6. Link 4

7. Page Title

8. Link 5

9. Link 6

10.Main Content

11.Advert 1

12.Advert 2

Screen reader would read the information to the user as

• For this reason we shouldn’t use tables a page layout device!

Using Tables• Tables should really only be used for displaying data e.g.

– Timetables, Event listings, Product catalog, Track listings

Name Mark

Fred Jones 76

Mike Smith 45

Kim Dim 67

Pete Neat 51

<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>

Enhancing Accessibility• We can make tables even more accessible by using

table heading cells <th>

Name MarkFred Jones 76

Mike Smith 45

Kim Dim 67

Pete Neat 51

<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>

<th> cells are usually displayed in bold by most browsers

Enhancing Accessibility• We can make tables even more accessible by using

table heading cells <th><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>

<th> cells are displayed in bold by most browsers

The screen reader will output

1. Name Fred Jones

2. Mark 76

3. Name Mike Smith

4. 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

Name MarkFred Jones 76

Mike Smith 45

Kim Dim 67

Pete Neat 51

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

Name MarkFred Jones 76

Mike Smith 45

Kim Dim 67

Pete Neat 51

Tables and CSS• The table, tr, th, td and caption tags can be targeted

by CSS just like any other tagstable{

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;}

Tables and CSS• 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

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;}