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:35] – [Line Breaks] eechris | eg-259:xhtml [2012/01/20 14:56] – [Exercises to Demonstrate Tables] eechris | ||
---|---|---|---|
Line 1: | Line 1: | ||
~~SLIDESHOW~~ | ~~SLIDESHOW~~ | ||
- | + | We recommend that you view this document in slideshow mode first then go back and read the notes. | |
Line 172: | Line 171: | ||
* Note that ''< | * Note that ''< | ||
- | * The example of paragraphs and line breaks: [[/~eechris/ | + | * The example of paragraphs and line breaks: [[/ |
<code html|An example of paragraphs and line breaks> | <code html|An example of paragraphs and line breaks> | ||
< | < | ||
Line 213: | Line 212: | ||
----- | ----- | ||
* //**Code for the Example**// | * //**Code for the Example**// | ||
- | <file html /eg-259/examples/lecture2/headings.html> | + | <code html|An example to illustrate headings> |
- | </file> | + | < |
+ | <!-- headings.html | ||
+ | An example to illustrate headings | ||
+ | --> | ||
+ | <html lang=" | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | <h1> Aidan' | ||
+ | <h2> The best in used airplanes (h2) </ | ||
+ | <h3> " | ||
+ | </ | ||
+ | <h4> We're the guys to see for a good used | ||
+ | | ||
+ | <h5> We offer great prices on great planes | ||
+ | (h5) </ | ||
+ | <h6> No returns, no guarantees, no refunds, | ||
+ | all sales are final (h6) </ | ||
+ | </ | ||
+ | </html> | ||
+ | </code> | ||
* //**Typical Display**// | * //**Typical Display**// | ||
{{eg-259: | {{eg-259: | ||
Line 226: | Line 247: | ||
* To set a block of text off from the normal flow and appearance of text | * To set a block of text off from the normal flow and appearance of text | ||
* Browsers often indent, and sometimes italicize | * Browsers often indent, and sometimes italicize | ||
- | * Example: [[/~eechris/ | + | * Example: [[/ |
---- | ---- | ||
**//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 404: | Line 424: | ||
* The '' | * The '' | ||
* The ''< | * The ''< | ||
- | * Example Document: [[/~eechris/ | + | * Example Document: [[/ |
---- | ---- | ||
Line 416: | 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 458: | Line 478: | ||
* The content of ''< | * The content of ''< | ||
* If the target is a whole document (not the one in which the link appears), the target need not be specified in the target document as being the target | * If the target is a whole document (not the one in which the link appears), the target need not be specified in the target document as being the target | ||
- | * Example: [[/~eechris/ | + | * Example: [[/ |
---- | ---- | ||
Line 470: | 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 500: | Line 520: | ||
//**Link Target**// | //**Link Target**// | ||
- | The Link Target is [[/~eechris/ | + | 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 585: | Line 605: | ||
* The list is the content of the ''< | * The list is the content of the ''< | ||
- | * List elements are the content of the ''< | + | * List elements are the content of the ''< |
---- | ---- | ||
- | <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 615: | Line 635: | ||
* The list is the content of the <ol> tag | * The list is the content of the <ol> tag | ||
- | * Each item in the display is preceded by a sequence value: [[/~eechris/ | + | * Each item in the display is preceded by a sequence value: [[/ |
---- | ---- | ||
- | <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 647: | Line 667: | ||
* Any type list can be nested inside any type list | * Any type list can be nested inside any type list | ||
- | * The nested list must be in a list item: [[/~eechris/ | + | * The nested list must be in a list item: [[/ |
---- | ---- | ||
- | <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 711: | Line 755: | ||
* List is the content of the ''< | * List is the content of the ''< | ||
* Terms being defined are the content of the ''< | * Terms being defined are the content of the ''< | ||
- | * The definitions themselves are the content of the ''< | + | * The definitions themselves are the content of the ''< |
---- | ---- | ||
- | <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 776: | Line 835: | ||
* The *row headings* are specified as the content of a ''< | * The *row headings* are specified as the content of a ''< | ||
* The contents of a *data cell* is specified as the content of a ''< | * The contents of a *data cell* is specified as the content of a ''< | ||
- | * An example table: [[/~eechris/ | + | * An example table: [[/ |
---- | ---- | ||
- | <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 800: | 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 892: | Line 952: | ||
</ | </ | ||
</ | </ | ||
- | * 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 938: | 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 1037: | 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. |
Line 1082: | Line 1056: | ||
* If a '' | * If a '' | ||
* **Note** The Frameset standard must be specified in the '' | * **Note** The Frameset standard must be specified in the '' | ||
- | * See the frame: [[/~eechris/ | + | * See the frame: [[/ |
<code html> | <code html> | ||
<?xml version = " | <?xml version = " | ||
Line 1101: | Line 1075: | ||
</ | </ | ||
* The '' | * The '' | ||
- | * Here the contents of the first frame of '' | + | * Here the contents of the first frame of '' |
<code html> | <code html> | ||
<?xml version = " | <?xml version = " | ||
Line 1130: | Line 1104: | ||
</ | </ | ||
</ | </ | ||
- | * and [[/~eechris/ | + | * and [[/ |
<code html> | <code html> | ||
<?xml version = " | <?xml version = " | ||
Line 1154: | Line 1128: | ||
</ | </ | ||
</ | </ | ||
- | * For the frames example to work, you will need to download [[/~eechris/ | + | * For the frames example to work, you will need to download [[/ |
**//Nested Frames//** | **//Nested Frames//** | ||
* It is possible to use nested frames to divide the screen in more interesting ways. | * It is possible to use nested frames to divide the screen in more interesting ways. | ||
- | * Here is an example of nested frames ([[/~eechris/ | + | * Here is an example of nested frames ([[/ |
<code html> | <code html> | ||
<?xml version = " | <?xml version = " | ||
Line 1184: | Line 1158: | ||
</ | </ | ||
</ | </ | ||
- | * To make this example work you will also need [[/~eechris/ | + | * To make this example work you will also need [[/ |
* Note that in practice, the successful adoption of such a complex frameset is difficult which is one reason for the removal of ''< | * Note that in practice, the successful adoption of such a complex frameset is difficult which is one reason for the removal of ''< | ||
eg-259/xhtml.txt · Last modified: 2012/02/01 20:18 by eechris