Introduction to Programming the WWW I CMSC Summer 2004 Lecture 4

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

3 Note Maclab’s minicourses Maclab 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.htmlgifdithering.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.htmllossy.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 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 OSXfink  Can reduce image quality, do interlacing  Example: convert -quality 10 foo.jpg foo.tn.jpg  More details about “convert”details

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  The href attribute is used to specify the link destination  Examples: this is a link label label

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: UChicago Any Web page can be referenced by an absolute URL as long as you have its correct address  Example: Linkexamples.htmlLinkexamples.html

17 Relative URLs A relative URL need only specify a file name for its link destination: alternative solution 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.htmlLinkexamples.html

18 Named Anchors A named link destination specifies a location that has been marked by an anchor tag with a name attribute Good Lumber … some good lumber The href value is prefaced with the # character but the name value is not Example: Linkexamples.htmlLinkexamples.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 Some Good Lumber 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  text  headings  pictures Making a picture a link: Example: imagelink.htmlimagelink.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 and elements  defines the hot spots and the linked destinations (standalone tag)  Attributes: shape, coords, href  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 Imagemap.html  course’s home page course’s home page

25 HTML Validation Validating your HTML will help insure that it displays properly on all browsers Typical validators  W3C W3C  Web Design Group Web Design Group Two required information for validation  Document Type Declaration Document Type Declaration It begins the HTML document and uses tag It tells which version of HTML to use in checking the document's syntax

26 HTML Validation (cont’d)  Character Encodings Character Encodings It tells validator which method to use to covert byte to characters  ISO is a typically used encoding You could set it by using a tag in the element of a HTML page 

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 can hold any number of table rows Each table row tag pair can hold any number of table data items Each table head tag pair has a different appearance than table data Each table data tag pair can hold text, images, and other HTML elements

29 Typical Table Sketch Code Sample Table headrow-col1 … headrow-coln row1-col1 … row1-coln … rowm-col1 … rowm-coln sampletable.html

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

31 table Tag Attributes align  values: left, center, right  default: left  A better method is to embed the table in a 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 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_colspan.html  table_rowspan.html table_rowspan.html  composite example (with both rowspan and colspan) composite example

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.htmltable_text2.htmltable_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.htmltable_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.htmlinnertable.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