Introduction to Programming the WWW I

Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 4

Topics Today • More about basic HTML • Validation • Comment • Special Characters • More about images • Image map • Table

Reminder • Homework1 due midnight this Wednesday • Do the last requirement “Validate your page through the W3C validator before you're done with the assignment” after this class • No class on July 4th (this Friday)

Web page validation service • http://validator.w3.org/file-upload.html • Checks your syntax against the document type you specify • Can help you find missing end tags, nonnested tags, other errors

Document types • All document types are of the SGML form <!DOCTYPE HTML PUBLIC “-//W3C//DTD doctype//EN”> • doctype can be • HTML 4.01 Strict • HTML 4.01 Transitional • earlier versions of HTML • varieties of XHTML,XML • We use “HTML 4.01 Transitional” • Document Type Definition (DTD) • Defines the tags and syntax that are used to create an HTML document • HTML 4.01 Transitional DTD (see IMG element)

Validation example: • Example: bad.html • Why is it bad with HTML 4.01 Transitional? • What else is bad with HTML 4.01 Strict? • It is easy to mess up nestings for tables, lists, etc

HTML Comments • What is comments? • Part of HTML textual content • Not rendered by browser • Comments tag  • Example • comment.html

Special Character Encoding • Several characters have special meanings in HTML • <, >, and & etc • We use a special encoding to use them • Numerical Code: < • Symbolic Code: < • Not all have symbolic code • Check ASCII table for numeric code • Also see Appendix pp. 176-177

Special Character Example • Example • specialchar.html

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

Paths • The src attribute for an image file retrieves images from the same directory as the HTML file containing the img tag: <img src=“donut.gif”> • If you want to retrieve an image from a different directory, you can add path information to the file name: <img src=“pix/donut.gif”> • You can also specify a URL to link an image from outside

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

Flowing Text • Use the align attribute to make text flow alongside an image: <img src=“donut.gif” align=“left”> positions the image on the left side of the page and allows text to run down its right side

Image File Formats • GIF: • Graphics Interchange Format • JPEG: • Joint Photographic Experts Group • PNG: • Portable Networks Graphics

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 • LZW algorithm for image compression

GIF (cont’d) • Dithering • Example: JPEG file vs. GIF file • Lossless • Interlaced GIF • Equals progressive JPEG • Example: car-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

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

Lossy Image 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 • Supported by JPEG, not by GIF or PNG

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 • GiFFY

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 • How to make transparent GIFs? • The background of a photograph can be made transparent after some graphics editing • Examples • transparent-background.html • transparent-foreground.html

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 • Animated GIF tools • Animagic GIF • Examples • Rolling Star • Traffic Light

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 • Example • thumbnail.html

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 • Example

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 • More details about how to use “convert”

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

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)

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 • Example: • Imagemap.html • course’s web page

The Table Element • 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 data tag pair <td></td> can hold text, images, and other HTML elements • Each table head tag pair <th></th>has a different appearance than table data.

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 element • Tables cells can be distinguished by their own background colors, patterns, type fonts, alignments, etc. • Example: tablecell.html • A table containing a single cell can be used to frame an image or offset important text • Example: singlecell-imge.html

table Tag Attributes • align • values: left, right • bgcolor, background • border • values: n (an interger) • cellpadding • margin between cell content and cell border • cellspacing • space between adjacent cells • width • value: n(an integer), or n%

table Tag Attributes (cont’d) • You can center HTML elements on a Web page by embedding them inside a single-celled table with a width=“100%” table attribute and an align=“center” table data attribute • A border=“5” table attribute creates a 3-D picture frame for a single-celled table containing an image

Introduction to Programming the WWW I