Multimedia and the World Wide Web
HCI 201 Lecture Notes #3B
What will we learn today?



Add audio in your web page
Add video clips in your web page
Animated text

Hypertext basics
Referencing documents
Creating hyperlinks
Effective links
Mouse-sensitive images (Image maps)

Assignment 2




HCI 201 Notes #3B
2
Background audio <bgsound>

src
<bgsound src=“audio/welcome.wav”>
-

Indicates the URL of the related sound file
Play once when the web page is loaded
Sound files: *.wav, *.midi, *.mid, *.au, *.snd
loop
<bgsound src=“…” loop=2>
-
Replay the soundtrack for a number of times or forever
-
loop=#|infinite
#: integer number of times
HCI 201 Notes #3B
infinite: repeat endlessly
3
Embedded audio <embed>

Function:

Embed a soundtrack in a document
Attributes:
src, loop, width, height,
console, autostart.
End tag: None in HTML
 Contains: Nothing
 Used in: text

HCI 201 Notes #3B
4
<embed>

console
console, smallconsole, playbutton,
pausebutton, stopbutton, volumelever
-
-

Creates a display format to control the playing sound
You can leave this property out and let the browser
determine a default display.
Or to limit the controls the visitor has on the playing sound.
width and height
Controls (in pixels) how wide and tall the console will be.
HCI 201 Notes #3B
5
<embed>

autostart
true, false
-
Controls when the sound starts to play.
-
true: start to play automatically after loading the page
false: the sound will load and wait for the visitor to click
-
on the play button in the console box

<embed src="FileName.mid" width="150"
height="55" autostart="true" loop=2>
Interface might be different for *.midi and *.wav file
HCI 201 Notes #3B
6
Play video in <img>

dynsrc
- References an AVI movie for inline display
- Only available for Internet Explorer
<img dynsrc=“movie.avi”>
<img dynsrc=“movie.avi” src=“still.gif”>
<img dynsrc=“movie.avi” controls
src=“still.gif”>
loop = # | infinite
HCI 201 Notes #3B
7
Animated text <marquee>

Function:
- Defines the text that scrolls across the screen
- Available only for Internet Explorer

Attributes:
align: top, middle, bottom
behavior: scroll, slide, alternate
direction: left, right
scrollamount: define the “step” of each movement (pix)
scrolldelay: define the frequency of each movement (ms)
HCI 201 Notes #3B
8
Animated text <marquee>
 Let FrontPage add a marquee for you:
1. Open your page in FrontPage and switch to the “Normal” view
(see tabs in the lower left corner).
2. Leave the cursor where you want to add the marquee.
3. MenuInsertWeb componentMarquee.
4. Specify the text and other properties in the popup “marquee
Properties” dialog box.
5. Switch to the “Preview” (see tabs in the lower left corner).
6. To adjust the properties, go back to “Normal” view and double
click on the marquee, the property dialog box will pop up again.
HCI 201 Notes #3B
9
Case Study 1 cont’d
Our client Lori likes the overall
design of her resume. But she
wants us to make the following
final changes:
Allow readers to jump from topic
to topic within her one-page online
resume.
Readers should also be able to be
linked to the references and other
notes of recommendation from her
online resume.
HCI 201 Notes #3B
10
Hypertext basics

Linear structures
Act I
Scene I
Act I
Scene II
HCI 201 Notes #3B
Act I
Scene III
Act II
Scene I
Act II
Scene II
Act III
Scene I
11
Hypertext basics

Hierarchical structures
Act I
Scene I
Act II
Scene II Scene III
HCI 201 Notes #3B
Scene I
Act III
Scene II
Scene I
Scene II
12
Hypertext basics

Linked documents on the Internet
HCI 201 Notes #3B
13
The power of HT in HTML

Link your document to
-

Another place inside the current document
Inside another document in the local collection
A document anywhere on the Internet
The power
-
Let readers browse at their own interests
Provide extra information
“for more information, please click here.” “Other online resources.”
-
Reduce repetitive information
“Contact Us”, “FAQs”, etc.
HCI 201 Notes #3B
14
Referencing document – step 1

What is the ID of an online document ?
URL – Uniform Resource Locator
 Protocol: a set of rules describing how to transmit data.
E.g. “http”, “ftp”, “https”

Domain name or server IP address:
E.g. “www.yahoo.com” or “64.58.76.223”

Directories:
E.g. “/HCI201/Assignments/assignment1/”

File name: “FileName.FileExtension”
E.g. “MyFirstPage.html”
HCI 201 Notes #3B
15
Referencing document – step 2
 Creating
hyperlinks <a>
1. Locate the text or image you want to make as a
hyperlink
2. Before the text or image, place the tag
<a href=“filename”>
filename is the name of the destination document.
3. After the link text or image, place the end tag
</a>
Never omit this end tag
<a href=“http://www.yahoo.com”>Yahoo!</a>
HCI 201 Notes #3B
16
Linking to a section of a document
 Creating
