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 14:56] – [Exercises to Demonstrate Tables] 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 1019: | 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 1183: | Line 1012: | ||
| * [[eg-259: | * [[eg-259: | ||
| * [[eg-259: | * [[eg-259: | ||
| - | * [[eg-259: | + | * [[eg-259: |
| * [[eg-259: | * [[eg-259: | ||
eg-259/xhtml.1327071386.txt.gz · Last modified: 2012/01/20 14:56 by eechris