Covers web11, web12 and misc other pages using graphics - topic GRAPHICS

Speaker Notes

Slide 1:

This presentation deals with using graphics in HTML.

You can get graphics from the web, by using a variety of graphics packages, by converting photographcs etc.

Slide 2:

To see the complete page, go to web11.html at my site.

Because the page is long, I will illustrate only portions in this presentation.

<IMG SRC followed by the name of the image enclosed in quotes> will display at image on the screen.

The image is usually a .gif or a .jpeg.

To find about more about image types and which to use, see articles on the subject available through the links on the CIS44 page.

Note the image is in the same directory as the page so no path is needed in <IMG SRC...>, simply the name of the image.

Slide 3:

This slide shows selected code from web11.html. To see it in context, please view the whole page from CIS44.

Note that using WIDTH and HEIGHT are recommended for better load time on images.

Slide 4:

This code is establishing an image as the link to click on to move to a HREF either on the page or on another page.

Up until now we have seen words between the <A...> and the </A>. By replacing the words with an image, the image will appear as the image to click to branch to the specified location.

Slide 5:

This screen shows the first images that appear when web11.html is on the screen

Slide 6:

You need to look at web11.html to see the code for these images and to see them in context.

I did not incorporate the code from align.html into this presentation, but it should be carefully studied for information on aligning images.

Slide 7:

This slide shows the image that I created and the methodology that I used.

It also shows an image from the web. To do this right click on the image and use save image as.

You can now include the image in your code.

Slide 8:

This is the code that produced web12.html.

Clearly using a image requires acknowledgement of the source and frequently permission.

Slide 9:

This page is an example of what not to do!

I am using a background image that I prepared. It is so busy that it totally drowns out the content of the page!

The point is, I can create a background image or find a preexisting one to use in my code. The image is simple one repeat of the yellow/pink scribble. When I incorporate the image, it repeats it over and over again to fill the screen.

Note that this is down within <BODY> just as background color was.

<BODY BACKGROUND="myback.gif">

Slide 10:

This is the big image on the page bigim.html. This is the page that appears when the link image on the previous slide was clicked on.

Slide 11:

This shows the code for the page bigim.html.

Notice that there is an enlarged image and a image used as a reference.

Slide 12:

This slide shows a picture that was developed and stored on disk and then used for this image. Note that the image must be in the same directory as the page or it will need a path to find it.

Slide 13:

This image was a photograph that was saved as a .gif and included on the page.