bookmarks
- Bookmarks are specially marked texts/images in
your document.
<a name=“interest”>My Interest</a>
- Bookmarks can be referenced by any other
hyperlinks.
<a href=“AboutMe.htm#interest”>
View Interest</a>
Let’s jump around within Lori’s resume...
HCI 201 Notes #3B
17
Linking to local documents
 Documents
in the same folder
- A hyperlink in Doc2.htm, pointing to Doc1.htm
<a href=“Doc1.htm”>Go to Doc1</a>
 Documents
in other folders
-
Absolute pathname
/TopmostFolder/Nextlevel/.../filename
-
Relevant pathname
- To avoid long absolute pathname
- To make your local folder portable
HCI 201 Notes #3B
18
Linking to local documents
F1

A.htm
“/F1/A.htm”
“/F1/F2/B.htm”
“/F1/F3/F4/E.htm”

F2
B.htm
F3
F4
HCI 201 Notes #3B
Absolute pathnames
C.htm
Relevant pathnames to D.htm
“E.htm”
“../C.htm”
“../../A.htm”
“../../F2/B.htm”
D.htm E.htm
Let’s link Lori’s resume, reference
and comments together
19
Linking to any online documents
 Typical components in a hyperlink
http://www.depaul.edu/course/info.htm#num
http: the communication protocol
www.depaul.edu: Internet host (domain) name
course/info.htm: location/path name of the document
#num: an anchor in that document
 Sometimes a hyperlink looks like this
http://www.depaul.edu/course.asp?id=HCI201
http://www.depaul.edu/new%20class.htm (pp174)
http://192.249.1.33/download.htm
HCI 201 Notes #3B
20
Different protocols in a hyperlink
 http: Hypertext Transfer Protocol (for web pages)
<a href=“http://www.microsoft.com”>Microsoft</a>
 ftp: File Transfer Protocol (for file-download from an FTP server)
<a href=“ftp://ftp.microsoft.com”>Microsoft</a>
 news: To access a newsgroup (a collection of forums)
<a href=“news:comp.infosys.www.announce”>World
Wide Web Announcements</a>
 mailto: To send emails from a local email program
<a href=“mailto:[email protected]”>
[email protected]</a>
HCI 201 Notes #3B
21
Other attributes in <a>

Event handlers
onblur, onfocus, onclick, ondbclick,
onkeydown, onkeypress, onkeyup,
onmouseover, onmouseout, ...

Example
<a href=“http://www.depaul.edu”
onmouseover=“status=‘My School’; return true;”>
DePaul University</a>
HCI 201 Notes #3B
22
Other attributes in <a>

target
where to display the contents of a selected hyperlink
target=“_self”: display the doc. in the same window.
target=“_blank”: open a new blank window for the doc.
(more values will be introduced in week #5)

title
- A text string that describe the linked document
- When mouse moves over, browser will display the
value of title, instead of the hyperlink (default)
HCI 201 Notes #3B
23
Creating effective links

Keep the link concise
Long links or big image links are visually disruptive and confusing

Separate adjacent links
Use regular text or line breaks to separate two connected links,
otherwise they look like one link on your page.

Be consistent
Colors, location, visual presentation, and interaction styles

Use images for links carefully
- Can readers easily recognize these hyperlinks?
- Are readers aware of where the links are pointing to?
(self-explanatory icons, culture differences, etc.)
HCI 201 Notes #3B
24
Image maps

What is an image map?
- Embeds many different links in the same image
- Clicking different areas links to different target doc.
(eg., floorplan, photos, maps, etc)
Example
 Client-side image maps

-
-
usemap attribute in <img>
<map>
<area>
HCI 201 Notes #3B
25
Image maps
 How do they work together?
<map name=“ImageMap”>
<area shape=“rect” coords=“x1,y1,x2,y2” href=“…”>
<area shape=“circ” coords=“x,y,r” href=“…”>
<area shape=“poly” coords=“x1,y1,x2,y2,…” href=“…”>
...
</map>
<a href=“…”>
<img src=“MyImageMap.jpg” usemap=“#ImageMap”>
</a>
HCI 201 Notes #3B
26
Image maps

How to get the coordinates of those hotspots?
 Most web page editors have this function
FrontPage:
- select the image in Normal view
- menu>View>Toolbars>Pictures
- define the hotspots

Programs to create image maps
http://www.concentric.net/~automata/hotspots.shtml
http://www.mediatec.com http://www.boutell.com/mapedit

Make readers aware that different links are embedded
Change colors when mouseover, add borders, drop shadows, etc.
HCI 201 Notes #3B
27
Assignment 2

Write an HTML file that includes:
-
-
-
-
An image (<100KB), specifying at least 5 out of the
following attributes: src, width, height, alt, align, border,
vspace, hspace,
Define a user-friendly background color or image (<10KB).
An embedded *.wav or *.mid file (<100KB), specifying at
least 3 out of the following attributes: src, loop, autostart,
width, height.
Hyperlinks:
-
-
(at least) a bookmark in your page
(at least) an “http” link goes outside of your document
(at least) a “mailto” link
Define an image map with at least 2 hotspots.
HCI 201 Notes #3B
28