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 Can be a different site <img src="http://www.doubleclick.net/..."> often seen in advertising banners

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.

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

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

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

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

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

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

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

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

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

Image maps Example This is different from a image link 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

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

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

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

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

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

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

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

Image map example Yahoo logo

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

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

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

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

Examples

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

Link colors Defaults A bit problematic 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

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

Examples