Transcript htmllesson4

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/composertut
orial
• 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