ICCT Wiki

User Tools

Site Tools

Trace:
eg-259:xhtml

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Next revisionBoth sides next revision
eg-259:xhtml [2012/01/20 13:42] – [Headings] eechriseg-259:xhtml [2012/01/20 14:56] – [Exercises to Demonstrate Tables] eechris
Line 212: Line 212:
 ----- -----
   * //**Code for the Example**//   * //**Code for the Example**//
-<code html|Headings>+<code html|An example to illustrate headings>
 <!DOCTYPE html> <!DOCTYPE html>
 <!-- headings.html <!-- headings.html
Line 235: Line 235:
   </body>   </body>
 </html> </html>
-</file>+</code>
   * //**Typical Display**//   * //**Typical Display**//
 {{eg-259:l2-headings.png|An example of the use of the headings elements}} {{eg-259:l2-headings.png|An example of the use of the headings elements}}
Line 252: Line 252:
  
 **//Code for the Example//** **//Code for the Example//**
-<code html> +<code html|An example to illustrate a blockquote> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +
 <!-- blockquote.html <!-- blockquote.html
-     An example to illustrate a blockquote +An example to illustrate a blockquote 
-     --> +--> 
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> Blockquotes </title>+  <head> 
 +    <meta charset="utf-8"> 
 +    <title> Blockquotes </title>
   </head>   </head>
   <body>   <body>
     <p>     <p>
       Abraham Lincoln is generally regarded as one of the greatest       Abraham Lincoln is generally regarded as one of the greatest
-      presidents of the U.S. His most famous speech was delivered +      presidents of the U.S. His most famous speech was delivered
       in Gettysburg, Pennsylvania, during the Civil War. This       in Gettysburg, Pennsylvania, during the Civil War. This
-      speech began with +      speech began with
     </p>     </p>
     <blockquote>     <blockquote>
       <p>       <p>
         "Fourscore and seven years ago our fathers brought forth on         "Fourscore and seven years ago our fathers brought forth on
-        this continent, a new nation, conceived in Liberty, and +        this continent, a new nation, conceived in Liberty, and
         dedicated to the proposition that all men are created equal.         dedicated to the proposition that all men are created equal.
       </p>       </p>
-      <p> +      <p>
         Now we are engaged in a great civil war, testing whether         Now we are engaged in a great civil war, testing whether
         that nation or any nation so conceived and so dedicated,         that nation or any nation so conceived and so dedicated,
-        can long endure." +        can long endure."
       </p>       </p>
     </blockquote>     </blockquote>
     <p>     <p>
-      Whatever one's opinion of Lincoln, no one can deny the +      Whatever one's opinion of Lincoln, no one can deny the
       enormous and lasting effect he had on the U.S.       enormous and lasting effect he had on the U.S.
     </p>     </p>
Line 437: Line 436:
 //**Code for the Example**// //**Code for the Example**//
  
-<code html> +<code html|An example to illustrate an image> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">+
  
 <!-- image.html <!-- image.html
      An example to illustrate an image      An example to illustrate an image
      -->      -->
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> Images </title>+  <head>  
 +      <meta charset="utf-8" /> 
 +      <title> Images </title>
   </head>   </head>
   <body>   <body>
Line 491: Line 490:
 //**Code for the Example**// //**Code for the Example**//
  
-<code html> +<code html|An example to illustrate a link> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">+
  
 <!-- link.html <!-- link.html
      An example to illustrate a link      An example to illustrate a link
      -->      -->
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> A link </title>+  <head>  
 +      <meta charset="utf-8" /> 
 +      <title> A link </title>
   </head>   </head>
   <body>   <body>
Line 522: Line 521:
  
 The Link Target is [[/eg-259/examples/lecture2/C210data.html|C210data.html]] The Link Target is [[/eg-259/examples/lecture2/C210data.html|C210data.html]]
-<code html> +<code html|An example to illustrate the target of a link> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">+
  
 <!-- C210data.html <!-- C210data.html
      An example to illustrate the target of a link      An example to illustrate the target of a link
      -->      -->
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> 1960 Cessna C210 </title>+  <head>  
 +      <meta charset="utf-8" /> 
 +      <title> 1960 Cessna C210 </title>
   </head>   </head>
   <body>   <body>
