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 15:17] – [Frames] 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 1045: | Line 1019: | ||
* Frames are rectangular sections of the display window, each of which can display a different document | * Frames are rectangular sections of the display window, each of which can display a different document | ||
- | * Because frames are no longer part of XHTML, you cannot validate a document that includes frames | + | * Because frames are no longer part of HTML5, you cannot validate a document that includes frames |
* For this reason we shall say no more about them in this module! | * For this reason we shall say no more about them in this module! | ||
- | * There is more information, | ||
- | * This will **not** be examined. | ||
- | |||
- | ---- | ||
- | |||
- | //**More on Frames (not examined)**// | ||
- | |||
- | * The ''< | ||
- | * ''< | ||
- | * ''< | ||
- | * Default is '' | ||
- | * The possible values for '' | ||
- | * A number value specifies the row height in pixels - Not terribly useful! | ||
- | * A percentage specifies the percentage of total window height for the row - Very useful! | ||
- | * An asterisk after some other specification gives the remainder of the height of the window | ||
- | * Examples: | ||
- | <code html> | ||
- | < | ||
- | |||
- | < | ||
- | |||
- | < | ||
- | |||
- | < | ||
- | cols = "40%, *"> | ||
- | </ | ||
- | * The ''< | ||
- | * The first ''< | ||
- | * Row-major order is used | ||
- | * Frame content is specified with the '' | ||
- | * Without a '' | ||
- | * If ''< | ||
- | * Scrollbars are implicitly included if needed (they are needed if the specified document will not fit) | ||
- | * If a '' | ||
- | * **Note** The Frameset standard must be specified in the '' | ||
- | * See the frame: [[/ | ||
- | <code html> | ||
- | <?xml version = " | ||
- | < | ||
- | " | ||
- | |||
- | <!-- frames.html | ||
- | An example to illustrate frames | ||
- | | ||
- | <html xmlns = " | ||
- | < | ||
- | </ | ||
- | < | ||
- | <frame src = " | ||
- | <frame src = " | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | * The '' | ||
- | * Here the contents of the first frame of '' | ||
- | <code html> | ||
- | <?xml version = " | ||
- | < | ||
- | " | ||
- | |||
- | <!-- contents.html | ||
- | The contents of the first frame of frames.html, | ||
- | which is the table of contents for the second frame | ||
- | | ||
- | <html xmnls=" | ||
- | < | ||
- | </ | ||
- | < | ||
- | <h4> Fruits </h4> | ||
- | <ul> | ||
- | <li> <a href = " | ||
- | apples </ | ||
- | </li> | ||
- | <li> <a href = " | ||
- | bananas </a> | ||
- | </li> | ||
- | <li> <a href = " | ||
- | oranges </a> | ||
- | </li> | ||
- | </ul> | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | * and [[/ | ||
- | <code html> | ||
- | <?xml version = " | ||
- | < | ||
- | " | ||
- | |||
- | <!-- fruits.html | ||
- | The initial contents of the second frame | ||
- | of frames.html - a general description of fruit | ||
- | | ||
- | <html xmlns = " | ||
- | < | ||
- | </ | ||
- | < | ||
- | <p> | ||
- | A fruit is the mature ovary in a flowering plant. | ||
- | Fruit is clasified by several characteristics, | ||
- | most important being the number of ovaries included. | ||
- | If only a single ovary is included, it is called a | ||
- | simple fruit. | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | * For the frames example to work, you will need to download [[/ | ||
- | |||
- | **//Nested Frames//** | ||
- | |||
- | * It is possible to use nested frames to divide the screen in more interesting ways. | ||
- | * Here is an example of nested frames ([[/ | ||
- | <code html> | ||
- | <?xml version = " | ||
- | < | ||
- | " | ||
- | |||
- | <!-- nested_frames.html | ||
- | An example to illustrate nested frames | ||
- | | ||
- | <html xmlns = " | ||
- | < | ||
- | </ | ||
- | < | ||
- | < | ||
- | <frame src = " | ||
- | <frame src = " | ||
- | </ | ||
- | < | ||
- | <frame src = " | ||
- | <frame src = " | ||
- | <frame src = " | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | * 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 ''< | ||
- | |||
- | **// | ||
- | |||
- | - Create, test and validate an XHTML document that includes two rows of frames with two frames in each row. The two left-hand frames must occupy 25 percent of the width of the display. The bottom two frames must occupy 40 percent of the height of the display. | ||
- | * The top-left frame must display the name of your mother and all of her siblings. (There must be a minimum of two siblings, make them up if you must.) | ||
- | * the bottom-left frame must display the name of your father and all of his siblings. (Once again, there must be a minimum of two siblings.) | ||
- | * Each name in the left frames must be link to a document that is displayed in the right-hand frame when the link is selected. | ||
- | * The documents in the right-hand frames are short descriptions of the people. | ||
eg-259/xhtml.txt · Last modified: 2012/02/01 20:18 by eechris