HTML and CSS Reference
In-Depth Information
This project uses an embedded style sheet with a two-step approach. First, you will
insert the class names align-left and align-right into the image <img> tags that will use
the classes. Then, you will add those class names (align-left and align-right) to an image
<img> element in the embedded style sheet. To use this two-step approach, first you will
add the HTML code for the left-align and right-align class names in the <img> tag itself
within the Web page content:
<img class="align-left" src="fish.jpg" width="259"
height="387" alt="Frog fish" />
<img class="align-right" src="lobster.jpg" width="387"
height="259" alt="Lobster" />
which aligns the first image to the left, and the second image to the right.
Second, you have to insert the img (image) property in the embedded style sheet
and add those two class names (align-left and align-right) where you define the style that
you will use for images. This involves the following code that is inserted into the embed-
ded style sheet:
img.align-left {float: left;
margin-left: 5px;
margin-right: 5px;}
img.align-right {float: right;
margin-left: 5px;
margin-right: 5px;}
where img is the property element and align-right and align-left are the class names. The
class names align-right and align-left are arbitrary; you could name them anything. When
naming classes, use names that make sense. Notice that the class names are separated from
the element img with a period.
Using Thumbnail Images
Many Web developers use thumbnail images to improve page loading time.
A thumbnail image is a smaller version of the image itself. The thumbnail is used as
a link that, when clicked, will load the full-sized image. Figure 3-34a shows an example
of a thumbnail image. When the image is clicked, the browser loads the full-sized image
(Figure 3-34b). Loading images can take a long time, depending on the size and the
complexity of the image. Using a thumbnail image gives a visitor the opportunity to
decide whether to view the full-sized image.
To create a thumbnail version of an image, the image can be resized to a smaller
size in a paint or image-editing program and then saved with a different file name. The
thumbnail image then is added to a Web page as an image link to the larger version of
the image. The HTML code to add a thumbnail image that links to a larger image takes
the form:
Thumbnail Size
The size of a thumbnail
varies depending on the
clarity of the image and
its purpose. Generally a
100-150 pixel height and
100-150 pixel width is an
appropriate size. If you
need the visitor to see
more of the image even
in the small size, then a
larger thumbnail is fine.
If a thumbnail is easily
distinguishable at a very
small size (100 x 100), then
that size is appropriate.
Also, you should never
resize an image using
the height and width
attributes in the HTML
code. You should resize
the image in an editing
program and save it with
a new file name.
<a href=”largeimage.gif”><img src=”thumbnail.gif” /></a>
where largeimage.gif is the name of the full-sized image and thumbnail.gif is the name
of the smaller version of the image. In the case of this simple thumbnail example, a visi-
tor clicks the thumbnail image to view the larger image, but there is no “return” button
or link on the full-sized image Web page for the user to return to the original Web page.
Search WWH ::

Custom Search