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

2. XHTML Validation, Tables in Dreamweaver Recall from Last Week:

3. 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

4. Things the Validator Will Complain About

5. 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

6. 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

7. 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

8. 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

9. CSS Terminology and Scope

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

11. 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?

12. 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.”

13. Midterm Review, Graphic Hyperlinks, Nested Tables This Week:

14. Midterm Review This Week:

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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

22. Two Character Dialog Page Type

23. Two Character Dialog The first page introduces the characters and the subject of the dialog. I also like to ask a focusing question, to encourage the learner to actively seek specific information while going through the dialog. I usually follow the dialog with a page-type (e.g., Multiple Choice or Fill In the Blank) that gives the learner a chance to answer the question.

24. Two Character Dialog Next, the dialog begins as the character on the left “speaks.” Since this class doesn’t cover audio production (but do sign up for ITEC 715 in the Fall because I cover it pretty thoroughly there), what each character says is represented, comic-book style, by the text in the word balloon. This is a 4 column table. Can you see how it’s arranged?

25. Two Character Dialog Next, the character on the right responds to what the character on the left said. (Notice that the word balloon now points to the character on the right.)

26. Two Character Dialog The back-and-forth continues, until your characters have explained the instructional material you are trying to convey.

27. Two Character Dialog This implementation is very minimal, and probably not a “pretty” as it could be. Common variations on this page-type that you could use: Replacing the image of the person who’s speaking with either a slightly larger image, or to one with his or her mouth open if the non- speaking image has a closed mouth.

28. Two Character Dialog Common variations on this page-type that you could use: Replacing the image of the person who’s speaking with either a slightly larger image, or to one with his or her mouth open if the non-speaking image has a closed mouth Adding “thought balloons” above each character to give learners an insight into what the characters are thinking.

29. Two Character Dialog This is the end of this dialog. At this point, I would typically follow with a page type that allows the learner to answer the question posed at the start of the dialog: How should Jim protect his costume from chemical contamination coming from resin accessories such as the "communicator" badge that completes the look of the costume when it is on display?

30. Graphic Hyperlinks and Nested Tables Links, Nested Tables

31. 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.

32. Create a “Text Explore” set of web pages that will describe the outline of your final project (see the last slide in this deck for an example screen- capture): –Construct this set of web pages by creating an XHTML table to control the layout of each page. This table will have 5 rows of 2 columns each, but the 1 st, 2 nd, 4 th, and 5 th rows will have their table data ( ) cells merged together. Remember, to “merge” two cells, delete the second cell, and add a colspan=“2” attribute to the first cell. For Next Week

33. –Put “ITEC 745: Ray Cole’s Final Project Outline” in the first row, but replace my name with yours –Put your topic name in the second row, aligned to the right –In the 1 st column of the 3 rd row, tell me the titles of the modules of your course. Remember, “modules” are like the main “chapters” in a textbook. List these module titles in a bulleted list (as in the example on the last slide of this deck) and make them links to new pages For Next Week

34. –The main (1 st ) page of your homework will have a blank second column in the 3rd row; all subsequent pages will contain 2 bulleted lists in this column—one listing the learning objectives for the selected module, and the other listing the topic titles into which you will further subdivide this module. These topics are what the learner will need to master in order to achieve the learning objectives for the module. Use action verbs such as “identify”, “categorize”, “demonstrate”, “construct”, etc. when writing your learning objectives. Avoid using verbs such as “know” and “understand” which are not observable behaviors For Next Week

35. –Leave the 4 th and 5 th rows blank except for a background color. The 4 th and 2 nd rows should have the same background color. Similarly, the 1 st and 5 th rows should have matching background colors. (You can pick any colors you like.) For Next Week

36. Strategy: –Use the Dreamweaver Insert  Table feature to make constructing the table easy. Don’t forget, you’ll need CSS rules too, otherwise your table will not look right –At first, just enter the bullet list of module titles without making them be links –After you’ve created the first page (except for the links), save it out with a slightly different name, once for each module in your course (use Dreamweaver’s File  Save As feature) For Next Week

37. Strategy: –Now you can easily construct the links on each page by using the link tool (looks like a chain, located in the upper left of your Dreamweaver screen) –Next, add your learning objectives and topic lists to each of the subsequent pages in the second column of row 3 –Upload the whole set of pages to your SFSU web space For Next Week

38. Strategy: –Send the URL for each page to the W3C XHTML validator at http://validator.w3.org/ to verify that your code is correct; if not, fix any errors and revalidate –During class, turn in a plain text file that contains the URL for your assignment’s first page For Next Week

39. First Page: Blank 2 nd column in 3 rd row.

40. Module Pages: Place your learning objectives and topic list in the 2 nd column of the 3 rd row. Create a page like this for each module that you intend to build in your final project.