Presentation is loading. Please wait.

Presentation is loading. Please wait.

Lecture 5: HTML Structure and Navigation LIS350AR: Designing Universally Accessible Web Resources Instructor: Jon Gunderson.

Published byBonnie Blankenship Modified over 8 years ago

Similar presentations

Presentation on theme: "Lecture 5: HTML Structure and Navigation LIS350AR: Designing Universally Accessible Web Resources Instructor: Jon Gunderson."— Presentation transcript:

1 Lecture 5: HTML Structure and Navigation LIS350AR: Designing Universally Accessible Web Resources Instructor: Jon Gunderson

2 Goals Authroing Tools – HotMetal Pro – Dreamweaver – FrontPage Vaild documents HTML structural elements HTML navigational elements

3 Valid Documents DOCTYPE Language Character Encoding

4 HTML Validator http://validator.w3.org

5 HTML Structural Elements Headers (H1-H6) List elements (UL, OL, DL) Navigation Bars (MENU) Input controls (LABEL) Tables (TH, Scope, Headers) Frames (TITLE)

6 Navigational Elements Tabindex Accesskey

7 508 Requirements Paragraph e: Text links for image maps Paragraph f: Client side image maps Paragraphs g and h: Tables Paragraph i: Frames Paragraph o: Skip navigation

8 WCAG Guidelines Guideline 3 Guideline 4 Guideline 5 Guideline 6 Guideline 9 Guideline 11 Guideline 12 Guideline 13

Download ppt "Lecture 5: HTML Structure and Navigation LIS350AR: Designing Universally Accessible Web Resources Instructor: Jon Gunderson."

Similar presentations

Anatomy of a Web Page. Parts of a Web Page Title Bar Navigation Tool Bar Location Bar Header Graphic/Image Text Horizontal Rule Links.

Anatomy of a Web Page. Parts of a Web Page Title Bar Navigation Tool Bar Location Bar Header Graphic/Image Text Horizontal Rule Links.
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 © Netskills, Quality.
AHEAD 2013. HTML Accessibility Topics: Keyboard Accessibility Content and Structure Links Headings and Lists Images in HTML Pages Tables Forms.

AHEAD HTML Accessibility Topics: Keyboard Accessibility Content and Structure Links Headings and Lists Images in HTML Pages Tables Forms.
Learning HTML. > Title of page This is my first homepage. Tells Browser This is an HTML page Basic Tags Tells Browser End of HTML page Header information.

Learning HTML. > Title of page This is my first homepage. Tells Browser This is an HTML page Basic Tags Tells Browser End of HTML page Header information.
DIVISIONS FOR ALL WEB PAGES Web Page Elements.  All Web Pages should have the following 4 elements (Also called divisions).  header  navigation  content.

DIVISIONS FOR ALL WEB PAGES Web Page Elements.  All Web Pages should have the following 4 elements (Also called divisions).  header  navigation  content.
Building Accessibility Into The Workflow Rick Ells Computing & Communications University of Washington Seattle, Washington

Building Accessibility Into The Workflow Rick Ells Computing & Communications University of Washington Seattle, Washington
COMP101 – Exploring Multimedia and Internet Computing LA2 (Thu 14:00 – 16:50) TA: Jackie Lo.

COMP101 – Exploring Multimedia and Internet Computing LA2 (Thu 14:00 – 16:50) TA: Jackie Lo.
HTML syntax By Ana Drinceanu. Definition: Syntax refers to the spelling and grammar of a programming language. Computers are inflexible machines that.

HTML syntax By Ana Drinceanu. Definition: Syntax refers to the spelling and grammar of a programming language. Computers are inflexible machines that.
IV. “Regular” Web Pages: HTML A Web Accessibility Primer: Usability for Everyone Office of Web Communications.

IV. “Regular” Web Pages: HTML A Web Accessibility Primer: Usability for Everyone Office of Web Communications.
Design factors Content –Fig.s 4-49, 5-4, 6-3 Organization –Fig.s 2-10, 2-11, 2-12, 2-14, 2-15, 5-17 Performance Aesthetic Security.

Design factors Content –Fig.s 4-49, 5-4, 6-3 Organization –Fig.s 2-10, 2-11, 2-12, 2-14, 2-15, 5-17 Performance Aesthetic Security.
Web page design Static pages –Content stays the same at all times –Informative elements –Using HTML codes (usually) Dynamic pages –Content varies from.

Web page design Static pages –Content stays the same at all times –Informative elements –Using HTML codes (usually) Dynamic pages –Content varies from.
CPSC 203: Introduction to Computers Tutorials 03 & 29 by Jie (Jeff) Gao.

CPSC 203: Introduction to Computers Tutorials 03 & 29 by Jie (Jeff) Gao.
CPSC 203 Introduction to Computers Lab 39, 40 By Jie (Jeff) Gao.

CPSC 203 Introduction to Computers Lab 39, 40 By Jie (Jeff) Gao.
Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.

Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.
Introduction to World Wide Web Authoring © Directorate of Information Systems and Services University of Aberdeen, 1999 Part II.

Introduction to World Wide Web Authoring © Directorate of Information Systems and Services University of Aberdeen, 1999 Part II.
WB_FrontPage_How To CS3505. Front Page 4 Microsoft Web Page Authoring tool 4 Available to students at no charge see helpdesk 4 Provides support for building.

WB_FrontPage_How To CS3505. Front Page 4 Microsoft Web Page Authoring tool 4 Available to students at no charge see helpdesk 4 Provides support for building.
WYSIWYG Program (pronounced wiz - ee - wig) What You See Is What You Get Dreamweaver 4.0 Toolbars.

WYSIWYG Program (pronounced wiz - ee - wig) What You See Is What You Get Dreamweaver 4.0 Toolbars.
HTML Hyper Text Markup Language It is used for describing web documents or web pages. A markup language is set of markup tags. HTML documents are described.

HTML Hyper Text Markup Language It is used for describing web documents or web pages. A markup language is set of markup tags. HTML documents are described.
Introduction. Document Structure Overview  XML declaration (prolog)  Document type declaration  Root element (namespace)  Document header  Document.

Introduction. Document Structure Overview  XML declaration (prolog)  Document type declaration  Root element (namespace)  Document header  Document.
Is Your Site Accessible? Web Site Testing for Accessibility Presented by: The NYS Forum IT Accessibility Committee The NYS Forum Webmasters Guild Northeast.

Is Your Site Accessible? Web Site Testing for Accessibility Presented by: The NYS Forum IT Accessibility Committee The NYS Forum Webmasters Guild Northeast.

Similar presentations

Ads by Google