Slide 1 CMPS 211 Internet Programming Winter 2008 Lists & Tables Chapter 15 & 16 2/8/08

CMPS 211 Internet Programming

Winter 2008 Slide 1

Lists & Tables

Chapter 15 & 16

2/8/08


Winter 2008 Slide 2

Lists<OL> ordered list or <UL> unordered list or <DL> definition list

<LI> list item </LI> <LI> list item </LI> <DT> term to be defined </DT>

<DD> definition </DD><LI> list item </LI> <LI> list item </LI> <DT> term to be defined </DT> <DD> definition </DD><LI> list item </LI> <LI> list item </LI> <DT> term to be defined </DT> <DD> definition </DD>

</OL> </OL> </DL>

Use style sheet rule list-style-type: marker where

marker is disc(○), circle(●), square(■), decimal(1,2,…), upper-alpha(A, B,…), lower-alpha(a, b,…), upper-roman(I, II, ..) , lower roman (i, ii, …)


Winter 2008 Slide 3

Ordered List<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type"

content="text/html; charset=iso-8859-1" /> <title>Creating Ordered Lists</title> </head> <body> <h3>Changing a light bulb</h3> <ol> <li>Make sure you have unplugged the lamp

from the wall socket.</li> <li>Unscrew the old bulb.</li> <li>Get the new bulb out of the package.</li> <li>Check the wattage to make sure it's

correct.</li> <li>Screw in the new bulb.</li> <li>Plug in the lamp and turn it on!</li> </ol> </body> </html>


Winter 2008 Slide 4

Unordered List<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type"

content="text/html; charset=iso-8859-1" /> <title>Creating Unordered Lists</title> </head> <body> <h3>PageWhacker, version

12.0--Features</h3> <ul> <li>New or improved features marked with a

solid bullet.</li> <li>One click page layout</li> <li>Spell checker for 327 major languages</li> <li>Image retouching plug-in</li> <li>Special HTML filters</li> <li>Unlimited Undo's and Redo's</li> <li>Automatic book writing</li> </ul> </body> </html>


Winter 2008 Slide 5

Definition List<!DOCTYPE …><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Creating Definition Lists</title> <link rel="stylesheet" type="text/css" media="screen"

href="definitionlists.css" > </head> <body> <h3>Classical Greek Verb Tenses</h3> <dl> <dt>Present</dt> <dd><span class="example">e.g. .luo, luomai</span>. The

present usually shows the pure verb stem in verbs with strong stems. In many verbs it undergoes drastic phonetical changes due to the union of the thematic vowels to the tense suffixes.</dd>

<dt>Future</dt> <dd><span class="example">e.g. luso, lusomai,

luthesomai</span>. The future has the characteristic s in between the verb stem

and the thematic vowels, which gives: verb stem + s (-the- in passive voice) + thematic vowel + personal ending.</dd>

<dt>Aorist</dt> <dd><span class="example">e.g. .elusa, eluthen, elusamen</span>.

The aorist (from a-orizo, aoristos: indefinite, limitless) is the equivalent to the indefinite past in several languages. Its main characteristic is the temporal suffix -sa- (in the active and middle voice) and -the- in the passive voice. The -s- from sa may change to accomodate different stem endings. For example: kopto = ekops (ps = psi)a.</dd>

</dl> </body> </html>


Winter 2008 Slide 6

Tables

• Used to create complicated layouts before CSS

• Can be used in conjunction with CSS for page layout, create liquid designs by using percentages rather than pixel-based widths

• Originally, and currently used to present tabular data


Winter 2008 Slide 7

Simple Tables

<TABLE> - indicates table def follows<TR> - beginning of a row<TD> - define beginning of a cell</TD> - completes the cellRepeat for additional cells</TR> - completes the rowRepeat for additional rows</TABLE> - completes a tableUse attributes to change font, border, width,

height,color.


Winter 2008 Slide 8

