eg-259:xhtml
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| eg-259:xhtml [2012/01/20 13:50] – [Hypertext Links] eechris | eg-259:xhtml [2012/02/01 20:18] (current) – [Reasons to use XHTML, rather than HTML] eechris | ||
|---|---|---|---|
| Line 18: | Line 18: | ||
| ===== Origins and Evolution of HTML ===== | ===== Origins and Evolution of HTML ===== | ||
| - | * HTML was defined with SGML | + | * There is a comprehensive History of the evolution |
| - | * Original intent | + | * Mark Pilgrim gives a very readable account of the road to HTML5 in [[http:// |
| - | * Recent versions: | + | |
| - | * HTML 4.0 -- 1997 | + | |
| - | * HTML 4.01 -- 1999 | + | |
| - | * XHTML 1.0 -- 2000 | + | |
| - | * XHTML 1.1 -- 2001 | + | |
| - | | + | |
| - | * Development of XHTML 2 ceased in 2010. HTML5 became mainstream in 2011. | + | |
| - | ---- | + | ===== Reasons to use the XHTML syntax |
| - | + | ||
| - | //**More about the versions**// | + | |
| - | + | ||
| - | * HTML 4.0 -- 1997 | + | |
| - | * Introduced many new features and deprecated | + | |
| - | many older features | + | |
| - | * HTML 4.01 -- 1999 | + | |
| - | * A cleanup of 4.0 | + | |
| - | * XHTML 1.0 -- 2000 | + | |
| - | * Just 4.01 defined using XML, instead of SGML | + | |
| - | * XHTML 1.1 -- 2001 | + | |
| - | * Modularized 1.0, and drops frames | + | |
| - | * We'll stick to 1.1 and avoid frames | + | |
| - | * XHTML 2 and HTML 5 -- under development as of 2008, some browser support planned for Firefox 3.1 | + | |
| - | + | ||
| - | + | ||
| - | ===== Reasons to use XHTML, rather than HTML ===== | + | |
| * HTML has lax syntax rules, leading to sloppy and sometimes ambiguous documents | * HTML has lax syntax rules, leading to sloppy and sometimes ambiguous documents | ||
| * HTML processors do not even enforce the few syntax rule that do exist in HTML | * HTML processors do not even enforce the few syntax rule that do exist in HTML | ||
| Line 258: | Line 234: | ||
| --> | --> | ||
| <html lang=" | <html lang=" | ||
| - | | + | |
| - | <meta charset=" | + | <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> |
| - | " | + | " |
| - | 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> |
| - | 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> |
| - | 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. |
| - | </ | + | </ |
| - | </ | + | </ |
| </ | </ | ||
| </ | </ | ||
| Line 608: | Line 584: | ||
| ---- | ---- | ||
| - | <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 638: | Line 614: | ||
| ---- | ---- | ||
| - | <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 671: | Line 647: | ||
| ---- | ---- | ||
| - | <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 734: | Line 734: | ||
| ---- | ---- | ||
| - | <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 799: | Line 814: | ||
| ---- | ---- | ||
| - | <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 820: | Line 836: | ||
| </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 914: | Line 930: | ||
| * 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 958: | Line 975: | ||
| </ | </ | ||
| </ | </ | ||
| - | |||
| - | |||
| - | //**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 1057: | Line 987: | ||
| * 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 1065: | Line 995: | ||
| * 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. | ||
| Line 1229: | Line 1012: | ||
| * [[eg-259: | * [[eg-259: | ||
| * [[eg-259: | * [[eg-259: | ||
| - | * [[eg-259: | + | * [[eg-259: |
| * [[eg-259: | * [[eg-259: | ||
eg-259/xhtml.1327067459.txt.gz · Last modified: 2012/01/20 13:50 by eechris