Line 609: Line 608:
  
 ---- ----
-<code html> +<code html|An example to illustrate an unordered list> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">+
  
 <!-- unordered.html <!-- unordered.html
      An example to illustrate an unordered list      An example to illustrate an unordered list
      -->      -->
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> Unordered list </title>+  <head>  
 +      <meta charset="utf-8" /> 
 +      <title> Unordered list </title>
   </head>   </head>
   <body>   <body>
Line 639: Line 638:
  
 ---- ----
-<code html> +<code html|An example to illustrate an ordered list> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">+
  
 <!-- ordered.html <!-- ordered.html
      An example to illustrate an ordered list      An example to illustrate an ordered list
      -->      -->
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> Ordered list </title>+  <head>  
 +      <meta charset="ut-8f" /> 
 +      <title> Ordered list </title>
   </head>   </head>
   <body>   <body>
Line 672: Line 671:
 ---- ----
  
-<code html> +<code html|An example to illustrate nested lists> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +
 <!-- nested_lists.html <!-- nested_lists.html
-     An example to illustrate nested lists +An example to illustrate nested lists 
-  --> +--> 
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> Nested lists </title>+  <head> 
 +    <meta charset="utf-8" /> 
 +    <title> Nested lists </title>
   </head>   </head>
   <body>   <body>
     <h3> Aircraft Types </h3>     <h3> Aircraft Types </h3>
     <ol>     <ol>
-      <li> General Aviation (piston-driven engines) +      <li> 
 +        General Aviation (piston-driven engines)
         <ol>         <ol>
-          <li> Single-Engine Aircraft +          <li> 
 +            Single-Engine Aircraft
             <ol>             <ol>
-              <li> Tail wheel </li> +              <li> 
-              <li> Tricycle </li> +                Tail wheel 
-            </ol> <br />+              </li> 
 +              <li> 
 +                Tricycle 
 +              </li> 
 +            </ol> 
 +            <br />
           </li>           </li>
-          <li> Dual-Engine Aircraft+          <li> 
 +            Dual-Engine Aircraft
             <ol>             <ol>
-              <li> Wing-mounted engines </li> +              <li> 
-              <li> Push-pull fuselage-mounted engines </li>+                Wing-mounted engines 
 +              </li> 
 +              <li> 
 +                Push-pull fuselage-mounted engines 
 +              </li>
             </ol>             </ol>
           </li>           </li>
- </ol> <br />+        </ol> 
 +        <br />
       </li>       </li>
-      <li> Commercial Aviation (jet engines) +      <li> 
- <ol> +        Commercial Aviation (jet engines) 
-   <li> Dual-Engine +        <ol> 
-     <ol> +          <li> 
-       <li> Wing-mounted engines </li> +            Dual-Engine 
-       <li> Fuselage-mounted engines </li> +            <ol> 
-     </ol> <br /> +              <li> 
-   </li> +                Wing-mounted engines 
-   <li> Tri-Engine +              </li> 
-     <ol> +              <li> 
-       <li> Third engine in vertical stabilizer </li> +                Fuselage-mounted engines 
-       <li> Third engine in fuselage </li> +              </li> 
-     </ol> +            </ol> 
-   </li> +            <br /> 
- </ol>+          </li> 
 +          <li> 
 +            Tri-Engine 
 +            <ol> 
 +              <li> 
 +                Third engine in vertical stabilizer 
 +              </li> 
 +              <li> 
 +                Third engine in fuselage 
 +              </li> 
 +            </ol> 
 +          </li> 
 +        </ol>
       </li>       </li>
     </ol>     </ol>
Line 735: Line 758:
  
 ---- ----
-<code html> +<code html|An example to illustrate definition lists> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html> 
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +
 <!-- definition.html <!-- definition.html
