Introduction to Programming the WWW I CMSC 10100 1 Summer 2004 Lecture 4 Today s Topics Image cont d Hyperlink Image map HTML tables 2 Note Maclab s minicourses Hw1 due Wedn 3 GIF Graphics Interchange Format Uses an adaptive 8 bit color palette 256 colors at most Especially suitable for line art and cartoons Can work well for some photographs Patent issues LZW algorithm for image compression 4 GIF cont d GIF dithering in photos Example gifdithering html Image compression is lossless Cool features Interlaced GIF Transparent GIF Animated GIF 5 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 trades image quality for memory savings very good for minimizing bandwidth you control the trade off when you save the image Example lossy html Lossy compression only supported by JPEG 6 PNG Portable Network Graphics W3C free stand in format for GIF Often smaller than GIF Lossless like GIF Does not support animation 7 Thumbnail previews Use lossy file compression to create a small light bandwidth thumbnail version of the original image Usually make the thumbnail sketch a link to a big sized image bandwidth intensive Users can decide if they want to click through to the original image Example thumbnail html 8 How to make 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 Will be covered in the Maclab s PhotoShop tutorial 9 Convert image files Can achieved through many tools Photoshop Acdsee etc You can use the convert tool in Linux Part of Image Magic Installed in our department Linux system Can get via fink version for Mac OSX Can reduce image quality do interlacing Example convert quality 10 foo jpg foo tn jpg More details about convert 10 Battling bandwidth limitations Images consume more bandwidth than text files so use images no larger than 30 40KB whenever possible dial up users have to wait for image files 100KB Always specify height and width attributes for 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 JPEGs 11 Hyperlink link Hypertext text links Typically you click on the hyperlink to follow the link Hyperlinks are the most essential ingredient of WWW Link documents with other collections around the world 12 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 13 Anchor Tags Hyperlinks are created with the anchor tag a a The href attribute is used to specify the link destination Examples a this is a link label a a href dest html label a 14 Different Types of Hyperlinks Absolute URLs usually 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 15 Absolute URLs All absolute URLs use complete URL addresses for their link destinations Example format a href http www uchicago edu UChicago a Any Web page can be referenced by an absolute URL as long as you have its correct address Example Linkexamples html 16 Relative URLs A relative URL need only specify a file name for its link destination a href sol2 html alternative solution a 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 Example Linkexamples html 17 Named Anchors A named link destination specifies a location that has been marked by an anchor tag with a name attribute a name lumber Good Lumber a a href lumber some good lumber a The href value is prefaced with the character but the name value is not Example Linkexamples html 18 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 a href treehouse html lumber Some Good Lumber a Just add a followed by the anchor s name to the end of the file name in the href value 19 Making anything a link You can enclose all sorts of elements inside a a text headings pictures Making a picture a link a href foo html img src foo jpg a Example imagelink html 20 Control Link States link vlink and alink Attributes of body tag All three accept color values Either hexadecimal RGB triplet or color name Determine the color of all unvisited already visited and currently visiting hyperlinks 21 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 22 Image maps An image with different clickable regions hot spots Each region can link to different document Typically used in navigational menus and bars It is the joint work of img and map elements map defines the hot spots and the linked destinations area standalone tag Attributes shape coords href img uses the usemap attribute to associate to certain map 23 Image maps Image maps can be created manually with the ISMAP trick or with the help of an image mapper Best created with software Example Imagemap html course s home page 24 HTML Validation Validating your HTML will help insure that it displays properly on all browsers Typical validators W3C Web Design Group Two required information for validation Document Type Declaration It begins the HTML document and uses DOCTYPE tag It tells which version of HTML to use in checking the document s syntax DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Transitional EN http www w3 org TR html4 loose dtd 25 HTML Validation cont d Character Encodings It tells validator which method to use to covert byte to characters ISO 8859 1 is a typically used encoding You could set it by using a meta tag in the head element of a HTML page META HTTP EQUIV Content Type CONTENT text html charset ISO 8859 1 26 HTML Tables Purposes of using tables The obvious purpose of arranging information in a table The less obvious but more widely used purpose of creating a page layout with the use of hidden tables 27 The Table