Images

1
Images
2
Overview Following a general discussion of
images and issues associated with their use on
the web, this lesson focuses on the elements and
attributes needed to display the images on the
page.
3
Objectives After completing the lesson,
students will be able to List the three image
formats recognized by the major
browsers Describe at least three issues
associated with the use of images on web
pages Set a web page's background image using
the body element's background attribute Use
the following attributes of the img element
appropriately when hard-coding HTML src , alt
, height , width , align , border , vspace , and
hspace Set an image as a hyperlink, with or
without associated label text Use the br
element's clear attribute to control text flow
around images
4
Key terms GIF JPEG PNG
5
Activity 1 1 There are several ways to
acquire images for use on web pages Create
your own images using image-editing
software. Acquire images from a digital
camera. Purchase image collections. Find free
images on the web.
6
Do the following exercise. Exercise A in the
Student Exercise Unit 2, Lesson 7 includes these
steps. Exercise A 1. Using any search engine,
conduct a search for "free images" or "free
graphics." 2. Find at least three websites that
offer free images. Be sure to read the fine print
regarding how the free images from each source
may be used. Notice that free images are often
intended or offered only for noncommercial
use. 3. Create a subfolder named "images" within
the folder you have been using to save your
previous exercises. 4. Save at least four images
from these sites that represent you or something
about you (and that you have permission to use).
These will be used in future exercises in this
lesson and should be saved in the images folder.
To save an image, position the pointer on the
image and hold down the mouse button. From the
menu that appears, choose the Save As option.
(Depending on your browser version, the option
may be called something like "Download the
Image.")
7
Images should not be used just because they can
be used. There should be a clear purpose for
images used within a web page. Each image should
add something to the page. In addition, it is
important to remember that every image adds to
the overall download time. Users with slow modems
simply won't wait for a page that loads too
slowly. As a rule of thumb, try to keep page load
time to 30 seconds or less.
8
Finally, never make important information
available only via an image. There are many
reasons that visitors to your page may not be
able to see your images, including The
visitor is visually impaired and perhaps uses a
screen reader to read the text on the page
aloud. If important information is available
only within an image, that visitor will never
learn about it. The visitor has graphics turned
off to force pages to load faster. The
visitor is accessing the page using a text-only
browser or device.
9
The two most popular image file formats for the
web are Joint Photographic Experts Group (JPEG)
and Graphic Interchange Format (GIF). Portable
Network Graphics (PNG) is an emerging web file
format with great promise. The latest versions of
major browsers can view all three formats.
Images vary in number of colors used, ranging
from two (for example, black-and-white images) to
millions of colors (for example, a detailed
photograph). In most cases, the more colors used,
the larger the image file size. As the table
later in this activity indicates, each web file
format has its own color specialty.
10
Some monitors only display 256 colors, with up to
40 of those colors reserved by the system or
browser. These monitors usually display images
using the browser safe palette, which contains
the 216 colors common to most systems and
browsers. The browser safe palette can be seen at
the Lynda.com website organized by color value or
color hue. If an image uses more than 216 (or a
different 216) colors, the browser tries to
reproduce the missing colors by dithering (which
doesn't always result in an attractive end
product). Another issue related to image file
format is whether the format supports transparent
images. Many image editors allow for one or more
colors to be transparent (such as the background
color) so that the page's background shows
through the transparent areas of the image. As
the table that follows indicates, GIF and PNG
file formats allow for transparent images.
11
When discussing web file formats, the topic of
compression must be addressed. Compression is
used to make the file size of web graphics
smaller. There are two primary types of
compression lossy compression (in which some
image quality is lost in the final image, such as
with JPEGs) and lossless compression (in which
there is no loss of image quality in the final
image, such as with GIFs) GIF JPG PNG Developm
ent Developed by CompuServe in '80s
currently charges requires royalty fees
for selling products that use the GIF file
format
Created to be a cross-platform file format
12
GIF JPG PNG Compression Lossless
Lossy Lossless
Method Number of Colors 8-bit
256 colors or less millions
of colors
24 bit
8-bit 24-bit 32-bit
Optimal use
Use for images with only a few distinct colors
such as illustrations, cartoons, icons, buttons,
and text
Use for full-color or grayscale images with
continuous variations in color such as
photographs and "realistic" artwork
Uses several compression methods and can be used
with varying bit-depths, including 8-, 24-, and
32-bit images
13
GIF JPG PNG
Additional Notes
GIF87a Supports transparency and interlacing
GIF89a Supports transparency, interlacing, and
animation
PNG not currently well supported by web browsers
or imaging software
14
File size is a critical issue for web designers.
File size can be influenced by several different
factors, including the number of colors used and
the dimensions of the image. Compare the
following photograph, saved at four different
color resolutions. (Note Display size has been
reduced 50.)
15
6 There are several ways to decrease image size
(or apparent image size) Use smaller images
to begin with. You can crop or resize if
necessary. Compress images when
possible. Reduce the number of colors used in
the image if possible. Create a miniature or
thumbnail image that links to the larger image on
a separate page. Use a low-resolution version
to load first.
Activity 2 1 The img element (an empty
element) is used to insert graphics into HTML
documents. Its two required attributes are src
and alt. By default, images are inserted inline.
This means that if you insert an image in the
middle of a sentence, that's where the browser
attempts to display it. To start an image on a
new line, it should be preceded by either the
tag or the
tag
16
2 The src attribute tells the browser where to
locate the image file. (By the way, it's an
excellent practice to keep images in a subfolder
of your website folder named "images." The
example shown next reflects this convention.)
The basic syntax for the image element's src
attribute is
(where "path/image.ext" gives the location of
the image and the image's filename, including the
extension) An example showing the syntax for the
tag with src attribute is src"images/bird_24.jpg"
17
Do the following exercise. Exercise B in the
Student Exercise Unit 2, Lesson 7 includes these
steps.
18
4 The alt attribute is used to provide a
text-based description of the image, a critical
accessibility feature. This is the text that
shows up when your pointer is over an image on a
web page. Without the alt text, images are
unusable by individuals who use screen readers,
who have images turned off, who access the web
with a text-based device, and so on. The basic
syntax for the img element's alt attribute is the
following describing the image" An example showing the
syntax for the alt attribute is Example src"images/bird_24.jpg" alt"bird of paradise
photo saved in 24-bit color"
19
Issues to consider when using alternate
text The alt attribute should be included in
every tag (and is required for this course
from this point forward). Alternate text is
limited to 1024 characters. Alternate text
should be descriptive enough for those who cannot
view the image it describes. Alternate text is
also displayed when the pointer passes over an
image. Alternate text is displayed in place of
the image if images are turned off within the
browser.
Do the following exercise. Exercise C in the
Student Exercise Unit 2, Lesson 7 includes these
steps. Exercise C 1. Using TextEdit, open the
file previously saved as index.htm. 2. Add the
proper code to the image reference entered in
Exercise B to add the alt attribute. 3. Save the
file. 4. Display the file in your browser.
20
Activity 3 1 The img element's align
attribute (now deprecated) is used for one of two
purposes. It is used to position the image at the
left or right margin (by specifying either a
"left" or "right" value) or to position text at
the top, middle, or bottom of the image (by
specifying a "top," "middle," or "bottom" value).
The basic syntax for the img element's align
attribute, when used to position an image at the
left or right margin, is as follows src"path/image.ext" alt"text describing the
image" align"direction" (where direction
left or right) An example showing the syntax for
the align attribute is Example src"images/bird_24bit.jpg" alt"bird of paradise
photo saved in 24-bit color" align"right"
21
2 Although "left" and "right" values are allowed
for the img element's align attribute, there is
no "center" value. There are two commonly used
(but deprecated) ways of centering an image
horizontally (though these methods do not provide
a way to flow text around the image). You can
use the center container element, for
example alt"alt text" You can also use the p
container element with a center alignment, for
example src"path/image.ext" alt"alt text"
22
3 Both the align attribute and the center element
are deprecated. One current, preferred way to
align an image horizontally (left, right, or
center) is to nest the img element within a p
element, specifying the desired value for the
style attribute's text-align property. Thus, the
basic syntax to horizontally position an image is
the following img src"path/image.ext" alt"alt text"
(where direction left, right, or center) For
example, the line mg src"images/redcircle.gif" alt"red
circle" renders as follows
23
4 If you want to flow text around an image, the
style attribute in conjunction with its float
property can be used to position the image
against the left margin and flow text to the
right of it or to position the image against the
right margin and flow text to the left of it.
The basic syntax for the img element's style
attribute (and float property) is the
following text" style"floatdirection" (where direction
left or right) For example, the following
lines of code alt"green oval" style"floatright" See how
the green oval image floats to the right. See how
the green oval image floats to the right. See how
the green oval image floats to the right. See how
the green oval image floats to the right. See how
the green oval image floats to the right. See how
the green oval image floats to the right. See how
the green oval image floats to the
right. render as follows See how the green
oval image floats to the right. See how the
green oval image floats to the right. See how
the green oval image floats to the right. See
how the green oval image floats to the right.
See how the green oval image floats to the
right. See how the green oval image floats to the
right. See how the green oval image floats to
the right.
24
Do the following exercise. Exercise D in the
Student Exercise Unit 2, Lesson 7 includes these
steps. Exercise D 1. Using TextEdit, open the
file previously saved as where.htm. 2. Add the
proper code to display an image on the left side
of the text with the text "wrapping" around
it. 3. Don't forget to include the alt
attribute. 4. Save the file. 5. Display the
file in your browser.
25
6 Text can also be aligned with images
vertically. The basic syntax for the img
element's align attribute, when used to
vertically position text in relation to an image,
is as follows alt"alt text" align"position" (where
position top, middle, or bottom) An example
showing the syntax for the align attribute
is Example alt"bird of paradise photo saved in 24-bit
color" align"middle"
26
    Activity 4 1 The height and width
