HTML browser test page

This page contains a collection of test cases for HTML tags, elements, and formatting techniques. I use it to test the compatibility and functionality of the various client browsers that abound. It is a long doc, but I prefer the single page layout as it facilitates scanning for tests.

It also represents a portfolio of the aspects of HTML that I have explored, and can be useful as a learning tool for those getting started with web programming. In that vein, I've added brief subtitles to each section that explain the techniques being used. To see the code that formats this page, use your browser's "view source" option.


HTML 2.0

The HTML 2.0 specification has been around for long enough that most browsers support its tags. If a browser doesn't support the tags listed below, it may be reasonable to deem it obsolete, and not fret too much.

[table of contents]

Anchors

The interdocument connections that put the Hypertext in HTML are called links. Links are anchored in documents by tags called anchors.

Anchor tags can specify either end of a link. <A HREF="someURL"> tags specify the leaping point of a link. The destination of the leap is defined between the quotes. <A NAME="someIdentifier"> tags specify mid-document destinations allowing the browser to jump directly to a subsection of a page. The table of contents links in this page use the name attribute.

Note that the NAME attribute has been replaced by the ID attribute in HTML 3.0.

URL link to peachy nexus.
mailto peachy@alumni.caltech.edu.
ftp ftp.netscape.com.
gopher bulfinch's mythology archive.
net news rec.sport.disc.

local link to [table of contents] using name attribute.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Heading 7 (not HTML standard, just a test)

[table of contents]

Character Styles

Logical Style Tags

this is an example of emphasis text.
this is an example of strong text.
this is an example of "code" text.
this is an example of sample text.
this is an example of keyboard text.
this is an example of variable text.
this is an example of definition text.
this is an example of citation text.
this is an
example of address
text.

Physical Style Tags

this is an example of bold text.
this is an example of italic text.
this is an example of typewriter text.
this is an example of underlining text.

Blockquote

so much depends
upon

a red wheel
barrow

glazed with rain
water

beside the white
chickens

- William Carlos Williams

[table of contents]

Lists

Unordered List


Ordered List

  1. tomatoes
  2. lettuce
  3. cucumber
  4. onion
  5. sprouts

Definition List

tomato
juicy red fruit.
lettuce
leafy green vegetable.
carrot
firm orange vegetable

Compact Definition List

tomato
juicy red fruit.
lettuce
leafy green vegetable.
carrot
firm orange vegetable

