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="
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 This is different from a image link
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 Identify "hotspots" always rectangular
geometric regions
associate each with a URL

16. Metra HTML source
<IMG SRC="Stock/metra-system-map 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=" 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="
...

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

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 circle poly 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= x=273
y1=83 y2= y=131 r=36

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

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 table cells other spans of text background
main text
links
unvisited
visited
being clicked
table cells
text
other spans of text
font element

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

30. Designing colors MS Paint + Windows calc Web tools

31. Examples