Images

Images

Images are commonly used to make web pages more attractive.
Images may be foreground images, which appear along with text, headings, et cetera.
Images may be background images, which are seen behind the foreground elements, where the background color would otherwise be seen.
Browsers will also display images alone, without being a part of a web page.

Image types

There are three image formats, commonly used in web pages:

.gif
Graphic Interchange Format - used for small simple graphical elements, such as an arrow.
.jpeg or .jpg
Joint Photographic Experts Group - used for photographs, and other shaded images.
.png
Portable Network Graphics - a newer format, with characteristics between gif and jpeg

gif images

gif images have 8 bits per pixel. Only 256 colors are allowed. This is good for simple, solid colors.
This is NOT good for shaded images, such as photographs.

gif images are guaranteed not to loose any information in the compression process, used to compress the images for transmission from the server to your client machine.
Images usually load from top to bottom. It is possible to build gif images that load all the odd numbered lines first, and then the even numbered lines. This is the way an analog TV works. Nobody really uses this.
It is possible to build animated gif images that change their contents in a regular cycle. This can be rather irritating, but is often used.
It is possible to build gif images that have transparent backgrounds, which show the background through. This can be really neat.
Unfortunately, in this course, we will not learn to build images. We will learn to put images into our web pages.

You can search for clip art or gif images on the web. Be sure you have permission, or can use the images under "fair use".
In this course, specify the source for each image in your web page.
In this course, only use one image from each web site.

The samples show two gif images, which I use in the CIS 89C JavaScript course.
I drew these images using MS Paint.

jpeg images

jpeg images have 24 bits per pixel. 32,768 colors are provided. This is good for photographs and shaded images.
It does loose some details in compressing the information, but still looks good.
It is NOT possible to build animated or transparent images in jpeg.

The samples show two jpeg images, which I took with my digital camera.

png images

png images are supported by recent browsers, but not by older browsers.
png images can have 8 or 24 bits per pixel.
No details are lost in compression.
png allows transparent backgrounds, but NOT animated images.

Foreground images

Foreground images appear as part of the page information, along with text, headings, and other stuff.
The   img   element is used to specify the image.

Often web page developers like to put the images in a separate directory. If you understand UNIX directories, you may wish to do that. It is easier to upload and manage the images if they are all together. If you do not understand UNIX directories, you are not required to do this.

Required image attributes

  • The src attribute is required in the img tag; without it no image can be found.
  • The alt attribute is required by the standard; it is displayed when the image is not displayed, for any reason. It is required so there will be some text, that is available for sight impiared users.
  • You should always use the height and width attributes. They allow the browser to know how much space to allow for the image. The browser will leave space for the images, and load the text first. The user can read the text while the browser continues loading the images.
  • You will usually want to use the align attribute.

The tag for the image on the left is:
<img src="images/box.gif" alt="patterened box" height="17" width="15" align="bottom" />

Image size

You can find the size of an image by loading the image in the browser; Then right click on the image and look at its properties.

You can check the size in the examples used above.

Align

  • There is NO center alignment for images. There are some cases where center alignment is allowed in html, but NOT for images. You can put an image inside a block element container, and specify the style  text-align: center;  for the container element. The Willard text book gives another technique for working around the lack of center alignment.

There are two kinds of alignment. Use only one of them - NOT both.

  • A small image can be aligned within a line of text.
    This can be done with the following values for the   align   attribute:
    top middle bottom
    There is no equivalent way to do this with styles. Officially the align attribute is being phased out, and replaced by styles. Until they get the styles working consistently, continue to use the   align   attribute with one of the values: top middle bottom
  • A large image can be put on the side, with text wrapping around it. This can be done with the following values for the   align   attribute with the value left or right
    This can also be done with the style:  float: left;  or  float: right;

The example pages linked on the left show this better than just discussing it.

Usually we look at a web page in a browser.
You can also look at an image, without a web page.
We saw that in the image links early in this page.

The link is:
<a href="images/deer.jpeg"> deer </a>

Usually the user sees a few words in blue with an underline, as a link. The user clicks on the words and the browser goes to the new page.
You can put an image in the   a   container, instead of a few words.
Then the user sees the image with a blue underline or blue border, and clicks on the image to go to the new page. You may wish to use a larger border, so the blue color shows up.
In this example on the left, the image the user sees is a small thumbnail version of a large image. When the user clicks on the thumbnail image, the browser shows them the large image.

The link is:

        <a href="images/deer.jpeg">
          <img src="images/deer-small.jpeg" alt="deer thumbnail" 
               height="156" width="184" style="border: 10px solid;"
               />  
        </a>
          

Image map

An image map provides hot spots within an image.
When the user clicks on a hot spot, the browser links to a new web page or image.
There are two parts of an image map: the image and the map. You must provide both.
The example shows an image with two hot spot links.

Transparent background

The image at the left has a transparent background. The yellow background shows through the transparent background. gif and png images can have a transparent background. An image with a transparent background can be created with an image editing program, such as MS Photo Editor or Adobe Photoshop.

1x1 images

It is often nice to use 1px by 1px images. You can give them a larger height and width. The browser will expand them to fill the height and width you specify. This is good for making solid colored rectangles, or empty transparent areas.

The images at the left are built using the images:
red1x1.gif   green1x1.gif   trans1x1.gif   blue1x1.gif
You can copy and use these images. The transparent image is between the green and blue images.

Background

Background images are often used, to make the page more attractive. The background appears behind the other page elements. It is good to use a light background image with dark foreground material, or a dark background image with light foreground material. You may wish to provide a background color that is similar to the predominant color of the background image. This background color will be seen if the background image does not appear.

The examples show the details for using the styles:

  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat
  • background

Lab 7

Now you are ready to build your lab 7 web page.
Follow the link on the left to read the lab 7 requirements and build your lab 7 web page.

Complete Lab 7

You have built your lab 7 web page.
Upload your page to voyager, just as you did for lab 2.
Validate your lab 7 page.
Then, log in to Catalyst and submit assignment 7. The submission should provide the following information:

  • It should say that you have completed Lab 7.

Reading assignment

Reading assignments are in HTML, A Beginner's Guide, by Wendy Willard.
Read the chapter. The chapters are divided into Critical Skill sections.

Chapter 6

Use Images as Elements in the Foreground of a Web Page
The book gives an example of using an image from a different web site than the web page. Don't do that. It often makes the image slow to load. It is not good to mix material which has different owners. The image is not controlled with the web page, so they can get out of sync.
Specify the Height and Width of Images
Always provide the correct width and height attribute values, to match the image. This is not required by the standard, but makes the apparent load time for your page faster.
Provide Alternative Text and Titles for Images
Standards require the   alt   attribute in every   img   element.
Link Images to Other Content on a Web Site
Read.
Style Foreground Images
The book gives one method for centering images, and I give another. You may try either.
Use Images as Elements in the Background of a Web Page
Read.

An alternate text is Even More Excellent HTML by Timothy T. Gottleber and Timothy N. Trainor. This book gives both new and older techniques. You may read in this book, if you wish.
Chapter 6