CSS for Layoutbody {font-family:"Trebuchet MS", Verdana, sans-

serif;color:#006666} table, td {border:none} h1 { font-size:1.8em; white-space:nowrap; margin:10px 0

5px} p { font-size:.9em; margin:0 0 10px 0} .rightsidebar {width:200px; float:right; border:none;

background:#006666; color:white; margin:0 0 5px 10px}

.caption {font-size:.8em; font-style:italic; color:black; text-align:center; padding:5px; margin:0; color:white}

.toc { vertical-align:top; width:110px; background:#339966 url(longerfish.jpg); padding:25px 0 0 10px}

.center { text-align:center} .right { text-align:right}

.main { vertical-align:top; padding-left:10px}

.logobar { background:#ffff66}

.toc a:link { color:white; text-decoration:none; font-weight:bold} .toc a:visited {color:gray; text-decoration:none; font-weight:normal}

.toc a:hover { color:yellow; text-decoration:underline; font-weight:bold}

.toc a:active { color:yellow; text-decoration:underline} a:link.current {color:yellow}


Winter 2008 Slide 9

Layout Example<link rel="stylesheet" type="text/css" media="screen"

href="spacenew.css" > </head> <body text="#006666" bgcolor="white">

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="logobar" bgcolor="#ffff66">

<tr><td ><img src="logo.jpg" width="120" alt="Northampton

Zoo Logo"></td> <td class="center"><img src="ad2.gif" width="320" alt="main ad" ></td> <td class="right"><img src="miniad.jpg" width="160" height="100" alt="mini

ad" ></td></tr></table> <table width="100%" cellspacing="0" cellpadding="0"

border="0"> <tr>  <td class="toc"> <p> <a href="lions.html">Lions</a> <br /><a href="armadillos.html">Armadillos</a> <br /><a href="hyenas.html">Hyenas</a> <br /><a href="elephants.html" class="current">Elephants</a>

<br /><a href="giraffes.html">Giraffes</a> <br /><a href="gorillas.html">Gorillas</a></p> <img src="pixelshim.gif" width="110" alt="" /> </td> <td class="main">


Winter 2008 Slide 10

Example (cont)<h1>The Truth about Elephants</h1> <table border=0 width="200" cellspacing="0"

cellpadding="0" class="rightsidebar" align="right">

<tr><td><img src="elephant.jpg" width="200"

height="150" alt="Elephant Baby"></td></tr>

<tr><td class="caption">A baby elephant hanging out with its mom, aunts and great-aunts, and maybe even its grandmother</td></tr> </table>

…..on my mind, I could only find a picture of an elephant?)

</p> </td></tr> </table> </body></html>


Winter 2008 Slide 11

Fancy Borders<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www. w3.org/TR/1999/REC-html401-19991224/loose.dtd">

<html> <head> <meta http-equiv=" groups</ content-type"

content="text/html; charset=iso-8859-1"> <title>Using column title> <link rel="stylesheet" type="text/css" media="screen"

href="frame.css" > </head> <body> <table cellspacing="0" border="4"

frame="void" rules="groups"> <caption align="top">Fox sightings in Western

Massachusetts</caption> <colgroup class="cities" > <colgroup span="3" class="data" > <col span="2"> <col

class="totals" > </colgroup> <thead class="titles"> <tr> <td> </td> <td>Kits</td> <td>Adults</td> <td>Total</td></tr> </thead> <tbody> <tr> <td>Hawley</td> <td>2</td> <td>4</td> <td>6</td></tr> <tr> <td>Becket</td> <td>5</td> <td>22</td> <td>27</td></tr> <tr> <td>Worthington</td> <td>7</td> <td>5</td> <td>12</td></tr> </tbody> </table> </body> </html>

Documents

Slide 1 CMPS 211 Internet Programming Winter 2008 Lists & Tables Chapter 15 & 16 2/8/08