images and audio lecture
Download
Report
Transcript images and audio lecture
Graphics(Images and HTML
graphics) + Audio
• 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
1
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.
2
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
3
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
4
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”>
5
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
6
The Horizontal Rule Element
Configures a horizontal line
<hr />
7
Questions
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.
8
Types of
Graphics
Graphic (still images) 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
The image tag
XHTML <img> 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
13
XHTML<img>
Alignment
• <img> tag align
attributes or use CSS
to style
XHTML
More<img>
attributes
Horizontal
Alignment
Adding Vertical
Space
• vspace Attribute
Adding Horizontal
Space
• hspace Attribute
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
Optional:
• Configure the longdesc attribute
Used when meaning cannot be conveyed in the alt
text
Usually a URL to a Web page with text
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>
Browsers automatically add a border to
image links.
Configure CSS (learn later) to eliminate the
17
border img {border:0 }
Choosing Names for Image Files
Use all (mostly) 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
Organizing
Your Site
Place images in
their own folder
•
• Code the path to
the file in the src
atttribute
<img src=“images/home.gif” alt=“Home”
height=“100” width=“200”/>
19
Other Image Topics
Thumbnail Images
Favorites Icon
Image Maps
Sources for Graphics
Guidelines for Using Images
Accessibility & Visual Elements
Thumbnail Image
A small image configured to link
to a larger version of that image.
21
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" />
Image
Maps
<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
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:
◦
◦
◦
◦
Adobe Photoshop
Gimp
Adobe Fireworks
Google’s Picasa (http://picasa.google.com/)
Download graphics from a free site
Develop Graphics on free web site services
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
25
Guidelines
for
Using
Images
Consider image load time
Reuse images
Consider image file size with image
quality
Screen Resolution
Specify dimensions
Gamma – brightness & contrast
26
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.
27
Organizing
Your Web
Place
images in
their own
folder
<img src=“images/home.gif” alt=“Home”
height=“100” width=“200”/>
28
XHTML More
<body> attributes
background attribute
• Used to configure a background image for
a web page
<body background=“clouds.jpg”>
Questions
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
30
the default blue border.
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>
31
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>
32
Thumbnail Image
A small image used to link to a larger
version of that image.
Examples?
33
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
34
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
36
Popular
Graphics Applications
Adobe Photoshop
JASC Paintshop Pro
Adobe Macromedia Fireworks
37
Guidelines
for
Using
Images
Consider image load time
Reuse images
Weigh image size with image quality
Resolution
Specify dimensions
Gamma
38
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
39
page.
Audio in a Web Page
A simple link
• <A HREF=“myaudio/song.wav”>Play the song </A>
• <A HREF=“playtrack.mp3”><IMG SRC=“buttons/play.gif”></A
>
Background Sound
• <BGSOUND SRC=“audio/song.mid” LOOP=3>
Link to RealMedia
• <A HREF=“song.ram”>Link to the song</A>
• pnm://domainname.com/song.rm
40