1. HTML II ECT 270 Robin Burke

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

3. 3 HTML Elements / tags content Attributes content Entities &  &

4. 4 Common problems Here is my picture Here is my link. Here is some more of my web page... heading

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

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

7. 7 Anchor elements Used for both links and internal locations External link text Internal location place text Links to internal link to place

8. 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. 9 Image text flow example

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

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

12. 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. 13 Image maps Example http://www.metrarail.com/maps.html

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

15. 15 Metra HTML source...

16. 16 HTML In the image usemap attribute URL for the map element to use element contains elements element associates geometric shapes and URLs

17. 17 Structure... more areas...

18. 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. 19 Shape examples X1=53 x2=162 x=273 y1=83 y2=180 y=131 r=36

20. 20 Image map example

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

23. 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. 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. 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. 26 How to specify bgcolor="#FFFFFF" # means that a triplet is coming FF = 255, F = 15 hex FF = 15*16+15 white

27. 27 Examples

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

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

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

31. 31 Example This is a table First Row A1

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

34. 34 Rules

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

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

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

38. 38 Alignment

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

40. 40 Span example Cell spans two cols and two rows: Cell spans three cols: Cell spans ……………. Complete

41. 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. 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. 43 <body background="RedBar.jpg" Image+links Nested Table Outer table Logo Main Side note Another note Nested table

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

45. 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. 46 Lab #2 / Homework #3 Page design with tables