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 2 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 3 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 4 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 5 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 6 HTML Comments What is comments Part of HTML textual content Not rendered by browser Comments tag and Example comment html 7 Special Character Encoding Several characters have special meanings in HTML and etc We use a special encoding to use them Numerical Code 60 Symbolic Code lt Not all have symbolic code Check ASCII table for numeric code Also see Appendix pp 176 177 8 Special Character Example Example specialchar html 9 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 10 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 11 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 12 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 13 Image File Formats GIF Graphics Interchange Format JPEG Joint Photographic Experts Group PNG Portable Networks Graphics 14 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 15 GIF cont d Dithering Example JPEG file vs GIF file Lossless Interlaced GIF Equals progressive JPEG Example car interlaced gif Transparent GIF Animated GIF 16 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 17 PNG Portable Network Graphics W3C free stand in format for GIF Often smaller than GIF Lossless like GIF Does not support animation 18 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 19 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 20 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 21 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 22 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 23 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 24 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 25 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 26 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 27 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 28 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 29 Typical Table Sketch Code