-     An example to illustrate definition lists +An example to illustrate definition lists 
-     --> +--> 
-<html xmnls="http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> Definition lists </title>+  <head> 
 +    <meta charset="utf-8" /> 
 +    <title> Definition lists </title>
   </head>   </head>
   <body>   <body>
     <h3> Single-Engine Cessna Airplanes </h3>     <h3> Single-Engine Cessna Airplanes </h3>
     <dl>     <dl>
-      <dt> 152 </dt> +      <dt> 
-      <dd> Two-place trainer </dd> +        152 
-      <dt> 172 </dt> +      </dt> 
-      <dd> Smaller four-place airplane </dd> +      <dd> 
-      <dt> 182 </dt> +        Two-place trainer 
-      <dd> Larger four-place airplane </dd> +      </dd> 
-      <dt> 210 </dt> +      <dt> 
-      <dd> Six-place airplane - high performance </dd>+        172 
 +      </dt> 
 +      <dd> 
 +        Smaller four-place airplane 
 +      </dd> 
 +      <dt> 
 +        182 
 +      </dt> 
 +      <dd> 
 +        Larger four-place airplane 
 +      </dd> 
 +      <dt> 
 +        210 
 +      </dt> 
 +      <dd> 
 +        Six-place airplane - high performance 
 +      </dd>
     </dl>     </dl>
   </body>   </body>
Line 800: Line 838:
  
 ---- ----
-<code html> +<code html|An example of a simple table> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +
 <!-- table.html <!-- table.html
-     An example of a simple table +An example of a simple table 
-  --> +--> 
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> A simple table </title>+  <head> 
 +    <meta charset="utf-8" /> 
 +    <title> A simple table </title>
   </head>   </head>
   <body>   <body>
-    <table border = "border"> +    <table border="border"> 
-      <caption> Fruit Juice Drinks </caption>+      <caption> 
 +        Fruit Juice Drinks 
 +      </caption>
       <tr>       <tr>
-        <th> </th>+        <th></th>
         <th> Apple </th>         <th> Apple </th>
         <th> Orange </th>         <th> Orange </th>
Line 821: Line 860:
       </tr>       </tr>
       <tr>       <tr>
- <th> Breakfast </th> +        <th> Breakfast </th> 
- <td> 0 </td> +        <td> 0 </td> 
- <td> 1 </td> +        <td> 1 </td> 
- <td> 0 </td>+        <td> 0 </td>
       </tr>       </tr>
       <tr>       <tr>
- <th> Lunch </th> +        <th> Lunch </th> 
- <td> 1 </td> +        <td> 1 </td> 
- <td> 0 </td> +        <td> 0 </td> 
- <td> 0 </td>+        <td> 0 </td>
       </tr>       </tr>
       <tr>       <tr>
- <th> Dinner </th> +        <th> Dinner </th> 
- <td> 0 </td> +        <td> 0 </td> 
- <td> 0 </td> +        <td> 0 </td> 
- <td> 1 </td>+        <td> 1 </td>
       </tr>       </tr>
     </table>     </table>
Line 915: Line 954:
   * Download the colspan/rowspan example: [[/eg-259/examples/lecture2/cell_span.html|cell_span.html]]. Here is the complete source code:   * Download the colspan/rowspan example: [[/eg-259/examples/lecture2/cell_span.html|cell_span.html]]. Here is the complete source code:
 <code html> <code html>
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html|An example to illustrate rowspan and colspan>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +
 <!-- cell_span.html <!-- cell_span.html
-     An example to illustrate rowspan and colspan +An example to illustrate rowspan and colspan 
-     --> +--> 
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> Rowspan and colspan </title>+  <head> 
 +    <meta charset="utf-8" /> 
 +    <title> Rowspan and colspan </title>
   </head>   </head>
   <body>   <body>
-<table border = "border"> +    <table border = "border"> 
-      <caption> Fruit Juice Drinks and Meals </caption>+      <caption> 
 +        Fruit Juice Drinks and Meals 
 +      </caption>
       <tr>       <tr>
         <td rowspan = "2"> &nbsp; </td>         <td rowspan = "2"> &nbsp; </td>
