Download presentation
Presentation is loading. Please wait.
Published byGyles Tucker Modified over 9 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.