HTML Tutorial
An HTML document contains tags, and information. In this
section, we will show you examples of HTML tags & information.
<IMG SRC="nothing.gif"> (If you notice,
nothing.gif is in small caps. Everything in quotations in HTML is
Case-sensitive.) Most everything inside of a tag (after the equals sign) has to be
enclosed in quotations. Except for numbers!!!
Structure of a document
An HTML document that adheres to HTML 3.2 begins with a DOCTYPE declaration. This is
necessary for validators to check the elements you used against the ones in the HTML
version you use. The DOCTYPE declaration for HTML 3.2 looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
3.2//EN">.
Next comes the HTML opening tag. This top-level element
contains the head and the body of the document. The head of a document provides
information about the document, and the body contains the actual marked up text.
An outline of an HTML 3.2 document would be as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
... information about document
</HEAD>
<BODY>
... document body
</BODY>
</HTML>
Elements for the HEAD of a document
The head section is used to provide information about the document. This can be the
title of the document, the name of the author, a short description, and many other things.
- TITLE - Document title
- This tag gives the titlesdocument and is the only required HTML
tag.
- META - Meta-information
- This is an empty element, often giving info about you!
Here are some examples of META.
- <META NAME="author" CONTENT="Your name
here">
- <META NAME="description" CONTENT="Describe
the document">
- LINK - Site structure
- Not used by many browsers. The LINK element is used to define
relationships between this and another document. The other document is indicated in the
HREF attribute, and the relationship in the REL attribute. For a reverse relationship, use
REV instead of REL. Popular use:
- <LINK REV="made"
HREF="mailto:your@address.here">
- <LINK REL="stylesheet"
HREF="/somewhere/stylesheet.css">
- ISINDEX - Primitive search
- Used before forms became popular. This tag should be inserted
if the document can be searched on the server (for example, if the document is generated
with a CGI script). The message in the search window can be specified using the PROMPT
attribute.
- BASE - Location of document
- When you put a document on a server, you can indicate the
actual location of the document with the BASE element. The required HREF attribute
indicates the actual location. All relative URLs in the document are resolved against this
URL.
- SCRIPT - Inline script
- In HTML 3.2, nothing is done with text inside this element.
Certain browsers support scripts, which should be defined in here.
- STYLE - Style information
- In HTML 3.2, nothing is done with text inside this element.
Certain browsers support stylesheets, and style information can be defined inside this
element.
Elements for the BODY of a document
The body of the document contains the actual text, marked up with HTML elements. The
document colors are specified using attributes on the <BODY> tag. These attributes
are TEXT (normal text), LINK (unvisited links), VLINK (visited links), BGCOLOR (background
color) and ALINK (selected links). They are given a hexadecimal color code, in
red-green-blue notation. For example, "#FF0000" is bright red. An image to be
used as background can be specified using BACKGROUND. These are all optional, but if one
is used, it is recommended that they all are. Otherwise certain selections may conflict
with user settings and turn some text unreadable.
The text in a document is mainly marked up using block-level
elements. Text inside a block-level element is marked up using text-level elements.
Certain block-level elements may also contain other block-level elements, or only a
restricted set of elements and no text.
- Headers: H1, H2, H3, H4, H5 and H6.
- In HTML there are six levels of headers, ranging from level one
(most important) to six (least important). They should be used in hierarchical order. The
horizontal alignment for each header can be indicated using the ALIGN attribute, which
takes values of LEFT, RIGHT and CENTER.
- Paragraphs: P.
- Most of the text will be inside paragraphs. These are marked up
using the P element. The horizontal alignment for a paragraph can be indicated using the
ALIGN attribute, which takes values of LEFT, RIGHT and CENTER. The closing tag for
paragraphs is optional. Note that a paragraph is a container and not an empty tag.
- Block quotations: BLOCKQUOTE.
- To indicate a quoted piece of text, use this element. It has no
attributes, and may contain paragraphs, headers and other block-level elements.
- Preformatted text: PRE
- Text that is already formatted for a specific width (for
example ASCII art) can be marked up using the PRE element. Unlike normally, linebreaks and
spaces are rendered as shown.
- Address information: ADDRESS
- The ADDRESS element is usually placed at the bottom of the
document to provide some information to the reader. This can contain the URL of the
document, the e-mail address of the author, but also a normal address.
- Divisions: DIV
- A division (marked up with DIV) encloses a number of
block-level elements. It is used to set the default alignment and to group these elements
together. It takes the attribute ALIGN with values LEFT, RIGHT and CENTER.
<CENTER> is a shorthand for <DIV ALIGN=CENTER>.
- Horizontal rules: HR
- The HR element (empty) is used to indicate a break in the
document, usually with a horizontal ruler. The appearance of this ruler can be indicated
with several attributes. Its width can be set using the WIDTH attribute, with a number in
pixels or a (quoted) percentage, its height in pixels is set using the SIZE attribute, and
if the width is less than 100%, the alignment can be set with the ALIGN attribute (values
of LEFT, RIGHT and CENTER). The NOSHADE attribute draws the rule without a 'shadow'.
- Lists
- HTML knows three major types of lists: ordered, unordered and
"definition" lists. The former two differ only in the labeling of each list
item; ordered lists are numbered and unordered lists are bulleted.
An unordered list is indicated with UL, with the optional TYPE
attribute. This attribute can be DISC, SQUARE or CIRCLE, and indicates the type of bullet
to use. The opening and closing tags are required and UL may only contain LI elements and
nothing else.
An ordered list is indicated with OL, with the optional TYPE
attribute. It can be 1 (decimal), a (lowercase letters), A (uppercase letters), i
(lowercase Roman) or I (uppercase Roman). The optional START attribute indicates the
starting value for the list. It musta always be given in decimal, regardless of the value
in TYPE. The opening and closing tags are required and OL may only contain LI elements and
nothing else.
Items for both these lists are given with LI. A list item may
contain other block-level elements.
A definition list is similar to an unordered list, except in
that it uses two elements per item: DT marks up the term to be defined, and DD provides
its definition. These are the only two elements that may appear inside DL. A definition
list typically appears without bullets.
Tables
Tables are used to present tabular information. In HTML, tables are constructed as a
series of rows. Before the first row, the CAPTION element provides a caption for the
table.
The TABLE element takes several attributes:
- BORDER=n
- Indicates that a border of n pixels should be drawn around the
table. If this attribute is omitted, no border is drawn.
- ALIGN=left|right|center
- Indicates the alignment of the table. In many browsers,
ALIGN=CENTER is not supported. This requires that the entire table is enclosed in a CENTER
element.
- WIDTH=n
- Indicates the suggested width of the table, either a pixel
value or a (quoted) percentage. The percentage is recommended, as values in pixels do not
take the current window size in account.
- CELLSPACING=n
- The spacing between table cells, in pixels.
- CELLPADDING=n
- The amount of space between a table cell border and its
contents, in pixels.
Rows in a table are marked up using TR. The table row can be used to set the default
alignment for all cells in this row: ALIGN=left|right|center for horizontal, and
VALIGN=top|middle|bottom|baseline for the vertical alignment. This value can be overridden
by individual cells.
There are two types of cells: headers (marked up with TH) and
data cells (marked up with TD). They only differ in their appearance, the syntax is the
same. Both take the same attributes as TR, as well as several others:
- COLSPAN=n
- Indicates the amount of columns to the right of the current
column that this cell overlaps.
- ROWSPAN=n
- Indicates the amount of rows below the the current row that
this cell overlaps.
- NOWRAP
- Disable word wrap in this cell. Line breaks must now be
inserted manually using BR.
Forms
With forms, the user can enter data and send it to a program on the server. This
program can then process the data and send a certain request back. The program to process
the form, as well as the method to send the data to it, are specified using the FORM
element. The ACTION attribute indicates the processing script, and the METHOD attribute
indicates the method: GET or POST. Forms may not be nested, but you can have multiple
forms on a document.
There are three elements relevant to forms.
- INPUT
- This element is used to create a wide range of input elements.
It is an empty element, there is no closing tag. In all cases, the NAME attribute is used
to assign the input a name. Usually the initial value can be set using the VALUE
attribute.
- TYPE=text
- This generates a input field, where the user can enter up to
MAXLENGTH characters. The SIZE attribute lists the length of the input field (if the user
enters more characters, the text will scroll). The VALUE attribute specifies the initial
value for the input field.
- TYPE=password
- Same as TYPE=text, but the text will be hidden by "*"
or similar characters. It is still sent in the clear to the server, though.
- TYPE=checkbox
- Produces a checkbox. It has two states, on and off. When it is
on when the form is submitted, it will be sent as "name=on", otherwise it is
ignored altogether. If you use CHECKED, it will come up checked (selected) initially.
- TYPE=radio
- Produces a radio button. A radio button always exists in a
group. All members of this group should have the same NAME attribute, and different
VALUEs. The VALUE of the selected radio button will be sent to the server. You must
specify CHECKED on exactly one radio button, which then will come up selected initially.
- TYPE=submit
- Produces a button, which when pressed sends the contents of the
form to the server. You can have more than one submit button in the form. Each should have
a different NAME. The name and value of the pressed button will be sent to the server as
well. The value of the VALUE attribute is typically used as text on the submit button.
- TYPE=reset
- Also produces a button, which will restore the form to its
original state if pressed. The value of the VALUE attribute is typically used as text on
the reset button.
- TYPE=file
- Allows the user to upload a file. It is still very new, so it
is not very widely supported. It is typically presented as an input box with a button to
start browsing the local hard disk. This way, a user can specify one or more filename(s)
to upload.
- TYPE=hidden
- Allows you to embed information in the form which you do not
want changed. This can be useful if the document is generated by a script and you need to
store state information. NAME and VALUE of this input field will be sent to the server
without modifications.
- TYPE=image
- Functions similar to a submit button, but uses an image
instead. The ALIGN attribute controls the alignment of the image. The coordinates of the
selected region will also be sent to the server, in the form of
"NAME.x=n&NAME.y=n". A text browser will treat it as identical to a normal
submit button.
- SELECT
- This defines a selection list, with various options. A list of
options (marked up with OPTION) is provided inside the list, and one or more of the
options can be selected. The SELECT element has the attribute NAME, indicating the name
for the selected option, and the optional attribute MULTIPLE, indicating that multiple
elements may be selected. The SIZE attribute indicates how many elements should be visible
at once.
The OPTION element may only contain text, and has the optional
attribute VALUE. This is the value returned if this option is selected. If none is
provided, the text after OPTION is used. The SELECT attribute indicates that this option
should come up pre-selected.
- TEXTAREA
- This element is used to insert a larger input box. The ROWS and
COLS attributes indicate the number of rows and columns to be used. The name to return the
entered text in is provided with NAME. A default text can be supplied between the opening
and closing tags.
Text-level markup
Text-level markup can roughly be divided into three groups: physical markup, logical
markup and "special" markup. The first group contains elements that indicate a
specific rendering for the enclosed text, the second indicate the logical meaning of the
enclosed text, and the third group indicates some "action". It is recommended
that logical elements are used whenever possible, as they adapt better to various viewing
environments than physical styles. For example, if boldface is not available, a different
way to render emphasized text can be chosen, but only if it is known that this is
emphasized text, and not to be rendered bold for some other reason.
Logical markup
None of these elements take any markup. They may be nested and may also contain
physical or "special" elements.
- EM - Emphasized text.
- STRONG - Strongly emphasized text.
- DFN - Defining instance of a term, usually the first time it is
used.
- CODE - A fragment of (computer, HTML, ...) code.
- SAMP - Sample text, either input or output.
- KBD - Keyboard input, to be entered by the user.
- VAR - A variable
- CITE - Title of a cited work. There is no way to logically mark
up a short citation.
Physical markup
None of these elements take any markup. They may be nested and may also contain logical
or "special" elements.
- TT - Teletype
- I - Italics
- B - Bold
- U - Underline
- STRIKE - Strikeout
- BIG - Larger text
- SMALL - Smaller text
- SUB - Subscript
- SUP - Superscript
"Special" markup
- A - Hypertext anchor. Attributes are HREF (URL to destination)
and NAME (destination in document). Anchors may not be nested.
- BASEFONT - Default font size. Has a required attribute SIZE
which ranges from 1 to 7.
- IMG - Image. The required SRC attribute indicates the location
of the image (in GIF or JPEG format) to be inserted. The ALIGN attribute (values LEFT,
RIGHT, TOP, MIDDLE, BASELINE and BOTTOM) indicate the alignment of the text after the
image. With LEFT and RIGHT the image is placed against that margin, and text flows around
it. The WIDTH and HEIGHT attributes indicate the width of the image, in pixels. VSPACE and
HSPACE indicate vertical and horizontal whitespace around the image in pixels. The BORDER
attribute indicates the thickness of the border around the image when it is inside an
anchor. The USEMAP and ISMAP attributes are used to indicate that the image is an
clientside/server-side imagemap. See the section on imagemaps for more information.
Lastly, the ALT attribute must be used to provide an alternative to the image if the image
is not loaded.
- APPLET - Used to insert a Java applet. Parameters are passed to
it with the PARAM element inside APPLET. This element takes attributes NAME and VALUE for
the parameter to pass. You can put all text-level elements inside APPLET. APPLET takes the
same attributes as IMG, apart from USEMAP, ISMAP and SRC. The location of the applet is
indicated with CODE instead of SRC.
- FONT - Font modification. This can be either a font size
change, indicated with the SIZE attribute (value can be 1 through 7, or a (quoted)
relative change with +n or -n, make sure the resulting value does not exceed 1 to 7), or a
font color change, with the COLOR attribute. The value of COLOR is a hexadecimal color
code, similar to the colors specified for the document body.
- BR - Line break. To ensure that text after a left- or right-
aligned image does not appear next to it, use the CLEAR attribute to scroll down until the
indicated margin (LEFT, RIGHT or ALL) is clear.
HTML comments
HTML comments are provided in a somewhat awkward fashion. The exact syntax is rather
complex. In short, use the following rule to embed comments:
An HTML comment begins with
"<!--", ends with "-->" and does not contain "--" or
">" anywhere in the comment.