Line 959: Line 999:
 </html> </html>
 </code> </code>
- 
- 
-//**Tables – alignment**// 
- 
-  * The align attribute controls the horizontal placement of the contents in a table cell 
-    * ''align'' is an attribute of ''<tr>'', ''<th>'', and ''<td>'' elements 
-    * Values are ''left'', ''right'', and ''center'' (default) 
-      * note the American English spelling of ''center''. 
-  * The ''valign'' attribute controls the vertical placement of the contents of a table cell 
-    * ''valign'' is an attribute of ''<th>'' and ''<td>'' elements 
-    * Values are ''top'', ''bottom'', and ''center'' (default) 
-  * Example of cell alignment: [[/eg-259/examples/lecture2/cell_align.html|cell_align.html]] 
-<code html> 
-<?xml version = "1.0" encoding = "utf-8"?> 
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" 
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
- 
-<!-- cell_align.html 
-     An example to illustrate align and valign 
-     --> 
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
-  <head> <title> Alignment in cells </title> 
-  </head> 
-  <body> 
-<table border = "border"> 
-      <caption> The align and valign attributes </caption> 
-      <tr align = "center"> 
-     <th> </th> 
- <th> Column Label </th> 
- <th> Another One </th> 
- <th> Still Another One </th> 
-      </tr> 
-      <tr> 
-        <th> align </th> 
-        <td align = "left"> Left </th> 
-        <td align = "center"> Center </th> 
-        <td align = "right"> Right </th> 
-      </tr> 
-      <tr> 
-        <th> <br /> valign <br /> <br /> </th> 
-        <td> Default  </th> 
-        <td valign = "top"> Top </th> 
-        <td align = "bottom"> Bottom </th> 
-      </tr> 
-    </table> 
-  </body> 
-</html> 
-</code> 
- 
-//**Tables -- cell spacing**// 
- 
-  * The ''cellspacing'' attribute of ''<table>'' is used to specify the distance between cells in a table 
-  * The ''cellpadding'' attribute of ''<table>'' is used to specify the spacing between the content of a cell and the inner walls of the cell 
-  * Example: [[/eg-259/examples/lecture2/space_pad.html|space_pad.html]] 
-<code html> 
-<?xml version = "1.0" encoding = "utf-8"?> 
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" 
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
- 
-<!-- space_pad.html 
-     An example that illustrates the cellspacing and 
-     cellpadding table attributes 
-     --> 
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="en"> 
-  <head> <title> Cell spacing and cell padding </title> 
-  </head> 
-  <body> 
-    <b>Table 1 (space = 10, pad = 30) </b><br /><br /> 
-    <table border = "5"  cellspacing = "10"  cellpadding = "30"> 
-      <tr> 
-        <td> Small spacing, </td> 
-        <td> large padding </td> 
-      </tr> 
-    </table> 
-    <br /><br /><br /><br /> 
-    <b>Table 2 (space = 30, pad = 10) </b><br /><br /> 
-    <table border = "5"  cellspacing = "30"  cellpadding = "10"> 
-      <tr> 
-        <td> Large spacing, </td> 
-        <td> small padding </td> 
-      </tr> 
-    </table> 
-  </body> 
-</html> 
-</code> 
- 
- 
 ===== Table Sections ===== ===== Table Sections =====
  
Line 1058: Line 1011:
     * You can make up the data cell values.     * You can make up the data cell values.
   - Modify, test and validate an XHTML document from Exercise 1 to add a second level column label, Tree, and a second-level row label, Characteristics.   - Modify, test and validate an XHTML document from Exercise 1 to add a second level column label, Tree, and a second-level row label, Characteristics.
-  - Create, test and validate an XHTML document to describe a table with columns for country, national language, capital city and population. There must be at least five countries in the table. You must include attribute specifications for cell padding and cell spacing.+  - Create, test and validate an XHTML document to describe a table with columns for country, national language, capital city and population. There must be at least five countries in the table.
  
  
eg-259/xhtml.txt · Last modified: 2012/02/01 20:18 by eechris