1 Web Developer & Design Foundations with XHTML Chapter 4 Key Concepts

© 2007 Pearson Education 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

© 2007 Pearson Education 3 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.

© 2007 Pearson Education 4 Hexadecimal Color Values Hex value pairs range from 00 to FF Three hex value pairs are used to describe a RGB color # black#FFFFFF white #FF0000 red#00FF00 green #0000FF blue

© 2007 Pearson Education 5 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

© 2007 Pearson Education 6 XHTML Color and the 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

© 2007 Pearson Education 7 XHTML tag Horizontal Rule tag Stand alone tag Used to place a horizontal line on the page Design Hint: when tempted to use an 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 8 Checkpoint 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 # and the text color set to # 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 9 Types of Graphics Graphic types commonly used on web pages: –GIF –JPG –PNG

© 2007 Pearson Education 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

© 2007 Pearson Education 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

© 2007 Pearson Education 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

© 2007 Pearson Education 13 XHTML tag 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

XHTML Alignment Vertical Alignment – tag align Attribute

XHTML More attributes Horizontal Alignment Adding Vertical Space –vspace Attribute Adding Horizontal Space –hspace Attribute

© 2007 Pearson Education 16 Image Links To create an image link use an anchor tag to contain an image tag Home

© 2007 Pearson Education 17 Organizing Your Web Place images in their own folder

XHTML More attributes background attribute –Used to configure a background image for a web page

© 2007 Pearson Education 19 Checkpoint 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.

© 2007 Pearson Education 20 Images & More! XHTML 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. …place image tags here

© 2007 Pearson Education 21 Using a Table to Format Images …first image tag goes here… …second image tag goes here… …third image tag goes here… …fourth image tag goes here…

© 2007 Pearson Education 22 Thumbnail Image A small image used to link to a larger version of that image. Examples?

© 2007 Pearson Education 23 Image Maps tag –Defines the map 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

© 2007 Pearson Education 25 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 26 Popular Graphics Applications Adobe Photoshop JASC Paintshop Pro Adobe Macromedia Fireworks

© 2007 Pearson Education 27 Guidelines for Using Images Consider image load time Reuse images Weigh image size with image quality Resolution Specify dimensions Gamma

© 2007 Pearson Education 28 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.

© 2007 Pearson Education 29 Checkpoint 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 sight- challenged? 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 30 Checkpoint 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 31 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.