Week 11: Image Maps, lists and tables Johan Bollenjbollen/CS312/week11.pdfbold, etc This is bold...
25
[email protected] Week 11: Image Maps, lists and tables Johan Bollen Old Dominion University Department of Computer Science [email protected] http://www.cs.odu.edu/˜jbollen November 20, 2003 Page 1
Transcript of Week 11: Image Maps, lists and tables Johan Bollenjbollen/CS312/week11.pdfbold, etc This is bold...
Week 11:
Image Maps, lists and tables
Johan BollenOld Dominion University
Department of Computer Science
http://www.cs.odu.edu/˜jbollen
November 20, 2003 Page 1
Example of IMG tag<html>
<head>
<title>Anchor tag</title>
</head>
<body>
<IMG SRC=’’homer_simpson.jpg’’
ALT=’’Homer Sapiens’’>
</body>
</html>
November 20, 2003 Page 1
Image Tag as anchor
Can we link from images, i.e. use images as anchors: yes!
November 20, 2003 Page 2
More IMG magic
Commonly used attributes for the IMGtag
1. ALIGN: vertical
(a) TOP, MIDDLE, BOTTOM
(b) Relative to position of text
(c) Example:http:
//www.cs.odu.edu/~jbollen/
CS312/imgalign.html
2. ALIGN: horizontal
(a) LEFT, RIGHT
(b) Again relative to text
3. HSPACE, VSPACE
(a) padding horizontal and vertical
text spacing
(b) http:
//www.cs.odu.edu/~jbollen/
CS312/imgpadding.html
4. Centering
(a) DIV
(b) CENTER
(c) PARAGRAPH
5. BORDER?
November 20, 2003 Page 3
IMG MAPSImage can serve as anchor - however, can
parts of an image linked to differentlocations?
1. client side image maps:
(a) IMG used as map
(b) map file: specifies which sectionof IMG links where
2. map file is most crucial
(a) has name: different maps can beused
(b) contains a list of specifications ofimage sections:
i. shapes (parts of images have
shapes): circles, rectangles,
polygon
ii. bounding image coordinates
for shapes
iii. URL that section points to
3. IMG tag
(a) Calls map by name
(b) Client then know how to respond
to mouseclicks in certain regions
of image
November 20, 2003 Page 4
IMG MAP EXAMPLE<html>
<head>
<title>Anatomy of a cutie</title>
</head>
<body>
<MAP NAME="andrea">
<AREA SHAPE="circle" COORDS="293,200,15" HREF="nose.html">
<AREA SHAPE="rect" COORDS="210,150,352,185" HREF="eyes.html">
<AREA SHAPE="poly" COORDS="273,247,338,231,307,268" HREF="mouth.html">
<AREA SHAPE="rect" COORDS="0,0,635,478" HREF="http://www.andreabollen.net">
</MAP>
<IMG SRC="andreamap.jpg" USEMAP="#andrea">
</body>
</html>
November 20, 2003 Page 4
Before we go into tables and list: some moremarkup
We can control font size, face and colorby FONT tag: there are other ways
1. <B> ... < /B>: BOLD
2. <I> ... < /I>: ITALICS
3. <U> ... < /U>: UNDERLINED
4. <EM> ... < /EM>: EMPHASIS
(similar to bold)
5. <BLINK > ... < /BLINK >: OH NO!!
6. http://www.cs.odu.edu/
~jbollen/CS312/boldetc.html
November 20, 2003 Page 5
SOME RENEGADE TAGS<html>
<head>
<title>bold, etc</title>
</head>
<body>
<P><B>This is bold text</B></P>
<P><I>This is italics text</I></P>
<P><U>Some underlined text</U></P>
<P><EM>Emphasis, yes, but how?</EM></P>
<P><BLINK>You can’t spell failure without U,R,A!</BLINK></P>
</body>
</html>
November 20, 2003 Page 5
Introduction to lists!Often we want to organize text in lists
1. Three types:ordered, unordered,definition
2. Ordered:
(a) <OL> ... < /OL>
(b) Individual item:<LI> ... < /LI>
(c) Attributes: TYPE=, START=
(d) http://www.cs.odu.edu/
~jbollen/CS312/ol.html
3. Unordered:
(a) <UL> ... < /UL>
(b) Individual item:<LI> ... < /LI>
(c) http://www.cs.odu.edu/
~jbollen/CS312/ul.html
4. Definition Lists
(a) <DL> ... < /DL>
(b) <DT> ... definition term
(c) <DD> ... definition
5. Nested:
(a) List within list
(b) Example:http:
//www.cs.odu.edu/~jbollen/
CS312/nestedli.html
November 20, 2003 Page 6
OL<html>
<head>
<title>lists etc</title>
</head>
<body>
<h2> UK TOP 40
<ol>
<li>Kylie Minogue - Slow</li>
<li>Flip Reverse - Blazin’ Squad</li>
<li>Be Faithful - Fatman Scoop </li>
<li>Turn Me On - Kevin Lyttle</li>
<li>Where Is The Love - Black Eyed Peas</li>
</ol>
</body>
</html>
November 20, 2003 Page 6
UL<html>
<head>
<title>UL</title>
</head>
<body>
<h2>UL</h2>
<ul>
<li>Purchase new Kylie Minogue album</li>
<li>Listen</li>
<li>Grow bored with track</li>
<li>Sell album on Ebay</li>
</ul>
</body>
</html>
November 20, 2003 Page 6
DL<html>
<head>
<title>DL</title>
</head>
<body>
<h2>DL</h2>
<dl>
<dt> <b>Resolution</b>
<dd> Never waste time on UK top 40 again
<dt> <b>Evaluation</b>
<dd> Top of the pops music is trite
<dt> <b>Better:</b>
<dd> <a HREF="http://www.ninjatune.net/videos/getreal.php?file=videos%2F4tonmantis.rm"> Amon Tobin - 4 Ton Mantis</a>
</dl>
</body>
</html>
November 20, 2003 Page 6
Homework
1. Add your personal top 40 (list) to homepage built for previous homework
2. Add full details on artists, year, and record label
3. At least 15 artists from 4 different labels
4. Use of ordered, unordered and definition lists
5. Provide links to artist home pages, labels etc
6. Grading on
(a) Technical quality (HTML code validity and structure): 3pts
(b) Content (see above): 3pts
(c) Style (layout, design): 4pts
7. Due: start next class
8. Submission:
(a) send URL (has to be odu.edu or cs.odu.edu address)
(b) subject of e-mail: homework 4 - your name - CS312
November 20, 2003 Page 7
Table
1. Tabular presentation of material
2. Used to determine page layout
3. Rows and columns
(a) TABLE tag
(b) TR: row tag
(c) TD: column tag
4. Table cell defined by row and column
tag
Example:http://www.cs.odu.edu/
~jbollen/CS312/table1.html
November 20, 2003 Page 8
TABLES<html>
<head>
<title>DL</title>
</head>
<body>
<table>
<tr>
<td> AA </td>
<td> AB </td>
<td> AC </td>
</tr>
<tr>
<td> BA </td>
<td> BB </td>
<td> BC </td>
</tr>
</table>
</body>
</html>
November 20, 2003 Page 8
Table: some notes
1. Number of columns determined bylongest row
(a) Forget TR tag?
(b) Forget TD tag?
2. End tags?
3. Empty cells?
November 20, 2003 Page 9
Some attributes of the TABLE tag
1. BORDER
(a) Value specifies pixel width oflines seperating table cells
(b) Zero value is default
2. CELLSPACING
(a) Expressed in pixels
(b) Distance between individual cells
(c) Affects perimeters as well
3. CELLPADDING
(a) Expressed in pixels
(b) distance between cell text and cell
walls
Example:http://www.cs.odu.edu/
~jbollen/CS312/table2.html
November 20, 2003 Page 10
Headers and column spans
1. TH tag indicates whether cell is tableheader
2. COLSPAN indicates which columnsthe header applies to
(a) Can also be used for cells thatextend beyond single column
(b) Careful to count correctly!
3. ROWPAN: similar to COLSPAN but
for rows..
example:http://www.cs.odu.edu/
~jbollen/CS312/table3.html
see also:
http://wp.netscape.com/assist/
net_sites/table_sample.html
November 20, 2003 Page 11
Table Captions
1. CAPTION tag
(a) Specifies caption to table
(b) Useful in report writing
(c) Numbering and references is up toyou
2. ALIGN attribute
(a) BOTTOM
(b) TOP?
(c) LEFT, RIGHT?
Example:http://www.cs.odu.edu/
~jbollen/CS312/table4.html
November 20, 2003 Page 12
Misc.: Alignment, width and color
1. ALIGN
(a) TR as well as TD
(b) center, left, right
2. WIDTH
(a) TABLE, and TD attribute
(b) pixels
(c) percentage of screenwidth
3. VALIGN
(a) TR, TABLE and HEADER
(b) top, center, bottom
4. BGCOLOR
(a) TABLE attribute
(b) hex color code
Example:http://www.cs.odu.edu/
~jbollen/CS312/table5.html
November 20, 2003 Page 13
Table elementsThings that can be included in tables:
1. Text
2. Other tables
3. Images
4. Lists?
Example:http://www.cs.odu.edu/
~jbollen/CS312/table6.html
November 20, 2003 Page 14
Use of tables to design web site
Problem: You want to layout the elements
of your web page, or roughly control their
positionSolution: Put all page elements in a
page wide table
1. control table and column width
2. control background color of specific
cells
3. outline elements according to specific
grid
4. add images and align with text
Pitfalls: This is not elegant
1. it’s somewhat of a kludge, but it works
quite well!
2. table width?
3. difficult to update page style
November 20, 2003 Page 15
Use of tables to design web site, cont’d
General Approach:
1. Determine general grid for layout
(a) Draw on paper
(b) Adopt a grid type layout
(c) Avoid splitting images
2. Determine cell items
(a) Image header? Menu header
(b) Menu on left side
(c) Footer
(d) middle panes
November 20, 2003 Page 16
Use of tables to design web site, example
Your homepage
1. Menu type header
2. two middle panes: coordinates + news
3. Bottom: repeat menu + footer
Example: http://www.cs.odu.edu/
~jbollen/CS312/yourhp.html
November 20, 2003 Page 17
Images typesThree main formats:
1. JPEG
(a) Defined by Joint PhotographicExperts Group:http://www.jpeg.org/
(b) Lossy data compression
(c) Compression on scale: 0-100
(d) Suitable for real-life images,photos
(e) 24b color
2. GIF
(a) Graphics Interchange Format
(b) compresson is loss less
i. works best for images that havelarge surfaces
ii. few different colorsiii. line art and schema’s
(c) 8b color
(d) Transparancy (alpha channel)
(e) Interlaced
3. PNG
(a) Portable Network Graphics or“PNG is Not GIF”
(b) http:
//www.libpng.org/pub/png/
(c) Lossless compression
(d) true color, grayscale, and 8 bit
(e) Open standard, no license, no fees
(f) Support still a little doubtful
Examples:http://www.cs.odu.edu/~jbollen/CS312/darth_maul.jpg
http://www.cs.odu.edu/~jbollen/
CS312/graph.gif
November 20, 2003 Page 18
