1. Images, Links and Multimedia

2. Chapter 5 Objectives Insert and display images
3 types of hypertext links
Image links and image maps
Multimedia elements
This chapter discusses some of the more interesting elements of web page design: images, hyperlinks, sound, and video.
The student will learn the three kinds of widely used image formats and when to use each type.
Hyperlinks, the backbone of the WWW, are described in detail, including external and internal links. Finally, the unit describes how audio and video are inserted into the web page.
Teaching Tips and Strategies
Virtually every browser supports the GIF and JPG (JPEG) image types. PNG is a newer format and is not supported by older browsers. A fourth type, ART is a graphic format used by AOL and is only supported on their special browser.
Newer versions of the Microsoft operating systems (Windows 2000, Windows XP) have Paint programs that will save the files directly as GIFs or JPGs. Encourage the students to save a simple drawing of their own in each of the two formats so they will understand the size and quality difference between the two formats.
Students who use America On-Line may save images from their browser in a different image format – ART. This format is not compatible with most browsers without a special installed component. These ART files should only be used for web pages that are only viewed by AOL members.
Caution students about using audio and video clips on their web sites. These files can be very large and with a majority of users on modem connections, the download times can run into the hundreds of minutes for even a short video. A better alternative is to use streaming audio or video, though this requires special server software.
Animated GIFs are cute and interesting, but remember that repeated animation (an animation that never stops) can be as annoying as the <blink> tag. Create most animations with a fixed number of repeats.

3. Displaying Images Image Types and Files <img src="earth2.jpg" />
GIF
JPG
PNG
ART
<img src=" />
<img src="earth2.jpg" />
<img src="astronomy/earth_photos/earth2.jpg" />
Image Types and Files
Images for the web are in three basic formats: GIF, JPG (JPEG), and PNG
AOL browsers recognize a fourth, ART
GIF images are primarily use for line drawings with relative few colors since the format is limited to 256 colors
JPG (JPEG) images are best for photographic images
For the same size image, GIF images are almost always much smaller than JPG (JPEG) images
Creating and Finding Images
Images may be obtained from graphic art collections either on the web or on a CD-ROM, or you may create them yourself
Images may be copied right off a web page by putting the cursor over the image, right clicking, and then selecting “Save Picture as…” (Internet Explorer) or “Save Image as…” (Navigator)
Adding an Image to an HTML Document
Inserting an image into a document requires the use of the <img> tag
The “src” (source) attribute contains the URL to locate the image file
Inserting an image using the full URL of the image file:
Inserting an image when the image file is in the same directory as the code document:
Inserting an image using a relative pathname from the code document’s directory:

4. Alternative Text for Images
<img src="eiffel.gif" alt="Eiffel Tower Picture" />
The “alt” attribute of the <img> tag supplies an alternative text message that is displayed if the image is not available
This alternative text is also used by screen readers for the visually impaired
The attribute is required for XHTML
Specifying alternative text for an image:

5. The Ins and Outs of Inline Images
<style type="text/css">
img {vertical-align:middle}
</style>
<img src="eiffel.gif" align="top" alt="Eiffel Tower Picture" />
<img src="eiffel.gif" align="middle" alt="Eiffel Tower Picture" />
Images are inline, that is, they appear in between text
The “align” attribute positions the image at the top, middle, or bottom of the inline text
Since the “align” attribute is deprecated, the image property vertical-align is preferred
To wrap text around an image, you may use the deprecated “align” attribute with a value of left or right
The preferred method is to use the image style rule’s “float” image property
Centering an image without any associated text insert the image tag inside a centered paragraph element
Aligning images vertically at the middle of the line of text using a style sheet (the value top may also be specified; default = bottom):
Aligning the image at the top or middle of the line of text using the deprecated align attribute (default = bottom):

6. The Ins and Outs of Inline Images
<style type="text/css">
img.leftside {float:left}
</style>
img.rightside {float:right}
Defining an image style class to wrap text around the right side of an image (image on the left margin):
Defining an image style class to wrap text around the left side of an image (image on the right margin):

7. The Ins and Outs of Inline Images
<img src="eiffel.gif" align="left" alt="Eiffel Tower Picture" />
<img src="eiffel.gif" align="right" alt="Eiffel Tower Picture" />
Wrapping text around the right side of an image using the deprecated align attribute (image on the left margin):
Wrapping text around the left side of an image using the deprecated align attribute (image on the right margin):

