HTML Lesson 4

1. HTML Lesson 4 TBE 540

2. 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

3. 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.

4. 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.

5. Animated GIFs • The picture below (right) is an animated GIF. • You will also see the individual pictures that make up the animated GIF file. + + =

6. 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

7. 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.

8. 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.

9. Image Maps • If you could see an image with its map, it might look like this: These areas might link to EAR.HTM Each area could be a separate link. This area might link to FEET.HTM

10. 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)

11. 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”).

12. 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.

13. 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.

14. 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.

15. Image Maps • Here is a simpler graphic with coordinates:

16. Image Maps • The accompanying HTML code for the image map:

17. 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

18. 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

19. 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

20. 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}

21. 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!

22. 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!

23. 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”>

24. 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}

25. 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

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