ITEC 745

Instructional Web Authoring I

Instructor: Ray Cole

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

• 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 715Recall from Last Week:

Instructional Uses of the Web(examples)

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

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

• 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

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

• 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

• 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

This Week:

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

Anatomy of a Web Page

• 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

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

Tags (cont.)

• 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” />

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:

<html>

<head>

<title>This is my title</title>

</head>

<body>

</body>

</html>

Required Minimum Markup

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

Other Useful Tags: Headings

Headings

<h1>ITEC 745, Spring 2008</h1>

<h2>Class Description</h2>

<h2>Contact Information</h2>

<h2>Class Slides</h2>

• Paragraphs:

<p>This is a paragraph.</p>

<p>Here is another paragraph.</p>

<p /> (empty paragraph)

Other Useful Tags: Paragraphs

Paragraphs

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

• 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: Citations

• Block Quotes:

<blockquote>Quotation goes here.</blockquote>

Other Useful Tags: Block Quotes

Block Quote

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

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

HTML EntitiesComplete 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

HTML Entities: ExamplesComplete list: http://www.december.com/html/spec/latin1.html

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

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

• 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:<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>

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>

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

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!

In-class Exercise

• In-class review of student web pages…

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

Photos

• 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