1 © Netskills Quality Internet Training, University of Newcastle Structure, Presentation and Navigation © Netskills, Quality

1 © Netskills Quality Internet Training, University of Newcastle

Structure, Presentation and Navigation

http://www.netskills.ac.uk/

© Netskills, Quality Internet TrainingUniversity of NewcastleNetskills is a trademark of Netskills, University of Newcastle.


TopicsWriting good HTMLXHTML for structureValidationCSS for presentationEffective navigationKeyboard access


Writing Good HTMLSeparate structure and presentation

Use HTML for the structure only Use CSS for presentation (style and layout)

Validate documents against a DTD Document Type Definition states the formal set of

rules for the language Order of elements Nesting sequence Permissible attribute

Validation checks against the rules


Which Version of HTML HTML 4.01

Introduced use of style sheets Identified elements and attributes for deprecation,

e.g. <font size="4"> or <center>www.htmlhelp.com/reference/html40/deprecated.html

XHTML 1.0 Web access no longer limited to web browsers PDAs, Mobile phones New mark-up languages written in XML The future is XML XHTML is the reformulation of HTML 4.01 in XML A stricter and tidier version of HTML Better again for accessibility


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head><title></title>

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />

</head>

<body>

</body>

</html>

XHTML Template

Two attributes to specify the natural language

Namespace, gives nested elements context when sourced from a document using more than one mark-up language

The DTD or rulesfor the version of HTML

Necessary HTML elements

Character encoding


More on XHTML All elements

Names in lower case <p> Properly nested Properly closed

<p>Hello</p> When no element content: <br />

All attributes Names in lower case Values quoted Minimisation forbidden

e.g. multiple="multiple", noresize="noresize" The "id" has replaced "name" attribute

www.w3schools.com/xhtml

Space for compatibility with Netscape


..<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head><title>Simple document</title><meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />

</head><body><h1>A simple XHTML page</h1><p>XHTML is the next generation of HTML<img src="picture.gif" id="picture" alt="" /></p><form action="dummy.asp"><p><input type="radio" checked="checked" /></p></form></body></html>

XHTML Example Element names in lower case

No minimisation of attributes

Use of "id" attribute

Attribute names in lower caseAttribute values quoted


And the DTD A DTD exists for all official versions of HTML HTML 4.01 and XHTML have three different DTDs:

Strict Deprecated element names have been removed Better for accessibility

Transitional Allows deprecated tags Better for backwards compatibility

Frameset Defines use of frames

Validate against a DTD validator.w3.org


Cascading Style SheetsStyle sheets specify presentational rulesMay be held

In the <head> section of the web page Or in an external file

External style sheet Text file saved with .css extension Affects whichever pages link to it Many web pages can link to the same style sheet Only one master to maintain Most versatile

Today, we will focus on external style sheets


How Do Style Sheets Work? Style sheets specify formatting rules

Consist of selectors and property:value pairs. Selectors are HTML tags, classes or IDs

Classes and IDs are named groups of styles Use once, ID (not supported in Netscape 4) Re-use, class

Validate CSSjigsaw.w3.org/css-validator

HTML pages link to the style sheet<link rel="stylesheet" type="text/css" href="colors.css" />

selector{property:value;}body{background-color:blue;}


Style Sheets in Action

Selectors identifywhere to apply styles

body{background-color:blue;color:yellow;}.reusable{font-size:2em;}#unique{background-color:yellow;color:blue;}

..<head><title></title><link rel="stylesheet" type="text/css" href="colors.css" /></head><body><p>This page should display yellow texton a blue background.</p><p class="reusable">Large text.</p><p id="unique">Reverse colors.</p><p class="reusable">More large text.</p></body></html>

Result when viewed in web browser

Stylesheet:

Web page:


Style Sheets for Layout Is the W3C Recommendation Set margins, borders, padding Create columns using CSS Positioning

Not well supported in older browsers (Netscape 4, IE3)

Use relative units (em or %) Page flow is the content sequence defined by the

HTML Use CSS Positioning to change content sequence for

graphical display Ensure the page downgrades gracefully

Reads logically without CSS Is usable (Dynamic HTML?)


Tables and Frames for Layout Tables for layout

Not supported in XHTML (but can do it) Ensure that layout tables linearisehttp://www.w3.org/WAI/Resources/Tablin/form Do not use table header tags <th> Use relative units Use the simplest configuration

Frames for layout Avoid if possible

At best Priority 2 Necessary?

VLEs use frames Screen Readers read frame names Inability to change frame names


Effective Navigation In the site

Site map or contents list (structural or alphabetical)www.useit.com/alertbox/20020106.html

Accessibility statement Feedback mechanism

On each page: Search facility for all content Navigation system

Main menu Breadcrumbs menu

Plan your page Top ten guidelines for homepage usability (Jakob Nielsen)www.useit.com/alertbox/20020512.html


Navigation Menu Simple, intuitive, consistent, not deep Based on

Text Images/rollover images (with alt attributes)

Don’t use JavaScript to follow links Flash

Option to skip-navigation Visible for everyone Use accesskey and tabindex

If using CSS Positioning for layout: Page flow:

Change graphical display using CSS Positioning

Searchfacility Content Navigation


Use Links Effectively Don’t override default styles

Familiarity enhances usability

Screen readers list links Use descriptive standalone text Don’t assume mouse usage No technical details or verbs in actual link

Click here Follow link to go to Netskills home pageTell me more about Netskills

Don’t overpopulate your page

Don’t break the back button by Opening new windows Automatic redirection

Tips from the W3C:www.w3.org/2001/06tips


Keyboard Access To links, form controls, objects Logical tab order

By default follow page flow <input type="test" tabindex="1" ..

Keyboard shortcuts <a href="" accesskey="s">

Recommendations for Government sites:www.cabinet-office.gov.uk/accesskeys.asp

Browser Tab index Keyboard shortcut

IE5+ Y <ALT>+s, <ENTER>

IE4,Netscape 6+ Y <ALT>+s

IE5 for MAC Y <CTRL>+s

Opera N N


SummaryUse HTML for structure and validateUse CSS for style and layoutNavigation should be simple and intuitiveScreen readers read links in the order of

"page flow"Page structure is essential for accessibility

Documents

1 © Netskills Quality Internet Training, University of Newcastle Structure, Presentation and Navigation © Netskills, Quality