attributes tell the browser how much space to
reserve for the image, thus reducing load time.
Once the image space is reserved, the text can be
displayed while the image is loading. Image
dimensions are given in number of pixels. There
may be times when you use an image found on the
Internet, but you may not know its dimensions.
The browser may actually be used to find out an
image's size. In Netscape Navigator/Communicator,
type the location and name of the image itself
into the Location box (where the URL normally
goes) and press the Return key. When the image is
displayed, the image dimensions should be
displayed in the browser's title bar. In
Internet Explorer, click the image and open the
Properties box. The image's dimensions are
displayed along with the other image properties.
27
2 The basic syntax for the img element's height
and width attributes is src"path/image.ext" alt"text describing the
image" height"h" width"w" (where h the
image's height in pixels and w the image's
width in pixels) An example showing the syntax
for these attributes is Example We are
here. is usually rendered as We
are here . alt"bird of paradise photo saved in 24-bit
color" height"228" width"250" Note  While
you can specify image sizes in HTML, it is
preferable to modify the images in your favorite
image-editing software, scaling them to the
actual size you wish to display them on your web
pages.
28

• The hspace and vspace attributes are used to
  create margins around an image, specifying the
  size of the margin in pixels. The default margin
  value for most browsers is two pixels, which
  usually does not look like "enough" space.
  Internet Explorer leaves four pixels to the right
  of an image (but not the left) by default.
