graphics(images and html graphics) + audio
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
11
Graphics(Images and HTML Graphics(Images and HTML graphics) + Audiographics) + Audio
• Use color on web pagesUse color on web pages• Create and format horizontal lines on web pagesCreate and format horizontal lines on web pages• Decide when to use the most appropriate types of Decide when to use the most appropriate types of
graphics on web pagesgraphics on web pages• Use the image tag to add graphics to web pages Use the image tag to add graphics to web pages • Use images as backgrounds on tables and web Use images as backgrounds on tables and web
pagespages• Use images as hyperlinksUse images as hyperlinks• Find both free and fee-based sources of graphicsFind both free and fee-based sources of graphics• Follow recommended web design guidelines when Follow recommended web design guidelines when
using graphics on web pages using graphics on web pages
22
Using Color on Using Color on Web PagesWeb Pages
Monitors display color as intensities of Monitors display color as intensities of red, green, and bluered, green, and blue
RGB ColorRGB Color The values of red, green, and blue vary The values of red, green, and blue vary
from 0 to 255.from 0 to 255. Hexadecimal numbers (base 16) are Hexadecimal numbers (base 16) are
used to represent these colors.used to represent these colors.
33
Hexadecimal Hexadecimal Color ValuesColor Values
Hex value pairs range from 00 to FFHex value pairs range from 00 to FF Three hex value pairs are used to Three hex value pairs are used to
describe a RGB colordescribe a RGB color#000000 black#000000 black #FFFFFF white#FFFFFF white
#FF0000 red#FF0000 red #00FF00 green#00FF00 green
#0000FF blue#0000FF blue
44
Web ColorWeb ColorPalettePalette
A collection of 216 colors that display the A collection of 216 colors that display the same on both the Mac and PC platforms. same on both the Mac and PC platforms.
Hex values: 00, 33, 66, 99, CC, FFHex values: 00, 33, 66, 99, CC, FF See the Color Chart at See the Color Chart at
http://webdevfoundatins.net/color/index.hm
55
XHTMLXHTMLColor and the <body> tagColor and the <body> tag
bgcolor Attributebgcolor Attribute• Configures the background color of the web pageConfigures the background color of the web page
text Attributetext Attribute• Configures the color of the text on the web pageConfigures the color of the text on the web page
link Attributelink Attribute• Configures the color of the hyperlinks on the web pageConfigures the color of the hyperlinks on the web page
vlink Attributevlink Attribute• Configures the color of the visited hyperlinks on the web Configures the color of the visited hyperlinks on the web
pagepage alink Attributealink Attribute
• Configures the color of the active hyperlinks on the web Configures the color of the active hyperlinks on the web pagepage
<body bgcolor=“#CCCCCC” text=“#000099”><body bgcolor=“#CCCCCC” text=“#000099”>
66
XHTMLXHTML<hr /> tag<hr /> tag
Horizontal Rule tagHorizontal Rule tag Stand alone tagStand alone tag Used to place a horizontal line Used to place a horizontal line
on the pageon the pageDesign Hint: when tempted to use an <hr /> tag, try Design Hint: when tempted to use an <hr /> tag, try adding more blank space around the web page adding more blank space around the web page elements – often this will result in a less cluttered, elements – often this will result in a less cluttered, better designed web page.better designed web page.
Common Attributes:Common Attributes:• width, color, alignwidth, color, align
The Horizontal Rule ElementThe Horizontal Rule Element Configures a horizontal line Configures a horizontal line
<hr /><hr />
77
88
QuestionsQuestions 1. Is it reasonable to try to code a web page that 1. Is it reasonable to try to code a web page that
looks exactly the same on every browser and every looks exactly the same on every browser and every platform? Explain your answer.platform? Explain your answer.
2. A web page is coded with the background color 2. A web page is coded with the background color set to #003300 and the text color set to #333300. set to #003300 and the text color set to #333300. When the page is displayed in a browser, the When the page is displayed in a browser, the hyperlinks display fine but the text does not show hyperlinks display fine but the text does not show up. Why did this happen? What do you suggest to up. Why did this happen? What do you suggest to correct this?correct this?
3. True or False. Using the Web Safe Color Palette 3. True or False. Using the Web Safe Color Palette guarantees that your web page colors look identical guarantees that your web page colors look identical on every single browser and operating system.on every single browser and operating system.
99
Types of Types of GraphicsGraphics
Graphic (still images) types Graphic (still images) types commonly used on web pages:commonly used on web pages:• GIFGIF• JPGJPG• PNGPNG
1010
GIFGIF
Graphics Interchange FormatGraphics Interchange Format Best used for line art and logosBest used for line art and logos Maximum of 256 colorsMaximum of 256 colors One color can be configured as transparentOne color can be configured as transparent Can be animatedCan be animated Uses lossless compressionUses lossless compression Can be interlacedCan be interlaced
1111
JPEGJPEG
Joint Photographic Experts Joint Photographic Experts GroupGroup
Best used for photographsBest used for photographs Up to 16.7 million colorsUp to 16.7 million colors Use lossy compressionUse lossy compression Cannot be animatedCannot be animated Cannot be made Cannot be made
transparenttransparent
1212
PNGPNG
Portable Network GraphicPortable Network Graphic Support millions of colorsSupport millions of colors Support multiple levels of Support multiple levels of
transparencytransparency Support interlacingSupport interlacing Use lossless compressionUse lossless compression Combines the best of GIF & JPEGCombines the best of GIF & JPEG Browser support is growingBrowser support is growing
1313
XHTML <img> tagXHTML <img> tag The image tagThe image tag
Used to place graphics on a web pageUsed to place graphics on a web page src Attributesrc Attribute
• used to indicate the file name of the graphicused to indicate the file name of the graphic alt Attributealt Attribute
• Used to configure a text description Used to configure a text description height Attributeheight Attribute
• Used to configure the height of the image in pixelsUsed to configure the height of the image in pixels width Attributewidth Attribute
• Used to configure the width of the image in pixelsUsed to configure the width of the image in pixels
<img src=“cake.gif” alt=“birthday cake” height=“100” width=“100” />
XHTML<img>XHTML<img> Alignment Alignment
• <img> tag align <img> tag align attributes or use CSS attributes or use CSS to styleto style
XHTML XHTML More<img>More<img>
attributesattributes Horizontal AlignmentHorizontal Alignment Adding Vertical SpaceAdding Vertical Space
• vspace Attributevspace Attribute Adding Horizontal Adding Horizontal
SpaceSpace• hspace Attributehspace Attribute
Accessibility & ImagesAccessibility & Images
Required: Required: • Configure the Configure the alt attributealt attribute
Alternate text content to convey the meaning/intent of Alternate text content to convey the meaning/intent of the imagethe image
NOT the file name of the imageNOT the file name of the image Use alt=“” for purely decorative imagesUse alt=“” for purely decorative images
Optional:Optional:• Configure the longdesc attributeConfigure the longdesc attribute
Used when meaning cannot be conveyed in the alt textUsed when meaning cannot be conveyed in the alt text Usually a URL to a Web page with textUsually a URL to a Web page with text
1717
Image Image LinksLinks
To create an image link use an To create an image link use an anchor tag to contain an image taganchor tag to contain an image tag
Browsers automatically add a border to image Browsers automatically add a border to image links. links.
Configure CSS (learn later) to eliminate the Configure CSS (learn later) to eliminate the borderborder img {border:0 }img {border:0 }
Home
<a href="index.htm"><img src="home.gif" height="19" width="85" alt="Home" /></a>
Choosing Names for Image FilesChoosing Names for Image Files
Use all (mostly) lowercase letters Use all (mostly) lowercase letters Do not use punctuation symbols and Do not use punctuation symbols and
spacesspaces Do not change the file extensions Do not change the file extensions
(should be .gif, .jpg, .jpeg, or .png)(should be .gif, .jpg, .jpeg, or .png) Keep your file names short but Keep your file names short but
descriptivedescriptive• i1.gif is probably too shorti1.gif is probably too short• myimagewithmydogonmybirthday.gif is too myimagewithmydogonmybirthday.gif is too
longlong• dogbday.gif may be just about rightdogbday.gif may be just about right
OrganizingOrganizingYour SiteYour Site
<img src=“<img src=“imagesimages/home.gif” alt=“Home” /home.gif” alt=“Home” height=“100” width=“200”/>height=“100” width=“200”/>
1919
• Place images in their own folder
• Code the path to the file in the src atttribute
Other Image TopicsOther Image Topics Thumbnail ImagesThumbnail Images Favorites IconFavorites Icon Image MapsImage Maps Sources for GraphicsSources for Graphics Guidelines for Using ImagesGuidelines for Using Images Accessibility & Visual ElementsAccessibility & Visual Elements
Thumbnail ImageThumbnail Image
A small image configured to link A small image configured to link to a larger version of that image.to a larger version of that image.
2121
Favorites Icon - faviconFavorites Icon - favicon A square image A square image
associated associated with a Web with a Web pagepage
Usually named: Usually named: favicon.icofavicon.ico
May display in the browser address bar, May display in the browser address bar, tab, or tab, or favorites/bookmarks listfavorites/bookmarks list
Configure with a link tag:Configure with a link tag:
<link rel="icon" href="favicon.ico" type="image/x-icon" /> <link rel="icon" href="favicon.ico" type="image/x-icon" />
ImageImageMapsMaps
<map> element<map> element• Defines the mapDefines the map
<area /> element<area /> element• Defines a specific area on a mapDefines a specific area on a map• Can be set to a rectangle, circle, or Can be set to a rectangle, circle, or
polygonpolygon href Attibutehref Attibute shape Attributeshape Attribute coords Attributecoords Attribute
2323
Sample Sample Image MapImage Map
<map name="boat" id="boat"><map name="boat" id="boat">
<area href="http://boat.com" shape="rect" <area href="http://boat.com" shape="rect" coords="24, 188, 339, 283" alt=“fishing boat" />coords="24, 188, 339, 283" alt=“fishing boat" />
</map></map>
<img src="boat.jpg" usemap="#boat" alt=“Lake Michigan" <img src="boat.jpg" usemap="#boat" alt=“Lake Michigan" width="416" height="350" />width="416" height="350" />
SourcesSourcesfor Graphicsfor Graphics
Create them yourself using a graphics application: Create them yourself using a graphics application: ◦ Adobe PhotoshopAdobe Photoshop◦ GimpGimp◦ Adobe FireworksAdobe Fireworks◦ Google’s Picasa (http://picasa.google.com/)Google’s Picasa (http://picasa.google.com/)
Download graphics from a free siteDownload graphics from a free site Develop Graphics on free web site servicesDevelop Graphics on free web site services Purchase/download professional-quality graphicsPurchase/download professional-quality graphics Purchase a graphics collection on a CDPurchase a graphics collection on a CD Take digital photographsTake digital photographs Scan your photographsScan your photographs Scan your drawingsScan your drawings Hire a graphic designer to create graphicsHire a graphic designer to create graphics
2525
GuidelinesGuidelinesfor for
Using Using ImagesImages
Consider image load timeConsider image load time Reuse imagesReuse images Consider image file size with image Consider image file size with image
qualityquality Screen ResolutionScreen Resolution Specify dimensionsSpecify dimensions Gamma – brightness & contrastGamma – brightness & contrast 2626
Images and AccessibilityImages and Accessibility Don't rely on color alone. Don't rely on color alone.
• Some visitors may have color perception Some visitors may have color perception deficiencies. Use high contrast between deficiencies. Use high contrast between background and text color. background and text color.
Provide a text equivalent for non-text Provide a text equivalent for non-text elements.elements. • Use the alt attribute on your image elementsUse the alt attribute on your image elements
If your site navigation uses image If your site navigation uses image links, provide simple text links at the links, provide simple text links at the bottom of the pagebottom of the page..
2727
2828
OrganizingOrganizingYour WebYour Web
<img src=“images/home.gif” alt=“Home” <img src=“images/home.gif” alt=“Home” height=“100” width=“200”/>height=“100” width=“200”/>
Place images in their own folder
XHTML MoreXHTML More<body> attributes<body> attributes
background attributebackground attribute• Used to configure a background image for Used to configure a background image for
a web page a web page <body background=“clouds.jpg”><body background=“clouds.jpg”>
3030
QuestionsQuestions 1. Describe the attribute (and corresponding value) used 1. Describe the attribute (and corresponding value) used
on an image tag to configure an image called coffee.gif on an image tag to configure an image called coffee.gif to float on the right side of a paragraph of text, allowing to float on the right side of a paragraph of text, allowing the text to wrap around it. Code sample XHTML to the text to wrap around it. Code sample XHTML to demonstrate this.demonstrate this.
2. Describe the attribute (and corresponding value) used 2. Describe the attribute (and corresponding value) used on an image tag (for coffee.gif) to configure the text on an image tag (for coffee.gif) to configure the text following the image to display vertically next to the following the image to display vertically next to the center of the image rather than next to the bottom of center of the image rather than next to the bottom of the image. Code sample XHTML to demonstrate this.the image. Code sample XHTML to demonstrate this.
3. True or False. When coding image links, use configure 3. True or False. When coding image links, use configure the image tag with border="0" to avoid the default blue the image tag with border="0" to avoid the default blue border.border.
3131
Images & More! XHTMLImages & More! XHTML<nobr> tag<nobr> tag
No Break tagNo Break tag Used when you might be using Used when you might be using
images in a navigation bar and you images in a navigation bar and you would like to keep the images in a would like to keep the images in a horizontal row no matter what the horizontal row no matter what the screen resolution settings are or screen resolution settings are or browser window size is on your browser window size is on your visitor's computer. visitor's computer.
<nobr<nobr>…place image tags here>…place image tags here</nobr></nobr>
3232
Using a Table Using a Table to Format Imagesto Format Images
<table cellspacing=“0” cellpadding=“0”><table cellspacing=“0” cellpadding=“0”>
<tr><tr>
<td>…first image tag goes here…</td><td>…first image tag goes here…</td>
<td>…second image tag goes here…</td><td>…second image tag goes here…</td>
<td>…third image tag goes here…</td><td>…third image tag goes here…</td>
<td>…fourth image tag goes here…</td><td>…fourth image tag goes here…</td>
</tr></tr>
</table></table>
3333
Thumbnail ImageThumbnail Image A small image used to link to a larger A small image used to link to a larger
version of that image.version of that image. Examples?Examples?
3434
ImageImageMapsMaps
<map> tag<map> tag• Defines the mapDefines the map
<area> tag<area> tag• Defines a specific area on a mapDefines a specific area on a map• Can be set to a rectangle, circle, or Can be set to a rectangle, circle, or
polygonpolygon href Attibutehref Attibute shape Attributeshape Attribute coords Attributecoords Attribute
Sample Sample Image MapImage Map
<map name="boat" id="boat"><map name="boat" id="boat">
<area href="http://boat.com" shape="rect" <area href="http://boat.com" shape="rect" coords="24, 188, 339, 283" alt=“fishing boat" />coords="24, 188, 339, 283" alt=“fishing boat" />
</map></map>
<img src="boat.jpg" usemap="#boat" alt=“Lake Michigan" <img src="boat.jpg" usemap="#boat" alt=“Lake Michigan" width="416" height="350" />width="416" height="350" />
3636
SourcesSourcesfor Graphicsfor Graphics
create them yourself using a graphics create them yourself using a graphics applicationapplication
download them from a free sitedownload them from a free site purchase and download them from a purchase and download them from a
graphics sitegraphics site purchase a graphics collection on a CDpurchase a graphics collection on a CD take digital photographstake digital photographs scan your photographsscan your photographs scan your drawingsscan your drawings hire a graphic designer to create graphicshire a graphic designer to create graphics
3737
PopularPopularGraphics ApplicationsGraphics Applications
Adobe PhotoshopAdobe Photoshop JASC Paintshop ProJASC Paintshop Pro Adobe Macromedia FireworksAdobe Macromedia Fireworks
3838
GuidelinesGuidelinesfor for
Using Using ImagesImages
Consider image load timeConsider image load time Reuse imagesReuse images Weigh image size with image qualityWeigh image size with image quality ResolutionResolution Specify dimensionsSpecify dimensions GammaGamma
3939
Images and AccessibilityImages and Accessibility Don't rely on color alone. Don't rely on color alone.
• Some visitors may have color perception deficiencies. Use high Some visitors may have color perception deficiencies. Use high contrast between background and text color. contrast between background and text color.
Avoid using the colors red and brown next to each Avoid using the colors red and brown next to each otherother..• These colors are difficult for individuals with the most common color These colors are difficult for individuals with the most common color
perception deficiency to differentiate.perception deficiency to differentiate.
Provide a text equivalent for non-text elements.Provide a text equivalent for non-text elements. • Use the alt attribute on your image tags.Use the alt attribute on your image tags.
If your site navigation uses image links, provide If your site navigation uses image links, provide simple text links at the bottom of the pagesimple text links at the bottom of the page..
4040
Audio in a Web PageAudio in a Web Page
A simple linkA simple link• <A HREF=<A HREF=“my“myaudio/song.wavaudio/song.wav””>Play the song </A>>Play the song </A>• <A HREF=<A HREF=““playtrack.mp3playtrack.mp3””><IMG SRC=><IMG SRC=““buttons/play.gifbuttons/play.gif””></A></A
>>
Background SoundBackground Sound• <BGSOUND SRC=<BGSOUND SRC=““audio/song.midaudio/song.mid”” LOOP=3> LOOP=3>
Link to RealMediaLink to RealMedia• <A HREF=<A HREF=““song.ramsong.ram””>Link to the song</A>>Link to the song</A>• pnm://domainname.com/song.rmpnm://domainname.com/song.rm