8. The Ins and Outs of Inline Images
<style type="text/css">
p.centered {text-align:center}
</style>
<p class="centered"><img src="eiffeltower.gif" alt="Eiffel Tower Picture" /></p>
Centering images by defining a centered paragraph class and then placing the image tag within the paragraph element:
where:

9. Sizing Up an Image
<img src="eiffel.gif" width="69" height="120" alt="Eiffel Tower Picture" />
Specify image sizes so page loads are quick and browser load is minimized
Size can be determined by checking the properties of the image with a web browser
Specifying the width and height of an image (or specifying a different width and height to display the image at an altered size):

10. Creating Links (External)
<a href = " here for information on the American Revolution course</a>
<a href="
The power of the WWW lies in the ability to quickly load, via hyperlinks, one document from another at the click of a mouse
Links to another web site are called external, while those within the same document are internal links
Web Site Structure Web sites are normally broken in several pages (files) instead of a single file because small files load faster and smaller documents are easier for people to read
External Links
The anchor <a> tag and “href” attribute are used to create a hyperlink
The attribute for an external link is a valid URL like: or myotherfile.htm
The link will be rendered in the browser in underlined blue text
If an exact file is not specified, the web server will send the default document specified in the server setup
Creating a link to an external file using a full URL (relative pathname also okay):
Creating a link to a web site using domain name (index.html file assumed):

11. Creating Links (Internal)
<a id="DolphinSection" name="DolphinSection">Section 3. All About Dolphins</a>
<a href="#DolphinSection">Dolphins</a>
<a href=" marinemammals.html#DolphinSection"> Click here to get even more information on dolphins!</a>
Internal Links
Links within the same document require a target anchor and a hyperlink anchor
The target anchor is of the form: <a name=”somelabel”>
The hyperlink anchor is of the form: <a href=”#somelabel”>
The “#” indicates that this is a target internal to the document
Combining External and Internal Links
It is possible to link to a document and then target an intermediate location in the page
Create the internal target in the page to be linked to
Use an external hyperlink with an internal target hyperlink
An example:
Creating the destination point for an internal link:
Creating the departure point for an internal link:
Creating a combination link (combination of external and internal links):

12. Making Images into Links
<a href=" src="eiffel.gif"
alt="Eiffel Tower Picture" /></a>
Simple Image Links
Images can be used for hyperlinks instead of, or in addition to text
To remove the blue border from around an image used as a hyperlink, set the image attribute border equal to 0
Often authors use a smaller version of a picture (called a thumbnail) as a hyperlink to a larger version of the same picture
Creating an image link:

13. Image Maps <map id="myFirstMap" name="myFirstMap">
<area shape="rect" coords="x1,y1,x2,y2" href="someURL" />
<area shape="rect" coords="x3,y3,x4,y4" href="anotherURL" />
</map>
<img src="mapimage.gif" alt="Client-side map image"
usemap="#myFirstMap" width="250" height="376" />
Images can be configured with multiple hyperlinks using an image as a client-side image map
The image “hotspots” (hyperlinks) can be rectangular, circles, or polygons
The hotspots are located on the image using coordinates
Use the paint program to determine the coordinates on an image; the x,y coordinates can be read at the bottom of the application as one moves the cursor over the image
Creating clickable map regions (two rectangles, in this case):
Overlaying an image on the clickable map regions to create an image map:

14. Adding Multimedia Elements
<embed src="soundeffect.wav" autostart="false" width="280"
height="45" align="right" />
Multimedia elements that can be inserted into a web page include audio, animation, and video
Audio files can be quite large and take a long time to download; video images are huge
Streaming the audio or video is a method used to playback the audio/video data before the download completes, but this requires a fast connection with sufficient bandwidth
The non-standard <embed> tag is used to place audio/video content in a web page
Animated GIF files are image files that have multiple images stored inside a single file
Animated GIFs are played back by the browser and require only a standard image tag
Embedding an audio (or video) file in a Web page with the full console of controls:

15. End of Chapter 5 Insert and display images 3 types of hypertext links
Image links and image maps
Multimedia elements