Post on 01-Jan-2016
1
Web Developer Foundations: Using XHTML
Chapter 4Key Concepts
2
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
3
Using Coloron 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.
4
Hexadecimal Color Values
Hex value pairs range from 00 to FF Three hex value pairs are used to
describe a RGB color#000000 black #FFFFFF white
#FF0000 red #00FF00 green
#0000FF blue
5
Web ColorPalette
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
6
XHTMLColor and the <body> tag
bgcolor Attribute Configures the background color of the web page
text Attribute Configures the color of the text on the web page
link Attribute Configures the color of the hyperlinks on the web page
vlink Attribute 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”>
7
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
8
Types of Graphics
Graphic types commonly used on web pages: GIF JPG PNG
9
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
10
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
11
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
12
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
used to indicate the file name of the graphic alt Attribute
Used to configure a text description height Attribute
Used to configure the height of the image in pixels width Attribute
Used to configure the width of the image in pixels
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
15
Image Links
To create an image link use an anchor tag to contain an image tag
<a href="index.htm"><img src="home.gif" height="19" width="85" alt="Home" /></a>
Home
16
OrganizingYour Web
<img src=“images/home.gif” alt=“Home” height=“100” width=“200”/>
Place images in their own folder
XHTML More<body> attributes
background attribute Used to configure a background image for a web
page <body background=“clouds.jpg”>
18
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>
19
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>
20
ImageMaps
<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
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" />
22
Sourcesfor 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
23
PopularGraphics Applications
Adobe Photoshop JASC Paintshop Pro Macromedia Fireworks
24
Guidelinesfor Using Images
Consider image load time Reuse images Weigh image size with image
quality Resolution Specify
dimensions Gamma
25
Images and Accessibility
Don't rely on color alone. Some visitors may have color perception deficiencies. Use high
contrast between background and text color.
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. 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.
26
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.