1 / 31

HTML III

HTML III. ECT 270 Robin Burke. Outline. Images basics text flow links Image maps Colors. Image tag. Inline image : a picture file that is referenced in the HTML code and is loaded with the HTML file. <img src ="photo.jpg"> src attribute URL is usually relative

wwise
Download Presentation

HTML III

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. HTML III ECT 270 Robin Burke

  2. Outline • Images • basics • text flow • links • Image maps • Colors

  3. Image tag • Inline image: a picture file that is referenced in the HTML code and is loaded with the HTML file. • <img src ="photo.jpg"> • src attribute • URL • is usually relative • Can be a different site • <img src="http://www.doubleclick.net/..."> • often seen in advertising banners

  4. More image tag attributes • height: specifies the height of the image in pixels • width: specifies the width of the image in pixels • border: determines the size of the border • alt: specifies the text displayed on-screen when the image cannot be loaded • align: enables text to flow around the image: Used to flush the image to the right or left of the page. Vertical options (top, middle, bottom) control where text adjacent to an image is aligned.

  5. Image scaling • Setting height and width helps the browser • but be careful • Wrong choices lead to distorted images • IE trick for getting image size • Also • browser downloads whole images • for thumbnails, shrink in image program

  6. Image media • In-line = supported by the browser • so they are rendered by the browser itself • modern browsers support • GIF (Graphics Interchange Format) • JPEG (Joint Photographic Experts Group) • PNG (Portable Net Graphics) • External = other formats • user must have a plug-in or alternate application to render the image

  7. Image file formats • GIF (Graphic Interchange Format) • To display clip art containing < 256 colors • To create animated graphics • To use transparent colors • JPG (Joint Photographic Expert Group) • To display photographs • To use images containing >256 colors • To reduce the size of the image through file compression • PNG (Portable Net Graphics) • A replacement for GIF • Compressed • More color depth • α transparency

  8. Image download process • You might wonder how the images get to the browser • they are separate files • not part of the HTML file the user requests • Images are download in separate requests during page rendering • this was the Mosaic innovation

  9. Image download • User requests page • Server responds with page • Browser begins to render the page • Browser discovers img element • Browser sends request to server for image file • Server responds with image file • Browser renders image file • Browser renders the rest of the file

  10. Image download, actual • User requests page • Server responds with page • Browser begins to render the page • Browser discovers img element • Browser start download process • Browser continues rendering rest of page • Browser sends request to server for image file • Server responds with image file • Browser renders image file

  11. Image sizing • Providing height and width • lets the browser work in parallel with downloading • without having to redraw later

  12. Bandwidth • Image files are larger than text files • Use more network resources (bandwidth) • Users who access the Internet via telephone lines will have to wait for image files • estimate 7K / sec or less • Use image files no larger than 30-40KB • especially on heavily used pages • Use "alt" text to describe images • for users with image loading turned off

  13. Battling Bandwidth Limitations • Width and height. • Don’t put large images at the top of a Web page • Use interlaced GIFs and progressive JPGs. Several shareware graphic programs save GIF or JPG files in convenient formats: Paint Shop Pro or GIF Wizard • Use thumbnails – reduced versions of your image

  14. Image maps • Example • http://www.metrarail.com/maps.html • This is different from a image link • image link = whole image, one destination • image map = part of image, multiple destinations

  15. Basic idea • Large image • always rectangular • Identify "hotspots" • geometric regions • associate each with a URL

  16. Metra HTML source <IMG SRC="Stock/metra-system-map04-2003.gif" WIDTH=593 HEIGHT=1000 BORDER=0 ALT="" USEMAP="#metra_system_map04_Map"> <MAP NAME="metra_system_map04_Map"> <AREA SHAPE="poly" ALT="South Shore" COORDS="561,811, 591,811, 591,834, 560,834" HREF="http://www.nictd.com/" TARGET="_blank"> <AREA SHAPE="poly" ALT="Metra Electric Line" COORDS="515,640, 521,658, 525,670, 527,685, 515,759, 511,783, 495,785, 494,797, 509,798, 446,931, 424,972, 420,987, 440,995, 446,987, 446,975, 523,812, 545,822, 553,805, 536,804, 530,788, 540,720, 545,721, 555,755, 579,754, 568,730, 561,707, 545,703, 547,669, 529,645" HREF="http://metrarail.com/Sched/me/me.html#MAP"> ...

  17. HTML • In the image • usemap attribute • URL for the map element to use • <map> element • contains <area> elements • <area> element • associates geometric shapes and URLs

  18. Structure <map name=“mapname”> <area shape=shape coords=“coordinates” href=“url” target=“window”> ... more areas ... </map> <img src=“photo.jpg” usemap=“#mapname”>

  19. Shapes • rect • rectangular region • pixels for top left corner and bottom right • circle • circular region • pixels for center, radius • poly • arbitrary number of vertices

  20. Shape examples X1=53 x2=162x=273 y1=83 y2=180y=131 r=36

  21. Identify regions • Graphics program • Image map utilities • MapEdit on book CD • ISMAP trick • put the attribute "ismap" in img tag • put inside an anchor element

  22. Image map example • Yahoo logo

  23. Colors • Color is an important part of a UI • already important for the web (link colors) • Can be crucial to good design • can be detrimental if misused • Used many places in HTML • in body element • bgcolor • sets background color for the whole page • bgcolor="blue" • Long list of legal color names

  24. What if I want my own color? • Not restricted to the "named" colors • RGB triplet • red/green/blue values • 0-255 • represented in hexidecimal • But • on systems with 8-bit color • only 216 colors available • "Netscape" or "web-safe" palette

  25. What if I use a non-web-safe color? • The browser tries to approximate the color using dithering • sometimes OK, usually ugly • The good news • 8-bit color is going away

  26. How to specify • bgcolor="#FFFFFF" • # means that a triplet is coming • FF = 255, F = 15 hex FF = 15*16+15 • white

  27. Examples

  28. Coloring things • page colors • background • main text • links • unvisited • visited • being clicked • table cells • background • text • other spans of text • font element

  29. Link colors • Defaults • new links = blue • visited link = red • active = no color change • A bit problematic • old stuff stands out • but people are used to this • solution: make visited links purplish • less distracting

  30. Designing colors • MS Paint + Windows calc • Web tools • http://www.hypersolutions.org/pages/colorSel.html • http://www.bagism.com/colormaker/

  31. Examples

More Related