1 / 26

HTML Lesson 4

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.

liam
Download Presentation

HTML Lesson 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related