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