HTML II

ECT 270

Robin Burke

2

Outline

Review Images

text flowlinks

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 spellingrehf vs href

Check delimitersQuotesAngle bracketsStart 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 defaultusually turn it off

• img border=0

11

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

Example from course web site

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

Examplehttp://www.metrarail.com/maps.html

14

Basic idea

Large imagealways rectangular

Identify "hotspots"geometric regionsassociate 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 imageusemap attributeURL for the map element to use

<map> elementcontains <area> elements

<area> elementassociates 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=162 x=273

y1=83 y2=180 y=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 tagput 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 ditheringsometimes OK, usually ugly

The good news8-bit color is going away

26

How to specify

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

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

cellspacingspace between cells

cellpaddingspace between cell text and cell

border align

(as for images)text flow around table

36

Other table attributes

bgcolorbackground color for table

widthpixelsor % of browser window

heightpixelsor % of browser window

37

TR, TH and TD

Share many table attributesbgcolorwidth, 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 thcolspan

• # 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 facilitieslogical structure only

Tables provided a grid-based mechanismto 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

<body background="RedBar.jpg"

<table width=“560" >

<tr>

<td width="115" > Image+links</td>

<td width="445" >

Nested Table </td>

</tr>

</table>

Outer 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>

Nested table

44

Examples

many on the web course lecture notes CTI homepage Chicago Tribune

45

Best practices

Draw on paper firstshow it to your co-workersbetter 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