1 © Netskills Quality Internet Training, University of Newcastle Structure, Presentation and Navigation © Netskills, Quality Internet Training University of Newcastle Netskills is a trademark of Netskills, University of Newcastle.

2 © Netskills Quality Internet Training, University of Newcastle Topics Writing good HTML XHTML for structure Validation CSS for presentation Effective navigation Keyboard access

3 © 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 Order of elements Nesting sequence Permissible attribute Validation checks against the rules

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

5 © Netskills Quality Internet Training, University of Newcastle 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 rules for the version of HTML Necessary HTML elements Character encoding

6 © Netskills Quality Internet Training, University of Newcastle More on XHTML All elements Names in lower case Properly nested Properly closed Hello When no element content: All attributes Names in lower case Values quoted Minimisation forbidden e.g. multiple="multiple", noresize="noresize" The "id" has replaced "name" attribute Space for compatibility with Netscape

7 © Netskills Quality Internet Training, University of Newcastle.. Simple document A simple XHTML page XHTML is the next generation of HTML XHTML Example Element names in lower case No minimisation of attributes Use of "id" attribute Attribute names in lower case Attribute values quoted

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

9 © Netskills Quality Internet Training, University of Newcastle Cascading Style Sheets Style sheets specify presentational rules May be held In the 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

10 © 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 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 selector{property:value;} body{background-color:blue;}

11 © Netskills Quality Internet Training, University of Newcastle Style Sheets in Action Selectors identify where to apply styles body{background-color:blue;color:yellow;}.reusable{font-size:2em;} #unique{background-color:yellow;color:blue;}.. <link rel="stylesheet" type="text/css" href="colors.css" /> This page should display yellow text on a blue background. Large text. Reverse colors. More large text. Result when viewed in web browser Stylesheet: Web page:

12 © Netskills Quality Internet Training, University of Newcastle 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?)

13 © 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 Do not use table header tags 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

14 © Netskills Quality Internet Training, University of Newcastle Effective Navigation In the site Site map or contents list (structural or alphabetical) 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)

15 © Netskills Quality Internet Training, University of Newcastle Navigation Menu Simple, intuitive, consistent, not deep Based on Text Images/rollover images (with alt attributes) Dont 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 Search facility ContentNavigation

16 © Netskills Quality Internet Training, University of Newcastle Use Links Effectively Dont override default styles Familiarity enhances usability Screen readers list links Use descriptive standalone text Dont 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 Dont overpopulate your page Dont break the back button by Opening new windows Automatic redirection Tips from the W3C:

17 © 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 Recommendations for Government sites: BrowserTab indexKeyboard shortcut IE5+Y +s, IE4,Netscape 6+Y +s IE5 for MACY +s OperaNN

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