1 / 40

Graphics(Images and HTML graphics) + Audio

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

ray-petty
Download Presentation

Graphics(Images and HTML graphics) + Audio

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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

  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 #FFFFFF white #FF0000 red#00FF00 green #0000FF blue

  4. 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 at http://webdevfoundatins.net/color/index.hm

  5. 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”>

  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. The Horizontal Rule Element • Configures a horizontal line <hr />

  8. 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.

  9. Types of Graphics • Graphic (still images) types commonly used on web pages: • GIF • JPG • PNG

  10. 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

  11. 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

  12. 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

  13. XHTML <img> tag <img src=“cake.gif” alt=“birthday cake” height=“100” width=“100” /> • The image tag • 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

  14. XHTML<img> Alignment • <img> tag align attributes or use CSS to style

  15. XHTML More<img>attributes • Horizontal Alignment • Adding Vertical Space • vspace Attribute • Adding Horizontal Space • hspace Attribute

  16. 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

  17. Image Links • To create an image link use an anchor tag to contain an image tag • Browsers automatically add a border to image links. • Configure CSS (learn later) to eliminate the borderimg {border:0 } Home <a href="index.htm"><img src="home.gif" height="19" width="85" alt="Home" /></a>

  18. 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

  19. OrganizingYour Site • Place images in their own folder • Code the path to the file in the src atttribute <imgsrc=“images/home.gif” alt=“Home” height=“100” width=“200”/>

  20. Other Image Topics Thumbnail Images Favorites Icon Image Maps Sources for Graphics Guidelines for Using Images Accessibility & Visual Elements

  21. Thumbnail Image • A small image configured to link to a larger version of that image.

  22. 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" />

  23. ImageMaps • <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

  24. Sample Image Map <map name="boat" id="boat"> <area href="http://boat.com" shape="rect" coords="24, 188, 339, 283" alt=“fishing boat" /> </map> <imgsrc="boat.jpg" usemap="#boat" alt=“Lake Michigan" width="416" height="350" />

  25. Sourcesfor 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

  26. Guidelinesfor Using Images Consider image load time Reuse images Consider image file size with image quality Screen Resolution Specify dimensions Gamma – brightness & contrast

  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. • 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.

  28. OrganizingYour Web <img src=“images/home.gif” alt=“Home” height=“100” width=“200”/> Place images in their own folder

  29. XHTML More<body> attributes • background attribute • Used to configure a background image for a web page <body background=“clouds.jpg”>

  30. 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 the default blue border.

  31. 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>

  32. 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>

  33. Thumbnail Image • A small image used to link to a larger version of that image. • Examples?

  34. 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

  35. 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" />

  36. 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

  37. PopularGraphics Applications • Adobe Photoshop • JASC Paintshop Pro • Adobe Macromedia Fireworks

  38. Guidelinesfor Using Images • Consider image load time • Reuse images • Weigh image size with image quality • Resolution • Specify dimensions • Gamma

  39. 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.

  40. 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

More Related