eg-259:xhtml
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
eg-259:xhtml [2012/01/20 13:43] – [Headings] eechris | eg-259:xhtml [2012/01/20 14:56] – [Exercises to Demonstrate Tables] eechris | ||
---|---|---|---|
Line 252: | Line 252: | ||
**//Code for the Example//** | **//Code for the Example//** | ||
- | <code html> | + | <code html|An example to illustrate a blockquote> |
- | <?xml version = " | + | < |
- | < | + | |
- | " | + | |
<!-- blockquote.html | <!-- blockquote.html | ||
- | An example to illustrate a blockquote | + | An example to illustrate a blockquote |
- | | + | --> |
- | < | + | <html lang=" |
- | < | + | < |
+ | <meta charset=" | ||
+ | | ||
</ | </ | ||
< | < | ||
<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, | in Gettysburg, Pennsylvania, | ||
- | speech began with | + | speech began with |
</p> | </p> | ||
< | < | ||
<p> | <p> | ||
" | " | ||
- | 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> |
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> | ||
</ | </ | ||
<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 = " | + | < |
- | < | + | |
- | " | + | |
<!-- image.html | <!-- image.html | ||
An example to illustrate an image | An example to illustrate an image | ||
| | ||
- | < | + | <html lang=" |
- | < | + | < |
+ | <meta charset=" | ||
+ | | ||
</ | </ | ||
< | < | ||
Line 491: | Line 490: | ||
//**Code for the Example**// | //**Code for the Example**// | ||
- | <code html> | + | <code html|An example to illustrate a link> |
- | <?xml version = " | + | < |
- | < | + | |
- | " | + | |
<!-- link.html | <!-- link.html | ||
An example to illustrate a link | An example to illustrate a link | ||
| | ||
- | < | + | <html lang=" |
- | < | + | < |
+ | <meta charset=" | ||
+ | | ||
</ | </ | ||
< | < | ||
Line 522: | Line 521: | ||
The Link Target is [[/ | The Link Target is [[/ | ||
- | <code html> | + | <code html|An example to illustrate the target of a link> |
- | <?xml version = " | + | < |
- | < | + | |
- | " | + | |
<!-- C210data.html | <!-- C210data.html | ||
An example to illustrate the target of a link | An example to illustrate the target of a link | ||
| | ||
- | < | + | <html lang=" |
- | < | + | < |
+ | <meta charset=" | ||
+ | | ||
</ | </ | ||
< | < | ||
Line 609: | Line 608: | ||
---- | ---- | ||
- | <code html> | + | <code html|An example to illustrate an unordered list> |
- | <?xml version = " | + | < |
- | < | + | |
- | " | + | |
<!-- unordered.html | <!-- unordered.html | ||
An example to illustrate an unordered list | An example to illustrate an unordered list | ||
| | ||
- | < | + | <html lang=" |
- | < | + | < |
+ | <meta charset=" | ||
+ | | ||
</ | </ | ||
< | < | ||
Line 639: | Line 638: | ||
---- | ---- | ||
- | <code html> | + | <code html|An example to illustrate an ordered list> |
- | <?xml version = " | + | < |
- | < | + | |
- | " | + | |
<!-- ordered.html | <!-- ordered.html | ||
An example to illustrate an ordered list | An example to illustrate an ordered list | ||
| | ||
- | < | + | <html lang=" |
- | < | + | < |
+ | <meta charset=" | ||
+ | | ||
</ | </ | ||
< | < | ||
Line 672: | Line 671: | ||
---- | ---- | ||
- | <code html> | + | <code html|An example to illustrate nested lists> |
- | <?xml version = " | + | < |
- | < | + | |
- | " | + | |
<!-- nested_lists.html | <!-- nested_lists.html | ||
- | An example to illustrate nested lists | + | An example to illustrate nested lists |
- | --> | + | --> |
- | < | + | <html lang=" |
- | < | + | < |
+ | <meta charset=" | ||
+ | | ||
</ | </ | ||
< | < | ||
<h3> Aircraft Types </h3> | <h3> Aircraft Types </h3> | ||
<ol> | <ol> | ||
- | <li> General Aviation (piston-driven engines) | + | <li> |
+ | | ||
<ol> | <ol> | ||
- | <li> Single-Engine Aircraft | + | <li> |
+ | | ||
<ol> | <ol> | ||
- | <li> Tail wheel </ | + | <li> |
- | <li> Tricycle </ | + | |
- | </ol> <br /> | + | |
+ | <li> | ||
+ | | ||
+ | | ||
+ | </ol> | ||
+ | | ||
</li> | </li> | ||
- | <li> Dual-Engine Aircraft | + | <li> |
+ | | ||
<ol> | <ol> | ||
- | <li> Wing-mounted engines </ | + | <li> |
- | <li> Push-pull fuselage-mounted engines </li> | + | |
+ | | ||
+ | <li> | ||
+ | | ||
+ | | ||
</ol> | </ol> | ||
</li> | </li> | ||
- | </ol> <br /> | + | |
+ | | ||
</li> | </li> | ||
- | <li> Commercial Aviation (jet engines) | + | <li> |
- | < | + | |
- | | + | < |
- | | + | <li> |
- | | + | |
- | | + | < |
- | | + | <li> |
- | | + | |
- | | + | |
- | | + | <li> |
- | | + | |
- | | + | |
- | | + | </ol> |
- | | + | |
- | </ | + | </ |
+ | <li> | ||
+ | | ||
+ | < | ||
+ | <li> | ||
+ | | ||
+ | | ||
+ | <li> | ||
+ | | ||
+ | | ||
+ | </ | ||
+ | </ | ||
+ | </ol> | ||
</li> | </li> | ||
</ol> | </ol> | ||
Line 735: | Line 758: | ||
---- | ---- | ||
- | <code html> | + | <code html|An example to illustrate definition lists> |
- | <?xml version = " | + | < |
- | < | + | |
- | " | + | |
<!-- definition.html | <!-- definition.html | ||
- | An example to illustrate definition lists | + | An example to illustrate definition lists |
- | | + | --> |
- | < | + | <html lang=" |
- | < | + | < |
+ | <meta charset=" | ||
+ | | ||
</ | </ | ||
< | < | ||
<h3> Single-Engine Cessna Airplanes </h3> | <h3> Single-Engine Cessna Airplanes </h3> | ||
<dl> | <dl> | ||
- | <dt> 152 </ | + | <dt> |
- | <dd> Two-place trainer </ | + | |
- | <dt> 172 </ | + | |
- | <dd> Smaller four-place airplane </ | + | <dd> |
- | <dt> 182 </ | + | |
- | <dd> Larger four-place airplane </ | + | |
- | <dt> 210 </ | + | <dt> |
- | <dd> Six-place airplane - high performance </dd> | + | |
+ | | ||
+ | <dd> | ||
+ | | ||
+ | | ||
+ | <dt> | ||
+ | | ||
+ | | ||
+ | <dd> | ||
+ | | ||
+ | | ||
+ | <dt> | ||
+ | | ||
+ | | ||
+ | <dd> | ||
+ | | ||
+ | | ||
</dl> | </dl> | ||
</ | </ | ||
Line 800: | Line 838: | ||
---- | ---- | ||
- | <code html> | + | <code html|An example of a simple table> |
- | <?xml version = " | + | < |
- | < | + | |
- | " | + | |
<!-- table.html | <!-- table.html | ||
- | An example of a simple table | + | An example of a simple table |
- | --> | + | --> |
- | < | + | <html lang=" |
- | < | + | < |
+ | <meta charset=" | ||
+ | | ||
</ | </ | ||
< | < | ||
- | <table border = " | + | <table border=" |
- | < | + | < |
+ | | ||
+ | | ||
<tr> | <tr> | ||
- | <th> </th> | + | < |
<th> Apple </th> | <th> Apple </th> | ||
<th> Orange </th> | <th> Orange </th> | ||
Line 821: | Line 860: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
- | <th> Breakfast </ | + | |
- | <td> 0 </ | + | <td> 0 </ |
- | <td> 1 </ | + | <td> 1 </ |
- | <td> 0 </td> | + | <td> 0 </td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
- | <th> Lunch </ | + | |
- | <td> 1 </ | + | <td> 1 </ |
- | <td> 0 </ | + | <td> 0 </ |
- | <td> 0 </td> | + | <td> 0 </td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
- | <th> Dinner </ | + | |
- | <td> 0 </ | + | <td> 0 </ |
- | <td> 0 </ | + | <td> 0 </ |
- | <td> 1 </td> | + | <td> 1 </td> |
</tr> | </tr> | ||
</ | </ | ||
Line 915: | Line 954: | ||
* Download the colspan/ | * Download the colspan/ | ||
<code html> | <code html> | ||
- | <?xml version = " | + | < |
- | < | + | |
- | " | + | |
<!-- cell_span.html | <!-- cell_span.html | ||
- | An example to illustrate rowspan and colspan | + | An example to illustrate rowspan and colspan |
- | | + | --> |
- | < | + | <html lang=" |
- | < | + | < |
+ | <meta charset=" | ||
+ | | ||
</ | </ | ||
< | < | ||
- | <table border = " | + | |
- | < | + | < |
+ | | ||
+ | | ||
<tr> | <tr> | ||
<td rowspan = " | <td rowspan = " | ||
Line 959: | Line 999: | ||
</ | </ | ||
</ | </ | ||
- | |||
- | |||
- | //**Tables – alignment**// | ||
- | |||
- | * The align attribute controls the horizontal placement of the contents in a table cell | ||
- | * '' | ||
- | * Values are '' | ||
- | * note the American English spelling of '' | ||
- | * The '' | ||
- | * '' | ||
- | * Values are '' | ||
- | * Example of cell alignment: [[/ | ||
- | <code html> | ||
- | <?xml version = " | ||
- | < | ||
- | " | ||
- | |||
- | <!-- cell_align.html | ||
- | An example to illustrate align and valign | ||
- | | ||
- | <html xmlns=" | ||
- | < | ||
- | </ | ||
- | < | ||
- | <table border = " | ||
- | < | ||
- | <tr align = " | ||
- | <th> </th> | ||
- | < | ||
- | < | ||
- | < | ||
- | </tr> | ||
- | <tr> | ||
- | <th> align </th> | ||
- | <td align = " | ||
- | <td align = " | ||
- | <td align = " | ||
- | </tr> | ||
- | <tr> | ||
- | <th> <br /> valign <br /> <br /> </th> | ||
- | <td> Default | ||
- | <td valign = " | ||
- | <td align = " | ||
- | </tr> | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | //**Tables -- cell spacing**// | ||
- | |||
- | * The '' | ||
- | * The '' | ||
- | * Example: [[/ | ||
- | <code html> | ||
- | <?xml version = " | ||
- | < | ||
- | " | ||
- | |||
- | <!-- space_pad.html | ||
- | An example that illustrates the cellspacing and | ||
- | | ||
- | | ||
- | <html xmlns = " | ||
- | < | ||
- | </ | ||
- | < | ||
- | < | ||
- | <table border = " | ||
- | <tr> | ||
- | <td> Small spacing, </td> | ||
- | <td> large padding </td> | ||
- | </tr> | ||
- | </ | ||
- | <br /><br /><br /><br /> | ||
- | < | ||
- | <table border = " | ||
- | <tr> | ||
- | <td> Large spacing, </td> | ||
- | <td> small padding </td> | ||
- | </tr> | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | |||
===== 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