ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8

XHTML Validation, Tables in Dreamweaver Recall from Last Week:

The XHTML 1.0 Transitional web standard is maintained by the World Wide Web Consortium, popularly known as the W3C. Helpfully, the W3C has an automated code-validator at its web site: – Just enter the URL of your page and click Check. XHTML Validation

Things the Validator Will Complain About

Don't Put <h1> Inside <p> Don't Put headings inside paragraphs It's not legal to put headings inside of paragraphs. Headings must appear outside of paragraphs. Headings Can’t Be Inside Paragraphs

Don't Put Lists Inside Paragraphs Don't Put Lists Inside Paragraphs It's not legal to: Put lists inside of paragraphs Lists must appear outside of paragraphs. Lists Can’t Be Inside Paragraphs

Don't Cross Different Open and Close Tags Don't Cross Different Open and Close Tags If you open two or more tags in a row, without an intervening close tag, you must close the most recently opened tag first. So this is legal: <b><i>This text is in bold and italic.<i><b> But this is not: <b><i>This text is in bold and italic.<b><i> Open1 Open2 Close2 Close1

The validator will also complain about: Uppercase letters in tag or attribute names Missing “/” at the end of empty tags such as,,, etc. Missing alt attribute in img tags Missing tag Unclosed non-empty tags And, of course, anything else that violates the XHTML 1.0 specification. Other Validator Complaints

CSS Terminology and Scope

The various elements of a CSS rule have names: blockquote { font-style: italic; } Selector Property Value CSS Terminology

Each CSS rule has “scope” that the browser uses when two rules specify different values for the same property. Example: CSS Scope i { color: aqua; } b { color: red; } Will this font be rendered in aqua or red? How about this font?

Each CSS rule has “scope” that the browser uses when two rules specify different values for the same property. Example: CSS Scope i { color: aqua; } b { color: red; } Will this font be rendered in aqua or red? How about this font? Answer: red Answer: aqua The CSS rule associated with the tag closest to the content “wins.”

Midterm Review, Graphic Hyperlinks, Nested Tables This Week:

Midterm Review This Week:

Know and be able to identify: Attributes, attribute names, attribute values Open tags, close tags, empty tags Selectors, properties, property values How is a CSS file attached to an HTML file? Attribute values must be enclosed in quotes Empty tags must end with “ />” Midterm Review

Know how to write and identify correct/incorrect examples of: XHTML excerpts, including –Proper and improper nesting –Proper and improper tag open/close orders –Proper syntax, including required elements (e.g., in the section, and alt attributes in img tags, etc.) –Minimum legal structure –Proper syntax for HTML entities Midterm Review

Know how to write and identify correct/incorrect examples of: XHTML excerpts, including –Tables, Lists, Blockquotes, Paragraphs, Horizontal Rules, and all the other tags we’ve learned –Emphasis vs. Cite vs. Italic; Strong vs. Bold –Anchor tags –The parts of a URL Midterm Review

Know how to write and identify correct/incorrect examples of: CSS rules, including –The proper use of braces, colons, and semicolons –The meaning of each pair of hexadecimal characters in color specifications; also how to use named colors (you don’t need to memorize the list of 16 named colors, though) –Pseudo-classes for anchor tags –The meaning and uses of a CSS class and how to define one (and how to apply it in your HTML code) –Different units for specifying font sizes Midterm Review

Know how to write and identify correct/incorrect examples of: CSS rules, including –How to read a font-family list –The meaning of common CSS properties such as background-color, color, font-family, font-weight, font- style, etc. Midterm Review

Know some of the important historical figures we’ve learned about and what they did: Ted Nelson Tim Berners-Lee Mark Andreessen Know the two image formats most widely supported by web browsers and when to use each: GIF JPEG Midterm Review

Know what a “comment” is and how to mark one in HTML/XHTML: CSS: /* here’s a comment */ Know the “scope”rules for CSS The rule closest to the content “wins” Midterm Review

Graphic Hyperlinks and Nested Tables Links, Nested Tables

Graphics can be made into links by surrounding the tag with anchor tags ( ). Also, table cells can contain nested tables. The blue cells on the top, left, and bottom, plus the large white area are constructed of one table. The page title (“What You Will Learn”), text, and graphic are each in a separate cell of a nested table.

Midterm exam next week. For Next Week