htmllesson4

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: These areas Each area could be a separate link.

might link to EAR.HTM

This area might link to FEET.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 â&#x20AC;˘ Here is a simpler graphic with coordinates:

Image Maps â&#x20AC;˘ 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 PICT

{You will need a graphics 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/MACCompo htm

Try This! â&#x20AC;˘ Try the hands-on exercise at http://www.csudh.edu/fisher/tbe540/HEX4. htm