HTML 3.2(ish) Sampler

The purpose of this document is to have a source of correctly written HTML bits and pieces that can be copied when writing a new page if required. Parts of the document are not valid HTML 3.2, these are indicated in red, they are there to check different browsers' performance on off-beat code. It is also to have a standard sheet of all the things in HTML 3.2 to see how they come out on other browsers.

The trick of showing the page centred on a wide screen with a brown background ain't valid either, but it makes it much more readable.

There should be a coloured button here: followed by this text, all on the same line.

---

Text Sizes

Here is some text in <font size=7>.
This is in size 6 for comparison.
This is in size 5 for comparison.
This is in size 4 for comparison.
This is in size 3 for comparison.
This is in size 2 for comparison.
This is in size 1 for comparison.

1. Here is an unordered list with no markers defined (ie default)
   • First item in the list.
   • Second item on the list
     with some qualification after a line break.
   • Third item on the list,

     consisting of the description followed by a paragraph describing what the third item on the list consists of after a paragraph break.

   • Fourth item on the list.
2. Here is an unordered list with disc markers
   • First item in the list.
   • Second item on the list
     with some qualification after a line break.
   • Third item on the list.
3. Here is an unordered list with square markers
   • First item in the list.
   • Second item on the list
     with some qualification after a line break.
   • Third item on the list.
4. Here is an unordered list with circle markers
   • First item in the list.
   • Second item on the list
     with some qualification after a line break.
   • Third item on the list.

   ---

5. Here is an ordered list
   1. First item in the list.
   2. Second item on the list
      with some qualification after a line break.
   3. Third item on the list,

      consisting of the description followed by a paragraph describing what the third item on the list consists of after a paragraph break.

   4. Fourth item on the list.
6. Some very short lists with different effects, firstly <COMPACT> :-
   1. First item in the list.
   2. Second item on the list.
7. Now <TYPE="a"> :-
   1. First item in the list.
   2. Second item on the list.
8. Now <TYPE="A"> :-
   1. First item in the list.
   2. Second item on the list.
9. Now <TYPE="i"> :-
   1. First item in the list.
   2. Second item on the list.
10. Now <TYPE="I"> :-
    1. First item in the list.
    2. Second item on the list.
11. And finally, one which starts at seven using <OL START=7> then <LI VALUE=3> :-
    7. First item in the list.
    8. Second item on the list.
    3. Third item in the list.
    4. Fourth item in the list.

    ---

12. Here is a definition list

    Item one

    First item in the list.

    Item two

    Second item on the list
    with some qualification after a line break.

    Item three

    Third item on the list,

    consisting of the description followed by a paragraph describing what the third item on the list consists of after a paragraph break.

    Item four

    Fourth item on the list.

This sentence is ranged left

This sentence is ranged centre

This sentence is ranged right

If you're lucky this will be justified to fill the complete line so that the right hand margin is not ragged, but beautifully smooth and straight. Not all browsers can handle this, and it's definately not in the HTML 3.2 specification, so use it for finesse, not as an essential part of a page's layout. However it can add that final touch of beauty to an already very nice page. The next trick is to fit in the images using < . . hspace=8 vspace=4 . . > to clear some room round them. The one on the left is called after the word "finesse" above, the one on the right is called after the full stop at the end of this sentence. Using < align=top/middle/bottom > can not be done when embedded like this. Unfortunately you can not embed a picture into the middle of some text and have the text flow round both sides of it - - what do you want, a DTP package? Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hac habitasse platea dictumst. Suspendisse condimentum. Ut fermentum eros nec justo. Ut mi est, tristique quis, convallis et, accumsan vel, mauris. In placerat. Nunc blandit luctus nibh. Sed rutrum, felis nec lacinia vulputate, purus risus hendrerit mi, vel dictum dui sapien vel tellus. Etiam vestibulum.

<pre>Pre-formatted text looks like this</pre>

Omit needless words.

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

- - William Strunk, Jr, 1918

Here is some emphasised text in <EM> style.

Here is a title shown in <CITE> style.

Here is some code shown in <CODE> style.

Here is a keyboard entry shown in <KBD> style.

Here is a sequence of characters shown in <SAMP> style.

Here is somthing strongly emphasised in <STRONG> style.

And this is a variable done with <VAR> style.

Here is some italic text done in <I> style.

Here is some Typewriter text in <TT> style.

Here is some underlined text in <U> style.

Here is some _{subscripted text} in <SUB> style.

Here is some ^{superscripted text} in <SUP> style.

Here is some struck out text in <STRIKE> style.

Both <BIG> and <SMALL> have already been used.

This is <font size=1> with additional ^super and _sub script to check what happens.

This is typewriter text size one and size five.

	Your name, please*
	Your organisation (if relevant)
	Your e-mail address*
	* indicates required entries

---

How did you find this page? :-

Surfed in Flew in by magic carpet Took a wrong turning in an adventure game Followed the yellow brick road Other, please state how . .

---

How useful do you find this page (on a scale of 0 - 100%)

0 - 25%   26 - 50%   51 - 75%   76 - 100%

---

Do you have any pets? . .  Irish Soft Coated Wheaten Terrier Cat Lizard Rock None Other How do you exercise your pet? . .  Eh? Running Skiing Pot-holing It needs exercise? Is there any other comment you would like to add? This is a place to write a short epistle

Don't do a tall box like this -- it's useless!

---

The trick to open a new window for the colours is not in the spec. It uses a property of FRAMES to achieve this.

 

---

Link to HTML 3.2 Reference Specification (124k). The W3C Validation Service (This document validates, except where marked in red!).	Originally created on Acorn Archimedes 440/1 (Updated on Acorn Kinetic RiscPC and VirtualAcorn)
This document © DanE latest update and validation 29th June 1999 then updated again in July 2013