1. Introduction to Programming the WWW I CMSC 10100-1 Winter 2003 Lecture 4

2. Topics for the Day Links More about images  different file types  making thumbnails  bandwidth issues Introduction to image maps

3. Different Types of Hyperlinks Absolute URLs point to Web pages on other Web servers Relative URLs point to Web pages on the same Web server Named Anchors point to a different location on the current Web page

4. All Hyperlinks Have Two Parts The Link Label is the visible element that the user points to and clicks (link labels can be text segments or images) The Link Destination is the location that the link takes you to when you click on the link Only the link destinations are handled differently for absolute URLs, relative URLs, and named anchors

5. Anchor Tags All hyperlinks are created with the anchor tag: this is a link label The href attribute is used to specify the link destination:

6. Absolute URLs All absolute URLs use complete URL addresses for their link destinations: UChicago Any Web page can be referenced by an absolute URL as long as you have its correct address

7. Relative URLs A relative URL need only specify a file name for its link destination: tree houses This assumes the destination file is in the same directory as the HTML file containing the link If the file is in a different directory, pathing information must be added to the href value

8. Named Anchors A named link destination specifies a location that has been marked by an anchor tag with a name attribute Some Good Lumber some good lumber The href value is prefaced with the # character but the name value is not

9. Named Anchors Combined with Other Links A named anchor can be added to an absolute or relative link as long as the destination being referenced contains that named anchor Some Good Lumber Just add a # followed by the anchor’s name to the end of the file name in the href value

10. Making anything a link You can enclose all sorts of elements inside  headings  text  pictures Making a picture a link:

11. Link Maintenance An absolute link that works today may not work tomorrow Dead links frustrate visitors and detract from your Web pages To keep all of your links operational, you have to test them periodically and update any that have died

12. Automated Link Checkers If you have a large number of links, you should automate the process of link testing You can subscribe to a Web-based service for link testing and weekly or monthly link reports You can obtain your own link testing software and run it yourself You could also write a Perl script…

13. Inline Images The src attribute inside the img tag is used to add an image to a Web page: GIF and JPG are the most commonly used file formats for inline images – browsers only recognize GIF, JPG, and PNG image formats

14. Paths The src attribute for an image file retrieves images from the same directory as the HTML file containing the img tag: If you want to retrieve an image from a different directory, you can add path information to the file name: You can also specify a URL to link an image from outside

15. Image Attributes The align attribute positions the image and enables text to flow around an image The height and width attributes scale the image to any size you like The alt attribute allows you to describe the image in text for browsers that can’t display the image. Also helpful to text->voice conversion

16. Flowing Text Use the align attribute to make text flow alongside an image: positions the image on the left side of the page and allows text to run down its right side

17. GIF (Graphics Interchange Format) Uses an adaptive 8-bit color palette (256 colors) Especially suitable for line art and cartoons Can work well for some photographs Patent issues

18. JPEG (Joint Photographic Experts Group) Uses a fixed 24-bit color palette (millions of colors) Especially suitable for high-resolution photographs Uses lossy file compression

19. PNG (Portable Network Graphics) W3C free stand-in format for GIF Often smaller than GIF lossless (like GIF) Does not support animation

20. Lossy Image Compression Trades image quality for memory savings Very good for minimizing bandwidth You control the trade-off when you save the image Supported by JPG, not by GIF or PNG

21. Interlaced GIFs Displays images incrementally in four passes Gives users something to look at while the image is still downloading Any GIF image can be converted to an interlaced GIF

22. Transparent GIFs Transparent regions in an image allow the background color or pattern of a Web page to show through Any GIF image can be made transparent by specifying one color in the image that defines its transparent regions The background of a photograph can be made transparent after some graphics editing

23. Animated GIFs The GIF file format supports cartoon animations An animated GIF is stored in a single GIF file To display an animated GIF, just specify the GIF file in the SRC attribute of an IMG tag

24. Image Maps Navigational menus and navigation bars have clickable regions that take the user to different locations HTML’s map element makes it possible to specify different clickable regions within a single image Image maps can be created manually with the “ISMAP trick” or with the help of an image mapper Best created with software

25. Thumbnail Previews Let your visitors decide if they want to download a large (bandwidth intensive) image Use lossy file compression to create a small (light bandwidth) thumbnail version of the original image Make the thumbnail sketch a link label so users can click through to the original image if they want it

26. Making thumbnails Load image in a program (e.g. Photoshop) Reduce the image quality under the save options Set a small height and width in the page

27. File conversion for “hackers” Use the command “convert”  Part of Image Magic  installed in our department Linux system  Can get (via fink) version for Mac OSX  can reduce image quality, do interlacing  convert -quality 10 foo.jpg foo.tn.jpg

28. Bandwidth Limitations Image files consume more bandwidth than text files Users who access the Internet via telephone lines will have to wait for image files that are 100KB or larger Whenever possible, use image files no larger than 30-40KB

29. Battling Bandwidth Limitations Always specify height and width attributes for all your images so the browser can “work around” each image while it is downloading Don’t put any large images at the top of a Web page Use interlaced GIFs and progressive JPGs Use the 1x1 image trick (with caution)