HTML Lesson 4

TBE 540

Prerequisites

Learners must already be able to... (besides basic computer knowledge)

• Use a search engine to locate information.• Download graphics using Netscape or Internet Explorer.• Start an HTML document (from scratch).• Define GIF and JPG.• Use simple graphics tools to create/manipulate graphics.• Demonstrate appropriate use of the following HTML tags

categories: required tags, images, lists, background graphics, colors, text sizes, links (graphics/text), lines

Objectives

After completing this lesson, the learner will be able to...

• Create a simple animated GIF using GIFBuilder (or a similar program).

• Create a GIF from the clipboard ("copied" graphic) using clip2gif (or a similar program).

• Use Netscape Communicator/Composer as a web page editor• Create three linked web pages (topic=South America).• Create an image map for two or more links (using WebMap

or a similar program) and include the map in a web page.

Animated GIFs

• An animated GIF is a single graphic that appears to be animated.

• The file consists of two or more graphics stored together so that the graphic appears to change.

• The structure is similar to cartoons that show movement through rapidly changing individual pictures.

Animated GIFs

• The picture below (right) is an animated GIF.

• You will also see the individual pictures that make up the animated GIF file.

+ + =

Animated GIFs

• Animated GIFs may be downloaded from the web in the same way as static graphics (remember…honor copyrights).

• To make an animated GIF, look for a freeware or shareware program from a site such as http://www.tucows.com/ or http://www.shareware.com/

• Search for GIF animator

GIFs from Other Files

• When you use the editing functions Copy or Cut, the information is placed in a part of memory called the clipboard.

• There are utility programs that convert the clipboard to a GIF.

• You may also have files that are .PICT or .BMP.• These will also require a conversion program.• Try searching the sites on the last slide for

graphics converter.

Image Maps

• In an earlier lesson you learned that a graphic can be a link.

• With an image map, a single graphic can be used to link to several different sites.

• Coordinates within an image are used to “map” various areas, each of which may be used as a link to a different web page.

Image Maps

• If you could see an image with its map, it might look like this:

Each area could be a separate link.

This area might link to FEET.HTM

These areas might link to EAR.HTM

Image Maps

• Each area is defined by coordinates in pixels.• For rectangular areas, it is the upper left and lower

right.

This area might be defined as 2,200 (upper left) 205,300 (lower right)

Image Maps

• The HTML code to make an image map begins with the IMG tag.

• Here is a sample:

<IMG SRC=“pig.gif” USEMAP=“#MIG”>

• USEMAP says that the graphic is an image map.

• MIG is the name of the map definition (# means “look in this same document”).

Image Maps

• The image map definition begins with a map tag:

<MAP NAME=“MIG”>

• The name of this map definition is MIG.

• </MAP> ends the definition.

• The lines in between describe the areas (by coordinates) and the web pages that they link to.

Image Maps

• The lines between <MAP NAME=“MIG”> and </MAP> define the areas, one tag for each area.

• Here is an example from the pig: <AREA SHAPE=RECT HREF=“FEET.HTM”

COORDS=“2,200 205,300”>• The shape of the area is a rectangle, the link goes

to FEET.HTM, the upper left of the rectangle is at 2,200 and the lower right of the rectangle is at 205,300.

Image Maps

• How can I find the coordinates?

• You can search shareware sites for image map programs.

• You can use a graphics program, if it shows the position of the cursor with “pixels”.

• Move the cursor over the picture and write down the appropriate coordinates.

Image Maps

• Here is a simpler graphic with coordinates:

Image Maps

• The accompanying HTML code for the image map:

Self Check - HTML Lesson 4

• An animated GIF is… A single file A set of several images stored together A simple way to show short animations All of the above

Self Check - HTML Lesson 4

• An animated GIF is… A single file A set of several images stored together A simple way to show short animations All of the above

Self Check - HTML Lesson 4

• Which of the following graphics formats would need to be converted before using on a web page? GIF JPG TIFF BMP PICT

Self Check - HTML Lesson 4

• Which of the following graphics formats would need to be converted before using on a web page? GIF JPG TIFF BMP {You will need a graphics

PICT conversion program}

Self Check - HTML Lesson 4

• An image map is… A GIF that shows a map of a country A graphic that links to several different web

pages A graphic that links to a single web page There is no such thing!

Self Check - HTML Lesson 4

• An image map is… A GIF that shows a map of a country A graphic that links to several different web

pages A graphic that links to a single web page There is no such thing!

Self Check - HTML Lesson 4

• Which of the following tags shows a rectangular area linking to home.htm with coordinates of 100,100 and 300,400?

• <AREA SHAPE=RECT HREF=“home.htm” COORDS=“100,100,200,400”>

• <AREA SHAPE=RECT HREF=“home.htm” COORDS=“100,100 200,400”>

Self Check - HTML Lesson 4

• Which of the following tags shows a rectangular area linking to home.htm with coordinates of 100,100 and 200,400?

• <AREA SHAPE=RECT HREF=“home.htm” COORDS=“100,100,200,400”>

• <AREA SHAPE=RECT HREF=“home.htm” COORDS=“100,100 200,400”>

{No comma between sets of coordinates}

Netscape Communicator as a Web Editor

• For specific instructions in Windows, see

• http://www.csudh.edu/soe/flex/composertutorial

• For specific instructions on a Macintosh, see http://www.csudh.edu/fisher/tbe540/MACComposer/maccomposertutorial.htm

Try This!

• Try the hands-on exercise at http://www.csudh.edu/fisher/tbe540/HEX4.htm