Go to Module: - Select Module - 1 -- Disabilities 2 -- Access Plan 3 -- Powerpoint 4 -- Video 5 -- Flash 6 -- Word 7 -- Excel 8 -- PDF 9 -- HTML 10 -- Scripts/Java

HTML
Page 8 of 16

1. Introduction
2. Files You Need
3. Basic Concepts
4. Images
5. CSS
6. Textual Elements
   1. Lab: Textual Elements
7. Forms
8. Tables
9. Plug-ins
10. Image Maps
11. Resources

Lab: Textual Elements in HTML

Estimated Time for Completion: 15 minutes

Prerequisite Knowledge:

To gain the most from this lab, you should have familiarity with:

• Using a text editor (such as NotePad or vi) and performing common file operations (such as saving and copying files).
• HTML coding for text.
• Creating a cascading style sheet (CSS).

Files:

For this lab, you will need:

• A web authoring software, such as Dreamweaver, or a text editing program such as "Notepad" (usually available from the Start Menu > Programs > Accessories).
• PageToCorrect.htm ( , 2 KB)
• CSSToStart.css ( , 1 KB)

Getting Started:

The process for converting non-compliant HTML textual elements into accessible HTML involves the following steps:

1. Define an external style sheet into which you will place all font information. For this example, CSSToStart.css.
2. Remove the font, color, size, etc., elements from the HTML document, transferring the preferences and styles into the style sheet. For this example, use PageToCorrect.htm
   1. Make CSS styles for all formatting that you applied to common tags like "p", "h1", etc.
   2. Create new styles in the ".css" file, replacing/removing any deprecated "font" tags in the document
   3. Add the "div" tags into the HTML document so that the original styles are preserved
3. Correct any structural problems or misuse of header ("h1", "h2", etc.) tags. Doing this assures that your document flows better and that you are not using header tags for font purposes.
4. Correct any misuse of "b", "i", "q" and "blockquote" tags into "em", "strong" and style tags respectively.
5. Provide full descriptions of any abbreviations and acronyms.
6. Save your work and open your newly-created webpage in a web browser.
   Note: In the code samples and visual sample that follow the filenames and descriptions are most likely different than yours.

Review of Final Product

When displayed in a Web browser, your corrected webpage of "PageToCorrect.htm" in this lab should look similar to the following sample of a properly-webpage that is accessible to all users, PageSoution.htm ( , 3 KB).

Your corrected "CSSToStart.css" file should look similar to the following sample of a properly-formatted cascading style sheet, CSSsolution.css ( , 1 KB).

The next page presents information on form structure in HTML.

Previous Page Page 7: Textual Elements

Top of Page        Page 8

Next Page Page 9: Forms

Georgia Tech Research on Accessible Distance Education (GRADE)
Center for Assistive Technology and Environmental Access (CATEA)
Georgia Institute of Technology (GT) College of Architecture (COA)
Email: gradeproject@coa.gatech.edu Fax: 404-894-9320 Phone: 404-894-4960 (v/tty)

Accessibility User Agreement
Developed in collaboration with IDET Communication (IDET).
Funded by the Office of Post Secondary Education (OPE) under Grant #P333A020050.
© Copyright 2003-2006 All Rights Reserved, Georgia Tech Research Corporation.