itec 745 instructional web authoring i instructor: ray cole week 8
TRANSCRIPT
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:– http://validator.w3.org/
• Just enter the URL of your page and click Check.
XHTML Validation
Things the Validator Will Complain About
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Don't Put <h1> Inside <p></title></head>
<body> <p><h1>Don't Put headings inside paragraphs</h1></p>
<p> It's not legal to put headings inside of paragraphs. Headings must appear outside of paragraphs. </p>
</body></html>
Headings Can’t Be Inside Paragraphs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Don't Put Lists Inside Paragraphs</title></head>
<body>
<h1>Don't Put Lists Inside Paragraphs</h1>
<p>It's not legal to: <ul> <li>Put lists inside of paragraphs</li> </ul> Lists must appear outside of paragraphs. </p>
</body></html>
Lists Can’t Be Inside Paragraphs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Don't Cross Different Open and Close Tags</title></head>
<body>
<h1>Don't Cross Different Open and Close Tags</h1> <p> If you open two or more tags in a row, without an intervening close tag, you must close the most recently opened tag first. </p> <p> <b><i>So this is legal:</i></b> <b><i>This text is in bold and italic.<i><b> </p> <p><b><i>But this is not:</b></i> <b><i>This text is in bold and italic.<b><i> </p></body></html>
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 <img />, <hr />, <br clear=“left” />, etc.• Missing alt attribute in img tags• Missing <title> 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;}
<i><b>Will this font be rendered in aqua or red?</b></i>
<b><i>How about this font?</i></b>
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;}
<i><b>Will this font be rendered in aqua or red?</b></i>
<b><i>How about this font?</i></b>
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., <title> in the <head> 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: <!– here’s a comment -->•CSS: /* here’s a comment */
Know the “scope”rules for CSS• The rule closest to the content “wins”
Midterm Review
Graphic Hyperlinksand Nested Tables
Links, Nested Tables
Links, Nested Tables
Graphics can be made into links by surrounding the <img /> tag with anchor tags (<a> </a>).
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