400 likes | 522 Views
Introduction to Programming the WWW I. CMSC 10100-1 Summer 2004 Lecture 4. Today’s Topics. Image (cont’d) Hyperlink Image map HTML tables. Note. Maclab ’s minicourses Hw1 due Wedn. GIF (Graphics Interchange Format). Uses an adaptive 8-bit color palette 256 colors at most
E N D
Introduction to Programming the WWW I CMSC 10100-1 Summer 2004 Lecture 4
Today’s Topics • Image (cont’d) • Hyperlink • Image map • HTML tables
Note • Maclab’s minicourses • Hw1 due Wedn
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
GIF (cont’d) • GIF dithering in photos • Example: gifdithering.html • Image compression is lossless • Cool features • Interlaced GIF • Transparent GIF • Animated GIF
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
PNG(Portable Network Graphics) • W3C free stand-in format for GIF • Often smaller than GIF • Lossless (like GIF) • Does not support animation
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
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
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”
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
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
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
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>
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
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
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
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
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
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
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
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
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
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
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">
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">
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
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
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
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 ( ) • Example: sampletable.html • Tables cells can be distinguished by • background colors - bgcolor • Patterns - background • alignment – align, valign • type fonts etc • Example: tablecell.html
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%
table Tag Attributes(cont’d) • cellpadding • margin between cell content and cell border • default: 2 • cellspacing • space between adjacent cells • default: 2
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
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)
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
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
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
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
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
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