Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 4
Topics Today More about basic HTML More about images Image map Table 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 can be <!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? Comments tag Example Part of HTML textual content Not rendered by browser Comments tag <!-- and --> 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 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: JPEG: PNG: Graphics Interchange Format 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 Lossless Interlaced GIF Transparent GIF 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 table row 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 <caption>Sample Table</caption> <tr> <th>headrow-col1</th> … <th>headrow-coln</th> </tr> <td>row1-col1</td> <td>row1-coln</td> <td>rowm-col1</td> <td>rowm-coln</td> </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 bgcolor, background border cellpadding 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