ITEC 745

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

2. Recall from Last Week: ITEC 715 • Required Entry Skills • Grading • Homework + Final Project • No midterm or final exam • Overview of Course Goals • Fluency with XHTML and CSS • Use of Adobe Dreamweaver (industry standard tool) • Using instructional design principles to craft effective web sites to support the needs of learners, instructors, and instructional designers • Academic Honesty

3. Recall from Last Week: ITEC 715 • No required textbook • The important Web standards and documentation are all freely available online • Recommended book • Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day by Laura Lemay and Rafe Colburn; Sams Publishing, 2006, ISBN: 0-672-32886-0

4. Instructional Uses of the Web(examples)

5. Instructional Uses of the Web Examples: • http://www.sfsu.edu/ • School presence: info, identity… • http://webcast.berkeley.edu/ • Course presence (ILT): syllabus, lectures, handouts, supplementary materials… • http://home.znet.com/ikorn/teaching.html • Instructor presence: Biography, CV (resume), courses taught, contact info, special projects… • http://www.ddiworld.com/WBT-course-demo/demo.html • Web-based training (WBT), also known as e-learning, or sometimes online learning

6. What Is the World Wide Web? What is a network? Two or more computers connected by a wire (or, these days, by a radio wave or beam of light). What is an internet? Two or more networks connected by a wire (or, these days, by a radio wave or beam of light). What is the Internet? The worldwide, publicly accessible internet commonly used to carry email, web, and other data traffic. What is the WWW? A set of software services that run on the Internet (or any network that runs the appropriate networking software protocols). What is an intranet? Just like the Internet, but private to an institution of limited set of users. network internet

7. WWW: Pieces and Parts • Web Browsers • Firefox, Internet Explorer, Safari, Opera, Netscape, etc. • Web Servers • Apache, Microsoft IIS, etc. • Web Sites • Where all the content is located Mosaic: The first popular graphical web browser, first released in 1993

8. The Web Browser What a web browser does (not a complete list): • Accepts a URL from the end-user • Based on the URL, sends requests for each web page and web page component (e.g., any embedded graphics or multimedia components) to the appropriate web server • Receives a copy of the requested document from the web server, along with some additional information, such as the document’s associated MIME type • Decides, based on the MIME type and “helper app” associations, whether to display the document directly, or to launch it into a helper application • Renders the document if it decided to display it directly. It does this by interpreting the HTML or XHTML code in the document, and translating that into a particular way of displaying the document • Keeps local copies of recently-viewed web pages in order to display them more quickly if accessed again in the near future (local files stored in the browser’s “cache”)

9. Browser Tricks • View Source  See the code that makes the web page you are currently viewing • Forced Reload  Force the browser to reload the page from the web server, even if there is a recent copy of the page still in the browser’s cache • Mozilla/Firefox: Shift reload • Internet Explorer: Control refresh • Safari: Option refresh

10. More Browser Tricks • Clear Cache  Empty the browser’s cache by deleting all files stored in it; this guarantees that the next page you load will not be from the local cache • Open in New Window  Leave the current web page open, but follow a link and load it into a new browser window (allows you to see two or more pages at once). Can be done programmatically, too

11. This Week: Writing a Web Page

12. Anatomy of a Web Page • Structure, not layout • Markup marks sections by their function, not by how they look • Headings, not “Large font, bold” • Citations, not “Italicize” • Quotations, not “Change the indent” • Paragraphs, not “Type a blank line to separate” • etc.

13. Tags • Markup is implemented as tags and attributes • Most tags come in two parts • Open: <tag> • Close: </tag> • Between the open and close tag comes the content that the tag marks: • <cite>Teach Yourself Web Publishing</cite> • <p>This is a short paragraph. It contains only two sentences, and they are placed between the open and close paragraph tags.</p>

14. Tags (cont.) • Some tags don’t require content. They can be closed and opened all at once: • Place a horizontal rule (line) on the page: <hr /> • Place an image (picture) on the page: <img src=“photo.jpg” alt=“photo of something interesting” /> • The space before the slash • XHTML specification says: not required • For compatibility with older browsers: required

