1 / 33

Web Development Fundamentals: HTML Best Practices

Learn about HTML validation, special characters, image handling, tables, and more to create effective web pages. Explore syntax checking, encoding, alignments, and image formats. Follow guidelines for improvement.

virginiar
Download Presentation

Web Development Fundamentals: HTML Best Practices

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. 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)

  4. 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

  5. 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)

  6. 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

  7. HTML Comments • What is comments? • Part of HTML textual content • Not rendered by browser • Comments tag <!-- and --> • Example • comment.html

  8. 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

  9. Special Character Example • Example • specialchar.html

  10. 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

  11. 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

  12. 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

  13. 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

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

  15. 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

  16. GIF (cont’d) • Dithering • Example: JPEG file vs. GIF file • Lossless • Interlaced GIF • Equals progressive JPEG • Example: car-interlaced.gif • Transparent GIF • Animated GIF

  17. 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

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

  19. 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

  20. 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

  21. 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

  22. 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

  23. 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

  24. 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

  25. 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”

  26. 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

  27. 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)

  28. 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

  29. 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.

  30. 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

  31. 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

  32. 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%

  33. 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

More Related