HTML II

1. HTML II ECT 270 Robin Burke

2. Outline • Review • Images • text flow • links • Image maps • Colors • Tables

3. HTML • Elements / tags • <foo> content </foo> • Attributes • <foo size="3"> content </foo> • Entities • &amp;  &

4. Common problems <img src="mypic.jpg>Here is my picture <a href="link.htm" <img src="mypic.jpg"></a> <a href="link.htm">Here is my link. Here is some more of my web page... <a href="link.htm"><h3>heading</a></h3> <a href="link.htm" "Here is my link">

5. When something is broken: • Check spelling • rehf vs href • Check delimiters • Quotes • Angle brackets • Start and end tags • Check tag overlap

6. Elements • Structural • html, head, body, <!-- --> • Headings • h1, h2, h3, etc. • Text divisions • br, p • Lists • ul, ol, li • Style • font

7. Anchor elements • Used for both links and internal locations • External • <a href="URL">link text</a> • Internal location • <a name="place">place text</a> • Links to internal • <a href="#place">link to place</a>

8. Image element • img • Attributes • src="URL" • align • provides for text flow • different from paragraph alignment • alt • text displayed when image is not • height / width • fixes image size • can be used for scaling

9. Image text flow example

10. Images as links • image element as content of anchor element • <a ...><img ...></a> • Border by default • usually turn it off • img border=0

11. Example from course web site <a href="../index.html"> <img src="../ect270.gif" alt="ECT 270: Client-Side Web Application Development" border="0" width="475" height="75"> </a>

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

13. Image maps • Example • http://www.metrarail.com/maps.html

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

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

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

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

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

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

20. Image map example

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. Example • Creating an image map

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"

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. Designing colors • MS Paint + Windows calc • Web tools • http://www.hypersolutions.org/pages/colorSel.html • http://www.bagism.com/colormaker/

29. Tables • A table is a rectangular region • organized into rows and columns • row-based definition • <table> element • declares a table • <tr> element • declares a row • <td> element • declares a division (cell) within a row

30. More elements • <caption> • declares a caption for the table • <th> • declares a "header" cell • usually bold and centered

31. Example <table> <caption>This is a table</caption> <tr> <th>First Row</th> </tr> <tr> <td>A1</td> </tr> </table>

32. Border control • border • attribute of table • gives the width of the visible border • set to 0 for "invisible" table • frame • controls which sides of the table are framed • default = "box", many other options • rules • controls which directionality of borders • default="all"

33. Frame

34. Rules

35. Table spacing • cellspacing • space between cells • cellpadding • space between cell text and cell border • align • (as for images) • text flow around table

36. Other table attributes • bgcolor • background color for table • width • pixels • or % of browser window • height • pixels • or % of browser window

37. TR, TH and TD • Share many table attributes • bgcolor • width, height • % means % of table size • align • horizontal alignment • valign • vertical alignment

38. Alignment

39. Spanning • A cell can span multiple rows or columns • Attributes of td and th • colspan • # of columns included • rowspan • # of rows included

40. Span example Cell spans two cols and two rows: <td rowspan=“2” colspan=“2”> Cell spans three cols: <td colspan=“3”> Cell spans ……………. <td …………….> Complete

41. Tables for layout • A grid is the most common layout graphic layout tool • Early versions of HTML provided no layout facilities • logical structure only • Tables provided a grid-based mechanism • to get layout in spite of HTML

42. Table-based layout • Organize the page into sections • determine vertical and horizontal divisions • Design outer table first • work towards inner ones • Use • border = 0 • color to help distinguish areas • cell padding to preserve whitespace

43. Outer table <body background="RedBar.jpg" <table width=“560" > <tr> <td width="115" > Image+links</td> <td width="445" > Nested Table</td> </tr> </table> Nested table <table width="445“> <tr><td colspan=2 width=“445”>Logo</td> </tr> <tr><td rowspan=2 width=“350”>Main</td> <td width=“95”>Side note</td> </tr> <tr><td width=“95”>Another note</td> </tr> </table>

44. Examples • many on the web • course lecture notes • CTI homepage • Chicago Tribune

45. Best practices • Draw on paper first • show it to your co-workers • better yet, your users • Use comments to mark different parts of the page • Not too complex / busy

46. Lab #2 / Homework #3 • Page design with tables