Html lesson 4
Download
1 / 26

htmllesson4 - 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 'htmllesson4' - 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
Html lesson 4 l.jpg

HTML Lesson 4

TBE 540


Prerequisites l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 maps12 l.jpg
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 maps13 l.jpg
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 maps14 l.jpg
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 l.jpg
Image Maps

  • Here is a simpler graphic with coordinates:


Image maps16 l.jpg
Image Maps

  • The accompanying HTML code for the image map:


Self check html lesson 4 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 424 l.jpg
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 l.jpg
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 l.jpg
Try This!

  • Try the hands-on exercise at http://www.csudh.edu/fisher/tbe540/HEX4.htm


ad