XHTML Color and Visual Elements
Download
Report
Transcript XHTML Color and Visual Elements
Web Developer Foundations:
Using XHTML
Chapter 4
Key Concepts
1
Learning
Outcomes
In this chapter, you will learn to:
Use color on web pages
Create and format horizontal lines on web pages
Decide when to use the most appropriate types of
graphics on web pages
Use the image tag to add graphics to web pages
Use images as backgrounds on tables and web
pages
Use images as hyperlinks
Find both free and fee-based sources of graphics
Follow recommended web design guidelines when
using graphics on web pages
2
Using Color
on Web Pages
Monitors display color as intensities of
red, green, and blue
RGB Color
The values of red, green, and blue vary
from 0 to 255.
Hexadecimal numbers (base 16) are used
to represent these colors.
3
Hexadecimal
Color Values
Hex value pairs range from 00 to FF
Three hex value pairs are used to
describe a RGB color
#000000 black
#FF0000 red
#0000FF blue
#FFFFFF white
#00FF00 green
4
Web Color
Palette
A collection of 216 colors that display the
same on both the Mac and PC platforms.
Hex values: 00, 33, 66, 99, CC, FF
See the Color Chart on the Inside Back
Cover
5
XHTML
Color and the <body> tag
bgcolor Attribute
text Attribute
Configures the color of the hyperlinks on the web page
vlink Attribute
Configures the color of the text on the web page
link Attribute
Configures the background color of the web page
Configures the color of the visited hyperlinks on the web page
alink Attribute
Configures the color of the active hyperlinks on the web page
<body bgcolor=“#CCCCCC” text=“#000099”>
6
XHTML
<hr /> tag
Horizontal Rule tag
Stand alone tag
Used to place a horizontal line on the page
Design Hint: when tempted to use an <hr /> tag, try adding more blank
space around the web page elements – often this will result in a less
cluttered, better designed web page.
Common Attributes:
width, color, align
7
Types of
Graphics
Graphic types commonly used on
web pages:
GIF
JPG
PNG
8
GIF
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
9
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
10
PNG
Portable Network Graphic
Support millions of colors
Support multiple levels of
transparency
Support interlacing
Use lossless compression
Combines the best of GIF & JPEG
Browser support is growing
11
XHTML
<img> tag
The image tag
<img src=“cake.gif” alt=“birthday cake” height=“100” width=“100” />
Used to place graphics on a web page
src Attribute
alt Attribute
Used to configure a text description
height Attribute
used to indicate the file name of the graphic
Used to configure the height of the image in pixels
width Attribute
Used to configure the width of the image in pixels
12
XHTML<img>
Alignment
Vertical Alignment
<img> tag align
Attribute
XHTML
More<img>
attributes
Horizontal
Alignment
Adding Vertical
Space
vspace Attribute
Adding Horizontal
Space
hspace Attribute
Image
Links
To create an image link use an anchor
tag to contain an image tag
Home
<a href="index.htm"><img src="home.gif"
height="19" width="85" alt="Home" /></a>
15
Organizing
Your Web
Place
images in
their own
folder
<img src=“images/home.gif” alt=“Home”
height=“100” width=“200”/>
16
XHTML More
<body> attributes
background attribute
Used to configure a background image for a web
page <body background=“clouds.jpg”>
Images & More! XHTML
<nobr> tag
No Break tag
Used when you might be using images in a
navigation bar and you would like to keep
the images in a horizontal row no matter
what the screen resolution settings are or
browser window size is on your visitor's
computer.
<nobr>…place image tags here</nobr>
18
Using a Table
to Format Images
<table cellspacing=“0” cellpadding=“0”>
<tr>
<td>…first image tag goes here…</td>
<td>…second image tag goes here…</td>
<td>…third image tag goes here…</td>
<td>…fourth image tag goes here…</td>
</tr>
</table>
19
Image
Maps
<map> tag
Defines the map
<area> tag
Defines a specific area on a map
Can be set to a rectangle, circle, or
polygon
• href Attibute
• shape Attribute
• coords Attribute
20
Sample
Image Map
<map name="boat" id="boat">
<area href="http://boat.com" shape="rect"
coords="24, 188, 339, 283" alt=“fishing boat" />
</map>
<img src="boat.jpg" usemap="#boat" alt=“Lake Michigan"
width="416" height="350" />
Sources
for Graphics
create them yourself using a graphics
application
download them from a free site
purchase and download them from a
graphics site
purchase a graphics collection on a CD
take digital photographs
scan your photographs
scan your drawings
hire a graphic designer to create graphics
22
Popular
Graphics Applications
Adobe Photoshop
JASC Paintshop Pro
Macromedia Fireworks
23
Guidelines
for Using Images
Consider image load time
Reuse images
Weigh image size with image
quality
Resolution
Specify
dimensions
Gamma
24
Images and
Accessibility
Don't rely on color alone.
Avoid using the colors red and brown next to
each other.
These colors are difficult for individuals with the most common
color perception deficiency to differentiate.
Provide a text equivalent for non-text elements.
Some visitors may have color perception deficiencies. Use high
contrast between background and text color.
Use the alt attribute on your image tags.
If your site navigation uses image links, provide
simple text links at the bottom of the page.
25
Summary
This chapter introduced the use of color and
graphical elements 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.
26