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

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

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

4. 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 

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

6. Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Effects of border One-pixel border Eight-pixel border

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

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

9. 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. 

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

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

12. Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Effect of Image Alignment Top alignment: Middle alignment:

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

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

15. Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Effect of Clear Attribute Force Upcoming Books header to appear below right-aligned image:

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

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

18. Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Effects of Image Sizing

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

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

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

22. Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Effect of Non-Breaking Space Upcoming Books 10 non-breaking spaces

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

24. 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 

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

26. Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 Effects of Horizontal Rule Grey bar displays as a result of

27. Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 Effects of Horizontal Rule Attributes Unshaded, shorter, blue bar displays as a result of