Web Development & Design Foundations

with HTML5
Tenth Edition

Chapter 4
Visual Elements and
Graphics

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4-1
Learning Outcomes (1 of 2)
In this chapter, you will learn how to ...
• Create and format lines and borders on web pages
• Apply the image element to add graphics to web
pages
• Optimize an image for web page display
• Configure images as backgrounds on web pages
• Configure images as hyperlinks
• Configure visual effects with CSS3 including multiple
background images, rounded corners, box shadow,
text shadow, opacity, and gradients

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4-2
Learning Outcomes (2 of 2)
• Configure RGBA and HSLA color with CSS3
• Use figure and figcaption elements
• Use the meter and progress elements
• Follow recommended web design guidelines for
graphics on web pages

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4-3
Horizontal Rule Element
Configures a horizontal line
<hr>

Figure 4.1 The <hr> tag configures a horizontal line

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4-4
CSS border Property
Configures a border on the top, right, bottom, and left
sides of an element
Consists of
• border-width
• border-style
• border-color
h2 { border: 2px solid #ff0000 }

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4-5
CSS Borders: Block / Inline Elements
• Block display element
– Default width of element content extends to browser
margin (or specified width)
• Inline display element
– Border closely outlines the element content

h2 { border: 2px solid #ff0000; }

a { border: 2px solid #ff0000; }
Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4-6
Border Display Can Vary by Browser

Figure 4.2 Examples of the various border-style values rendered by Firefox

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4-7
Configuring Specific Sides of a Border
Use CSS to configure a line on one or more sides of an
element
• border-bottom
• border-left
• border-right
• border-top

h2 { border-bottom: 2px solid #ff0000 }

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4-8
CSS padding Property
Configures empty space between the content of the HTML
element and the border

Set to 0px by default

h2 { border: 2px solid #ff0000; padding: 5px; }

No padding property configured:

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4-9
Configure Padding on Specific Sides of
an Element
Use CSS to configure padding on one or more sides of
an element
• padding-bottom
• padding-left
• padding-right
• padding-top
h2 { border: 2px solid #ff0000;
background-color: #cccccc;
padding-left: 5px;
padding-bottom: 10px;
padding-top: 10px; }

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 10
CSS padding Property Shorthand: two
values
Two numeric values or percentages
• first value configures top and bottom padding
• the second value configures left and right padding

h2 { border: 2px solid #ff0000;

background-color: #cccccc;
padding: 20px 10px;
}

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 11
CSS padding Property Shorthand: four
values
Four numeric values or percentages
• Configure top, right, bottom, and left padding

h2 { border: 2px solid #ff0000;

width: 250px;
background-color: #cccccc;
padding: 30px 10px 5px 20px;
}

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 12
Hands-On Practice
h2 { background-color: #B0E6E6;
color: #237B7B;
font-family: Georgia, "Times New Roman", serif;
text-align: center;
border-bottom: 2px dashed #237B7B; }

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 13
Figure 4.3 CSS border and padding properties
add visual interest to the page.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 14
Checkpoint 4.1
1. Is it reasonable to try to code a web page that looks exactly
the same on every browser and every platform? Explain your
answer.
2. When a web page containing the style rules below is rendered
in a browser, the border does not display.
Describe what is incorrect with the following code:
h2 { background-color: #ff0000
border-top: thin solid #000000
}
3. True or False? CSS can be used to configure visual elements
such as rectangular shapes and lines on web pages.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 15
Types of Graphics (1 of 2)
Graphic types commonly used on web pages:
• GIF
• JPG
• PNG
• WebP

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 16
Figure 4.6 Comparison of transparent and
nontransparent GIFs

Background Background
color color – no
configured to transparency
be transparent

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 17
Types of Graphics (2 of 2)
• Graphics Interchange Format
• Best used for line art and logos
• Maximum of 256 colors
• One color can be configured as transparent
• Can be animated
• Uses lossless compression
• Can be interlaced

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 18
JPEG
• Joint Photographic Experts Group
• Best used for photographs
• Up to 16.7 million colors
• Use lossy compression
• Cannot be animated
• Cannot be made
transparent
• Progressive JPEG – similar to interlaced display

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 19
Figure 4.7 A JPEG saved at 80% quality (55KB
file size) displays well on a web page

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 20
PNG
• Portable Network Graphic
• Supports millions of colors
• Supports multiple levels of transparency
(but most browsers do not – so limit to one transparent
color for Web display)
• Supports interlacing
• Uses lossless compression
• Combines the best of GIF & JPEG
• Well-supported by modern browsers
Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 21
WebP
• https://developers.google.com/speed/webp/
• Supports millions of colors
• Supports transparency
• Uses both lossy and lossless compression
• Intended to provide improved compression for GIF
and JPG images
• Browser support is growing

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 22
HTML Image Element
• Configures graphics on a web page
<img src="dog.jpg" alt="Dog at computer" height="100"
width="100">
• src Attribute
– File name of the graphic
• alt Attribute
– Configures alternate text description
• height Attribute
– Height of the graphic in pixels Figure 1.3 Who really
updated that web page you
• width Attribute are viewing?
– Width of the graphic in pixels

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 23
Accessibility & Images
Required:
• Configure the alt attribute
– Alternate text content to convey the meaning/intent of
the image
– NOT the file name of the image
– Use alt="" for purely decorative images
Recommended:
• If your site navigation uses image links for the main
navigation, provide simple text links at the bottom of
the page.
Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 24
Image Link
• To create an image hyperlink use an anchor element
to contain an image element
Home
<a href="index.html"><img src="home.gif"
height="19" width="85" alt="Home"></a>

• Some browsers automatically add a border to image

links.
• Configure CSS to eliminate the border
img { border-style: none; }

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 25
Thumbnail Image (1 of 2)
A small image configured to link to a larger version of
that image.
<a href=“island.jpg”><img src=“small.jpg” alt=“tropical
island” width=“200” height=“100”></a>

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 26
Thumbnail Image (2 of 2)

Figure 4.7 A JPEG saved at 80% quality

(55KB file size) displays well on a web page

Figure 4.9 This small

thumbnail image is only 5KB

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 27
Image Optimization
The process of creating an image with the lowest file
size that still renders a good quality image—balancing
image quality and file size.

Photographs taken with digital cameras are not usually

optimized for the Web

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 28
Optimize An Image for the Web
Image Optimization
• Reduce the file size of the image
• Reduce the dimensions of the image to the actual
width and height of the image on the web page.
Image Editing Tools:
• GIMP https://www.gimp.org/ (FREE!)
• Adobe Photoshop
• Pixlr
– https://pixlr.com/x/ (FREE!)
Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 29
Choosing Names for Image Files
Use all lowercase letters
Do not use punctuation symbols and spaces
Do not change the file extensions
(should be .gif, .jpg, .jpeg, or .png)
Keep your file names short but descriptive
• i1.gif is probably too short
• myimagewithmydogonmybirthday.gif is too long
• dogbday.gif may be just about right

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 30
Organizing Your Site
• Place images in their own folder
• Code the path to the file in the src attribute
<img src=“images/home.gif” alt=“Home”
height=“100” width=“200”>

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 31
Figure 4.21 A folder named “images” contains
the graphic files

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 32
HTML5 Figure and Figcaption Elements
Figure Element: contains a unit of content that
is self-contained, such as an image, along with one
optional figcaption element.
<figure>
<img src= "myisland.jpg" width= "400" height= "400"
alt=“Tropical Island Getaway">
<figcaption>
Tropical Island Getaway
</figcaption>
</figure>

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 33
Figure 4.14 The figure and figcaption elements
were used in this web page

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 34
HTML5 Meter Element
Displays a visual gauge of a numeric value within a known
range
<meter value="14417" min="0" max="14417">14417</meter>14,417 Total
Visits<br>
<meter value="7000" min="0" max="14417">7000</meter> 7,000
Chrome<br>
<meter value="3800" min="0" max="14417">3800</meter> 3,800 Edge<br>
<meter value="2062" min="0" max="14417">2062</meter> 2,062 Firefox<br>
<meter value="1043" min="0" max="14417">1043</meter> 1,043 Safari<br>
<meter value="312" min="0" max="14417">312</meter> &nbsp;&nbsp; 312
Opera<br>
<meter value="200" min="0" max="14417">200</meter> &nbsp;&nbsp; 200
other<br>

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 35
Figure 4.15 The meter element

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 36
HTML5 Progress Element
Displays a bar that depicts a numeric value within a
specified range
<progress value="5000“max="10000">5000</progress>
Progress Towards Our Goal

Figure 4.16 The progress element

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 37
CSS background-image Property
Configures a background-image
By default, background images tile (repeat)
body { background-image: url(background1.gif); }

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 38
Figure 4.17 A long, thin background image tiles
down the page

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 39
Figure 4.18 A small rectangular background is
repeated to fill the web page window

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 40
CSS background-repeat Property

Figure 4.19 Examples of the CSS background-repeat property

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 41
Using background-repeat
flower.gif:

h2 { background-color: #d5edb3;
color: #5c743d;
font-family: Georgia, "Times New Roman", serif;
padding-left: 30px;
background-image: url(flower.gif);
background-repeat: no-repeat;
}
Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 42
CSS background-position Property
The default placement of a background image is top
left.
The background-position property can change this
placement.

h2 { background-image: url(flower.gif);
background-position: right;
background-repeat: no-repeat; }

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 43
CSS background-clip Property
• confines the display of the background image

Figure 4.23 The CSS background-clip property

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 44
CSS background-origin Property
• positions the background image relative to the content,
padding or border

Figure 4.24 The CSS background-origin property

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 45
CSS background-size Property
can be used to resize or scale the background image

Figure 4.25 Configuring a background image.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 46
CSS Multiple Background Images
Use the background property to configure
multiple background images.

Example:
body {
background:url(coffee.gif) no-repeat left bottom,
url(coffeepour.jpg) no-repeat fixed;
background-size: auto, cover; }

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 47
Figure 4.27 The browser displays multiple
background images.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 48
Checkpoint 4.2
1. Describe the CSS to configure a graphic named
circle.jpg to display once in the background of all
<h1> elements. Code sample CSS to demonstrate
this.
2. Describe the CSS that configures a file named bg.gif
to repeat vertically down the background of a web
page. Code sample CSS to demonstrate this.
3. Explain how the browser will render the web page if
you use CSS to configure both a background image
and a background color.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 49
More About Images
Image Map
Favorites Icon
CSS Sprites
Sources for Graphics
Guidelines for Using Images
Accessibility & Visual Elements

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 50
Image Map (1 of 2)
map element
• Defines the map
area element
• Defines a specific area on a map
• Can be set to a rectangle,
circle, or polygon
– href Attibute
– shape Attribute
– coords Attribute

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 51
Image Map (2 of 2)
<map name="boat" id="boat">
<area href="http://www.fishingdoorcounty.com"
shape="rect"
coords="24, 188, 339, 283" alt="Door County
Fishing">
</map>
<img src="fishingboat.jpg" usemap="#boat" alt="Door
County“
width="416" height="350">

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 52
Figure 4.29 Sample image map

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 53
Favorites Icon - favicon
• A square image
associated
with a web
page
• Usually named: favicon.ico
• May display in the browser address bar, tab, or
favorites/bookmarks list
• Configure with a link tag:
<link rel="icon" href="favicon.ico" type="image/x-icon">

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 54
Figure 4.30 The favorites icon displays in the
browser tab and address bar

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 55
CSS Sprites
Sprite –
• an image file that contains multiple small graphics that
are configured as background images for various web
page elements
Modern technique to optimize use of multiple icon or
small images
Saves overhead by reducing the number of http
requests made by the browser.
You’ll use CSS Sprites in Chapter 7!

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 56
Sources for Graphics (1 of 2)
• Create them yourself using a graphics application:
– GIMP
– Adobe Photoshop
– Adobe Fireworks
• Download graphics from a free site
• Purchase/download professional-quality graphics
• Purchase a graphics collection on a CD

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 57
Sources for Graphics (2 of 2)
• Take digital photographs
• Scan your photographs
• Scan your drawings
• Hire a graphic designer to create graphics

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 58
Guidelines for Using Images
Reuse images
Consider image file size with image quality
Consider image load time
Use appropriate resolution
Specify dimensions
Be aware of brightness and contrast

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 59
Images and Accessibility
Don’t rely on color alone.
• Some visitors may have color perception deficiencies.
Use high contrast between background and text color.
Provide a text equivalent for non-text elements.
• Use the alt attribute on your image elements
If your site navigation uses image links, provide
simple text links at the bottom of the page.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 60
Checkpoint 4.3 (1 of 2)
Search for a site that uses image links to provide
navigation. List the URL of the page.
What colors are used on the image links?
If the image links contain text, is there good contrast
between the background color and letters on the image
links?
Would the page be accessible to a visitor who is sight-
challenged?

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 61
Checkpoint 4.3 (2 of 2)
How have accessibility issues been addressed?
Is the alt attribute used to describe the image link?
Is there a row of text links in the footer section of
the page?
Answer the questions above and discuss your findings.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 62
CSS Rounded Corners
border-radius property
• Configures the horizontal radius and vertical radius of
the corner
• Numeric value(s) with unit (pixel or em) or percentage
Example

h1 { border-radius: 15px;
}
Figure 4.32 Rounded corners were
configured with CSS

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 63
Examples of Rounded Corners
One value for border-radius configures all four corners
Example:
border-radius: 15px;

Four values for border-radius configure each corner separately

Ordered by top left, top right, bottom right, bottom left
Example:
border-radius: 15px 30px 100px 5px;

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 64
CSS box-shadow Property
Configure the horizontal offset, vertical offset, blur
radius, and valid color value
Example:
#wrapper { box-shadow: 5px 5px 5px #828282; }
Optional keyword: inset

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 65
Figure 4.35 The centered neutral background
along with shadow properties add dimension

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 66
CSS opacity Property
Configure the transparency of the element
Opacity range:
• 0 Completely Transparent
• 1 Completely Opaque
horizontal offset, vertical offset, blur radius, and valid
color value
Example:
h1{ background-color: #FFFFFF;
opacity: 0.6; }

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 67
Figure 4.37 The background of the h1 area is
transparent

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 68
Rgba Color (1 of 2)
Four values are required:
red color, green color, blue color, and
alpha(transparency)
• The values for red, green, and blue
must be decimal values from 0 to 255.
• The alpha value must be a number between 0
(transparent) and 1 (opaque).

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 69
Rgba Color (2 of 2)
Example:
h1 { color: #ffffff;
color: rgba(255, 255, 255, 0.7);
font-size: 5em; padding-right: 10px;
text-align: right;
font-family: Verdana, Helvetica, sans-serif;
}

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 70
Using rgba values for colors

Source: https://www.w3schools.com/css/css_colors_rgb.asp
Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 71
Figure 4.38 Hexadecimal and RGB decimal color
values

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 72
Figure 4.39 CSS RGBA color configures the
transparent text

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 73
HSLA Color
hue, saturation, light, alpha

Hue is a value between 0 and 360

Saturation: percent
Lightness: percent
Optional alpha: from 0 to 1

Figure 4.40 A color wheel

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 74
Figure 4.41 HSLA color examples

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 75
CSS Gradients
Gradient: a smooth blending of shades from one color
to another
Use the background-image property
• linear-gradient()
• radial-gradient()
Example:
body {
background-color: #8FA5CE;
background-image: linear-gradient(#FFFFFF,
#8FA5CE); }

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 76
Figure 4.44 The gradient in the background was
configured with CSS without an image file

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 77
Summary
• This chapter introduced the use of visual elements
and graphics on web pages.
• As you continue to create web pages, look back at the
guidelines and accessibility issues related to graphics.
• The number one reason for visitors to leave web
pages is too long of a download time. When using
images, be careful to minimize this issue.
• Provide alternatives to images (such as text links) and
use the alt attribute on your pages.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 4 - 78