Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Adding Graphical Elements Essentials for Design XHTML
Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 Visual Summary Image Formats Graphical Image Format (GIF) Indexed color Looping Compression Transparency Joint Photographic Experts Group (JPG or JPEG) Portable Network Graphics (PNG) LZW compression
Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Inserting Images into Web Pages The tag – specifies an image This is an empty tag (no text follows it) The src attribute – specifies file where image comes from Example syntax: The border attribute – allows a surrounding line
Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 Identifying Location of an Image Path – specific directory location of the image file Specify local directory – if image in same directory as Web page Specify remote directory – if image in different folder on same machine as Web page Specify Web URL – if image on a different computer on the Internet
Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Effects of and src Image generated by Image generated by No path needed if.jpg file is in same location as Web page
Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Effects of border One-pixel border Eight-pixel border
Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Why Use Alternate Text? Bandwidth – the speed of a user’s connection to the Internet Images take a long time to load Some users turn off images in their browser alt attribute displays alternate text if images are turned off Tool tip – text that appears when mouse hovers over an image The alt attribute displays a tool tip associated with an image
Copyright (c) 2004 Prentice-Hall. All rights reserved. 8 Effects of Setting Alternate Text Tool tip text appears This takes place when user hovers mouse over the image
Copyright (c) 2004 Prentice-Hall. All rights reserved. 9 The Tag XHTML 2.0 does not include is used instead Example usage: id="baby" type="image/jpeg" data="baby.jpg" width="152" height="160"> A baby in a cradle.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 Using the Tag’s Align Attribute Controls relationship of image with nearby text Five possible values Top Bottom (Default) Middle Left Right
Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 Image Alignment Behaviors Text aligns to the portion of the image specified by align attribute e.g. – Top makes text align to the top of the image Top, bottom, middle – only one line of text appears beside image Right, left – text wraps around image
Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Effect of Image Alignment Top alignment: Middle alignment:
Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Effect of Image Alignment (continued) Left alignment: Right alignment: Left and right alignment causes remaining content to wrap around the image. Note that Upcoming Books is at same level as right-aligned image.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Using the tag's Clear Attribute By default, text displays next to an image The clear attribute can separate image from text Syntax options – forces text to move to section with nothing to the right – forces text to move to section with nothing on either side
Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Effect of Clear Attribute Force Upcoming Books header to appear below right-aligned image:
Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Scaling Images Scaling – reducing or enlarging Scaling affects image quality Resolution – clarity and definition of image Scaling up results in pixelated image Can see individual pixels when image is scaled up Reduced resolution Scaling down forces pixels into too small space
Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 Using Image Sizing Attributes Two attributes Width Height Both specify pixel sizing Advantage of using width and height Saves time for browser
Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Effects of Image Sizing
Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Image Attributes for Spacing vspace – adds vertical space to image (above and below) hspace – adds horizontal space to image (left and right) Both attributes measure space in pixels
Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Effect of Vertical and Horizontal Spacing 20 pixels of vertical space above the image 50 pixels of horizontal space to the left and right of the image
Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 The Character Entity character entity – a code in XHTML that produces a symbol Begins with & symbol and ends with a semicolon Not a tag or attribute represents a space character Putting spaces in XHTML document does not create spaces in Web page will create space in Web page
Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Effect of Non-Breaking Space Upcoming Books 10 non-breaking spaces
Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 Lowsrc (Low Source) Images Concepts Low source images The lowsrc attribute Quality and effects of low source images Hands-on Exercise Specify a Lowsrc Image
Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 Low Source Images and the lowsrc Attribute Low source image – smaller version of a final image Downloaded and displayed while final version is loading Temporary, lower quality tag’s lowsrc attribute
Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 Horizontal Rule and its Attributes Horizontal rule – straight line that goes from the left to right side of screen Useful for dividing a web page into sections tag An empty tag Attributes include Width –percentage of screen line covers Noshade – indicator of shading Color
Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 Effects of Horizontal Rule Grey bar displays as a result of
Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 Effects of Horizontal Rule Attributes Unshaded, shorter, blue bar displays as a result of