html lesson 4
Download
Skip this Video
Download Presentation
HTML Lesson 4

Loading in 2 Seconds...

play fullscreen
1 / 26

HTML Lesson 4 - PowerPoint PPT Presentation


  • 266 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'HTML Lesson 4' - liam


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
prerequisites
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
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
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 gifs5
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 gifs6
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
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
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 maps9
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

image maps10
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 maps11
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”).
image maps12
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.
image maps13
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.
image maps14
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 maps15
Image Maps
  • Here is a simpler graphic with coordinates:
image maps16
Image Maps
  • The accompanying HTML code for the image map:
self check html lesson 4
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 418
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 419
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 420
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}
self check html lesson 421
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 422
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 423
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?
self check html lesson 424
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}

netscape communicator as a web editor
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
try this
Try This!
  • Try the hands-on exercise at http://www.csudh.edu/fisher/tbe540/HEX4.htm
ad