SAMPLE HOME PAGE v1.723 r26mar2001
by Valerio Capello

Includes HTML 3.2 tags
Some tags, where specified, can be interpreted only by browsers that support HTML 3.2
"Special effects", such as scrolling banners, are created with Java or similar languages and thus are not included in this sample page about HTML.

By reading the source of this page, you can learn how to write your personal home page using HTML. It's easy!
To get the source, just look in the menus of your browser for the option "Get Source", "Document Source", "Page Source", "HTML", "Text Editor" or similar: on Netscape 4.x go to View/Page Source (or press CTRL+U), on Internet Explorer 4+ go to View/HTML.

Warning: not all the browsers recognize all the HTML tags (HTML "commands"), especially the old ones, and not all the browsers process the tags the same way. Tags can also produce different results depending from user settings in the browser's option menu.
Some old browsers for PC systems, created before than Windows 95, can't download files (including loading images) with a name containing more than eight characters.
Be careful, and always test your pages with the most common browsers (expecially Netscape and Internet Explorer).

For a quick start, you can use my Template page and edit it to create your own page.

LINKS AND LOCAL ANCHORS

A link is an external call to another page in the Web, and a local anchor is an internal jump inside the same page.

LINK: Go back to Elf Qrin's lair!
LOCAL ANCHOR: Go to a Local Anchor inside this page

TEXT

TITLES

The text above is an "H2" title, followed by an "H3" one.

Title H1

Title H2

Title H3

Title H4

Title H5

Title H6

FORCED TEXT

F O N T S C A L I N G

Absolute font sizes (can range 1 to 7):
Size=1 Size=2 Size=3 Size=4 Size=5 Size=6 Size=7

