SAMPLE HOME PAGEv1.69 r07JUL1999 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 language 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", "Text Editor" or similar.
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, not intended for Win95, can't download files (including loading images) with a name containing more than eight characters.
Be careful!
For a quick start, you can use my Template page and edit it to create your own page.
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 (H2O), Superscript (1st Place!)
Strike-through text (or Strike-through text), Teletype/monospaced text,
Normal text, Bold, Italic, Underlined,
Bold Italic
WWWWW
iiiii
Fixed width/Preformatted text, Bold, Italic, Underlined, Bold Italic
WWWWW
iiiii
Note: 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: Italics
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) (S P A C E S)
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 colour as a background transparent
colour 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.
Of course 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 subject, brightness, sharpness, contrast...).
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 7. 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)
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
[Advanced features section]
You need knowledge of Perl language and CGI protocol, or JavaScript to write pages able to
interact with the following "FORM" tags, unless you
use the "mailto:" feature to receive the forms on your mailbox.
Do you think "YES"?
Do you think "NO"?
Thank you for choosing.
Once again, are you with me?
[End of the advanced features section]
SYMBOLS' 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.