1

Web Development & Design

Foundations with HTML5

CHAPTER 4
VISUAL ELEMENTS AND GRAPHICS

Copyright © Terry Felke-Morris [Link] 2

 Learning Outcomes
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
◦ Configure RGBA and HSLA color with CSS3
◦ Use HTML5 elements to caption a figure
◦ Use the HTML5 meter and progress elements
◦ Find free and fee-based graphics sources
◦ Follow recommended web design guidelines for graphics on web pages

Copyright © Terry Felke-Morris [Link] 3

 Horizontal Rule Element

Configures a horizontal line

<hr>

Demo

Copyright © Terry Felke-Morris [Link] 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 © Terry Felke-Morris [Link]

 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 © Terry Felke-Morris [Link]

 Browser Display Can Vary

Copyright © Terry Felke-Morris [Link]

 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 } Demos

Copyright © Terry Felke-Morris [Link]

 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 © Terry Felke-Morris [Link]

 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 © Terry Felke-Morris [Link]
 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 © Terry Felke-Morris [Link]

 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 © Terry Felke-Morris [Link]
 Hands-On Practice

Demos

h2 { background-color:#AEAED4;
color:#191970;
font-family: Georgia, "Times New Roman", serif;
text-align: center;
border-bottom: 2px dashed #191970;
}

Copyright © Terry Felke-Morris [Link]

 Types of
Graphics
Graphic types commonly used on web
pages:
◦ GIF
◦ JPG
◦ PNG

Copyright © Terry Felke-Morris [Link] 14

 GIF

Background Background
color color – no
configured to transparency
be transparent
 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 © Terry Felke-Morris [Link] 15

 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 © Terry Felke-Morris [Link] 16

 PNG

•Portable Network Graphic

•Support millions of colors
•Support multiple levels of transparency
(but most browsers do not --
so limit to one transparent color for Web display)

•Support interlacing
•Use lossless compression
•Combines the best of GIF & JPEG
•Browser support is growing

Copyright © Terry Felke-Morris [Link] 17

 HTML Image Element
 Configures graphics on a web page
<img src=“[Link]” 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
 width Attribute
◦ Width of the graphic in pixels
◦ Demo

Copyright © Terry Felke-Morris [Link] 18

18
 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 © Terry Felke-Morris [Link]

 Home
Image Link
 To create an image hyperlink use an anchor
element to contain an image element

<a href="[Link]"><img src="[Link]"

height="19" width="85" alt="Home"></a>

 Some browsers automatically add a border to

image links.
 Configure CSS to eliminate the border  Demo
img { border-style: none; }
Copyright © Terry Felke-Morris [Link] 20
 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 (free!)
◦ Adobe Fireworks
◦ Adobe Photoshop
◦ [Link] (free!)

Copyright © Terry Felke-Morris [Link] 21

 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
◦ [Link] is probably too short
◦ [Link] is too long
◦ [Link] may be just about right

Copyright © Terry Felke-Morris [Link]

 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="[Link]" width="250"
height="355"
alt="Lighthouse Island">
<figcaption>
Island Lighthouse, Built in 1870
</figcaption>
</figure>
Demo
Copyright © Terry Felke-Morris [Link] 23
 CSS background-image
Property
Configures a background-image Demo
By default, background images tile (repeat)
body { background-image: url([Link]); }

Copyright © Terry Felke-Morris [Link]

 CSS background-repeat Property

Copyright © Terry Felke-Morris [Link]

 Using background-repeat
[Link]:

h2 { background-color: #d5edb3;
color: #5c743d;
font-family: Georgia, "Times New Roman", serif;
padding-left: 30px;
background-image: url([Link]);
background-repeat: no-repeat;
}

Demo

Copyright © Terry Felke-Morris [Link]

 CSS3 Multiple Background
Images
body { background-color: #f4ffe4; color: #333333;
background-image: url([Link]);
background: url([Link])
no-repeat bottom right,
url([Link]); }

Demo

Copyright © Terry Felke-Morris [Link] 27

 More About Images
Favorites Icon
CSS Sprites
Sources for Graphics
Guidelines for Using Images
Accessibility & Visual Elements

Copyright © Terry Felke-Morris [Link]

 Favorites Icon - favicon
•A square image
associated
with a web
page
•Usually named:
[Link]
•May display in the browser address bar, tab, or
favorites/bookmarks list
•Configure with a link tag:

<link rel="icon" href="[Link]" type="image/x-icon">

Copyright © Terry Felke-Morris [Link]

 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 © Terry Felke-Morris [Link] 30

 Sources for Graphics
 Create them yourself using a graphics application:
◦ GIMP
◦ Adobe Photoshop
◦ Adobe Fireworks
◦ Google’s Picasa ([Link]
 Download graphics from a free site
 Purchase/download professional-quality graphics
 Purchase a graphics collection on a CD
 Take digital photographs
 Scan your photographs
 Scan your drawings
 Hire a graphic designer to create graphics

Copyright © Terry Felke-Morris [Link] 31

 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 © Terry Felke-Morris [Link] 32

 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 © Terry Felke-Morris [Link] 33

 CSS3 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;
}

Demo

Copyright © Terry Felke-Morris [Link] 34

 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 © Terry Felke-Morris [Link] 35

 CSS3 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

Demo

Copyright © Terry Felke-Morris [Link]

36
 CSS3 opacity Property
Configure the opacity 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; } Demo

Copyright © Terry Felke-Morris [Link]

37
 Rgba Color
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).

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 © Terry Felke-Morris [Link] 38

 HSLA Color
hue, saturation,
light, alpha

Hue is a value between 0 and 360

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

Copyright © Terry Felke-Morris [Link] 39

 CSS3 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 © Terry Felke-Morris [Link]

40