HTML II ECT 270 Robin Burke. 2 Outline Review Images text flow links Image maps Colors Tables.
-
Upload
gyles-tucker -
Category
Documents
-
view
221 -
download
0
Transcript of HTML II ECT 270 Robin Burke. 2 Outline Review Images text flow links Image maps Colors Tables.
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
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
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
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
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
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"
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
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
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