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

2. 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 ITEC 715 Recall from Last Week:

3. 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 ITEC 715 Recall from Last Week:

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

8. 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”) The Web Browser

9. 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 Browser Tricks

10. 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 More Browser Tricks

11. This Week: Writing a Web Page

12. 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. Anatomy of a Web Page

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

14. Some tags don’t require content. They can be closed and opened all at once: –Place a horizontal rule (line) on the page: –Place an image (picture) on the page: The space before the slash –XHTML specification says: not required –For compatibility with older browsers: required Tags (cont.)

15. 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 instead) Tags (cont.)

16. Most tags support one or more attributes Attributes are always attached to the open tag: –Associate special indentation rules with this paragraph: This paragraph will render with a fancy indent. Attributes come after the tag name but before the closing angle bracket: Attributes 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. 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 Required Minimum Markup

18. Head Section: Doesn’t Display

19. Body Section: Does Display

20. Minimum web page: This is my title Required Minimum Markup

21. Headings: h1 – h6 This is the topmost heading This is a subheading This is a sub-subheading … etc… This is a sub-sub-sub-sub-subheading! Other Useful Tags: Headings

22. Headings ITEC 745, Spring 2008 Class Description Contact Information Class Slides

23. Paragraphs: This is a paragraph. Here is another paragraph. (empty paragraph) Other Useful Tags: Paragraphs

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

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

26. Block Quotes: Quotation goes here. Other Useful Tags: Block Quotes Block Quote

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

28. Why use instead of (for bold), since they usually look the same? – identifies purpose, not look. Screen readers may read words tagged with a different inflection. Bold ( ) 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 instead of (for italic)? –Essentially, same answer as above. Other Useful Tags: Strong, Em

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

30. Vowels with umlats: –Mötley Crüe Vowels with forward-tilted accents –Miklós Rósza Vowels with backward- tilted accents –Departament de Física Aplicada i Òptica, University of Barcelona Vowels with slashes –Tor Nørretranders HTML Entities: Examples Complete list: http://www.december.com/html/spec/latin1.html

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

32. Tag (simplest form): or 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). Images (cont.)

33. More image attributes –Align: specify how the image affects the flow of text. – –Cancel the alignment attribute’s effect with –See: http://www.htmlref.com/reference/appa/tag_break.htm and htttp://www.htmlref.com/examples/chapter05/brclear_src.html for details http://www.htmlref.com/reference/appa/tag_break.htm htttp://www.htmlref.com/examples/chapter05/brclear_src.html Images (cont.)

34. 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). – Images (cont.)

36. Keeping Your Code Tidy Indenting

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

38. Poor indenting: blah Blah My first paragraph. My 2nd. And my third. Indenting Better indenting: blah Blah My first paragraph. My 2nd. And my third.

39. 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). Tidy Code

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 section!

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

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

43. 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. For Next Week