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:48] – [Table Rows and Cells] 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 = " | <?xml version = " | ||
Line 949: | Line 1009: | ||
* '' | * '' | ||
* Values are '' | * Values are '' | ||
- | * Example of cell alignment: [[/~eechris/ | + | * Example of cell alignment: [[/ |
<code html> | <code html> | ||
<?xml version = " | <?xml version = " | ||
Line 991: | Line 1051: | ||
* The '' | * The '' | ||
* The '' | * The '' | ||
- | * Example: [[/~eechris/ | + | * Example: [[/ |
<code html> | <code html> | ||
<?xml version = " | <?xml version = " | ||
Line 1082: | Line 1142: | ||
* 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 1161: | ||
</ | </ | ||
* 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 1190: | ||
</ | </ | ||
</ | </ | ||
- | * and [[/~eechris/ | + | * and [[/ |
<code html> | <code html> | ||
<?xml version = " | <?xml version = " | ||
Line 1154: | Line 1214: | ||
</ | </ | ||
</ | </ | ||
- | * 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 1244: | ||
</ | </ | ||
</ | </ | ||
- | * 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