|
|
|
wl101-ver1.1
Introduction to HTML, XHTML, and Cascading Style Sheets (3 days)
Description
This courseware training guide book will teach you the skills, techniques and strategies you need to successfully create your first Website. The course emphasizes use of the current W3C standards and guidelines and a Web Standards framework to ensure your site will be browser independent. Compatibility with accessibility guidelines is covered as well.
Suggested PrerequisitesComfortable using the Internet
Next CourseAdvanced Web Design: Layout, Forms, and Scripting
Objectives• Format and layout text in HTML and XHTML, the current standards for Web pages and the preferred markup for use with CSS
• Apply design decisions for a group of pages, ensuring a consistent look and feel and shortening the time it takes to develop and maintain the site with CSS
• Insert and Position Graphics
• Add color
• Link to other pages and sites
• Design data tables
• Develop pages that are compliant with Web Accessibility standards
• Insure that Web pages comply with the W3C standards and Web Standards framework
Course OutlineIntroduction (X)HTML, HTML, and Cascading Style Sheets
Introduction to (X)HTML and Markup • What is Hypertext Markup Language (HTML) • Why are Web documents published in (X)HTML • How does XHTML differ from HTML
The Basic Structure of HTML Documents • Setting up an HTML Document • DOCTYPES: What are they • Valid HTML and XHTML DOCTYPES • Language Declaration • The Template • Validation • An example • Summary
Marking Up Your Text • <strong> and <em> Tags • Heading tags • Unordered (bulleted) and Ordered (numbered) lists • Lists – Definition Lists • Adding special characters to your pages • Summary
XHTML 1.0 (and HTML 4.01) • History of HTML and XHTML • Legacy Methods • Browser Independence • Rules for Valid XHTML • Why Writing XHTML Is Writing HTML • Summary
Why a Web-Standards Approach • What is Accessibility • Introduction to Cascading Style Sheets • Introduction to JavaScript
More Marking Up Your Text • Structural vs. Presentational Tags • Sectioning with <div> and <span> • Summary
Links • An Example • Relative vs. Absolute Addressing • Inserting a link to another location on the same page • Adding a link to this location from another document • Additional Link Attributes • When an http:// URL does not specify an HTML file • Adding links to video, sound, downloadable files, and more • Some Comments:
Images • Resizing Images • Characteristics of the GIF graphic file format • Characteristics of the JPEG graphic file format • Characteristics of the PNG graphic file format • The relationship between graphic size and download time • The alt attribute of the <img> tag
Structure of Cascading Style Sheets • Selector – Property - Value • Where Do CSS Rules Go • More on Selectors • Summary
The Cascade: Inheritance and Precedence • Precedence • Inheritance • Where Do CSS Rules Go • Embedded Style Sheets • One More Place Where CSS Styles Go • @import • @media
Classes And Ids • Classes • ID • When Should I Use Which Selector
More on Selectors • Descendant Nodes • Other Descendant Selectors • Pseudo-Element Selectors • Summary
Measurements in CSS
Text Properties • text-indent • text-align • text-decoration • letter-spacing • word-spacing • text-transform • white-space • line-height • Summary
Font Properties • font-family • font-style • font-variant • font-weight • font-size • font
CSS: Colors and Backgrounds • Color • Background Images • Summary
Lists • list-style-type • list-style-position • list-style-image • list-style • Summary
The CSS Box Model • width and height • padding, padding-left, padding-right, padding-top, padding-bottom • border properties • margin, margin-top, margin-right, margin-bottom, margin-left • overflow • Summary
CSS Page Layouts • float • clear • Column layouts with float and clear • positioning • display
Tables • Creating a Data Table • An Example: • Using CSS to Enhance tables • Summary
Appendix A: Special Characters
Appendix B: Color Values and Their Hex Triplet Equivalents
Appendix C: More On Accessibility • W3C WCAG Guidelines • WCAG 1.0 Priorities • WCAG 1.0 Priorities • 1194.22 Web-based Intranet and Internet Information and Application Standards
Appendix D: Legacy Frames
An Introduction to Frames • Frames: Creating the main document • The <frameset> Tag • The cols and rows attributes of <frameset> • The <frame> tag • Additional attributes of the <frame> tag • Additional attributes of the <frameset> tag (for older browsers) • Using nested framesets for complex layouts • The Doctype for framesets • The <noframes> tag • Exercise D1: Starting a frames-based website • A Possible Solution to Exercise D1
Adding Links Between Frames • The tag • Additional options for linked windows • Magic target names • Changing the color of frame borders • Exercise D2: Targeting Links and Working with Attributes • A Possible Solution to Exercise D2
Inline Frames
Appendix E: Websites and Resources
|
|
|
|
|