Relative font size with a base font size of 3:
(You'd better don't use the BASEFONT SIZE tag - especially in the middle of a document, since you may change current user's preferences)
Size=-4 Size=-3 Size=-2 Size=-1 Size=+1 Size=+2 Size=+3 Size=+4

Relative font size with a base font size of 7:
Size=-4 Size=-3 Size=-2 Size=-1 Size=+1 Size=+2 Size=+3 Size=+4

Pure RED Text Pure GREEN Text Pure BLUE Text YELLOW Text

Normal text, _Subscript (H₂O), ^Superscript (1^st Place!)

~~Strike-through text~~ (or ~~Strike-through text~~), Teletype/monospaced text, Blinking text

Normal text, Bold, Italic, Underlined, Bold Italic
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG 1234567890
the quick brown fox jumps over the lazy dog 1234567890
WWWWW
iiiii

Fixed width/Preformatted text, Bold, Italic, Underlined, Bold Italic
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG 1234567890
the quick brown fox jumps over the lazy dog 1234567890
WWWWW
iiiii

A PREformatted text can contain more than   one  space
between words and the text will be shown as it has been typed
in the HTML document, with no need to use the "BR" tag
to force a Carriage Return.

An XMP (eXaMPle) text, is similar to a preformatted text, but it also bypasses HTML tags: <I>Italics</I>

LOGICALLY FORCED TEXT

BIG TEXT, SMALL TEXT

Emphatized Text, Strong Emphatization

"This is a Citation"

"This is a Quotation"

This is a definition. It may be used for definitions not contained in a Definition List.

ADDRESS: To put your electronic and/or your home address

CODE: To show the code of a program
VAR: A=1 (used to show variables and their values)
SAMP: To show output samples of a program
KBD: This text should be entered using the keyboard (as data input in a program)

Note: not all the browsers recognize the tags for special text, and furthermore the underlined text it's usually reserved only for links and local anchors.

PICTURES

Some (technical) information about pictures: When you create a picture for your home page, the first choice you have to make is between the GIF or the JPEG (JPG) compression: Using GIF compression you can only have no more than 256 colours. It is good for graphic with simple lines and wide areas painted with the same colour (like cartoons or logos). If you can choose the compression type (87a or 89a), use 89a when you want to set a transparent background or if you want to use animated GIFs.
Using JPG compression you can get more than 16million colours (also called 24bit graphics, which is known as "True Color", since human eyes can't see more than about 15million colours), and have shorter files, even shorter than GIFs although they are limited to 256 colours, so it's ideal for photos or complex graphics. There's a due to pay: using JPG you have a little loss of quality of the image, but in some programs you can choose the compression ratio: this can range from 2 (better quality, long file) to 255 (very poor quality, short file). The better values are the ones from 32 to 64. A value of 48 is usually a good compromise. You'd better use a value of 32 if the starting image is not so good (it depends from things like size of the picture, brightness, sharpness, contrast...). If your program allows you to choose a ratio between 1 (good quality) and 100 (poor quality), the better values are the ones between 10 and 40, and 20 or 25 are a good compromise.
To convert a GIF into JPG and vice-versa, you simply need a program that can load a picture in one format and save in another one. One of the most powerful is Corel PhotoPaint 9. With that program you can also create some very special FX like the ones you can see in the main page of this web site.
To know more about the JPEG vs GIF, see the JPEG FAQ page.
When you insert a picture in a HTML document, you'd better always specify an ALTernative text to show while the image is loading (or to show on text-only browsers), and the WIDTH and the HEIGHT of the image in pixels, so that the page will be shown faster (text will be wrapped around the specified area while the image is loading). If you specify only the WIDTH or the HEIGHT of the image, it will be proportionally resized, so you can make it more little or bigger than its actual size, although you'll have a loss in quality.

MUSIC

This is a MIDI Player.
You can play different types of music files.
You can choose to hide this control panel, to autostart the music and to play loop.

SEPARATORS

(Horizontal Rules)

When you specify the size of a Separator or of a Table, you'd better express it as a percent (%) value so that it will keep the same proportion even if the user changes the size of the window of his browser.

LISTS

List of numeric ordered elements
(Ordered List):

Item 1
Item 2
Item 3

List of ordered elements (Roman numbers)
(Requires HTML 3.2)

Item 1
Item 2
Item 3

List of ordered elements (l-case Roman numbers)
(Requires HTML 3.2)

Item 1
Item 2
Item 3

List of ordered elements (alphabetic)
(Requires HTML 3.2)

Item 1
Item 2
Item 3

List of ordered elements (l-case alphabetic)
starting from 3 (c)
(Requires HTML 3.2)

Item 1
Item 2
Item 3

List of unordered elements
(Unordered/Bullet List):

Item 1
Item 2
Item 3

Embedded bullet list
(You can also embed different types of lists)

Item 1
- Item 1.1
- Item 1.2
  - Item 1.2.1
    - Item 1.2.1.1
    - Item 1.2.1.2
  - Item 1.2.2
- Item 1.3
Item 2
Item 3

List of defined elements
(Definition List):

Term 1: This is the definition of the first term.
Term 2: This is the definition of the second term.

Here is a Local Anchor

TABLES

You can insert a caption at the top or at the bottom of your table
*(This is a bottom aligned caption)*
"Text 1" (or Picture) A small "H6" text can describe the eventual picture (although "H&" tags should be used only for titles and not to resize the text, you'd better use FONT SIZE=1 combined with Bold, instead)	TITLE Text 2 Small text for notes

You can also set a background colour

Item A1	Item A2	Item A3
Item B1	Item B2	Item B3

Set BORDER to 0 to order text and/or images with no borders

Item A1	Item A2	Item A3
Item B1	Item B2	Item B3

You can use a TABLE also as a frame for a box containing text, as you can see in this example.

You'd better use several single row tables (tables that contain only a <TR></TR> section), instead of a giant multiple rows table, since browsers have to load the whole table before to process and show it, thus the user have to wait in front of a blank screen until the whole table is loaded.

E-MAIL

Send me an E-Mail!
(this is only an example, do not actually send it)

You can also put a preset subject

FORMS

You need knowledge of Perl language and CGI protocol, or JavaScript, to write pages able to interact with the following "FORM" objects, unless you use the "mailto:" feature to receive the forms on your mailbox.

First Selection: Second Selection:

Third Selection (multiple):

Insert text:

Shhh... This is a secret. Enter your password:

Fill the box with your text

Check here if you agree (already checked)
Check here if you *really* agree (not pre-checked)

Please choose one: Option 1 Option 2 Option 3 Option 4 Option 5

Again, choose one:
Option 1
Option 2
Option 3
Option 4
Option 5

SYMBOL TABLE

If your browser allows it, you can - as an instance - copy+paste these characters inside a form's box, if you need one of them and you can't find it in your keyboard.
This table is also useful to see if your browser can shows properly all these symbols.

0 1 2 3 4 5 6 7 8 9
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
@ # ~ � � � � � � � � $ � � � � � � � � � � � � � | � � � � � � � � � � ? ! . , ; :
� � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � �

Jump back to the top of this page!

[http://www.ElfQrin.com/Sample.html]