Practising: Model, test and example pages

Topics

Common

I list in this page referred model, test and example pages in my CSS-tutorial. They are related HTML, XML or CSS encoding. Some of them are very simple, but some are quite complex. I handle them in the same order as they are in my CSS-site, but it is a little bit inconsistent, because the numbering of the model pages isn't fully consistent. In addition I have put comparison pages and screen capture images. These can be use in practising.

Model, test and example pages

Pages 1-11

  1. Basic structure of HTML and XML documents
    1. Model0a.html[S][Pw] - text without any structure. It does have also a comparison page:
    2. Model0c.html[S][Pw]- organized text.
    3. Model1.html[S][Pw] - a simple paragraph.
    4. Model2.html[S][Pw] - a document tree.
    5. Model3.html[S][Pw] - a centered paragraph.
    6. Model4.html[S][Pw] - an example of linked CSS.
    7. Oppilas.html[S][Pw] - comparison between a page without style sheets and a the page 2, which use style sheets.
    8. Model4a.html[S][Pw] - an example of simple XHTML-document.
  2. Definition methods
    1. Model5.html[S][Pw] - a model of the usage of the style attribute. Concerns also the page 11, Visual formatting model (position:absolute).
    2. Model5a.html[S][Pw] - a model of the usage of the style attribute and external style sheets.
    3. Model5b.html[S][Pw] - a model of the usage of the STYLE element and external style sheets.
    4. Model6.html[S][Pw] - an example of an incorrect set @import at-rule and concerning the page 4, Selectors examples of invalid named selectors. It has also a parallel model page Model6NoDTD.html[S][Pw].
    5. Model6a.html[S][Pw] - demonstrations of the differences of various browsers.
    6. Model7.html[S][Pw] - a model of using shorthand properties (concerns also the page 8, Backgrounds and borders).
  3. Units, colors and keywords
    1. Model8.html[S][Pw] - a model page of the usage of text colors.
    2. Model8a.html[S][Pw] - another model page of the usage of text colors.
    3. Model8b.html[S][Pw] - a model page of the usage of relative font-size values.
    4. Model8c.html[S][Pw] - a comparison page of xx-small - xx-large font sizes.
  4. Selectors (+ following: 12.)
    1. Model9.html [S][Pw] - an example of the usage of universal selectors.
    2. Model10.html[S][Pw] - a model of the usage of an element type selector (H2).
    3. Model11.html[S][Pw] - grouping examples. It has also a model of a table resembling list, which concerns the page 9, Lists.
    4. Model12.html[S][Pw] - a model of the usage of class selectors.
    5. Model13.html[S][Pw] - a model of the usage of attribute selectors.
    6. Model14.html[S][Pw] - a model of the usage of id-selectors.
    7. Virheet.php3#listat2[S][Pw] - a test to attribute and id-selectors.
    8. Model15.html[S][Pw] - a model of the usage of paragraph related pseudo-elements.
  5. Processing order
    1. Model16.html[S][Pw] - a model of contextual selectors.
    2. Model17.html[S][Pw] - another model of contextual selectors. Concerns also the pages 9, Lists.
    3. Virheet.php3#listat[S][Pw] - a selector test with list elements. Concerns also the pages 9, Lists.
    4. Model18.html[S][Pw] - a model of the usage of the !important rule.
  6. Font and text properties + media types
    1. Model19.html[S][Pw] - models of defining the FONT element.
    2. Model20.html[S][Pw] - a model of basic font definitions to the BODY element.
    3. Model21.html[S][Pw] - a model of defining the H2 element.
    4. Model22.html[S][Pw] - a model of defining shorthand properties of font property (concerns also the page 8, Backgrounds and borders).
    5. Virheet.php3#fontti[S][Pw] - in this place was intention to have a test concerning supporting the @font-face at-rule but I don't have a suitable font file at this moment. That's why there is not really a test.
  7. Anchors and links (+ following: 44., 57., 58.)
    1. ../Yleiset/englishb2.htm[S] - demonstrates the usage of link and dynamic pseudo-classes.
    2. ../Tests/ElementitTestB.html[S] - tests the property display with image links. Concerns also the page 11, Visual formatting model.
  8. Backgrounds and borders (+ following: 14., 34.)
    1. Model23.html[S][Pw] - a model of border properties to a BLOCKQUOTE element.
    2. Virheet.php3#reunat[S][Pw] - demonstrates problems with borders to inline level elements.
    3. ../Nt/Illegal.php3[S][Pw] - another page, which has an example, which demonstrates problems with borders to inline level elements.
    4. Model23a.html[S][Pw] - a model of using box dimension properties with following screen captures:
    5. ../modeltable2.html[S] - demonstrates the previous problem. Concerns also the page 11, Visual formatting model (position:fixed).
    6. ../Tests/Girl.html[S] - test supporting of background-attachment:fixed and position:fixed; I have taken three screen captures of the page:
    7. Model23b.html[S][Pw] - an example of form elements and a screen capture ../Tests/model000.gif[S] from Mozilla 0.7. In this page is used dynamic pseudo-classes, when this model concerns also the page 7, Anchors and links.
  9. Lists (+ following: 21., 28., 29.)
    1. Model24.html[S][Pw] - a model of the usage of the list-style-image property.
    2. ../Nt/MISSION_FAILED.php3#Summary[S][Pw] - an example of using small faces as list markers.
    3. ../Tests/ElementitListTest.html[S] - test indents, when margin:0, but the padding is undefined. I took two screen captures of it:
    4. Model24a.html[S][Pw] - tests generated contents, quotes and some values of the display property. This model concerns also the page 11, Visual formatting model. ../Tests/Quotes.html[S] is an additional test page for quotes.
  10. Tables
    1. Model25.html[S][Pw] - demonstrations of border-collapse, border, background and some other properties in tables.
    2. Model25a.html[S][Pw] - another model, which demonstrations of border-collapse, border and background properties in tables.
    3. Model25b.html[S][Pw] - demonstrations of caption-side, border, background and some other properties in tables.
    4. ../HTMLKit/Attributes2.php3[S] - an example of a heavy table, which use the table-layout:fixed table layout model.
  11. Visual formatting model (+ following: 5., 37., 42., 49.)
    1. Model26.html[S][Pw] - a model of using the float property.
    2. Model27.html[S][Pw] - another model of using the float property.
    3. ../Tests/ElementitTestFloat.html[S] - an example page of using the float property. If you have Opera 4.x+, it gives also in the full screen mode an example of a "slide show" (change "slides" with PageUp/PageDown keys).
    4. Model28.html[S][Pw] - a model of the usage of the position:absolute.
    5. Model29.html[S][Pw] - a model of the usage of the display property as an alternative to the visibility property. In this page is used dynamic pseudo-classes, when this model concerns also the page 7, Anchors and links.
    6. Model30.html[S][Pw] - a model of the usage of the visibility property as an alternative to the display property. In this page is used dynamic pseudo-classes, when this model concerns also the page 7, Anchors and links.
    7. Model30b.html[S][Pw] - a model of the usage of the display:none to hide elements.
    8. Model31.html[S][Pw] - a model of the usage of the position:fixed.
    9. Model31b.html[S][Pw]- another model of the usage of the position:fixed.
    10. ../Tests/BasicLayout.html[S] - model of the usage position:fixed and margin:auto. I have screen captures of it:
    11. ../Nt/ongelmia-us.xml[S][Pw] - an example of XML + CSS, which tests especially the display-property. It has following comparison pages and a screen capture:
    12. ../Tests/Model25b.xml[S] - another XML-example, which use the display-property.

Appendix pages

  1. XML & CSS:
  1. Netscapen ongelmia:
    • ../Tests/Mozilla09Menu.gif[S] - shows some positioning errors in some Mozilla 0.9 based builds.
    • ../Tests/NatureSiteMap.php[S] - a model of incorrect hiding of some elements. This model shows also other problems. Into this page has been referred also appendix pages K Opera problems and Q Dynamic menus. It has now two comparison pages:
  1. Dynamic menus:

Other pages