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/http://www.tucows.com/ 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: Each area could be a separate link. This area might link to FEET.HTM These areas might link to EAR.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: 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: The name of this map definition is MIG. 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 and define the areas, one tag for each area. Here is an example from the pig: 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?

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? {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/composertut orialhttp://www.csudh.edu/soe/flex/composertut orial For specific instructions on a Macintosh, see http://www.csudh.edu/fisher/tbe540/MACC omposer/maccomposertutorial.htm http://www.csudh.edu/fisher/tbe540/MACC omposer/maccomposertutorial.htm

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