ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 10.
ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.
-
Upload
gervase-lawrence -
Category
Documents
-
view
216 -
download
0
Transcript of ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.
![Page 1: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/1.jpg)
ITEC 745
Instructional Web Authoring I
Instructor: Ray Cole
Week 8
![Page 2: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/2.jpg)
XHTML Validation, Tables in Dreamweaver
Recall from Last Week:
![Page 3: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/3.jpg)
• 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
![Page 4: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/4.jpg)
Things the Validator Will Complain About
![Page 5: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/5.jpg)
<!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
![Page 6: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/6.jpg)
<!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
![Page 7: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/7.jpg)
<!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
![Page 8: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/8.jpg)
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
![Page 9: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/9.jpg)
CSS Terminology and Scope
![Page 10: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/10.jpg)
The various elements of a CSS rule have names:
blockquote { font-style: italic; }
Selector Property Value
CSS Terminology
![Page 11: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/11.jpg)
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>
![Page 12: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/12.jpg)
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.”
![Page 13: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/13.jpg)
Midterm Review,Graphic Hyperlinks,
Nested Tables
This Week:
![Page 14: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/14.jpg)
Midterm Review
This Week:
![Page 15: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/15.jpg)
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
![Page 16: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/16.jpg)
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
![Page 17: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/17.jpg)
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
![Page 18: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/18.jpg)
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
![Page 19: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/19.jpg)
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
![Page 20: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/20.jpg)
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
![Page 21: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/21.jpg)
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
![Page 22: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/22.jpg)
Graphic Hyperlinksand Nested Tables
Links, Nested Tables
![Page 23: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/23.jpg)
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.
![Page 24: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b808e7/html5/thumbnails/24.jpg)
• Midterm exam next week.
For Next Week