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

Slides:

Advertisements

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.

Advertisements

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

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.

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

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.

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.

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 Lab 39, 40 By Jie (Jeff) Gao.

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.

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.

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.

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

CPSC 203 Introduction to Computers Lab 23 By Jie Gao.

JAOIT 8.  Dreamweaver is a program for creating web pages and managing websites without having to type HTML code.  WYSIWYG – What you see is what you.

HTML5 Sections Old structuring elements –body, div, address, blockquote –headings: h1, h2, h3, … –ul, ol, table New structuring elements –header, footer,

Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.

Accessibility of online instructional tools and documents Terrill Thompson Technology Accessibility

Copyright 2007, Information Builders. Slide 1 Understanding Basic HTML Amanda Regan Technical Director June, 2008.

Functional Accessibility Evaluation of Web 2.0 Applications Testing Jon Gunderson, Ph.D University of Illinois.

HTML: Hyptertext Markup Language Doman’s Sections.

1 After completing this lesson, you will be able to: Transfer your files to the Internet. Choose a method for posting your Web pages. Use Microsoft’s My.

Guideline 12 Provide context and orientation information.

April 20023CSG11 Electronic Commerce HTML John Wordsworth Department of Computer Science The University of Reading Room 129, Ext.

Ali Alshowaish. What is HTML? HTML stands for Hyper Text Markup Language Specifically created to make World Wide Web pages Web authoring software language.

Intro To Web Design with Adobe Dreamweaver CSS Cascading Style Sheets (CSS) is the W3C standard for defining the presentation of documents written in HTML,

CMA Workshop Image Links and Text Links on the Same Line in a Component.

Accessibility : Designing the Interface and Navigation The Non-Designer’s Web Book Chapter 7 Robin Williams and John Tollett Presented by Sherie Loika.

HTML HyperText Markup Language ©Richard L. Goldman July 15, 2003.

Accessible Web Publishing Tool for Microsoft Office Jon Gunderson, Ph.D. University of Illinois at Urbana/Champaign.

Web programming Part 1: HTML 由 NordriDesign 提供

University of South Asia Course Name: Web Application Prepared By: Md Rezaul Huda Reza

HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags –Headings –Paragraphs –Links –Tables –Forms –Images.

1999, COMPUTER SCIENCE, BUU Introduction to HTML Seree Chinodom

Learning Aim C.  In this section we will look at how text, tables, forms and frames can be used in web pages.

HTML Basic Structure. Page Title My First Heading My first paragraph.

HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.

Week-11 (Lecture-1) Introduction to HTML programming: A web based markup language for web. Ex.

The Hypertext Markup Language (HTML) Pat Morin COMP 2405.

INTRO TO WEB DEVELOPMENT html

Web Systems & Technologies

How the Web Works? WWW use classical client / server architecture

Web Basics: HTML/CSS/JavaScript What are they?

Creating a Web Page CSC 121.

Internet Exploration: HTML Basics

20 Adobe Dreamweaver® CS3.

Making the Web Accessible to Impaired Users

Elements of HTML Web Design – Sec 3-2

Creating a Web Page.

Thinking about good Webdesign

Dreamweaver – Project #1

Internet Exploration: HTML Basics

Elements of HTML Web Design – Sec 3-2

Introduction to Web Accessibility

COMPUTING FUNDAMENTALS

Creating a Successful Web Presence

Fixed Positioning.

Johan Ng and Muhammad Hazzry

Sample text or Subtitle

Web Client Side Technologies Raneem Qaddoura

Sample text or Subtitle

HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

Presentation transcript:

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

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

Valid Documents DOCTYPE Language Character Encoding

HTML Validator

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

Navigational Elements Tabindex Accesskey

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

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