used on an image tag

Download Report

Transcript used on an image tag 

Web Developer & Design
Foundations with 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
2
when using graphics on web pages
© 2007 Pearson Education
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
toEducation
represent these colors.
© 2007
Pearson
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
© 2007 Pearson Education
#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 at
http://webdevfoundatins.net/color/index.hm
© 2007 Pearson Education
5
XHTML
Color 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”>
© 2007 Pearson Education
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
© 2007 Pearson Education
7
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. A web page is coded with the background
color set to #003300 and the text color set to
#333300. When the page is displayed in a
browser, the hyperlinks display fine but the text
does not show up. Why did this happen? What
do you suggest to correct this?
• 3. True or False. Using the Web Safe Color
Palette guarantees that your web page colors
look identical on every single browser and
operating system.
© 2007 Pearson Education
8
Types of
Graphics
• Graphic types commonly used on
web pages:
– GIF
– JPG
– PNG
© 2007 Pearson Education
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
© 2007 Pearson Education
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
© 2007 Pearson Education
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
© 2007 Pearson Education
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 13
pixels
© 2007 Pearson Education
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>
© 2007 Pearson Education
16
Organizing
Your Web
Place
images in
their own
folder
<img src=“images/home.gif” alt=“Home”
height=“100” width=“200”/>
© 2007 Pearson Education
17
XHTML More
<body> attributes
• background attribute
– Used to configure a background image for a
web page
<body background=“clouds.jpg”>
Checkpoint 4.2
• 1. Describe the attribute (and corresponding
value) used on an image tag to configure an
image called coffee.gif to float on the right side of
a paragraph of text, allowing the text to wrap
around it. Code sample XHTML to demonstrate
this.
• 2. Describe the attribute (and corresponding
value) used on an image tag (for coffee.gif) to
configure the text following the image to display
vertically next to the center of the image rather
than next to the bottom of the image. Code
sample XHTML to demonstrate this.
• 3. True or False. When coding image links, use
configure the image tag with border="0" to avoid
19
the
default
blue border.
© 2007
Pearson
Education
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>
© 2007 Pearson Education
20
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>
© 2007
Pearson Education
21
Thumbnail Image
• A small image used to link to a
larger version of that image.
• Examples?
© 2007 Pearson Education
22
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
© 2007 Pearson Education
23
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
© 2007 Pearson Education
25
Popular
Graphics Applications
• Adobe Photoshop
• JASC Paintshop Pro
• Adobe Macromedia Fireworks
© 2007 Pearson Education
26
Guidelines
for
Using
Images
• Consider image load time
• Reuse images
• Weigh image size with image quality
• Resolution
• Specify dimensions
©• 2007
Pearson Education
Gamma
27
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
28
page.
© 2007
Pearson Education
Checkpoint 4.3
• 1. 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 sightchallenged?
• 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.
© 2007 Pearson Education
29
Checkpoint 4.3
• 2. When configuring an image
map, describe the relationship
between the image, map, and
area tags.
• 3. True or False. Save your
images using the smallest file
size possible.
© 2007 Pearson Education
30
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.
© 2007 Pearson Education
31