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 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 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 MACC omposer maccomposertutorial htm Try This Try the hands on exercise at http www csudh edu fisher tbe540 HEX4 htm