HTML
<<  HTML 5 Структура HTML-документа  >>
HTML Lesson 4
HTML Lesson 4
Prerequisites
Prerequisites
Objectives
Objectives
Animated GIFs
Animated GIFs
Animated GIFs
Animated GIFs
Animated GIFs
Animated GIFs
GIFs from Other Files
GIFs from Other Files
Image Maps
Image Maps
Image Maps
Image Maps
Image Maps
Image Maps
Image Maps
Image Maps
Image Maps
Image Maps
Image Maps
Image Maps
Image Maps
Image Maps
Image Maps
Image Maps
Image Maps
Image Maps
Self Check - HTML Lesson 4
Self Check - HTML Lesson 4
Self Check - HTML Lesson 4
Self Check - HTML Lesson 4
Self Check - HTML Lesson 4
Self Check - HTML Lesson 4
Self Check - HTML Lesson 4
Self Check - HTML Lesson 4
Self Check - HTML Lesson 4
Self Check - HTML Lesson 4
Self Check - HTML Lesson 4
Self Check - HTML Lesson 4
Self Check - HTML Lesson 4
Self Check - HTML Lesson 4
Self Check - HTML Lesson 4
Self Check - HTML Lesson 4
Netscape Communicator as a Web Editor
Netscape Communicator as a Web Editor
Try This
Try This

Презентация на тему: «HTML Lesson 4». Автор: Farah Fisher. Файл: «HTML Lesson 4.ppt». Размер zip-архива: 89 КБ.

HTML Lesson 4

содержание презентации «HTML Lesson 4.ppt»
СлайдТекст
1 HTML Lesson 4

HTML Lesson 4

TBE 540

2 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

3 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.

4 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.

5 Animated GIFs

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

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

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

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

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

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

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

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

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

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

Image Maps

Here is a simpler graphic with coordinates:

16 Image Maps

Image Maps

The accompanying HTML code for the image map:

17 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

18 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

19 Self Check - HTML Lesson 4

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

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

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

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

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

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

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 This

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

«HTML Lesson 4»
http://900igr.net/prezentacija/informatika/html-lesson-4-264178.html
cсылка на страницу
Урок

Информатика

130 тем
Слайды