UT Bullet Web-based Hypermedia Courseware Development

Chapter 2: Web-based Hypermedia
Informational Courseware
with HTML


Table of Contents


UT Bullet What You Will Learn To Do

UT Bullet Objectives, HTML Versions, and the HTML Document Type Prologue.

UT Bullet HTML Elements

UT Bullet Summary

UT Bullet Additional Hands-On Practice Project Assignment

UT Bullet References

Chapter 2: Hypermedia Courseware with HTML UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Chapter 2: Web-based Hypermedia
Information and Presentation Courseware
with HTML

What You Will Learn To Do
Red Bullet Important HTML Elements
Red Bullet Web-based Text and Graphics
Red Bullet Web-based HTML Courseware
    Cyan Bullet Course Home Page
    Cyan Bullet Syllabus
    Cyan Bullet Instructor Bio
    Cyan Bullet Newsgroup Access
    Cyan Bullet Instructor Email Access
Chapter 2: Hypermedia Courseware with HTML 2 - 1 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Objectives, HTML Versions, and the HTML Document Type Prologue.

This hypermedia tutorial (hypertutorial) is intended to get you started developing HTML and JavaScript hypermedia courseware products as soon as possible. To speed it up, you will focus on what you need to know, when you need to know it. So, those features of HTML and JavaScript will be emphasized that directly contribute to accomplishing the most important and frequently pursued instructional goals and objectives.

Keep in mind that Web browsers and their upgrades implement HTML 2 and HTML 3 standards to varying degrees. Keep in mind also that HTML standards themselves continue to evolve. You need to be aware that there is an ongoing state of flux concerning which HTML features are implemented with which browsers. Some HTML features which previously were implemented are now obsolete. New HTML features continue to be incorporated in browser upgrades. So, your introduction to HTML naturally focuses on the most important and frequently used HTML elements and attributes, particularly those available with Netscape versions 3.0 and up. Once you know the HTML elements and attributes used the overwhelming majority of the time, you can quickly pick up those that are rarely used, as you need them. Detailed information about these and other issues beyond the scope of this hypertutorial can be found in the References. Netscape's web site at http://www.Netscape.com also has helpful information concerning HTML elements, Netscape extensions and JavaScript.

Because there are a number of versions of HTML it is appropriate, although not absolutely necessary at this time, to include an HTML document type prologue at the beginning of every HTML document. The prologue will provide information to future browsers that tells which version of HTML the document conforms to. That practice will be followed here. An appropriate prologue for our documents targeted primarily at Netscape Navigator 3.0 and above is (the prologue supplied automatically when using the Netscape 3.0 Gold HTML editor):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

HTML Elements

Netscape's market dominance, to some degree, establishes it as a standard setter. So, this section will introduce you to the elements of HTML, particularly as they are implemented in Netscape Navigator 3.0 and up. You begin by learning the HTML elements and follow-up with immediate practical applications in hypermedia courseware. Keep in mind that HTML is evolving. So, you can expect there will be changes over time.

Actually, there are only about eight different kinds or categories of HTML elements. They are listed below. The elements of every category, except for FORM and TABLE will be presented in this chapter using multi-column Element Study Tables. Element Study Tables include descriptions, usage, HTML version information and examples. FORM elements are presented in Chapter 3, where they constitute the basic building blocks of quizzes and practice exercises. TABLE elements are presented in Chapter 4 where their value in display positioning is particularly emphasized.

Categories of HTML Elements
Red Bullet Document meta-information and head elements
Red Bullet Logical style elements
Red Bullet Physical style elements
Red Bullet List and menu elements
    Cyan Bullet Ordered lists
    Cyan Bullet Unordered lists
    Cyan Bullet Menu lists
    Cyan Bullet Definition lists
Red Bullet Miscellaneous elements
Red Bullet Anchor or Link elements
Red Bullet Forms elements
Red Bullet Table elements
Chapter 2: Hypermedia Courseware with HTML 2 - 2 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Notation Conventions

Let's start with notation. First, you need to know how this hypertutorial describes interactions between you and the computer. All chapters use the following typographical conventions to represent HTML elements and JavaScript statements you will see or enter to control Web browser display and actions.

Notation
ALL CAPS
Names of HTML tags and their attributes will be printed in all capital letters.
<ALL CAPS>
 		All capitals in fixed font and angular brackets "<TAG>", indicates an HTML tag.
[]
Square brackets "[optional]" enclose optional information.
Example
Examples are always introduced by the heading "Example:"
Fixed Width
In all examples or exercises HTML or JavaScript keystrokes entered by the student appear in a fixed width font.
Italics
Italics are used within square brackets "[info]" to represent information you supply. Italics alone are used within sections of text to represent names of JavaScript functions or variables.
Option|Option
The "|" notation separates alternative options in a list.
Chapter 2: Hypermedia Courseware with HTML 2 - 3 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

How HTML Elements Will be Introduced: Element Study Tables

Each element is described in a multi-column Element Study Table. Each table includes descriptions, usage specifications, HTML version and examples.

HTML Element Study Table Format
Element: An "Element" column introduces the tag name of the element.
Description: A "Description" column introduces a description explaining the use of the element and the type of information contained by the element.
Usage: A "Usage" column introduces the following:
    Red Bullet The general format for typing the element. The element is printed in all upper case text.
    Red Bullet Italics within square brackets "[]" indicate element contents to be supplied by you.
L: An "L" column contains the version number of the HTML standard describing the named element.
Example: An "Example" column presents a concrete example of correct element usage.
Chapter 2: Hypermedia Courseware with HTML 2 - 4 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

HTML Document Meta-Information and Head Elements

 This category of HTML elements includes among others the very important HTML, HEAD, TITLE and BODY elements. Other head section elements not as important and not discussed here are the BASE, ISINDEX, LINK, and NEXTID elements.

HTML Document Meta-Information and Head Elements
Element: Description: Usage: L: Example:
BODY Contains main body of document. <BODY>
[elements]
</BODY> 		0 <BODY>
Body elements
</BODY>
HEAD Contains head section <HEAD>
[elements]
</HEAD> 		0 <HEAD>
Head elements
</HEAD>
HTML Contains entire document. <HTML>
[elements]
</HTML> 		0 <HTML>
<HEAD>
Head elements
</HEAD>
<BODY>
Body elements
</BODY>
</HTML>
TITLE Contains document title (must be within HEAD element) <TITLE>
[title]
</TITLE> 		0 <TITLE>
Title displayed in document window header
</TITLE>
Chapter 2: Hypermedia Courseware with HTML 2 - 5 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

HTML Authoring: Example Documents

The following two simple examples illustrate minimal, but complete, HTML documents. They each contain all the elements necessary to author an HTML document while illustrating the use of the meta-information and head elements just described. For each example, study the HTML tags. Then view the browser display produced by the HTML. Click on "Browser Display" in the appropriate HTML Example below to do so.