15. Tags (cont.) • Note: Lower case for all tags • Required by XHTML standard • Contradicts older HTML conventions • White space: tabs, spaces, newlines • White space in content • Collapsed: e.g., • 5 spaces followed by a tab  reduced to a single space • 20 newlines  reduced to a single space (use <p /> instead)

16. Attributes • Most tags support one or more attributes • Attributes are always attached to the open tag: • Associate special indentation rules with this paragraph: • <p class=“fancy_indent”>This paragraph will render with a fancy indent.</p> • Attributes come after the tag name but before the closing angle bracket: • <img src=“mypictures/rayc.jpg” alt=“Photo of Ray Cole” /> The src attribute tells the browser where to find the image file. The alt attribute tells the browser what text message to display if the browser can’t display or can’t find the image file.

17. Required Minimum Markup • Web pages have three sections • A prologue section—more on this later; ignore for now • A head section that does not render (display) in the browser window’s content area, and • A body section that does render in the browser window’s content area

18. Head Section: Doesn’t Display

19. Body Section: Does Display

20. Required Minimum Markup • Minimum web page: <html> <head> <title>This is my title</title> </head> <body> </body> </html>

21. Other Useful Tags: Headings • Headings: h1 – h6 <h1>This is the topmost heading</h1> <h2>This is a subheading</h2> <h3>This is a sub-subheading</h3> … etc… <h6>This is a sub-sub-sub-sub-subheading!</h6>

22. Headings <h1>ITEC 745, Spring 2008</h1> <h2>Class Description</h2> <h2>Contact Information</h2> <h2>Class Slides</h2>

23. Other Useful Tags: Paragraphs • Paragraphs: <p>This is a paragraph.</p> <p>Here is another paragraph.</p> <p /> (empty paragraph)

24. Paragraphs <p>This class will give you a solid grounding in web authoring fundamentals, focusing on three key areas:</p>

25. Other Useful Tags: Citations • Citations: <p>J.R.R. Tolkien is most famous for his Middle Earth novels, <cite>The Hobbit</cite>, <cite>The Fellowship of the Ring</cite>, <cite>The Two Towers</cite>, and <cite>The Return of the King</cite>.</p>

26. Other Useful Tags: Block Quotes • Block Quotes: <blockquote>Quotation goes here.</blockquote> Block Quote

27. Other Useful Tags: Strong, Em • Strong: <p>To reiterate, I <strong>strongly</strong> encourage you to keep the structure, rather than look, of your pages foremost in your mind.</p> • Emphasis: <p>Do <em>not</em> be late!</p>

28. Other Useful Tags: Strong, Em • Why use <strong> instead of <b> (for bold), since they usually look the same? • <strong> identifies purpose, not look. Screen readers may read words tagged <strong> with a different inflection. Bold (<b>) is primarily a visual tag, and as such, really shouldn’t be used, since it violates the web’s “structure not layout” philosophy (use CSS—covered later in this course—to affect the look of your web pages, including making words bold, instead). • Why use <em> instead of <i> (for italic)? • Essentially, same answer as above.

29. HTML Entities Complete list: http://www.december.com/html/spec/latin1.html • Allows you to include “meta” characters in your web pages: • E.g., can’t write “I like to use the <strong> tag!” in your web page because the browser will interpret <strong> as an unclosed tag! • Instead: write “I like to use the &lt;strong&gt; tag!” • Entities begin with an ampersand (&) and end with a semicolon (;). They allow meta and foreign characters into your web page’s text.

30. HTML Entities: Examples Complete list: http://www.december.com/html/spec/latin1.html • Vowels with umlats: • M&ouml;tley Cr&uuml;e • Vowels with forward-tilted accents • Mikl&oacute;s R&oacute;sza • Vowels with backward-tilted accents • Departament de F&iacute;sica Aplicada i &Ograve;ptica, University of Barcelona • Vowels with slashes • Tor N&oslash;rretranders

