1 / 58

ITEC 745

ITEC 745. Instructional Web Authoring I Instructor: Ray Cole. Week 3. Recall from Last Week:. Writing a Web Page. 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”

jada-daniel
Télécharger la présentation

ITEC 745

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Recall from Last Week: Writing a Web Page

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

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

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

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

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

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

  9. Head Section: Doesn’t Display

  10. Body Section: Does Display

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  25. 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” />

  26. 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“ />

  27. Keeping Your Code Tidy Indenting

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

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

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

  31. This Week: URLs, More Tags, and Comments

  32. First: Review of Bio Pages Turn in your biography pages and accompanying photos by creating a folder with your name in the Student Work folder in the Week03 folder on the class server. Then, we’ll review and critique them in-class. • Is there a close tag for each open tag? • Are all nested tags closed in the correct order (opposite from the order in which they were opened)? • Are all required elements there (<html><head><title></title></head><body></body></html>)?

  33. Uniform Resource Locators (URLs) How to Read a URL

  34. Uniform Resource Locators (URLs) • Note: Uniform, not “universal”! • Example URL: http://www.sfsu.edu:80/~itec/program/index.html Port: 80 Scheme: http Hostname: wwwDomain: sfsu.edu Resource: index.html Path to resource: ~itec/program/

  35. URL Schemes • URLs can point to many kinds of Internet resources, not just web pages: • ftp://ftp.is.co.za/rfc/rfc1808.txt • ftp scheme for File Transfer Protocol services • gopher://gopher.well.com/[seems to be dead now] • gopher scheme for Gopher and Gopher+ Protocol services • http://www.library.sfsu.edu/about/hours.html • http scheme for Hypertext Transfer Protocol (web) services • mailto:rayc@sfsu.edu • mailto scheme for email (usually Simple Mail Transfer Protocol (SMTP)) services

  36. URL Hostnames • The hostname/domain name is the “human readable” network name of the computer that hosts the resource. • Each computer on the Internet is assigned an Internet Protocol (IP) address. • www.sfsu.edu  130.212.10.204 • The Domain Name System (DNS) handles mapping between IP addresses and human readable hostnames. • Your browser consults DNS to convert hostnames in URLs to IP addresses as needed.

  37. URL Ports • Any given computer on the Internet may be providing multiple services, such as: • Email • FTP • Network management (SNMP) • etc. • Each service “listens” for requests on a different “port.” The default port for web services (http) is port 80.

  38. URL Ports (cont.) • If left unspecified in the URL, the default port for the scheme is assumed • http://www.sfsu.edu/ (port 80 used by default) • http://gopher.well.com:70/ (port 70 used instead) • Default port assignment for common services: • ftp: 21 (basic file transfer service) • http: 80 (basic web service) • smtp:25 (low-level email transfer protocol) • pop3: 110 (common email retrieval service) • https: 443 (secure sockets layer web access)

  39. URL Resource Paths and Names • Legal characters in URL resource paths and names include the following: • Lowercase letters “a” to “z” and uppercase letters “A” to “Z” • Digits “0” to “9” • The plus character “+” • The period character “.” (pronounced “dot”) • The dash character “-” • The underscore character “_” • …plus a few others, depending on context… • Note that the space character “ ” is not one of the allowable characters. Donotput spaces in your file names!

  40. URLs: Absolute vs. Relative • URLs are used not only by web surfers to request viewing specific web pages, but also by web page authors • For example, in the following <img> tag, <img src=“my-photo.jpg” alt=“photo of T. K.” /> “my-photo.jpg” is actually a URL. It is known as a “relative” URL, because the path to my-photo.jpg is relative to the page that contains this code.

  41. URLs: Absolute vs. Relative (cont.) • Suppose the code <img src=“my-photo.jpg” alt=“[alt text]” /> is contained in a page called “my-bio.html”, located in a folder called “about-me” on a web server with a hostname “www.mydomain.com”. • Then you can convert the relative URL “my-photo.jpg” to an absolute URL by making the full scheme, hostname/domain name, and path explicit: <img src=“http://www.mydomain.com/about-me/my-photo.jpg” /> • It is also considered an absolute URL even if the scheme, hostname, and domain name are left out—as long as the path begins with a “/” it’s an absolute URL. • We’ll have more to say about absolute and relative URLs later in the is course. Stay tuned!

  42. Hyperlinks! Anchor Tags

  43. What Makes It the Web? • Why is it called the “web”? • Why is the web services protocol called the “Hypertext Transfer Protocol” (http)? • Why is the web’s markup language called the “Hypertext Markup Language” (HTML)? • What is hypertext?

  44. Origins of the Term “Hypertext” • Ted Nelson coined the term “Hypertext” in 1963 • His definition: “A body of written or pictorial material interconnected in a complex way that it could not be conveniently represented on paper.” Ted Nelson in 2003. 40 years earlier, he coined the term “hypertext.”

  45. What Makes It the Web? • By Nelson’s original definition, the key part of a hypertext system (such as the world wide web) is that its material is interconnected. • Anchor tags allow web pages to be interconnected. They are one of the core innovations of the web.

  46. Making Links • Links can be made from a web page on one web server to a web page on another: • The home page of the <a href=“http://www.w3.org/”>W3C</a>

  47. Making Links • Links can be made from one web page to another on the same server: • <p>This page describes my work. To read about my hobbies, visit my <a href=“hobbies.html”>hobby</a> page.</p> This is a relative URL,located on the sameserver (and in the samefolder) as this page:

  48. Anchor Tags: Instructional Application Putting Anchor Tags to Good Instructional Use: An Interactive Interview Example

  49. An “Interactive” Interview (p. 1) “Hi. My name is Rudresh. I’m an Instructional Designer. I understand you have some questions for me. Let’s see if I can help answer them.” Q1: In your opinion as an Instructional Designer, which do you think is more important to designing a successful course: clear content presentation or good design of learning activities? Q2: As an Instructional Designer, do you usually create final graphics or animations for your e-learning projects? Click each question to ask it of Rudresh. When you are done, click Next to continue. <-- Back| Next -->

  50. An “Interactive” Interview (p. 2) Rudresh’s answer: “In my opinion, although clear content presentation is important, good design of learning activities is actually the more important feature of a successful course. Most people who aren’t Instructional Designers (and even a few who are) think that all you have to do is present clear content. But I think most of the real learning happens when learners work with the material during learning activities, not when they read or listen to someone ‘data dump’ content, no matter how clear.” <-- Back |Next -->

More Related