Meta-Information and Head Elements
HTML
Examples: 		Example 2.1
HTML Text:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>
Place Title for Window Caption Here
</TITLE>
</HEAD>
<BODY>
Body elements appear here.
</BODY>
</HTML>

Browser Display produced when a document containing the above HTML text is loaded by a browser. Always press the "Back" button to return from a browser display the HTML Text example.
Example 2.2
HTML Text:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>
Hello
</TITLE>
</HEAD>
<BODY>
Hello World!
</BODY>
</HTML>

Browser Display produced when a document containing the above HTML text is loaded by a browser. Remember to press the "Back" button to return to the HTML Text example.

HTML Authoring: The Edit, Save, Reload and Test Development Cycle

As you have seen from the previous two examples, in this hypertutorial you do not have to actually type in complete HTML document examples and load them into your browser to see how they work. Instead you just click on "Browser Display". If you prefer more hands-on experience in HTML development, follow the procedure described below to edit, save, reload and test these or other HTML examples.

Edit. For more hands-on experience in HTML authoring, especially for the early examples, as you arrive at each new example of a complete HTML document, you may want to open your favorite word processor (e.g, WordPerfect, Microsoft Word, or text editor (e.g., Windows Notepad) that can save documents in standard ASCII (DOS text) format, using it to enter a new document having HTML exactly as shown in the complete HTML example. Typing from a hardcopy of the complete HTML example document will ordinarily facilitate the text entry process. Or, to avoid the typing, but still allow you to practice the "edit, save, reload and test cycle", you can simply copy the HTML example to your word processor or text editor. Just highlight the HTML example text in the browser. Then use your browser "copy" feature to copy the example. Finally, use your word processor or text editor "paste" feature to paste it into the editor.

Save. Remember to save the new HTML document. Be sure that, if the word processor or text editor has multiple save file options, the save format is set to the standard ASCII (DOS text, text or standard text) format. Use the ".HTM" file name extension for your HTML documents. If you are using a Macintosh or Unix system you may use the ".HTML" extension.

Load and Test. Finally, after you've saved your newly authored HTML document, open a new browser window and load the file into your Web browser to see how it will look on the Web and to test its features. The first time you load the newly resaved document you can use the browser's File Menu feature which opens or loads a local file into the browser.

Edit, Save, Reload and Test. If you notice errors, switch back to your document in the word processor or text editor and make the corrections. Then save the document again. Finally, use your browser's "reload" feature to test how the newly edited version of the document will work on the Web. Repeat the edit, save, reload and test cycle until everything is correct.

Having accomplished the above once or twice, you will have verified to yourself that you can perform the basic edit, save, reload and test, development process for Web document development. The process can be employed anywhere you have access to an ASCII text editor or word processor and a browser.

Publishing on the Web

After you have completed the edit, save, reload and test development cycle, it is a relatively simple matter to publish the document on the Web. It is just a matter of uploading the document to a directory for which you have permission on a Web server and possibly changing ".HTM" file name extensions to ".HTML" extensions for compatibility with the Web-server. You would also want to make sure you can provide a way to access the document (e.g., publishing the URL and encouraging links from other Web pages). Netscape 3.x Gold makes the upload almost as easy as saving a file, with the "Publish" option from its HTML editor File Menu. Or you could use an "ftp" network file transfer program to accomplish the upload. Typically, you would want to establish access links from other previously existing documents for convenient Web access to your newly published document. Consult your local Web administator or Internet service provider for details about these issues.

Chapter 2: Hypermedia Courseware with HTML 2 - 6 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Logical Style Elements

The use of logical style elements has been said to be preferred over physical style elements (to be discussed next) for authoring new HTML documents (Graham, 1995; Stout, 1996). Probably the most important logical style HTML elements are the heading level elements. This category of elements displays text according to structural or informational characteristics of the text (e.g., heading, quote, citation, address, strong, etc.).

Browsers can be configured to display the text as determined by the user. For example "strong" text might be configured to be displayed in red letters, but more often it appears as bold text, or it may be underlined on text-only browsers. Keep in mind that the exact appearance of the text on various browsers depends upon the characteristics of the browser and how it has been configured. The same HTML text may be displayed as Times Roman 12 point, Arial 8 or 20 point, and so forth on various browsers.

Logical Style Elements
Practice
Exercise: 		Practice Exercise 2.1:
Which element style has been said to be preferred for authoring new HTML documents?

No response
Logical
Physical

Practice Exercise 2.2:
What type of text is displayed by the HTML STRONG element?

No response
Red text
Bold text
Underlined text
Any of the above except the first

Chapter 2: Hypermedia Courseware with HTML 2 - 7 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Using the Element Study Table: Logical Style Elements

The Element Study Table below describes HTML's logical style elements. You can see a great deal of information concisely summarized. Peruse and study the table carefully. Use it for review or reference purposes. Understand the descriptions. Note the usage syntax. Note the HTML level or version specifying the element. Remember Web browser incorporation of HTML elements is ongoing. So it is important to know the specifications of your high priority targeted Web browsers. See how the entered HTML is displayed by your browser in the example column. Remember the display depends upon characteristics of the browser and how it has been configured. Notice the relatively pronounced level of redundancy in the displayed results. The table should provide a comprehensive understanding of how to use the logical style elements, the foundation for their effective application. Then go on to the more extended examples of logical element usage as well as the question review items which follow. Keep in mind that logical style elements, as is the case with most HTML elements, are to be included within the BODY element of the HTML document.

HTML Logical Style Elements
Element: Description: Usage: L: Example:
ADDRESS Displays special italic font for addresses. <ADDRESS>
[address]
</ADDRESS> 		3 <ADDRESS>
7000 Fannin
</ADDRESS>

Displays as:
7000 Fannin
BLOCKQUOTE Contains quoted text block to be indented. <BLOCKQUOTE>
[long quotation]
</BLOCKQUOTE> 		0 <BLOCKQUOTE>
A block of quoted text
</BLOCKQUOTE>
Displays as:
A block of quoted text
CITE Contains a citation (typically italics). <CITE>
[citation]
</CITE> 		1 <CITE>
HTML Sourcebook
</CITE>
Displays as:
HTML Sourcebook
CODE Contains single line text to be displayed in fixed width font (appropriate for displaying computer language code). <CODE>
[text]
</CODE> 		1 <CODE>
for (i=0; i<=100; i++) write(i);
</CODE>
Displays as:
for (i=0; i<=100; i++) write(i);
EM Contains text to be displayed emphasized (typically italics). <EM>
[text]
</EM> 		1 <EM>
Emphasized text.
</EM>
Displays as:
Emphasized text
H1 Contains heading level 1 text (largest heading fontsize). <H1>
[text]
</H1> 		0
<H1>
1st
</H1>
Displays as:

1st


H2 Contains heading level 2 text (2nd largest heading fontsize). <H2>
[text]
</H2> 		0
<H2>
2nd
</H2>
Displays as:

2nd


H3 Contains heading level 3 text (3rd largest heading fontsize). <H3>
[text]
</H3> 		0
<H3>
3rd
</H3>
Displays as:

3rd


H4 Contains heading level 4 text (4th largest heading fontsize). <H4>
[text]
</H4> 		0
<H4>
4th
</H4>
Displays as:

4th


H5 Contains heading level 5 text (next smallest heading fontsize). <H5>
[text]
</H5> 		0
<H5>
5th
</H5>
Displays as:
5th

H6 Contains heading level 6 text (smallest heading fontsize). <H6>
[text]
</H6> 		0
<H6>
6th
</H6>
Displays as:
6th

KBD Contains keyboard input text (typically displayed in a fixed font). <KBD>
[text]
</KBD> 		1
<KBD>
Keyboard input
</KBD>
Displays as:
Keyboard input
SAMP Contains sample characters (typically displayed in a fixed font). <SAMP>
[text]
</SAMP> 		1
<SAMP>
Example Text
</SAMP>
Displays as:
Example Text
STRONG Contains strong emphasis text (typically displayed in bold although text-only browsers underline). <STRONG>
[text]
</STRONG> 		1
<STRONG>
Strong Text
</STRONG>
Displays as:
Strong Text
VAR Contains text representing a variable name (typically displayed in italics or bold). &LTVAR>
[text]
</VAR> 		1
<VAR>
variableName
</VAR>
Displays as:
variableName
Chapter 2: Hypermedia Courseware with HTML 2 - 8 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development
Example HTML Document: Logical Style Elements

The following HTML document provides more extended examples of many of the logical style elements. Study the HTML for each logical element. Then view the corresponding browser display by clicking on "Browser Display" below. For more hands-on experience, use the edit, save, reload and test process described right after HTML Examples 2.1 and 2.2 to enter the HTML example and load it into your browser so that you can then see how the browser displays your document.

Logical Style Elements
HTML
Example: 		Example 2.3
HTML Text:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>
Logical Style Elements
</TITLE>
</HEAD>
<BODY>
<H1>This Document Demonstrates How
Some Logical Style Elements Are Displayed.</H1>
<H2>A Second Level Heading</H2>
<EM>This is how emphasized text appears.</EM>
<H3>A Third Level Heading</H3>
<STRONG>This is how strong text appears.</STRONG>
<H4>A Fourth Level Heading</H4>
<H5>A Fifth Level Heading</H5>
<H6>A Sixth Level Heading</H6>
<BLOCKQUOTE>
"Fourscore and seven years ago our
forefathers brought forth on this continent a
new nation conceived in liberty and dedicated
to the proposition that all men are created
equal. Now we are engaged in a great civil..."
</BLOCKQUOTE>
<CITE>
Web-based Hypermedia Courseware Development
with HTML and JavaScript:
A Hands-on Introduction
</CITE>
</BODY>
</HTML>

Browser Display produced when a document containing the above HTML text is loaded by a browser. Notice how spacing in the HTML document, including line breaks, is irrelevant in determining positioning of browser-displayed text. Also notice how headings are line-spaced.
Chapter 2: Hypermedia Courseware with HTML 2 - 9 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development
Logical Style Element Question Review
Question 1: What HTML logical element typically produces underlined text?

No Response
STRONG
CITE
U
None of the above


Logical Style Element Question Review
Question 2: What HTML logical element typically produces italic text?

No Response
ITALIC
I
EM
H1


Logical Style Element Question Review
Question 3: What HTML logical element typically produces superscript text?

No Response
SUP
SUB
S
None of the above


Logical Style Element Question Review
Question 4: What HTML logical element often contains quoted text?

No Response
SAMPLE
H2
CITE
BLOCKQUOTE


Logical Style Element Question Review
Question 5: What HTML logical element typically produces typewriter text?

No Response
EM
CODE
TT
VAR


Logical Style Element Question Review
Question 6: What HTML logical element typically produces the largest size font heading style?

No Response
STRONG
H1
H6
EM


Logical Style Element Question Review
Question 7: What HTML logical element typically produces bold text?

No Response
EM
H1
H6
STRONG


Logical Style Element Question Review
Question 8: What HTML logical element typically should be used when citing the name of a book within text?

No Response
STRONG
EM
CITE
BLOCKQUOTE


Logical Style Element Question Review
Question 9: What HTML logical element typically produces subscript text?

No Response
H6
KBD
VAR
None of the above


Logical Style Element Question Review
Question 10: What HTML logical element would typically be used to correctly display short segments of computer language

No Response
CITE
VAR
CODE
EM


Chapter 2: Hypermedia Courseware with HTML 2 - 10 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Physical Style Elements

Physical style elements could also be aptly described as elements which display text according to character format characteristics of the text (e.g., bold, italic, underlined, subscript, etc.) rather than the informational nature of the text. Therefore it may be more problematic for a Web browser which cannot implement bold, italicized or underlined text to appropriately display such text than if it were handled using logical styles. Still, there appears to be much utility in the physical style elements of HTML, especially as there are no logical style equivalents for a number of them (e.g., underline, superscript, subscript), besides the fact that the preeminantly dominant Web browser (Netscape) supports them all, and the physical style tags are easier to type. Whether one chooses logical or physical style elements really should depend on the nature of application, the hardware its likely to run on, what browsers are likely to be used, what configurations those browsers are likely to be set to, etc. If the application is one where there is a high degree of control over the system configurations (e.g., intranets), the systems have capabilities allowing underlining, superscripts and subscripts, and the application requires their use for effective communication, one really has no alternative other than to use the physical style elements.

Physical Style Elements
Practice
Exercise: 		Practice Exercise 2.3:
The choice of whether to use logical or physical style elements in Web-based hypermedia depends upon the application.

No response
True
False

Chapter 2: Hypermedia Courseware with HTML 2 - 11 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development
Using the Element Study Table: Physical Style Elements

The Element Study Table below describes HTML's physical style elements in detail. Physical elements also are to be included within the BODY element of the HTML document. Peruse and study the table carefully as with the table of logical style elements. Again, see how the entered HTML is displayed by your browser in the example column. Remember the display depends upon the characteristics of the browser and how it has been configured. Then go on to the more extended examples of physical element usage as well as the review question items which follow.

HTML Physical Style Elements
Element: Description: Usage: L: Example:
B Displays boldface. <B>
[text]
</B> 		1 <B>
Bold Text
</B>

Displays as:
Bold Text
BIG Displays text bigger than current size. <BIG>
[text]
</BIG> 		3 <BIG>
Bigger Text
</BIG>
Displays as:
Bigger Text
I Displays italic text. <I>
[text]
</I> 		1 <I>
Italic Text
</I>
Displays as:
Italic Text
PRE Displays ASCII text as previously formatted in a fixed font. <PRE>
[text]
</PRE> 		0 <PRE> 
for (i=0; i<=100; i++)
   write(i);
</PRE>

Displays as:
for (i=0; i<=100; i++)
   write(i);

S Displays strike-through text. <S>
[text]
</S> 		3 <S>
Strike-through text.
</S>
Displays as:
Strike-through text
SMALL Displays text smaller than current size. <SMALL>
[text]
</SMALL> 		3
<SMALL>
Small text
</SMALL>
Displays as:
Small text
SUB Displays subscripts. <SUB>
[text]
</SUB> 		3
E = mc<SUB>2</SUB>

Displays as:
E = mc2
SUP Displays superscripts. <SUP>
[text]
</SUP> 		3
E = mc<SUP>2</SUP>

Displays as:
E = mc2
TT Displays fixed font typewriter text. <TT>
[text]
</TT> 		1
<TT>
Typewriter text
</TT>

Displays as:
Typewriter text
U Underlined text. <U>
[text]
</U> 		1
<U>
Underlined text
</U>

Displays as:
Underlined text
Chapter 2: Hypermedia Courseware with HTML 2 - 12 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development
Example HTML Document: Physical Style Elements

The following HTML document provides more extended examples of many of the physical style elements. For each example, study the HTML and then view the corresponding browser display by clicking on "Browser Display" below. For more hands-on experience, use the edit, save, reload and test process described earlier in the hypertutorial to enter the HTML example and load it into your browser so that you can then see how the browser displays your document.

Physical Style Elements
HTML
Example: 		Example 2.4
HTML Text:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>
Physical Style Elements
</TITLE>
</HEAD>
<BODY>
<H1>This Document Demonstrates How
Some Physical Style Elements Are Displayed.</H1>
<B>This line is bold text.</B>
<BIG>This line is big text.</BIG>
<I>This line is italic text.</I>
<PRE>
   The set of columnar info below, as well
   as these introductory lines, illustrate
   preformatted text as produced by the PRE
   element.

          Some HTML Physical Elements

          Element   Description    L

             B         Bold        1
            BIG       Bigger       3
             I        Italics      1
</PRE>
<S>This line is strike-through text.</S>
<SMALL>This line is small text.</SMALL>
H<SUB>0</SUB>: M<SUB>1</SUB><SUP>2</SUP> = M<SUB>2</SUB><SUP>2</SUP>.
<TT>This line is typewriter text.</TT>
<U>This line is underlined text.</U>
</BODY>
</HTML>

Browser Display produced when a document containing the above HTML text is loaded by a browser. Notice how spacing in the HTML document, including line breaks, is irrelevant in determining positioning of browser-displayed text unless included within PRE tags. In particular notice how consecutive text lines in HTML appear on the same line until the browser automatically wraps words onto the next line.
Chapter 2: Hypermedia Courseware with HTML 2 - 13 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development
Physical Style Element Question Review
Question 1: What HTML physical element typically produces underlined text?

No Response
SUB
BIG
U
S


Physical Style Element Question Review
Question 2: What HTML physical element typically produces italic text?

No Response
ITALIC
I
EM
BIG


Physical Style Element Question Review
Question 3: What HTML physical element typically produces superscript text?

No Response
SUP
SUB
S
BIG


Physical Style Element Question Review
Question 4: What HTML physical element typically produces strike-through text?

No Response
STRIKE
TT
PRE
S


Physical Style Element Question Review
Question 5: What HTML physical element typically produces typewriter text?

No Response
I
CODE
TT
P


Physical Style Element Question Review
Question 6: What HTML physical element typically produces preformatted fixed font text which displays in a format identical to that in which it was entered?

No Response
SMALL
PRE
SUB
P


Physical Style Element Question Review
Question 7: What HTML physical element typically produces subscript text?

No Response
SUP
SUB
S
SMALL


Physical Style Element Question Review
Question 8: What HTML physical element typically produces text bigger than the current text?

No Response
B
SUP
TT
BIG


Physical Style Element Question Review
Question 9: What HTML physical element typically produces text smaller that the current text?

No Response
S
SUB
SMALL
SUP


Physical Style Element Question Review
Question 10: What HTML physical element typically produces bold text?

No Response
B
BOLD
BIG
SUP


Chapter 2: Hypermedia Courseware with HTML 2 - 14 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

List and Menu Elements

List and menu elements are used, as the names imply, to display structured lists of items. There are a number of list types:

Types of Lists
Red Bullet Directory Lists
Red Bullet Definition Lists
Red Bullet Menu Lists
Red Bullet Ordered Lists
Red Bullet Unordered Lists

The above list is displayed by an unordered list element contained within a TABLE element. The list and menu elements are very handy and useful elements. The names assigned to them aptly describe their use. Keep in mind that list and menu elements also are to be included within the BODY element of the HTML document. Lists also may be nested, that is, lists may occur within lists.

List and Menu Elements
Practice
Exercise: 		Practice Exercise 2.4:
List and menu elements are to be placed within which element of an HTML document?

No response
HEAD
BODY

Chapter 2: Hypermedia Courseware with HTML 2 - 15 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development
Using the Element Study Table: List and Menu Elements

The Element Study Table below describes HTML's list and menu elements in detail. Again, peruse and study the table carefully as with the earlier tables. Again, see how the entered HTML is displayed by your browser in the example column. Again, remember the display depends upon the characteristics of the browser and how it has been configured. Then go on to the more extended examples of logical element usage as well as the review question items which follow.

List and Menu Elements
Element: Description: Usage: L: Example:
DD Definition of a term defined in a definition list (does not require an end tag). <DD>
[definition]
 		0 <DD>
Defining Text


Displays as:
Defining Text
DIR Contains a list of items of no more then 20 characters to be displayed if possible consecutively in columns in higher levels of HTML. <DIR>
[directory list]
</DIR> 		0 <DIR>
<LI>Abedor
<LI>Bahl
<LI>Clark
<LI>Ha
<LI>Johnson
<LI>McCoy
<LI>Ross
</DIR>
Displays as:
  • Abedor
  • Bahl
  • Clark
  • Ha
  • Johnson
  • McCoy
  • Ross
    • DL Contains a definition list. May have the COMPACT attribute which for short defined terms puts definitions on same line. <DL [COMPACT]>
    [definition list]
    </DL>         		0 <DL>
    <DT>Prof 1: <DD>Abedor
    <DT>Prof 2: <DD>Bahl
    <DT>Prof 3: <DD>Clark
    <DT>Prof 4: <DD>Ha
    <DT>Prof 5: <DD>Johnson
    <DT>Prof 6: <DD>McCoy
    <DT>Prof 7: <DD>Ross
    </DL>
    Displays as:
    Prof 1:
    Abedor
    Prof 2:
    Bahl
    Prof 3:
    Clark
    Prof 4:
    Ha
    Prof 5:
    Johnson
    Prof 6:
    McCoy
    Prof 7:
    Ross
    DT Item defined in a definition list (does not require an end tag). <DT>
    [item defined]
         		0 See above example.
    LI Denotes a list item for any type of list (does not require an end tag). <LI>
    [list item]
         		0 See DIR, MENU, OL and UL list examples.
    MH Denotes a heading for a menu list (does not require an end tag). <OH>
    [ordered list heading]
         		0 See example of menu list below.
    MENU Contains a menu of choices. <MENU>
    [menu list]
    </MENU>         		0 <MENU>
    <MH>Professors: <LI>Abedor
    <LI>Bahl
    <LI>Clark
    <LI>Ha
    <LI>Johnson
    <LI>McCoy
    <LI>Ross
    </MENU>
    Displays as:
    Professors:
  • Abedor
  • Bahl
  • Clark
  • Ha
  • Johnson
  • McCoy
  • Ross
    • OH Denotes a heading for an ordered list (does not require an end tag). <OH>
    [ordered list heading]
         		0 See example of ordered list below.
    OL Contains an ordered list. <OL>
    [ordered list]
    </OL>         		0 <OL>
    <OH>Professors: <LI>Abedor
    <LI>Bahl
    <LI>Clark
    <LI>Ha
    <LI>Johnson
    <LI>McCoy
    <LI>Ross
    </OL>
    Displays as:
      Professors:
    1. Abedor
    2. Bahl
    3. Clark
    4. Ha
    5. Johnson
    6. McCoy
    7. Ross
    UH Denotes a heading for an unordered list having bulleted (DISK, CIRCLE, SQUARE) items (does not require an end tag). <UH>
    [unordered list heading [TYPE=DISK | CIRCLE | SQUARE]]
         		0 See example for unordered list below.
    UL Contains an unordered list. <UL>
    [unordered list]
    </UL>         		0 <UL>
    <UH>Professors: <LI>Abedor
    <LI>Bahl
    <LI>Clark
    <LI>Ha
    <LI>Johnson
    <LI>McCoy
    <LI>Ross
    </UL>
    Displays as:
      Professors:
    • Abedor
    • Bahl
    • Clark
    • Ha
    • Johnson
    • McCoy
    • Ross
    Chapter 2: Hypermedia Courseware with HTML 2 - 16 UT Bullet
    UT Bullet Web-based Hypermedia Courseware Development
    Example HTML Documents: List and Menu Elements

    The following HTML documents provide more extended examples of some of the list and menu elements. For each example, study the HTML and then view the corresponding browser display by clicking on "Browser Display" below. For more hands-on experience, use the edit, save, reload and test, process described earlier in the hypertutorial to enter the HTML example and load it into your browser so that you can then see how the browser displays your document.

    List and Menu Elements
    HTML
    Example:     		Example 2.5
    HTML Text:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
    <HTML>
    <HEAD>
    <TITLE>
    List and Menu Elements
    </TITLE>
    </HEAD>
    <BODY>
    <H1>This Document Demonstrates How
    Some List and Menu Elements Are Displayed.</H1>
    <DL>
    <DH>Definitions:
    <DT>Browser:
    <DD>Any program used to view Web pages
    <DT>Client:
    <DD>Any program used to obtain information from a server
    <DT>Server:
    <DD>Any program running on a networked computer that
    responds to requests from client computers
    </DL>
    </BODY>
    </HTML>

    Browser Display produced when a document containing the above HTML text is loaded by a browser. Again notice how consecutive text lines in HTML are displayed on the same line until the browser automatically wraps words onto the next line.
    List and Menu Elements
    HTML
    Example:     		Example 2.6
    HTML Text:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
    <HTML>
    <HEAD>
    <TITLE>
    List and Menu Elements
    </TITLE>
    </HEAD>
    <BODY>
    <H2>This Document Demonstrates How
    Some List and Menu Elements Are Displayed.</H2>
    <UL>Nested Lists
    <LI>Types of Lists
    <UL>
    <LI>Unordered Lists
    <LI>Ordered Lists
    <LI>Menu Lists
    <LI>Definition Lists
    </UL>
    <LI>Definitions:
    <DL>
    <DT>Browser:
    <DD>Any program used to view Web pages
    <DT>Client:
    <DD>Any program used to obtain information from a server
    <DT>Server:
    <DD>Any program running on a networked computer that
    responds to requests from client computers
    </DL>
    </UL>
    </BODY>
    </HTML>

    Browser Display produced when a document containing the above HTML text is loaded by a browser. Again notice how consecutive text lines in HTML are displayed on the same line until the browser automatically wraps words onto the next line.
    List and Menu Elements
    HTML
    Example:     		Example 2.7
    HTML Text:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
    <HTML>
    <HEAD>
    <TITLE>
    Nested Unordered and Ordered Lists
    </TITLE>
    </HEAD>
    <BODY>
    <H2>This Document Demonstrates
    Nested Unordered and Ordered Lists.</H2>
    <UL>
    <UH><H3>More Nested Lists</H3>
    <LI><CITE>The World Wide Web Complete Reference</CITE>
    <OL>
    <LI>Getting Started with the Web
    <LI>Creating Web Pages
    <LI>...
    </OL>
    <LI><CITE>HTML Sourcebook</CITE>
    <OL>
    <LI>Introduction
    <LI>Introduction to the Hypertext Markup Languages
    <LI>HTML in Detail
    <LI>...
    </OL>
    <LI><CITE>JavaScript and Netscape Wizardry</CITE>
    <UL>
    <LI>Preface
    <LI>What's New in Netscape
    <UL>
    <LI>End-User Features
    <LI>Webmaster-Oriented Features
    </UL>
    <LI>The New Netscape: A Better Browswer
    <LI>...
    </UL>
    </UL>
    </BODY>
    </HTML>

    Browser Display produced when a document containing the above HTML text is loaded by a browser.
    Chapter 2: Hypermedia Courseware with HTML 2 - 17 UT Bullet
    UT Bullet Web-based Hypermedia Courseware Development
    List and Menu Element Question Review
    Question 1: What is the HTML list element that displays unordered lists?

    No Response
    DL
    ML
    OL
    UL


    List and Menu Element Question Review
    Question 2: What is the HTML list element that displays ordered lists?

    No Response
    DL
    ML
    OL
    UL


    List and Menu Element Question Review
    Question 3: What is the HTML list element that displays definition lists?

    No Response
    DL
    ML
    OL
    UL


    List and Menu Element Question Review
    Question 4: What is the HTML list element that displays menu lists?

    No Response
    DL
    ML
    OL
    UL


    List and Menu Element Question Review
    Question 5: What is the HTML list element that displays a list item?

    No Response
    LH
    DT
    LI
    DH


    List and Menu Element Question Review
    Question 6: What is the HTML list element that displays a term to be defined?

    No Response
    DL
    DT
    DD
    DH


    List and Menu Element Question Review
    Question 7: What is the HTML list element that displays a definition?

    No Response
    DL
    DT
    DD
    DH


    List and Menu Element Question Review
    Question 8: What is the HTML list element that displays a menu list heading?

    No Response
    MH
    ML
    MD
    LI


    List and Menu Element Question Review
    Question 9: Is it possible to control the type of bullet in an unordered list?

    No Response
    Yes
    No

    List and Menu Element Question Review
    Question 10: May lists be nested more than 2 deep?

    No Response
    Yes
    No

    Chapter 2: Hypermedia Courseware with HTML 2 - 18 UT Bullet
    UT Bullet Web-based Hypermedia Courseware Development

    Miscellaneous Elements

    There are a small number of HTML elements that are extremely important and very frequently used, but that don't fit into the other list categories. These are often referred to as miscellaneous elements. By far the most important of these is the IMG element. Why? Because at this time it is the element most frequently employed to display inline (embedded with the text) images on graphics browsers. Many browsers, given the appropriate HTML instructions, can shrink and stretch the images to required sizes.

    Most miscellaneous element names, as is the case for other HTML elements, have obvious mnemonic value. Miscellaneous elements with the exception of the "comment" element (see element study table below) are also to be included within the BODY element of the HTML document.

    Miscellaneous Elements
    Practice
    Exercise:     		Practice Exercise 2.5:
    The comment element need not appear within the body element of an HTML document.

    No Response
    True
    False

    Chapter 2: Hypermedia Courseware with HTML 2 - 19 UT Bullet
    UT Bullet Web-based Hypermedia Courseware Development
    Using the Element Study Table: Miscellaneous Elements

    The Element Study Table below describes HTML's miscellaneous elements in detail. After studying the table thoroughly attend to the more extended examples of miscellaneous element usage in the complete example HTML documents, then do the question review items.

    Miscellaneous Elements
    Element: Description: Usage: L: Example:
    <!-- Begin a comment. Browsers ignore comments. HTML authors use comments to document HTML ("-->" indicates end of comment). <!-- [comment text] -->
    		0 <!-- This section last updated 11/15/96. -->


    Displays as:
    BANNER Defines area of Web page for nonscrolling display (thus always visible). Not available in Netscape 3.0. <BANNER>
    [the banner]
    </BANNER>         		3 <BANNER>
    This is a Banner
    </BANNER>

    Displays a nonscrolling area with:
    This is a Banner
    BR Line break - ends current line, next begins at start of next line. No end tag. <BR>
    		0 1st Line of HTML<BR>
    2nd Line of HTML<BR>
    3rd Line of HTML<BR>
    Displays as:
    1st Line of HTML
    2nd Line of HTML
    3rd Line of HTML
    FIG Contains reference for display of "floating" image (text can flow around the image). Not available in Netscape 3.0. <FIG
    [SRC = url]>
    [figure info text]
    </FIG>         		3 <FIG SRC = "JOHNSONP.GIF">
    Info about figure
    </FIG>

    Displays as:
    Info about figure
    HR Displays horizontal rule (thickness & width may be controlled with WIDTH and SIZE attributes, no end tag). <HR [WIDTH = var] [SIZE = var>
    		0 <HR>
    <CENTER>
    <HR>
    <HR WIDTH=50% SIZE=10>
    <HR WIDTH=25% SIZE=20>
    </CENTER>
    Displays as:
    IMG Contains reference for display of image (HEIGHT and WIDTH attributes control size. ALT attribute should be used to provide substitute text. No end tag. <IMG
    [SRC = url] [HEIGHT = var] [WIDTH = var] [ALT = "text"]>
         		0
    <CENTER>
    <IMG SRC = "JOHNSONP.GIF" HEIGHT=100 WIDTH=75 ALT = "CWJ Photo">
    </CENTER>


    Displays as:
    CWJ Photo
    P Starts a new paragraph. End tag not usually necessary. <P>[text] [</P>]
    		0 <P>
    A first sentence. A second sentence.
    <P>
    A third sentence. A fourth sentence.
    </P>
    Displays as:

    A first sentence. A second sentence.

    A third sentence. A fourth sentence.

    Chapter 2: Hypermedia Courseware with HTML 2 - 20 UT Bullet
    UT Bullet Web-based Hypermedia Courseware Development
    Example HTML Document: Miscellaneous Elements

    The following HTML document provides more extended examples of some of the miscellaneous elements. For each example, study the HTML and then view the corresponding browser display by clicking on "Browser Display" below. For more hands-on experience, use the edit, save, reload and test, process described earlier in the hypertutorial to enter the HTML example and load it into your browser so that you can then see how the browser displays your document.

    Miscellaneous Elements
    HTML
    Example:     		Example 2.8
    HTML Text:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
    <HTML>
    <HEAD>
    <TITLE>
    Miscelleaneous Elements
    </TITLE>
    </HEAD>
    <BODY>
    <H1>This Document Demonstrates How
    Some Miscellaneous Elements Are Displayed.</H1>
    <HR>
    <BR>
    <HR>
    <P>
    Four score and seven years ago our fathers brought forth, upon this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. </P>
    <P>
    Now we are engaged in a great civil war, testing whether that nation, or any nation, so conceived, and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of it as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.
    </P>
    <!-- This a comment. Note that it does not appear when this document is displayed in a browser.
    -->
    <CENTER>
    <IMG SRC="UTLOGO.GIF">
    </CENTER>
    </BODY>
    </HTML>

    Browser Display produced when a document containing the above HTML text is loaded by a browser. Note line breaks are determined by the browser unless <BR> is used. Note also that the comment does not appear in the browser display.
    Chapter 2: Hypermedia Courseware with HTML 2 - 21 UT Bullet
    UT Bullet Web-based Hypermedia Courseware Development
    Miscellaneous Element Question Review
    Question 1: Which element creates a line break or carriage return?

    No Response
    P
    IMG
    <!--
    BR

    Miscellaneous Element Question Review
    Question 2: Which element may contain a paragraph?

    No Response
    P
    IMG
    <!--
    BR

    Miscellaneous Element Question Review
    Question 3: Which element starts a "comment"?

    No Response
    P
    IMG
    <!--
    BR

    Miscellaneous Element Question Review
    Question 4: Which element displays a horizontal rule?

    No Response
    BR
    FIG
    IMG
    HR

    Miscellaneous Element Question Review
    Question 5: Which element displays a picture?

    No Response
    P
    IMG
    <!--
    BR

    Chapter 2: Hypermedia Courseware with HTML 2 - 22 UT Bullet
    UT Bullet Web-based Hypermedia Courseware Development

    The Anchor Element

    As a developer of Web-based hypermedia you particularly need to know about anchors. The "A" or anchor element is probably the single most important HTML element. Anchors link the Web. They provide the hyperlinks that connect the nodes of the Web. Another way to say it is that the anchor element gives the Web its hypertext and hypermedia characteristics. It is the element that allows you to click on a text or graphics hot-spot for instant access to linked information, like a database at Auburn University, or an on-line business phone directory, or Love Library at the University of Nebraska, or the latest satellite weather image for the gulf coast, or to access a newsgroup, or to download a new software package, or to access a particular section of this hypertutorial, and the list goes on and on. HTML hyperlinks are, for the Web user, simple to use, for the HTML document author, simple to implement.

    Anchor Elements
    Practice
    Exercise:     		Practice Exercise 2.6:
    The anchor element implements hypertext links.

    No response
    True
    False

    Practice Exercise 2.7:
    Hypertext links provide access to:

    No response
    Databases
    Graphics
    Software
    Others
    Any except the first above

    Chapter 2: Hypermedia Courseware with HTML 2 - 23 UT Bullet
    UT Bullet Web-based Hypermedia Courseware Development
    Using the Element Study Table: The Anchor Element

    The very brief Element Study Table below describes the two most important attributes (HREF & NAME) of the HTML anchor element in detail. The anchor element provides a way to access a hypertext link, as well as to label a specific location in a document as a potential target of a hypertext link.

    HREF, when it appears in an anchor element is followed by the name of the location (Uniform Resource Locator or URL) to which the anchor is linked. Text or graphics contained by the element between the <A HREF="..."> and </A> defines the clickable hot-spot which when clicked activates the link to the location referenced by the anchor.

    Transfer Protocols. Most Web documents have the Hypertext Transfer Protocol (HTTP) following the "HREF=" in a URL. But, HTTP is not the only transfer protocol that can be used for Web hyperlinks. In fact, there are about half a dozen that can be used in a URL as the target of an "HREF=". URL templates for the various transfer protocols appear below: 

      HTTP://    Internet server   path    filename  options:
  GOPHER://  hostname or IP    name
  FTP://     address with
  TELNET://  optional port
  TN3270://
  MAILTO:    email address
  NEWS:      newsgroup name
  FILE:///   a local filename (typically not used within a document)

    "GOPHER://" is used to access GOPHER servers. "FTP://" may be used for file transfer operations. "TELNET://" and "TN3270://" are used for remote terminal sessions. "MAILTO:" is used for email to a standard SMTP mail server. "NEWS:" is used to access a news server for news groups. "FILE:///" is almost always used to access local files and is typically not used within a document. But, most of these can be quite useful when implemented in Web documents to access another node in the World Wide Web. You will see how in the examples which follow the Element Study Table.

    On the other hand, NAME, when it appears in an anchor element simply labels its location in the document as the potential target of an HREF link. In other words, the label attached to NAME is associated with that spot in the document so that it can then be targeted by an HREF link. That's all it does.

    Both these aspects are present in the table. You should be aware as well that HTML 3 provides an alternative to the use of the anchor NAME attribute that is more flexible for labeling locations within documents (the ID attribute). See the References for further information about the ID attribute.

    Study the table below. Then attend to the more extended examples of anchor element usage in the complete HTML example courseware documents, that follow the table. Finally, do the question review items.

    The Anchor Element
    Element: Description: Usage: L: Example:
    A HREF Allows you to link to other documents or other locations within the same document. <A
    HREF="link
    reference    ">
    [link text]
    </A>
    		0 <A HREF=
    "HTTP://WWW.UTH.TMC.EDU"> The University of Texas - Houston Health Science Center
    </A>

    Displays as below (University of Texas - Houston Health Science Center Home Page). Home page displays when hot-spot clicked (Network connection required.):
    The University of Texas - Houston Health Science Center
    A NAME Allows you to label locations within a document as the potential target of a hypertext link. <A NAME="label">
    Labeled element
    </A>
    		0 <A NAME= "GLOS1_0.HTM#HYPERTUTOR">
    </A>

    When the anchor element View Hypertutor Model hot-spot is clicked, the browser will display the section of the named HTML document beginning with the <A NAME = "GLOS1_0.HTM#HYPERTUTOR"> ... </A> label.
    Chapter 2: Hypermedia Courseware with HTML 2 - 24 UT Bullet
    UT Bullet Web-based Hypermedia Courseware Development
    Example HTML Document: Anchor Elements

    The following HTML courseware documents provide more extended examples of anchor elements as well as many of the other elements encountered so far. For each example, study the HTML by either just perusing the HTML text, or, for more extended HTML text example documents, first clicking on the "HTML Text" hyperlink to view the HTML text. Then view the corresponding browser display by clicking on "Browser Display". For more hands-on experience, use the edit, save, reload and test, process described earlier in the hypertutorial to enter the HTML example and load it into your browser so that you can then see how the browser displays your document.

    Anchor Element Example HTML Document
    HTML
    Example:     		Example 2.9: Instructor Address/Phone & Email Access
    HTML Text:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML>
    <HEAD>
    <TITLE>
    AHS4312 Instructor Address/Phone
    </TITLE>
    </HEAD>
    <BODY>
    <B>
    <A HREF="CWJ.HTM"> Craig W. Johnson</A>, Ph.D./Associate Director,<BR>
    Office of Educational Development & Research,<BR>
    Office: DCT 690L;<BR>
    E-Mail: <A HREF="MAILTO:[email protected]">
    [email protected],</A><BR>
    Phone: 713-500-3923, Fax: 713-500-3906.
    </B>
    </BODY>
    Browser Display produced when a document containing the above HTML text is loaded by a browser. The first HREF provides the link to an instructor bio page "CWJ.HTM" (see Example 2.12 below) which must exist in the URL specified location to be accessed and displayed. The second HREF's MAILTO URL in the "E-Mail" anchor provides easy email access to the instructor.
    Chapter 2: Hypermedia Courseware with HTML 2 - 25 UT Bullet
    UT Bullet Web-based Hypermedia Courseware Development
    Anchor Element Example HTML Document:
    A Course Syllabus
    HTML
    Example:     		Example 2.10:
    HTML Text: A Course Syllabus.

    Browser Display produced when the document containing the above HTML text is loaded by a browser. The document combines many of the elements presented during this hypertutorial. The only HREF link is the MAILTO URL referenced in the instructor information block at the top of the document. The HREF access to email (try it out!) of course requires a network connection, but facilitates communication with the instructor by providing a more unobtrusive communication pathway than the phone call or the office visit. Note the handling of the HTML element names by the browser is not case sensitive (i.e., <BODY> = <body>).
    Chapter 2: Hypermedia Courseware with HTML 2 - 26 UT Bullet
    UT Bullet Web-based Hypermedia Courseware Development
    Anchor Element Example HTML Document:
    A Course Prototype Web Page
    HTML
    Example:     		Example 2.11:
    HTML Text: A Course Prototype Web Page.

    Browser Display produced when a document containing the above HTML text is loaded by a browser (Requires network connection to establish external links.). This is the course Web page encountered in the first chapter. You now have seen and understood the HTML that creates its functionality. And, you can do it yourself. Feel free to use this document as a template for your own. There is nothing new in this document. It just puts together many of the elements you have learned so far. The HREF's provide links to the many external and local resource documents which must exist where specified in their URL's. Note again the handling of the HTML element names by the browser is not case sensitive (i.e., <BODY> = <body>).
    Chapter 2: Hypermedia Courseware with HTML 2 - 27 UT Bullet
    UT Bullet Web-based Hypermedia Courseware Development
    Anchor Elements
    HTML
    Example:     		Example 2.12: An Instructor Bio Page
    HTML Text:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML>
    <HEAD>
    <TITLE>
    AHS4312 Instructor Bio
    </TITLE>
    </HEAD>
    <BODY BGCOLOR="#00FF00"> <!-- Green in RGB in Hexidecimal Color Code>
    <CENTER>
    <B>
    Craig W. Johnson, Ph.D./Associate Director,<BR>
    Office of Educational Development & Research,<BR>
    Office: DCT 690L;<BR>
    E-Mail:
    <A HREF="MAILTO:[email protected]">
    [email protected],</A><BR>
    Phone: 713-500-3923, Fax: 713-500-3906.
    </B>
    <BR>
    <IMG SRC ="JOHNSONP.GIF" ALT="Photo of Dr. Johnson">
    <BR>
    <EMBED SRC="GREETING.WAV" HEIGHT=60 WIDTH=145>
    </CENTER>
    <BR>
    Craig W. Johnson, Ph.D. is Associate Director of the <B>Office of Educational Development and Research</B>. "Dr. J.", as he is called by many of his students (He says it makes him feel like a famous basketball player.) has consulted with and advised many hundreds of faculty and graduate students in conducting design, analysis, interpretion and publication of educational research, development and evaluation studies. Dr. Johnson has published numerous scholarly journal articles concerning effective use of computers in instruction and educational research (e.g., <CITE>Hypertutor Therapy for Interactive Instruction</CITE>, <CITE>Microcomputer-administered Research: What it means for Educational Researchers</CITE>, <CITE>Microcomputer as Teacher/Researcher in a Nontraditional Setting)</CITE>. He co-authored the computer game <CITE>BlockAIDS - The AIDS Education Game</CITE>. Dr. Johnson received his Ph.D. in Educational Psychology (Learning, Statistics & Experimental Design). He has a Master's degree in Special Education, and undergraduate degrees in Mathematics and Philosophy. He is a winner of the University of Texas - Houston School of Allied Health Science Outstanding Teacher Award and of the John P. McGovern Outstanding Teacher Award. <BR>
    <EM><A HREF="CWJEMAIL.HTM">cwj - 1/12/97</A></EM>
    </BODY>
    </HTML>
    Browser Display produced when a document containing the above HTML text is loaded by a browser. The HREF provides the link at the bottom of the document to a standard author email address file which may be linked to all any and all files attributed to the author. The only new features in the example are the EMBED element which can be used to embed inline sound, movies, etc. within a document, the BGCOLOR attribute of the BODY element, and the use of the MAILTO URL for instructor email. The "GREETING.WAV", "JOHNSONP.GIF" and "CWJEMAIL.HTM" sound, graphics, and email return address documents need to be present in the default directory as specified by the Bio Page document.
    Chapter 2: Hypermedia Courseware with HTML 2 - 28 UT Bullet
    UT Bullet Web-based Hypermedia Courseware Development
    Anchor Element Question Review
    Question 1: Which attribute of the anchor element provides access to a hypertext link?

    No Response
    HREF
    NAME

    Anchor Element Question Review
    Question 2: Which attribute of the anchor element labels a location within a document so that it may be addressed by a hypertext link?

    No Response
    HREF
    NAME

    Anchor Element Question Review
    Question 3: Which transfer protocol would be used to to email from within an HTML document?

    No Response
    GOPHER
    FTP
    HTTP
    MAILTO

    Anchor Element Question Review
    Question 4: Which transfer protocol would be typically be used to link to an HTML document at another server from within an HTML document?

    No Response
    GOPHER
    FTP
    HTTP
    MAILTO

    Anchor Element Question Review
    Question 5: Which transfer protocol would be used to link to a GOPHER server from within an HTML document?

    No Response
    GOPHER
    FTP
    HTTP
    MAILTO

    Chapter 2: Hypermedia Courseware with HTML 2 - 29 UT Bullet
    UT Bullet Web-based Hypermedia Courseware Development

    Summary

    You have covered a great deal of ground in this chapter. You began by learning the most frequently used HTML elements. You moved on to employing them in simple examples. You progressed to employing them in complete HTML documents. Each time you explored their resulting effects when displayed by a browser. You have responded to many new questions differentiating the HTML elements and how to use them.

    Finally, you saw how it was possible to combine the many HTML elements to produce powerful HTML courseware documents. You could, relatively quickly, put together a course Web page, a Web-based course syllabus, or a Web-based instructor bio, and you saw how to use HTML anchors, to provide access to remote databases, libraries, software downloads, instructor email and newsgroups. Now it is time to learn how to use HTML form elements to produce Web-based hypermedia quizzes and practice exercises.

    Chapter 2: Hypermedia Courseware with HTML 2 - 30 UT Bullet
    UT Bullet Web-based Hypermedia Courseware Development

    Additional Hands-On Practice Project Assignment

    It is always more efficient when developing Web-based courseware to adapt an existing working document to one's own purposes than to have to start from scratch to create a whole new document, building from the ground floor up without a model. So, keeping that in mind, enter your favorite word processor (e.g., WordPerfect) or text editor (e.g., Windows Notepad) and choose one or more of the possible practice projects below. Then, for each project, choose the appropriate example document from this tutorial to use as a template for adaptation to your own purposes.

    Copy the chosen example document, as described in the "Edit, Save, Reload and Test" section earlier in this tutorial, into the word processor or text editor and use the "Save as" option to save it under a new name of your own choosing. Then use the edit, save, reload and test development process to edit the newly saved example HTML document(s) to produce one or more of the following Web-based hypermedia courseware products to meet your own instructional goals. If you choose to adapt the Instructor Bio Page and do not have your own graphics and sound files feel free to use those that are already linked to the page (i.e., "JOHNSONP.GIF" and "GREETING.WAV") as place holders until you obtain your own.

      List of Possible Practice Projects:

    1. A Course Syllabus Page (example HTML document is Example 2.10)
    2. A Course Web Page (example HTML document is Example 2.11)
    3. An Instructor Bio Page (example HTML document is Example 2.12)
    4. Other (e.g., Web home page for your department, program, office, etc.).

    End Chapter 2: Web-based Hypermedia
    Information and Presentation Courseware
    Using HTML


    Copyright © 1997 Craig Johnson
    Comments:
    [email protected]
    Chapter 2: Hypermedia Courseware with HTML 2 - 31 UT Bullet
    UT Bullet Web-based Hypermedia Courseware Development

    References

    1. Graham, I. S. The HTML Sourcebook. New York: Wiley, 1995.
    2. Stout, R. The World Wide Web Complete Reference. Berkeley, CA: McGraw-Hill, 1996.
    Chapter 2: Hypermedia Courseware with HTML 2 - 32 UT Bullet