Transcript Week 3
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” Quotations, not “Change the indent” Paragraphs, not “Type a blank line to separate” etc. 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> 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 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) 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. 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 Head Section: Doesn’t Display Body Section: Does Display Required Minimum Markup • Minimum web page: <html> <head> <title>This is my title</title> </head> <body> </body> </html> 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> Headings <h1>ITEC 745, Spring 2008</h1> <h2>Class Description</h2> <h2>Contact Information</h2> <h2>Class Slides</h2> Other Useful Tags: Paragraphs • Paragraphs: <p>This is a paragraph.</p> <p>Here is another paragraph.</p> <p /> (empty paragraph) Paragraphs <p>This class will give you a solid grounding in web authoring fundamentals, focusing on three key areas:</p> 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> Other Useful Tags: Block Quotes • Block Quotes: <blockquote>Quotation goes here.</blockquote> Block Quote 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> 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. 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 <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: Examples Complete list: http://www.december.com/html/spec/latin1.html • Vowels with umlats: – Mötley Crüe • Vowels with forward-tilted accents – Miklós Rósza • Vowels with backwardtilted accents – Departament de Física Aplicada i Òptica, University of Barcelona • Vowels with slashes – Tor Nørretranders 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. 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). 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.htm and htttp://www.htmlref.com/examples/chapter05/brclear_src.html for details 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” /> 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“ /> Keeping Your Code Tidy Indenting 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. Indenting Poor indenting: 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> <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> 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). This Week: URLs, More Tags, and Comments 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>)? Uniform Resource Locators (URLs) How to Read a URL Uniform Resource Locators (URLs) • Note: Uniform, not “universal”! • Example URL: http://www.sfsu.edu:80/~itec/program/index.html Scheme: http Hostname: www Domain: sfsu.edu Port: 80 Resource: index.html Path to resource: ~itec/program/ 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:[email protected] • mailto scheme for email (usually Simple Mail Transfer Protocol (SMTP)) services 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. 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. 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) 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. Do not put spaces in your file names! 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 myphoto.jpg is relative to the page that contains this code. 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! Hyperlinks! Anchor Tags 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? 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.” 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. 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> 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 same server (and in the same folder) as this page: Anchor Tags: Instructional Application Putting Anchor Tags to Good Instructional Use: An Interactive Interview Example 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 --> 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 --> An “Interactive” Interview (p. 3) Rudresh’s answer: “At my company, we have an excellent team of professional animators and graphic artists, so I am rarely called upon to create final graphics or animations myself. However, I still need to know how to create simple graphics because that is how I communicate to the graphic artists and animators the details of what I want them to create for me.” Back | Next An “Interactive” Interview (p. 4) “I’ve enjoyed chatting with you. But now I have to get back to work. Good luck in your future pursuits as an Instructional Designer. It’s a job I really enjoy, and I hope you will find it enjoyable too. Goodbye.” <-- Back | Next --> An “Interactive” Interview (p. 1) An “Interactive” Interview (p. 1) An “Interactive” Interview (p. 1) An “Interactive” Interview (p. 1) In-Class Exercise Create this Interactive Interview with Rudresh For Next Week • Create an interactive interview consisting of 2 questions. Structure the interview like the interview we built in class (see the four “Interactive Interview” slides for a mockup). Make sure the Next and Back links on each page take the learner to the correct new page. (Next on page 1 goes to page 4; Back on pages 2, 3 and 4 goes to page 1). Include a photo of the person being interviewed. Turn in the interactive interview web pages and photo(s) next week. • Download and read the ITEC745-Week04.ppt slides.