Structure, Presentation
and Navigation
http://www.netskills.ac.uk/
© Netskills, Quality Internet Training
University of Newcastle
Netskills is a trademark of Netskills, University of Newcastle.
1
© Netskills Quality Internet Training, University of Newcastle
Topics
Writing good HTML
 XHTML for structure
 Validation
 CSS for presentation
 Effective navigation
 Keyboard access

2
© Netskills Quality Internet Training, University of Newcastle
Writing Good HTML

Separate 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




3
Order of elements
Nesting sequence
Permissible attribute
Validation checks against the rules
© Netskills Quality Internet Training, University of Newcastle
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







4
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
© Netskills Quality Internet Training, University of Newcastle
XHTML Template
The DTD or rules
for the version of HTML
<!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>
Namespace, gives nested elements
<body>
context when sourced from a document
</body>
using more than one mark-up language
</html>
Two attributes to specify
Character encoding
the natural language
Necessary HTML elements
5
© Netskills Quality Internet Training, University of Newcastle
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
Space for compatibility
Values quoted
with Netscape
Minimisation forbidden
e.g. multiple="multiple", noresize="noresize"
The "id" has replaced "name" attribute
www.w3schools.com/xhtml
6
© Netskills Quality Internet Training, University of Newcastle
XHTML Example
Element names in lower case
..<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>
Attribute names in lower case
<body>
Attribute values quoted
<h1>A simple XHTML page</h1>
<p>XHTML is the next generation of HTML
<img src="picture.gif" id="picture" alt="" /></p>
Use of "id" attribute
<form action="dummy.asp">
<p><input type="radio" checked="checked" /></p>
</form>
</body>
No minimisation
</html>
of attributes
7
© Netskills Quality Internet Training, University of Newcastle
And the DTD


A DTD exists for all official versions of HTML
HTML 4.01 and XHTML have three different DTDs:

Strict



Transitional



Allows deprecated tags
Better for backwards compatibility
Frameset


Deprecated element names have been removed
Better for accessibility
Defines use of frames
Validate against a DTD
validator.w3.org
8
© Netskills Quality Internet Training, University of Newcastle
Cascading Style Sheets
Style sheets specify presentational rules
 May be held




External style sheet






9
In the <head> section of the web page
Or in an external file
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
© Netskills Quality Internet Training, University of Newcastle
How Do Style Sheets Work?

Style sheets specify formatting rules


Consist of selectors and property:value pairs.
Selectors are HTML tags, classes or IDs
selector{property:value;}
body{background-color:blue;}

Classes and IDs are named groups of styles




Use once, ID (not supported in Netscape 4)
Re-use, class
Validate CSS
jigsaw.w3.org/css-validator
HTML pages link to the style sheet
<link rel="stylesheet" type="text/css"
href="colors.css" />
10
© Netskills Quality Internet Training, University of Newcastle
Style Sheets in Action
Stylesheet:
body{background-color:blue;color:yellow;}
.reusable{font-size:2em;}
#unique{background-color:yellow;color:blue;}
Web page:
Selectors identify
where to apply styles
Result when
viewed in web browser
..
<head><title></title>
<link rel="stylesheet" type="text/css"
href="colors.css" />
</head>
<body>
<p>This page should display yellow text
on 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>
11
© Netskills Quality Internet Training, University of Newcastle
Style Sheets for Layout



Is the W3C Recommendation
Set margins, borders, padding
Create columns using CSS Positioning





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


12
Not well supported in older browsers (Netscape 4, IE3)
Reads logically without CSS
Is usable (Dynamic HTML?)
© Netskills Quality Internet Training, University of Newcastle
Tables and Frames for Layout

Tables for layout


Not supported in XHTML (but can do it)
Ensure that layout tables linearise
http://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



VLEs use frames


13
At best Priority 2
Necessary?
Screen Readers read frame names
Inability to change frame names
© Netskills Quality Internet Training, University of Newcastle
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



Plan your page

14
Main menu
Breadcrumbs menu
Top ten guidelines for homepage usability (Jakob Nielsen)
www.useit.com/alertbox/20020512.html
© Netskills Quality Internet Training, University of Newcastle
Navigation Menu


Simple, intuitive, consistent, not deep
Based on



Don’t use




Visible for everyone
Use accesskey and tabindex
If using CSS Positioning for layout:


15
JavaScript to follow links
Flash
Option to skip-navigation


Text
Images/rollover images (with alt attributes)
Page flow:
Search
facility
Content
Navigation
Change graphical display using CSS Positioning
© Netskills Quality Internet Training, University of Newcastle
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 page
Tell me more about Netskills


Don’t break the back button by



Don’t overpopulate your page
Opening new windows
Automatic redirection
Tips from the W3C:
www.w3.org/2001/06tips
16
© Netskills Quality Internet Training, University of Newcastle
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">
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
Recommendations for Government sites:
www.cabinet-office.gov.uk/accesskeys.asp
17
© Netskills Quality Internet Training, University of Newcastle
Summary
Use HTML for structure and validate
 Use CSS for style and layout
 Navigation should be simple and intuitive
 Screen readers read links in the order of
"page flow"
 Page structure is essential for accessibility

18
© Netskills Quality Internet Training, University of Newcastle
Descargar

Structure and Presentation - Birkbeck, University of London