HTML 3.2 Test Page

Thanks to Peter H. S. Madsen [His home page] for building this page and letting us use it.

This page contains examples of almost all of the HTML 3.2 tags (and a few HTML 4.0 inline tags).

A red asterix (*) indicates tags or attributes, which do not follow the HTML 3.2 (Wilbur) standard. These (few) elements are included, because they are supported by the two major browsers: Netscape Navigator & Microsoft Internet Explorer. No other browser specific tags and attributes are included.

Content

  1. Text:
    1. Logical Text Markup
    2. Physical Text Markup
    3. Text Containers
    4. Lists:
      1. Unordered List
      2. Ordered List
      3. Definition List
      4. Directory List
      5. Menu List
    5. Headers
    6. Relative Font Sizes
    7. Absolute Font Sizes
    8. Basefont Sizes
    9. Font Colors
    10. Font Faces*
  2. In-Tag Alignment
  3. Division Alignment:
    1. Left
    2. Right
    3. Center
  4. Centering
  5. Horisontal Rulers
  6. Tables:
    1. Table Border, Cellspacing and Cellpadding
    2. Table Cell Text Alignment
    3. Table Cell Text Wrapping
    4. Table Caption. Table Cell Width, Height, Header Style and Color*
    5. Table Cell Rowspan and Colspan
  7. Images:
    1. Image to Text Alignment
    2. Image Spacings and Borders
  8. Image Maps
  9. Forms

Text

Logical Text Markup

Emphasized, Strong, Definition, Code, Sample, Keyboard, Variable, Citation

Quote, Abbreviation, Acronym, Deleted, Inserted    (*HTML 4.0)

Physical Text Markup

Italics, Bold, Underlined, Teletype, Big, Small, Strike, Subscript, Superscript, Blinking*

Text Containers

Paragraph line 1
Paragraph line 2

Blockquote line 1
Blockquote line 2
Preformatted line 1
Preformatted line 2
Address line 1
Address line 2
Example text: <I>line 1</I> Example text: <B>line 2</B>*

Lists

Unordered List

Ordered List

  1. First level
    1. Second level (default type)
      1. Third level
      2. Third level
    2. Second level (type=1)
    3. Second level (type=a)
    4. Second level (type=A)
    5. Second level (type=i)
    6. Second level (type=I)
  2. First level
  3. First level (value=100)

Definition List

Definition term 1
Definition 1
Definition term 2
Definition 2, line1
Definition 2, line 2