31. Images • Only two image formats are directly supported by the majority of browsers: JPEG and GIF • JPEG: • Filenames should end with the extension .jpg or .jpeg (preferably .jpg). • Use this format when your image has lots of colors (e.g., a photographic image, or a lit 3-D model with lots of gradients). • GIF: • Filenames should end with the extension .gif • Use this format when your image has few colors (e.g., cartoons, drawings, simple illustrations and diagrams) or requires regions to be transparent.

32. Images (cont.) • Tag (simplest form): <img src=“image.gif” alt=“text description for screen reader” /> or <img src=“image.jpg” alt=“text description for screen reader” /> • The “alt” attribute is required in XHTML: • It specifies alternate text to display in case the browser is unable to display the image (e.g., if the specified image file can’t be found, or if the browser is text-only (like “Lynx”), or if the “browser” is actually a screen-reader for the visually impaired).

33. Images (cont.) • More image attributes • Align: specify how the image affects the flow of text. • <img src=“image.gif” alt=“description” align=“right” /> • <img src=“image.gif” alt=“description” align=“left” /> • Cancel the alignment attribute’s effect with • <br clear=“right” /> • <br clear=“left” /> • <br clear=“all” /> • See: http://www.htmlref.com/reference/appa/tag_break.htmand htttp://www.htmlref.com/examples/chapter05/brclear_src.html for details

34. Images (cont.) • More image attributes • Height: specify the height of the image (in “pixels”). • Width: specify the width of the image (in “pixels”). • Border: specify the presence and width of a border around the image (in “pixels”). • Hspace: specify the horizontal space (in “pixels”) to be kept clear around the image horizontally (i.e., to its left and right). • Vspace: specify the vertical space (in “pixels”) to be kept clear around the image vertically (i.e., above and below it). • <img src=“image.jpg” height=“240” width=“320” border=“2” hspace=“10” vspace=“10” alt=“alternate text goes here” />

35. Images (cont.) <img src=“user_illusion.gif" width="150" height="237" hspace="20" vspace="10" alt="cover of The User Illusion by Tor Norretranders" align="left“ />

36. Keeping Your Code Tidy Indenting

37. Indenting • To keep your code readable, you need to pay attention to how you use indentation. • Use it to line up matching open and close tags. Remember that white space is collapsed anyway, so you can freely place line breaks around tags.

38. Indenting Poor indenting: <html> <head> <title>blah</title></head> <body><h1>Blah </h1> <p>My first paragraph.</p> <p>My 2nd.</p><p>And my third.</p></body> </html> Better indenting: <html> <head> <title>blah</title> </head> <body> <h1>Blah</h1> <p>My first paragraph.</p> <p>My 2nd.</p> <p>And my third.</p> </body> </html>

39. Tidy Code Recommendations: • Use 4 spaces to indent each level. • Use line breaks to separate logical chunks of code. • Use lower case for all tags (required by XHTML). • Use lower case for all file names (e.g., the names of image files specified in the src attribute).

40. In-class Exercise • Open “ITEC-745-Week02-ICE.doc” for the text. • Using the text from the “ITEC-745-Week02-ICE.doc” Word file, create the web page shown at right. Watch out for “smart” quotes! • You’ll need to include a heading, an image, several vowel-with-slash entities, a blockquote, and several paragraphs. • Don’t forget the <head> section!

41. In-class Exercise • In-class review of student web pages…

42. Photos • Take or hand out digital photos to class for use in this week’s homework assignment.

43. For Next Week • Imagine that you’ve just written an instructional design book. Your publisher has asked you to supply a short (3-5 paragraph) biography of yourself for the back cover of the book. Create this biography as web page. Make sure it includes a photo. Turn it in next week as an XHTML file (extension .html) along with the linked photo (extension .jpg). • Download and read the ITEC745-Week03.ppt slides.