Servile Software
Guide To HTML
Edition 1.0
Compiled by Matthew Probert
Disclaimer
This document is supplied in good faith, however no responsibility can
be accepted for the accuracy of the information contained herein or
any loss or damage resulting from any advice given or implied by the
author.
This document mentions several HTML viewers and companies by name,
this is not intended as an endorsment of any company or product.
All trademarks are recognised as belonging to their respective owners.
Introduction
First people communicated ideas through hand signals and voice, then
drawings on cave walls then through hand painted manuscripts and later
printed paper books and leaflets. With the advent of the computer came
the facility to publish documents not on paper, but electronicaly
instead. The computer screen displaying the document, rather than it
being laid out on a leaf of paper.
Publishing information electronicaly requires some medium to present
the information to the reader. A graphics viewer is used to access
pictures, for example. An HTML viewer (or web browser as they are
commonly known) is a program which presents electronic documents, in
HTML format, to the reader.
The HyperText Mark-up Language (HTML) is a simple data format used to
create formatted electronic documents with hyperlinks to other
documents and resources (this hyperlinking to other documents is known
as hypertext) that are portable from one computer platform to another.
That is, an HTML document created on a PC may also be read by a user
of a UNIX machine or an Atari, Macintosh and so on. The term "mark-up"
is a printing expression describing the process of putting together
words and picture to form a document. HTML, is used electronically to
put together words (text) and pictures (images) into a finished
presentation document. Recent inovations mean that video clips and
sound can also be added, making HTML a full multimedia publishing
medium.
You will probably be familiar with the idea of formatted documents,
these are produced by word processors. A formatted document has a
variation in its appearance. It looks pretty. Where as an unformatted
document has all the text in one style. Links to other documents and
resources may be a newer idea for you.
A standard formatted document simply conveys information, and may
suggest other sources of information to the reader. A hypertext
document does the same, but where a suggestion of other information is
made a provision is made for the reader to click the mouse button or
press a keyboard button and the program being used to view the
hypertext document will load and display the linked document.
For example, this is a formatted text document that you are reading.
If I wish to refer you to another document, titled "order.doc" to view
that document you need to select the file option from your viewer
software, and open the named file. With a hypertext document, you
could simply point the mouse to the words "order.doc" which would be
displayed in a different colour, and click the mouse button to ask the
viewer software to load and display the document. Of course as the
author of the document, I would have to include some instruction to
the viewer software that would enable you to do that. These
instructions form part of the HTML language. They are called
"hyperlinks" and provide a path to other documents or resources,
called Uniform Resource Locations, or URLs for short.
HTML documents are viewed with an HTML viewer, or "web browser" as
they are starting to be known in PC circles. The most common HTML
viewers used by PC users are Microsoft's Internet Explorer and
Netscape's Navigator. But there are others. Mosaic, by NCSA is
available in a number of custom Internet packages including Quarter-
deck's Internet connectivity package and is perhaps the next most
widely used. What is less well known is that all HTML viewers present
HTML documents slightly differently. Although HTML is specified, HTML
viewers do not pay too much attention to the official specifications
and manufacturers have added support (both documented and not!) for a
variety of additional features and commands including built-in Java
compilers to understand Java code and support for Frames.
If you are publishing your document for a known audience, you should
know which HTML viewer will be used to access the document, and you
should be aware of the facilities supported by that viewer. When
publishing for the World Wide Web you should remember that your
audience is comprised of millions of people, with dozens of different
HTML viewers, which whilst supporting basic features, have many
discrepancies in their support of advanced features. Some may not even
have the ability to display images. So while this e-text describes and
illustrates many features found only in one or two HTML viewers, it
should not be viewed as a recommendation to use these features for
general HTML publishing.
Basic Concepts
As with any aspect of computing, HTML introduces some new concepts and
jargon. It is necessary to be familiar with these basic terms in order
to understand the rest of this document.
Tags:
Tags provide instructions to an HTML viewer about elements such as
headings, paragraphs, lists, character highlighting, and hyperlinks.
Most HTML elements are identified in a document as a start-tag
followed by an end tag. The start-tag provides the HTML viewer with
the element name and attributes, followed by the content. The end-tag
tells the HTML viewer about the end of the element. Start-tags are
delimited by `<'and `>'; end tags are delimited by `' and `>'.
For example:
This is a Heading
In the above example the start-tag is
and the end-tag is
Comments:
To include comments in an HTML document, use a comment declaration. A
comment declaration consists of `'. Each comment starts with `_`and includes all text up
to and including the next occurrence of `_`. In a comment declaration,
white space is allowed after each comment, but not before the first
comment. The entire comment declaration is ignored.
For example:
Head:
The head of an HTML document, defined by the start-tag and
delimited by the end-tag , is where heading information about
the document goes. The heading information is an unordered collection
of information about the document, such as the title of the document.
For example:
Document Title
This example declares the document title to the HTML viewer as
"Document Title".
The title element contains your document title and identifies its
content in a global context. The title is displayed somewhere on the
HTML viewer window (usually at the top), but not within the document
area. The title is also used for bookmarking and during a WAIS search
of a server and should be less than 64 characters long.
Title:
Every HTML document must contain a TITLE element. The title should
identify the contents of the document in a global context. A short
title, such as "Introduction" may be meaningless out of context. A
title such as "Introduction to HTML Elements" is more appropriate. An
HTML viewer may display the title of a document in a history list or
as a label for the window displaying the document.
Body:
The BODY section of an HTML document is where the text to be displayed
is placed. This is the largest section of an HTML document, and is
defined by the start-tag and terminated by the end-tag
For example:
This is displayed in the HTML viewer text window
Headings:
Headings are generally displayed in a larger type-face (or font) than
the main text. HTML provides two systems for declaring a heading.
The old system, which is recognised by all HTML viewers, supports six
sizes of text declared by the start-tags
,
,
,
,
and
, each of which has a corresponding end-tag such as
,
and so on. The text sizes range from
the biggest, through
the default size to
the smallest.
For example:
This is a large heading
This is in the normal default size
This is very small!
Paragraphs:
Unlike most word processors, HTML viewers ignore carriage returns, and
additionally multiple spaces are reduced to a single space. The
paragraph command (
and
) tells the HTML viewer that the text
contained within the start-tag and end-tag is a paragraph. Paragraphs
are displayed by the HTML viewer separated by a single blank line from
the preceding items.
For example:
This is a paragraph.
This second line is actually displayed by an HTML viewer on the same
line as the previous line, as the carriage return is ignored.
This second paragraph is displayed with a single blank line between
it and the previous paragraph.
This results in the following to be displayed by an HTML viewer:
This is a paragraph. This second line is actually displayed by an
HTML viewer on the same line as the previous line, as the carriage
return is ignored.
This second paragraph is displayed with a single blank line between
it and the previous paragraph.
Alignment:
Text and images may be aligned to the left, to the right or centred.
For example:
Left alignment
Right alignment
Center alignment
Lists:
A list is simply a list of items. The HTML viewer automatically starts
each list item on a new line, and handles list numbering and bulleting
depending upon how the HTML author has declared the list.
Base URL:
The Base URL gives the HTML viewer a point of reference for
hyperlinks. Usually the base URL is not specified, and is taken as the
URL address of the current document.
Hyperlinks:
Hyperlinks are a provision allowing the user of the HTML document to
navigate through the document and to external resources. Hyperlinks
may be local, allowing navigation within the currently loaded
document, or external providing access to other documents not loaded
and resources such as ftp servers and mail servers. Navigation through
hyperlinks usually occurs by positioning the pointer over the link
with the mouse, and then pressing the left mouse button. The hyperlink
may be displayed to the user either as text, in which case it will
normally be displayed in a distinctive colour and underlined, or as an
image. In both cases, when the pointer passes onto a hyperlink it will
change shape indicating a selectable hyperlink.
Meta:
The META element is an extensible container for use in identifying
specialized document meta-information. Meta-information has two main
functions:
1) to provide a means to discover that the data set exists and how it
might be obtained or accessed; and
2) to document the content, quality, and features of a data set,
indicating its fitness for use.
Each META element specifies a name/value pair. If multiple META
elements are provided with the same name, their combined contents -
concatenated as a comma-separated list - is the value associated with
that name.
HTTP servers may read the content of the document HEAD to generate
header fields from certain Meta information. WWW Search Engines also
may make use of META information to automatically build an entry for a
site.
Forms:
Forms provide a mechanism for passing information from the HTML viewer
back to a program at the web server or through email to you.
A Basic HTML Document
A simple HTML document is comprised of the following components:
An HTML declaration tag:
A heading tag:
A title, such as: Title text
A body declaration tag:
The main body of the document.
A body termination tag and finally an HTML termination tag:
For example:
Example HTML Document
This is an example HTML document.
Adding Headings:
Headings can be added to an HTML document with the heading tags;
through
.
An example HTML document using a heading:
Example HTML Document
Main Heading
This is an example HTML document.
Notice the use of the paragraph start-tag
and end-tag
which
tells the HTML viewer to display the text as a new paragraph, and not
as a continuation of the heading line. Newer HTML viewers, such as
Netscape Navigator and Microsoft Internet Explorer aslo support more
advanced formatting for headings and other text, but this will be
covered later.
Simple Formatting
HTML viewers do not recognise carriage-returns in the text. Instead,
they display the text as continuous lines, breaking each line at a
word end so that it fits in the text window. This is known as word-
wrap. You can force a line break with the HTML tag .
For example:
This is line one This is line two
Which displays as:
This is line one
This is line two
Blank lines can be inserted by using multiple occurrences of the
tag, thus:
This is line one
This is line two
Which displays as:
This is line one
This is line two
When text flows around a figure or table in the margin, you sometimes
want to start an element like a header, paragraph or list below the
figure rather than alongside it. The CLEAR command allows you to move
down unconditionally:
CLEAR=LEFT move down until left margin is clear
CLEAR=RIGHT move down until right margin is clear
CLEAR=ALL move down until both margins are clear
Alternatively, you can decide to place the element alongside the
figure just so long as there is enough room. The minimum width needed
is specified as:
CLEAR="100 pixels" move down until there is at least 100 pixels
free
For example:
Centring a line of text is also easy. The HTML tag
causes all
subsequent text and images to be displayed in the centre of the text
window until a
end-tag is reached.
For example:
Example HTML Document
Main Heading
This is an example HTML document.
If you just want to centre a single heading, you can use the "align="
command within the heading tag, for example:
The example HTML document would then look like this:
Example HTML Document
Main Heading
This is an example HTML document.
This will display as:
Main Heading
This is an example HTML document.
The ALIGN= command may also be added to the paragraph tag,
to
align an entire paragraph, for example:
In addition to defining the size of the typeface used to display text
(heading), HTML also supports bold, italic, strikethrough, underline,
subscript and superscript formats. The following example illustrates
the popular formatting tags:
Example HTML Document
Main Heading
This is an example HTML document illustrating some basic text
formatting tags.
Bold
Italic
Subscript
Underline
Superscript
Strikeout
Typewriter (fixed width font)
Preformatted (used for displaying source code etc.)
Formatting tags may also be nested to create multiple effects such as
BOLD ITALIC, for example:
This is Bold Italic
But you must remember to end-tag in the reverse order to the start-
tags to keep the nesting correct.
Blockquote:
Text defined as a "blockquote" is displayed as a new paragraph, and
usually displayed indented from the left margin, and with some HTML
viewers in a unique typeface. A blockquote is declared by the tag pair
and
, for example:
This text will normally be displayed indented, and if viewed with
Mosaic, displayed in a unique font type face.
Address:
Text defined as an "address block" is displayed as a new paragraph and
usually in italic. An address is declared by the tag pair
and , for example:
This text will normally be displayed in italic.
Emphasis:
Emphasised text is declared by the tag pair and and is
usually displayed in italic.
Strong:
Strong text is declared by the tag pair and and is
usually displayed in bold.
Citation:
Citation text is declared by the tag pair and and is
usually displayed in italic.
Source Code:
Source code is declared by the tag pair and and is
usually displayed in a fixed width font, though this may be changed by
the user of the HTML viewer.
Sample Output:
Sample Output is declared by the tag pair and and is
usually displayed in a fixed width font, though some HTML viewers
(notably Mosaic) allow the user to change this.
Keyboard Input:
"Keyboard Input" is declared by the tag pair and and is
usually displayed in a different font face and style to the ordinary
text.
Variable:
Variable text is declared by the tag pair and and is
usually displayed in either a fixed width font or an italic font to
emphasis it.
Big:
Big text is declared by the tag pair and and is usually
displayed larger than the ordinary text, but without the new line
which accompanies a heading tag.
Small:
Small text is declared by the tag pair and and is
usually displayed smaller than the ordinary text, but without the new
line which accompanies a heading tag.
Dividers
HTML provides three basic ways of dividing a document window:
Paragraphs, Line Breaks, and Horizontal Rules.
Paragraphs are contained within a
and
tag pair, although the
end-tag is not needed if another paragraph starts with a
start-tag. Paragraphs may be aligned, with the "align=" command, for
example:
A standard paragraph
Center aligned paragraph
Left aligned paragraph
Right aligned paragraph
Line breaks are enforced with the tag. When an HTML viewer
encounters the tag, the cursor is moved down one line and to the
left of the window. If an alignment is in operation, the next
displayed line will be aligned correctly.
Horizontal rules are affected with the
tag. This tells the HTML
viewer to display a graphical horizontal line across the entire width
of the window. The form of the rule can be amended with the optional
"size=", "width=", "noshade" and "align=" parameters.
The vertical thickness of the horizontal rule can be defined by adding
a size= parameter to the tag. The number following the size=
parameter tells the HTML viewer how many vertical pixel lines to use
for the rule. For example:
By default, a horizontal rule extends the entire width of the window.
The width= parameter may be used to specify the horizontal width of
the rule either in pixels, or as a percentage of the window width:
Horizontal rules are usually aligned in the centre of the window, or
if an alignment is in force, they follow the rules of the current
alignment. This may be overridden by the align= parameter, for
example:
Finally, horizontal rules are displayed in a 3d representation. This
can be changed to a solid thick 2 dimensional line with the noshade
parameter:
As usual, these parameters can be mixed together, for example:
Images
Most newer HTML viewers can display pictures, called images, in
various forms. The most popular being GIF and JPEG formats. The
procedure for telling the HTML viewer to display the image is the same
regardless of the image format:
For example:
Will cause the HTML viewer to display the image "picture.gif".
Some HTML viewers cannot display images, so you can provide text which
will be displayed by these viewers instead of the image by including
it with the "alt=" parameter, for example:
The image may be aligned in relation to the surrounding text using the
optional "align=" parameter. If no alignment parameter is specified,
text following the image will be displayed at the bottom right of the
image. Different HTML viewers handle the alignment of text and images
differently, so be careful!
The size of the image can be declared to the HTML viewer with the
optional "width=" and "height=" parameters. If these are not
specified, the HTML viewer will display the image at its full size. If
however you specify these size parameters, the image will be displayed
to the specified size in pixels. For example:
Lists
HTML supports a number of types of list: Ordered, Unordered,
Definition, Menu and Directory.
Ordered lists are displayed one item per line, with a sequential
numbering system to the left of each item. An ordered list is declared
by the start-tag and terminated with the end-tag .
Individual items are declared with the tag
. For example:
Item one
Item two
Item three
Which is displayed by an HTML viewer as:
1. Item one
2. Item two
3. Item three
The numbering system may be amended with the optional TYPE= command.
The valid types are A,a,I,i,1 giving the following displays:
A. Item one
B. Item two
C. Item three
a. Item one
b. Item two
c. Item three
I. Item one
II. Item two
III. Item three
i. Item one
ii. Item two
iii. Item three
1. Item one
2. Item two
3. Item three
The starting number may be defined by adding a START= command to the
ordered list declaration, for example:
Which then produces the following display:
100. Item one
101. Item two
102. Item three
The numbering order may be further amended during the list by adding a
VALUE= command to a list item declaration, for example:
Item one
Item two
Item three
Which produces the following display:
100. Item one
500. Item two
501. Item three
An unordered list is displayed without numbering, but with bullets,
for example:
Item one
Item two
Item three
Which is displayed by an HTML viewer as:
þ Item one
þ Item two
þ Item three
Some HTML viewers allow the bullet style to be redefined with a TYPE=
command, accepting the values DISC, CIRCLE and SQUARE, for example:
Item one
Item two
Item three
Directory lists, specified by the element, are similar to
unordered lists. They represent a list of short items, typically up to
20 characters each. Items in a directory list may be arranged in
columns, typically 24 characters wide, but may not be nested (unlike
other lists). Some HTML viewers will further display directory lists
in a different font to other lists.
Menu lists are effectively the same as unordered lists, but link
directory lists may not be nested and some HTML viewers can display
them in a different font (notably Mosaic) to differentiate them from
other unordered lists.
Definition lists are used for listing terms and their definitions. A
definition list is declared with the start-tag
, and rather than
using the list item tag
, it uses a pair of tags, data-term and
data-definition,
and
respectively. The data-definition is
displayed indented from the preceding data-term. For example:
Definition one
Description of definition one which can wrap around to more
than one line
Definition two
Description two which can wrap around to more than one line
Definition three
Description of definition three
Which is displayed by an HTML viewer as:
Definition one
Description of definition one which can wrap around to
more than one line
Definition two
Description of definition two which can also wrap around
to more than one line
Definition three
Description of definition three
Hyperlinks
Hyperlinks enable the user of an HTML document to navigate through the
currently loaded document (using local hyperlinks) and to external
resources.
All hyperlinks are defined in the HTML source code by anchors. An
anchor is the following HTML code:
hyperlink display
For example:
Part Two
Would create a hyperlink to the resource "part_two.htm" which is
expected by the HTML viewer to be an HTML document in the current
directory (known as the base URI). The HTML viewer knows to terminate
displaying text as a hyperlink by the anchor end-tag . To the
user, the hyperlink would be displayed as:
Part Two
An image could be used instead of the text, by replacing the hyperlink
display text with an inline image command, for example:
Local hyperlinks:
Local hyperlinks, known as "Fragment Identifiers", are defined in a
hypertext address by a # character following the resource. If
navigation is required within the local document, the resource may be
omitted so that a local hyperlink may look like:
Introduction
Selecting this hyperlink will cause the HTML viewer to search the
current document for a declaration of "introduction". This declaration
is achieved with the anchor name tag , like this:
Notice that the tag does not have an end-tag, and is case
insensitive. It doesn't matter if the anchor name is declared as
"INTRODUCTION" or "Introduction" or even "introDuction" it will still
be found by a hyperlink to "#introduction".
Local hyperlinks can be added to hyperlinks to external documents to
force the HTML viewer to load an external document and then navigate
straight to a desired section within that document.
For example:
Life and Love
Will create a hyperlink to the anchor "section_3" within the HTML
document "part_two.htm".
The following HTML document illustrates the use of local hyperlinks to
form a table of contents to a document. Although this document is very
short, you can see how the principle can be applied to longer and more
complex documents.
Local Hyperlink Example HTML document
.
You can specify a border and its width in pixels for the table by
adding a BORDER= command to the table start-tag, for example:
Will give the displayed table a border 1 pixel wide. A wider border
can be forced with BORDER=10 for example:
The spacing between the cells can also be determined in pixels with
the CELLSPACING= command. If you want a 10 pixel gutter between the
table cells add the command CELLSPACING=10 to the table start-tag:
The spacing between the cell walls and the enclosed data can also be
determined in pixels with the CELLPADDING= command. If you want a 10
pixel gutter between the table cell walls and the data in the cell add
the command CELLPADDING=10 to the table start-tag:
Finally the width of the table can be expressed in pixels, or as a
ratio of the document window width with the WIDTH= command;
Putting this together we might want a table 200 pixels wide, with a
cell spacing of 5 pixels and a border of 4 pixels width. The following
table start-tag will achieve this:
A caption can be included for the table with the caption tags
and
. The text or image contained within the
caption tags will usually be displayed centred at the top of the
table, just above the top border line. You can force the caption to be
displayed below the table by adding the ALIGN=BOTTOM command to the
caption start-tag, for example:
This caption displays above the table
This caption displays below the
table
Table cells are defined in terms or rows and within the rows, columns
(either "table header" or "table data" cells). A table row is defined
within the tags
and
, for example:
.....
A table header column is defined within a row by the tags
and
, for example;
This is a table!
Table header cells are, by default, displayed in BOLD and aligned in
the centre both horizontally and vertically.
A table data column is defined within a row by the tags
and
, for example;
This is a table!
Table data cells are, by default, aligned left and vertically centred
within the cell.
Each table column may have individual alignment characteristics
defined by the ALIGN= and VALIGN= commands which override the default
settings. The ALIGN= command can be used to force the display to the
left or right of the cell, and the VALIGN= command to force the
display to the top or bottom of the cell for example:
Table Example
Table Caption
Cell One is aligned to the left and in the centre vertically
Cell Two
has multiple lines
in it
and is displayed to the left of the cell
Cell Three is centred horizontally,
at the top of the cell
Cell Four is another
multiple line cell
displayed to the right
You can stop the HTML viewer from word-wrapping the text within a cell
by adding the command NOWRAP to the cell definition, for example:
This text will be displayed as one long line
The size of the cell can be determined, to a degree, with the COLSPAN=
and ROWSPAN= commands. These tell the HTML viewer how many columns and
rows the cell is to span in relation to the rest of the table. For
example:
Simple Table
Protoplasm
Plants
Invertebrates
Vertebrates
Blank or empty cells can be defined to force cells within a row to the
right, for example:
Putting these concepts together, quite complex tables can be
constructed, for example:
Evolution
A Simplified Overview of Evolution
Protoplasm
Single-cell Plant
Animals
Bacteria
Invertebrates
Fungi
Vertebrates
Sponges
Ringed Worms
Jelly fish
Mosses
Sharks
Sea Squirts
Lancelets
Cone
shells
Spiders
Snails
Insects
Conifers
Ferns
Flowering Plants
Amphibians
Bony Fishes
Reptiles
Newts
Frogs
Mammals
Crocodiles
Lizards
Ungulates
Carnivores
Apes
Rodents
Marsupials
Cattle
Deer
Cats
Civets
Weasels
Monkeys
Gorillas
Man
Microsoft's Internet Explorer supports use of the BGCOLOR= command in
the
tag. It allows the background colour of the table to be
specified using a standard rrggbb hex triplet. For example:
Microsoft's Internet Explorer includes support for the BORDERCOLOR=
command which sets the border colour of the table. It takes as a
parameter a rrggbb hex triplet. It is necessary for the BORDER
attribute to be present in the main
tag for border colouring
to work.
Microsoft's Internet Explorer allows use of the BORDERCOLORLIGHT=
command to set independently, the lighter colour to be displayed on a
3-dimensional
border. It is the opposite of BORDERCOLORDARK.
It takes a colour parameter defined by a rrggbb hex triplet. It is
necessary for the BORDER attribute to be present in the main
tag for border colouring to work.
Microsoft's Internet Explorer allows use of the BORDERCOLORDARK=
command to set independently, the darker colour to be displayed on a 3-
dimensional
border. It is the opposite of BORDERCOLORLIGHT.
It takes as a parameter a colour defined by a rrggbb hex triplet. It
is necessary for the BORDER attribute to be present in the main
element for border colouring to work.
NOTE : The BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT and BORDERCOLORDARK
attributes can also be used in
,
and
tags, with the
colour defined in the last element over-riding those defined before.
E.g. if a
element contains a BORDERCOLOR attribute setting, the
setting specified will be used instead of any colour settings that may
have been specified in the
element, which in turn over-rides any
colour settings in the
element.
Some HTML viewers support the placing of background images images
inside the
,
and
tags. If used in the
element, the image will be tiled behind all of the table cells. For
example:
Fixing Column Widths:
The HTML viewer property of displaying images within table cells can
be exploited to create fixed column widths in a table, where the data
contained within the colmns varies in width. Normally, the HTML viewer
generates columns based upon the widest element in the table column,
creating uneven column widths. However, by forcing one cell in each
column to a desired width, as wide or wider than the widest cell, you
can create even column widths. One way to do this is to create a GIF
image, of a single colour 2 x 2 pixels in size and make it
transparent. Being so small this image will occupy a neglible amount
of disk space and load even remotely very fast. Then this image can be
used as an invisible element within a table cell to widen the cell as
desired. The following example does not work with Mosaic, which does
not support the image HEIGHT= and WIDTH= commands within a table cell,
but it does work with Internet Explorer:
Table
Fixed Width Table Demonstration
1.00
8654.88
7430456.78
46.00
87134.93
4031565.42
51.00
554.10
440436.67
11.00
6414.43
472816.72
83.00
9824.01
734436.63
Setting Table Borders:
Internet Explorer supports the use of the FRAME= command which
requires the BORDER= command to be set and affects the display of the
table borders. It can accept any of the following parameters:
void this removes all the external borders
above this displays external borders at the top of the table
only
below this displays external borders at the bottom of the table
only
hsides this displays external borders at the horizontal sides of
the table. I.e. at the top and bottom of the table.
lhs this displays external borders at the left hand edges of the
table only
rhs this displays external borders at the right hand edges of
the table only.
vsides this displays external borders at both left and right hand
edges of the table
box this displays a box around the table (i.e. top, bottom, left
and right hand sides)
Internet Explorer supports the RULES= command. It requires the BORDER
value to be set and may only be used in tables where the ,
and tags have been declared. It affects the display
of the internal table borders ("rules"). It can accept the following
parameters:
none this removes all the internal rules
basic this displays horizontal borders between the ,
and sections
rows this displays horizontal borders between all rows
cols this displays horizontal borders between all columns
all this displays all the internal rules.
Internet Explorer provides the
and
tag pair
which can be used within a
definition to group columns
together to set their alignment properties. It accepts the following
attributes:
ALIGN="center|justify|left|right"
This sets the text alignment within the column group. The default
value is "center"
VALIGN="baseline|bottom|middle|top"
This sets the vertical text alignment within the column group.
SPAN=
This can be used to set the number of columns upon which the ALIGN
and VALIGN attributes are to act.
An example of an Internet Explorer enhanced table:
IE Table
This is the table caption
These
are
heading
cells
These
are
body
cells
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
CONTROLLING DOCUMENT BACKGROUNDS
THE BACKGROUND ATTRIBUTE
Recent versions of the proposed HTML 3.0 spec. have added a BACKGROUND
attribute to the BODY tag. The purpose of this attribute is to specify
a URL pointing to an image that is to be used as a background for the
document. In Mosaic 2.1.1, Netscape and Internet Explorer, this
background image is used to tile the full background of the document-
viewing area. Thus specifying:
Document here
would cause whatever text, images, etc. appeared in that document to
be placed on a tiled background image. If you prefer, a single large
image may be displayed which does not scroll when the document window
does by adding the command BGPROPERTIES=FIXED, for example:
Document here
THE BGCOLOR ATTRIBUTE
Although not standard HTML, it is possible to define the colour of the
background displayed by most modern HTML viewers, including Mosaic
2.1.1, Netscape Navigator and Microsoft Internet Explorer with the
BGCOLOR= command.
Document here
Where "#rrggbb" is a hexadecimal red-green-blue triplet used to
specify the background colour.
TEXT ATTRIBUTES
Like the BGCOLOR= command, the TEXT= command controls the attribute of
normal text displayed in a document.
Document here
THE LINK, VLINK, AND ALINK ATTRIBUTE
These attributes let you control the colouring of link text. VLINK
stands for visited link, and ALINK stands for active link. The default
colouring of these is: LINK=blue, VLINK=purple, and ALINK=red. Again
the format for these attributes is the same as that for the BGCOLOR=
and TEXT= commands.
For example:
Document here
Putting it all together, here is an example from Netscape which
illustrates a use of global colour attributes:
Colour Control Example
This is an example document. Text is light-grey on black, and
anchors are yellow at first,
flashing blue-green when activated, and pale green if already
visited.
Notice that Mosaic and Internet explorer do not support the ALINK=
command, it doesn't do any harm, unrecognised commands are simply
ignored! This is just one of the many discrepancies between the
various HTML viewers.
Controlling individual text attributes:
Some new HTML viewers, notably Netscape Navigator and Microsoft
Internet Explorer support a new tag, . The tag enables
the HTML author to specify a font size , colour and typeface. The size
ranges from 1 to 7, smallest to largest. The colour takes a standard
rgb hexadecimal triplet to define the attribute of the text within the
and tags. For example:
This is a Large Red Heading
in Arial Font
The font size can also be determined relative to the base font size
using + and - in the FONT SIZE= command, for example:
This is the next size up from the standard text
This is the next size down from the standard
text
The base font size, colour and typeface can similarly be set with the
BASEFONT command, for example:
Will set the base font size to slightly larger than the default, which
is size 3.
You can specify the name of different faces, for example:
the HTML viewer will use "courier" if "arial" is not available on the
system, or "geneva" if
courier is not available either.
Preventing line breaks:
Both Netscape and Internet Explorer support the and tag
pair which prevent a long line from being broken. Instead the document
view window must be scrolled to the right by the user with the scroll-
bar to view the remainder of the text line. For example:
The Abecedarian were the followers of Nicholas Storck, a 16th
century German Anabaptist. They were so called because they rejected
all worldly knowledge including learning the alphabet.
Multi-Column Text:
Currently, multi-column text only seems to be supported by Netscape
Navigator. It is defined with the tag pair and
, for example:
This is multiple column text displayed by Netscape Navigator
Displays the text within the multicol tags in 4 columns.
The column widths and gutter between the columns can be defined by
adding the WIDTH= and GUTTER= commands to the tag.
Scrolling:
Microsoft's Internet Explorer supports scrolling lines of text, which
are declared by the