Menu List (HTML 3.0 obsolete)

  • tomatoes
  • lettuce
  • cucumber
  • onion
  • sprouts

    • Directory List (HTML 3.0 obsolete)

  • tomatoes
  • lettuce
  • cucumber
  • onion
  • sprouts

    • Nested List


    [table of contents]

    Images

    Standard GIF
    Interlaced GIF
    Interlaced GIF w/
    Transparent Bkgd


    Text and Image Alignment

    See Venus rise... top middle bottom


    Text and Image Alignment in a Line with a Larger Image

    top texttop
    middle absmiddle
    bottom absbottom baseline

    Text Wrap Around Images

    If this is working, you should see two images, one of the left margin and one on the right margin. This text should start above them and wrap down into the space between them. If it doesn't, don't panic. Netscape's left and right image alignment has officially been incorporated into HTML 3.0. But it may take a while for other browsers to implement the feature.
    This line uses <br clear=all>, and should appear below both images.


    Vspace and Hspace

    These two should pack tighter
    than these two


    Image Borders

    1 2 4


    LowSrc


    A JPEG


    [table of contents]

    Image Maps

    [table of contents]

    Sound

    [table of contents]

    Video

    [table of contents]

    Tables

    Tables and Alternatives
    thoughts from Laura Lemay
    Pros Cons
    Tables clean aesthetic, compact data format not yet supported by all browsers, gibberish when unsupported
    Lists organized alternative interface to data less compact data format
    Images maximum control of aesthetics slow to download
    Preformatted
    Text Table    		 table form, widely supported, smallest data profile ugly


    A Checkerboard Pattern













    A Game Board

































    Captions can also go on bottom


    Normally table columns are only as wide
    as they need to be
    apple orange watermelon pear squid

    Specifying even one column's width by percent
    stretches the table to the edges of the browser screen
    apple orange (20%) watermelon pear squid


    Cell Alignment Options
    Horizontal Alignment
    Left Center Right
    Vertical Alignment
    Top Middle Bottom Baseline


    Rowspan and Colspan
    Handedness
    Right Left
    Gender Male 96 8
    Female 80 14


    Cellspacing and Border Thickness
    X X X
    X X X
    X X X

    [table of contents]

    Forms

    [table of contents]


    HTML 3.0

    The HTML 3.0 specification is brand, spanking new, and support is limited so far. The Arena browser was designed as a test bed for HTML 3.0 and is probably the only browser which can handle the tests below.

    As such, I haven't focused much effort on this section. As I started experimenting with 3.0 tags, I found that my Netscape 2.0 browser doesn't support most of them. Since the modem on my Linux box is dead, Arena isn't an option.

    Once again, patience becomes a virtue. I will add the 3.0 tests over time as support for the new tags becomes prevalent. For now, I'm sticking to the 2.0 tags in my own web documents for widest compatibility.

    [table of contents]

    New 3.0 Attributes


    ID

    The ID attribute replaces the NAME attribute in 3.0. Both tags mark mid-document destination points for links. The difference is that NAME was only used in <A> anchor tags, whereas ID can be used in nearly every body tag.

    Use this to jump to idTest1.
    Use this to jump to idTest2.
    Use this to jump to idTest3.


    Language

    This paragraph is specified as British English. Prolly doesn't do much to the overall presentation. But at some point, it might affect the style of "quotations", hyphenations, and such...


    Class

    Classes allow the author to differentiate sections by logical type. This will be particularly useful for formatting once style sheets come of age.


    Align

    This paragraph is aligned left.

    This paragraph is aligned center.

    This paragraph is aligned right.

    This really long paragraph is aligned justify. If the tag is implemented the browser should format the text with straight borders on both the left and right sides like a newspaper or magazine column. To prove this, I need to write a bit more to make sure that i fill several lines with this silly, rambling text.


    No Wrap

    This paragraph uses <NOWRAP> and should extend off the screen because it is far too long to fit on a single line in your browser unless you have a really high resolution monitor and like to have windows that span the entire screen.

    This paragraph doesnt, and should wrap simply because it is far too long to fit on a single line in your browser unless you have a really high resolution monitor and like to have windows that span the entire screen.


    Style Sheets

    The syntax for Style Sheets is not part of HTML 3.0, and is still in development.


    [table of contents]

    3.0 Character Styles

    [table of contents]

    3.0 Table Extensions

    [table of contents]

    3.0 Forms

    [table of contents]

    Figures

    [table of contents]

    Math

    [table of contents]

    Banners

    [table of contents]

    Divisions

    [table of contents]


    Browser Specific Extensions

    Some browsers <Netscape> have invented their own <Netscape> tags and attributes in order to achieve greater control over visual layout. While the <Netscape> additions have pleased the aesthetically conscious, they have led to compatibility issues. Which is why you see so many pages with the disclaimer "written for Netscape".

    The creation of extensions may also have had a marketing angle to it. People like the additions Netscape added, particularly <CENTER>, and use them freely. This, in turn, encourages people browsing such pages to download Netscape to view them.

    Now Microsoft has added its own extensions in Explorer. The MS extensions seem pretty gimmicky to me, though, suggesting that they were just striving for differentiation.

    [table of contents]

    Netscape Extensions

    Centering

    Centered with the <center> tag

    Centered with the ALIGN=CENTER attribute.

    Horizontal Rules

    default (size=2)
    size=1
    size=4
    size=8

    width=100 pixels

    width=50 pixels
    width=1 pixel
    width=75%
    width=50%

    width=50% align=left

    width=50% align=center
    width=50% align=right

    noshade

    noshade size=4


    Table Cellspacing

    X X X
    X X X
    X X X


    Font Size

    Basefont size set to 5.
    Back to default size.

    NEAT NETSCAPE SMALL CAPS TRICK

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


    Frames

    Frame test not yet implemented.


    List Bullet Specification

    Unordered with "Discs"

    Unordered with "Circles"

    Unordered with "Squares"

    Ordered with capital letters

    1. tomatoes
    2. lettuce
    3. cucumber

    Ordered with lowercase letters

    1. tomatoes
    2. lettuce
    3. cucumber

    Ordered with capital roman numerals

    1. tomatoes
    2. lettuce
    3. cucumber

    Ordered with lowercase roman numerals

    1. tomatoes
    2. lettuce
    3. cucumber

    Ordered couting by 10's

    1. tomatoes
    2. lettuce
    3. cucumber

    Ordered starting at 1000

    1. tomatoes
    2. lettuce
    3. cucumber

    Chaos

    1. tomatoes
    2. lettuce
    3. cucumber
    4. onion
    5. carrot
    6. raisin
    7. chick pea

    The Ungainly Blink

    BLINK egads!
    BLINK Aggh!
    BLINK EEEK!

    Word Wrap Control

    This sentence uses <NOBR> and should extend off the screen because it is far too long to fit on a single line in your browser unless you have a really high resolution monitor and like to have windows that span the entire screen.

    This sentence doesnt, and should wrap simply because it is far too long to fit on a single line in your browser unless you have a really high resolution monitor and like to have windows that span the entire screen.

    Note that HTML 3.0 specifies a standard tag, NOWRAP, which has the same functionality.

    This sentence suggests word breaks with <WBR>, whichisgoodbecauseithassomestringsinitthataresolongthatitcouldntwrapifitdidnt.


    Copyright and Trademark

    Netscape: ©, ®
    ISOLatin1: ©, ®

    [table of contents]

    Microsoft Explorer Extensions

    [work in progress...]

    Fixed Backgrounds

    Click here to test a page with a non-scrolling background.

    Colored Tables

    If you're using MSExplorer, this table should have colored cells
    black olive teal red
    blue maroon gray lime
    fuchsia white green purple
    silver yellow aqua navy

    Video clips


    BGSOUND


    MARQUEE


    [table of contents]