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

Writing a Web Page Recall from Last Week:

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

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

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

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

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.

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

Head Section: Doesn’t Display

Body Section: Does Display

Minimum web page: This is my title Required Minimum Markup

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

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

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

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

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

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

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

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

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:

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:

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

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

More image attributes –Align: specify how the image affects the flow of text. – –Cancel the alignment attribute’s effect with –See: and htttp:// for details htttp:// 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). – Images (cont.)

Keeping Your Code Tidy 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: blah Blah My first paragraph. My 2nd. And my third. Indenting Better indenting: blah Blah My first paragraph. My 2nd. And my third.

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

This Week: URLs, More Tags, and Comments

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 ( )? First: Review of Bio Pages

Uniform Resource Locators (URLs) How to Read a URL

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

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://gopher.well.com/ gopher scheme for Gopher and Gopher+ Protocol services – http scheme for Hypertext Transfer Protocol (web) services mailto scheme for (usually Simple Mail Transfer Protocol (SMTP)) services URL Schemes

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. –  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 Hostnames

Any given computer on the Internet may be providing multiple services, such as: – –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

If left unspecified in the URL, the default port for the scheme is assumed – (port 80 used by default) – (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 transfer protocol) –pop3: 110 (common retrieval service) –https: 443 (secure sockets layer web access) URL Ports (cont.)

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! URL Resource Paths and Names

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 tag, URLs: Absolute vs. Relative “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.

Suppose the code is contained in a page called “my-bio.html”, located in a folder called “about-me” on a web server with a hostname “ 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: 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! URLs: Absolute vs. Relative (cont.)

Hyperlinks! Anchor Tags

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? What Makes It the Web?

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.” Origins of the Term “Hypertext” Ted Nelson in years earlier, he coined the term “hypertext.”

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. What Makes It the Web?

Links can be made from a web page on one web server to a web page on another: –The home page of the W3C Making Links

Links can be made from one web page to another on the same server: – This page describes my work. To read about my hobbies, visit my hobby page. This is a relative URL, located on the same server (and in the same folder) as this page: Making Links

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.

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

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

An “Interactive” Interview (p. 1)

In-Class Exercise Create this Interactive Interview with Rudresh

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