Directory List

  • First item
  • Second item
    •

    Menu List

  • First item
  • Second item
    •

    Headers

    Header 1

    Header 2

    Header 3

    Header 4

    Header 5
    Header 6

    Relative Font Sizes

    Size -2, Size -1, Size -0, Size +0, Size +1, Size +2, Size +3, Size +4

    Absolute Font Sizes

    Size 1, Size 2, Size 3, Size 4, Size 5, Size 6, Size 7

    Base Font Sizes

    Size 1, Size 2, Size 3, Size 4, Size 5, Size 6, Size 7

    Basefont=7, Relative font=-2

    Font Colors

    White, Black, Red, Lime, Blue, Magenta, Yelow, Cyan,  [Link]  (Click)

    Basefont color: Magenta

    Not all browsers support the use of COLOR in the <BASEFONT> tag.

    Font Faces*

    Arial (Helvetica),  Times New Roman (Times),
    MS Sans Serif (Helv),  MS Serif (Tms Rmn),
    Courier New (Monotype)

    Font Face is not a HTML 3.2 standard, and how the text looks, depends on which fonts your Operating System chooses to use as substitutes for the fonts, if the specified fonts are not available.

    Basefont face: Arial

    Not all browsers support the use of FACE in the <BASEFONT> tag.

    In-Tag Alignment

    Left aligned Paragraph

    Right aligned Paragraph

    Centered Paragraph

    Left aligned Header

    Right aligned Header

    Centered Header

     
    Left aligned Horisontal Ruler
     
    Right aligned Horisontal Ruler
     
    Centered Horisontal Ruler
     
     
    Left aligned Table
    Some browsers aligns this text to the right of the table when the ALIGN=LEFT attribute is used in the <TABLE> tag.
     
    Right aligned Table
    Some browsers aligns this text to the left of the table when the ALIGN=RIGHT attribute is used in the <TABLE> tag.
     
    Centered Table
    Not all browsers supports the ALIGN=CENTER attribute in the <TABLE> tag.
     

    Division Alignment

    Left:

    Text

    Paragraph

    Header

    Table
    Image

    Right:

    Text

    Paragraph

    Header

    Table
    Image

    Center:

    Text

    Paragraph

    Header

    Table
    Image

    Some browsers do not support Left and Right alignment of Horisontal Rulers with Division Alignment.

    Centering

    Text

    Paragraph

    Header

    Table
    Image

    Horisontal Rulers

    Horisontal Ruler width=50%
     
    Horisontal Ruler width=50
     
    Horisontal Ruler width=50, size=5
     
    Horisontal Ruler width=50, size=5, noshade
     

    Tables

    Table Border, Cellsspacing and Cellpadding

    Table1
     
    Table border=0
     
    Table border*
     
    Table border=1
     
    Table border=5
     
    Table cellspacing=0
     
    Table cellspacing=5
     
    Table cellpadding=0
     
    Table cellpadding=5

    1 Some browsers treats <TABLE> different from <TABLE BORDER=0>.

    Table Cell Text Alignment

    Horisontal Default Left Center Right
    Vertical Default Top Baseline* Middle Bottom
     

    Table Cell Text Wrapping

    Table width=300
    This Text is wider than the Table width. If Text wrapping is off, then the Table width is increased.
     
    Table width=300, Cells nowrap
    This Text is wider than the Table width. If Text wrapping is off, then the Table width is increased.
     

    Table Caption.  Table Cell Width, Height, Header Style and Color*

    Caption Above
    Cell width=200, height=50 Header Cell, bgcolor=none
     
    Caption Below
    Cell width=none, height=none Normal Cell, bgcolor=#FFFFFF (white)*
     

    Table Cell Rowspan and Colspan

    Cell rowspan=2 Cell rowspan=1 (default)
    Cell rowspan=1 (default)
     
    Cell colspan=2
    Cell colspan=1 (default) Cell colspan=1 (default)
     

    Images

    Image to Text Alignment

    This is an image Top aligned at the Top of the text.

    This is an image Absolute Middle aligned at the Absolute Middle of the text.*

    This is an image Middle aligned at the Middle of the text.

    This is an image Default with the Default alignment (usually at the Bottom of the text).

    This is an image Absolute Bottom aligned at the Absolute Bottom of the text.*

    DefaultThis is the Default alignment of an image. LeftThis is an image aligned to the Left of the text. RightThis is an image aligned to the Right of the text.
     

    Image Spacings and Borders

    DefaultDefault
    No horizontal spacing    		 Horisontal 5Horisontal 5
    Horizontal spacing=5
    Default
    Default
    No Vertical spacing    		 Vertical 5
    Vertical 5
    Vertical spacing=5
    Default
    No Border    		 Border 5
    Border=5
     

    Some browsers do not show borders around images, unless the image is a link: Link

    Image Maps

    Circle Rectangle Polygon No Link Default

    Image Map The image to the left is Mapped. If you click on one of the three figures or on the background in the upper two thirds of the image, your browser should jump to the corresponding figure below. Because the figures and their anchors below are placed in a table, not all browsers are able to find the figures.

     

    Background Not all browsers supports the SHAPE=DEFAULT* attribute in the <AREA> tag, and will therefore not jump to this Figure.
    Click on the Figure to jump back to the Image Map.
    Circle Click on the Circle to jump back to the Image Map.
    Rectangle Click on the Rectangle to jump back to the Image Map.
    Polygon Click on the Triangle to jump back to the Image Map.

    Forms

    Textbox 1 (size=40).

    Textbox 2 (size= 20, max. 10 letters).

    Password 1 (size=20).

    Password 2 (size=20, max. 8 letters).

    Textarea 1 (cols=30, rows=4).

    Textarea 2 (cols=30, rows=5) with word wrapping.*

    Checkbox 1   Checkbox 1   Checkbox 3 (checked).

    Radio button 1   Radio button 2   Radio button 3 (checked).

    Drop down Selection box 1 (Option 1.5 selected).

    Open Selection box 2 (Option 2.2 selected).

    Open Multiple Selection box 3 (Option 3.2 and 3.4 selected).

    File Upload box.

    Reset the Form.

    Send the Form (if you press this Submit button, this page will just reload).

    Button* (works only with JavaScripts).

    You can also use an image as the Submit button.

     
    Copyright © 1997, Peter H. S. Madsen. 

    Menu     Home     Peter H. S. Madsen's home page