1 / 11

Lists & Tables

Lists & Tables. Chapter 15 & 16 2/8/08. 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>

javier
Download Presentation

Lists & Tables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lists & Tables Chapter 15 & 16 2/8/08 Winter 2008

  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

  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

  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

  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

  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

  7. Simple Tables <TABLE> - indicates table def follows <TR> - beginning of a row <TD> - define beginning of a cell </TD> - completes the cell Repeat for additional cells </TR> - completes the row Repeat for additional rows </TABLE> - completes a table Use attributes to change font, border, width, height,color. Winter 2008

  8. CSS for Layout body {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

  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> <!-- Left Navigation --> <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

  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

  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>&nbsp;</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> Winter 2008

More Related