Introduction to Programming the WWW I

1. Introduction to Programming the WWW I CMSC 10100-1 Summer 2004 Lecture 4

2. Today’s Topics • Image (cont’d) • Hyperlink • Image map • HTML tables

3. Note • Maclab’s minicourses • Hw1 due Wedn

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

5. GIF (cont’d) • GIF dithering in photos • Example: gifdithering.html • Image compression is lossless • Cool features • Interlaced GIF • Transparent GIF • Animated GIF

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

28. The Table Elements • Each table tag pair <table></table> can hold any number of table rows • Each tablerow tag pair <tr></tr> can hold any number of table data items • Each table head tag pair <th></th>has a different appearance than table data • Each table data tag pair <td></td> can hold text, images, and other HTML elements

29. Typical Table Sketch Code <table> <caption>Sample Table</caption> <tr> <th>headrow-col1</th> … <th>headrow-coln</th> </tr> <tr> <td>row1-col1</td> … <td>row1-coln</td> </tr> … <tr> <td>rowm-col1</td> … <td>rowm-coln</td> </tr> </table> sampletable.html

30. Table Cells • A table cell is another name for a table data <td> element • A browser displays a cell only if it contains something • Enter a nonvisible character to display the cell (&nbsp;) • Example: sampletable.html • Tables cells can be distinguished by • background colors - bgcolor • Patterns - background • alignment – align, valign • type fonts etc • Example: tablecell.html

31. table Tag Attributes • align • values: left, center, right • default: left • A better method is to embed the table in a <div> • bgcolor, background • border • values: n (an integer) • default: 0 • width • value: n(an integer), or n%

32. table Tag Attributes(cont’d) • cellpadding • margin between cell content and cell border • default: 2 • cellspacing • space between adjacent cells • default: 2

33. A Note • You can center HTML elements on a Web page by embedding them inside a single-celled table with attribute align set to “center” • A border=“5” table attribute creates a 3-D picture frame for a single-celled table containing an image • Example: a center framed image • singlecell-imge.html

34. colspan and rowspan • colspan and rowspan are table data attributes that are used to create irregular tables • A table cell can be extended horizontally with the colspan attribute • A table cell can be extended vertically with the rowspan attribute • Example: • table_colspan.html • table_rowspan.html • composite example (with both rowspan and colspan)

35. Rules for Table Elements • TD Rule 1: each row receives a TD element whenever the row has (1) a cell with no arrow or (2) a cell with the beginning of an arrow • TD Rule 2: any TD tag corresponding to a cell that contains the beginning of a downward-pointing arrow receives a ROWSPAN attribute with a value equal to the length of the arrow • TD Rule 3: any TD tag corresponding to a cell that contains the beginning of a rightward-pointing arrow receives a COLSPAN attribute with a value equal to the length of the arrow

36. Tables and Text • Text is hard to read against a busy background pattern, but you can lay a table containing text on top of a background pattern without sacrificing readability (just give the table a solid background color) • Examples: table_text2.html vs. table_text1.html • Tables can also be used to separate text into two columns (a cellpadding=“20” table attribute will put white space between the two columns) • Example: table_2col.html

37. Tables and Graphics • Tables can be used to control a Web page layout for multiple images (or images mixed with text) • Images of different sizes can be fit together in irregularly-shaped tables using cell-structure diagrams • All tables have an underlying cell structure with a uniform number of table cells across each table row

38. Web Page Borders • Empty table columns can be used to create margins for text on a Web page • Use a fixed width attribute (e.g. width=“50”) for the empty table data element • Put an internal table inside • Example: innertable.html • Note: better to control margins with CSS

39. One vs. Many • If you have one very large table, try to break it up into a sequence of smaller tables that can be stacked vertically on a Web page • Browsers download the contents of an entire table before any of the table can be viewed • Multiple tables will be displayed incrementally so the user will be able to see the first part of your page while the rest of the page is still downloading

40. Disadvantages of tables for layout • Complex layout requires complex tables (lots of headaches, room for error) • Complex tables can download, be rendered slowly • Scalability issues • Not all browsers can read tables