• The hspace attribute specifies the number of
  pixels to add on both the right and left sides of
  the image.
• The vspace attribute specifies the number of
  pixels to add to both the top and the bottom of
  the image.
• 4 The basic syntax for the img element's
  hspace and vspace attributes is
• height"h" width"w" hspace"x" vspace"v"
• (where x and v the number of pixels of
  horizontal and vertical space to add around the
  image)
• An example showing the syntax for these
  attributes is
• Example
• paradise photo saved in 24-bit color"
  height"228" width"250" hspace"10" vspace"10"

29
5 Do the following exercise. Exercise E in the
Student Exercise Unit 2, Lesson 7 includes these
steps. Exercise E 1. Using TextEdit, open the
file previously saved as who.htm. 2. Add the
proper code to display an image on the right side
of the words "Who am I?" 3. Set the width to 150
pixels. (The height should be proportional.) 4.
Don't forget to include the alt attribute. 5.
Save the file. 6. Display the file in your
browser.
30
6 The border attribute is used to specify the
thickness (width) of the border around the image.
When an image is set as a hyperlink, the default
border is two pixels. To avoid this border, you
can set the border equal to zero. Since people
tend to associate bordered images with
hyperlinks, it may be confusing to use borders on
images that are not hyperlinked. 7 The basic
syntax for the img element's border attribute is
height"h" width"w" hspace"x" vspace"v"
border"b" (where b the number of
pixels) An example showing the syntax for the
border attribute is Example src"images/bird_24bit.jpg" alt"bird of
paradise" height"228" width"250" hspace"10"
vspace"10" border"0"
31
Activity 5 1 Just as the body element can use
the bgcolor attribute to display a background
color on a web page, it can use the background
attribute to set an image as the page's
background. Background images automatically tile
across and down to fill the page. The basic
syntax to set a background image using the
background attribute is background"path/image.ext" (where
"path/image.ext" gives the location of the image
and the image's filename, including its
extension) An example showing the syntax for
this attribute is Example background"images/brickwall.gif" Both the
bgcolor and background attributes have been
deprecated in favor of styles. One new, preferred
way to set these attributes is via the style
element inside the document's head section. The
following example illustrates the use of styles
to set the body element's background-color and
background-image.
32
The W3C advises that When setting a background
image, authors should also specify a background
color that will be used when the image is
unavailable. When the image is available, it is
rendered on top of the background color. Thus,
the color is visible in the transparent parts of
the image. W3C, CSS2 Specification at
http//www.w3.org/TR/REC-CSS2/colors.htmlpropdef-
background-image title
text ...
33
There are several things that should be taken
into consideration when using background images.
The file size of such images should be small.
Usually, the images themselves are also small
(that is, the dimensions). They should tile
smoothly (not have obvious edges). They should
not combine very light colors with very dark
colors or it will be difficult to find a text
color that is readable over all portions of the
image.     Activity 6 1 To make an
image function as a hyperlink, you simply enclose
the tag within the appropriate tags.
The basic syntax to set an image as a hyperlink
is alt"text describing what happens when you click
the image" An example illustrating the
syntax for this attribute is the
following Example "page"
34
2 Linked images have a border by default. Though
you can remove the border by setting the
tag's border attribute to zero, your website's
visitors may not recognize it as a link unless it
looks "clickable" (for example, shaped like a
button). To include clickable text next to your
hyperlinked image, include label text inside the
tag, either before or after the
tag. The basic syntax to include label text is
the following src"path/image.ext" alt"alt text"label
text Here is an example of a linked image
with border set to zero and with label
text Example g src"images/WOWLogo2.gif" alt"Go to WOW home
page" width"157" height"81" border"0"Go to
WOW home page which renders as follows
Go to WOW home page
35
Do the following exercise. Exercise F in the
Student Exercise Unit 2, Lesson 7 includes these
steps. Exercise F 1. Using TextEdit, open the
file previously saved as index.htm. 2. Add the
proper code to display an image at the bottom of
the page. 3. Turn this image into a link to your
school or district's home page. 4. Don't forget
to include the alt attribute. 5. Save the
file. 6. Display the file in your browser.  
 
36
Activity 7 As you may have noticed, a wrapped
image affects all the text that follows it,
unless a special line break is inserted. The
basic syntax to insert a special line break is
the following
(where x
left, right, or all) When xleft It stops text
from flowing until there are no more left-aligned
images. In other words, the text following the

tag begins below the
left-aligned image (gets you past it). When
xright It stops text from flowing until there
is no more right-aligned images. In other words,
the text following the
tag
begins below the right-aligned images (gets you
past it). When xall It stops text from flowing
until there are no more images aligned on either
the left or right margins.
37
(No Transcript)