|
Advanced features:
HTML
Head tags
<HEAD>
Indicates the head-section of the page. Must end with </HEAD>.
You can put a lot of tags inside the HEAD tag which will set
some preferences for the page, but only the TITLE tag is used
frequently. Put it inside the <HTML>-tag.
<TITLE>text</TITLE>
Use it inside the <HEAD> tag. Sets the title of the page
(usually the window name) to "text". In Netscape 1.1N
(no other browsers, no other versions of Netscape) can you 'animate'
the title by inserting more than one TITLE tag.
<BASE [HREF="url"] [TARGET="text"]>
Sets the standard URL for files used in the page. Make it possible
to set a pictures path to just the name, if it is in the BASE
HREF folder. Using TARGET open all links in a (new) window or
frame named "text". If text is "_blank",
the window will be unnamed. TARGET is an Netscape extensions,
supported in Explorer. (IE NS)
<BASEFONT SIZE=n [FACE="font1, font2, ..."]
[COLOR=#RRGGBB|color]>
Sets the standard size of the text. It can also set the default
font and color of the text. If font1 isn't available in the system,
font2 will be used, and so on. BASEFONT is a Netscape extension,
supported in Explorer. FACE and COLOR is currently not supported
in Netscape. (IE NS)
<BGSOUND SRC="url" [LOOP=n|fixed]>
Plays a background sound while the page is viewed. The sound
must be in the .au, .wav or .mid formats. LOOP sets the number
of times to play the sound, or INFINITE to play it over and over
until the page is closed. Note: Netscape 2.x does only display
the background and nothing more (text,pictures, etc) if BGSOUND
is used: IE
<ISINDEX HREF="url" [PROMPT="text"]>
Tells the browser that the page is a searchable index. When the
page is opened, a dialogbox will ask the user to enter a keyword.
HREF is the url to which it will be sent. PROMPT is the text
to be displayed in the dialog. If PROMPT isn't defined, this
text will be used: "You can search this index. Type the
keyword(s) to search for:". Some resources says that you
should use ACTION instead of HREF. PROMPT is not defined in the
HTML-standard. (IE NS)
<LINK REL="rel" HREF="url" [NAME="text"]
[TYPE="mime-type"]>
Used as a toolbar or banner for the page, but it is not supported
in all browsers. It can also define a linked style sheet, please
see the Style sheets chapter for more information. NAME is the
name of the object, HREF is the url to a page and REL one of
the following attributes. Using REL=Home, the link will point
to a homepage. ToC goes to a table of contents, Index to an index
page, Glossary to a page used as a glossary, Copyright to a page
with © information, Up to a page used as a parent for the
current page, Next and Previous to the next or previous page,
Help to a help page and finally Bookmark to a bookmark (link)
page. You can also use Banner. which will use the HREF page as
a banner that won't be scrolled with the rest of the page (like
a frame).
<STYLE>
Defines global style sheets, please see the Style sheets-chapter
for more. Must end with </STYLE>.
<SCRIPT LANGUAGE=language [SRC="url"]>
A script language can be, for example, JavaScript, ActiveX or
VisualBasic. SRC is the source HTML file. Must end with </SCRIPT>.
IE NS
<NOSCRIPT>
Text within this tag will show up in browsers that do not support
the script. Must end with </NOSCRIPT> IE NS
Body tags
<BODY [...]>
The actual content pf the page. Be sure to only use one pair
of BODY-tags! The following properties can be used:
BACKGROUND="url"
Sets the background of the page to a specified picture. This
is an HTML 3.2 tag.
BGCOLOR="color"
Sets the background to an RGB color, usually gray.
TEXT="color"
Sets the standard color of the text, usually black.
LINK="color"
Sets the color of the unvisited links, usually blue.
VLINK="color"
Sets the color of the visited links. In Netscape, if not set,
usually defaults to magenta and Explorer, if not set, usually
defaults to red.
ALINK="color"
Sets the color of the links at the moment the user clicks on
them, usually red. NS
BGPROPERTIES=fixed
Defines BACKGROUND as a non-scrolling picture. IE
LEFTMARGIN=n
Defines the left margin of the page. IE
TOPMARGIN=n
Defines the left margin of the page. IE
<BODY> must end with </BODY>, usually in the end
of the file.
Meta tags
<META [...]>
The META tag is used to give information to the browser or search
engines. It should be placed within the HEAD tags. The following
parameters can be used:
HTTP-EQUIV="refresh" CONTENT="n ; URL=url"
This will reload the page every n:th second. If URL is specified
the page will reload to that page instead of the current. Not
all browsers support this feature.
NAME="keywords" CONTENT="word1, word2..."
This will tell a search engine the search keywords for the page.
Used by, in example, Alta Vista.
NAME="description" CONTENT="text"
A short description of your page, which are used for example
by search engines as AltaVista.
NAME="copyright" CONTENT="text"
A copyright description of the text, for example "©
Me 1997".
NAME="distribution" CONTENT=global|local
Defines if the page is an index page (global) or not (local).
NAME="robots" CONTENT="none|nofollow|all|noindex"
A more frequently used way to tell search engines which pages
should be indexed. NOFOLLOW will index the present page only,
NOINDEX will linked pages only, ALL will index both the present
and the linked pages and NONE won't index anything at all.
NAME="text" CONTENT="text"
There are more different META-tags. Some editors use to add their
own codes such like NAME="generator", some people use
to have NAME="author", etc. It can also be a good place
to communicate with those people who's reading your HTML source
to see how you've wrote your pages.
Frames
See also "Picture and Objects" for floating frames.
<FRAMESET COLS=def|ROWS=def [FRAMEBORDER=yes|no] [BORDER=n]
[BORDERCOLOR=color] [FRAMESPACING=n]>
Defines the frames, and should be placed within the HEAD-tags.
COLS and ROWS defines if the page should be split into columns
or rows. Since many FRAMESET parameters can be used within each
other, columns and rows can be mixed. DEF is a comma-delimited
list of heights or widths of the frames. It can be in dots (n),
percent of the page (n%) or in auto (*) format. AUTO will format
the rest of the page, for example COLS="100,*". FRAMEBORDER
shows or hides the frame dividers. BORDER and BORDERSPACING are
different ways to define the width of the border, in pixels.
BORDERCOLOR is a color name or an RGB value that sets the color
of the border. Must end with </FRAMESET>. IE NS
<NOFRAMES>text</NOFRAMES>
Text and pictures within this tag won't show up in browsers that
support frames. Must end with </NOFRAMES>. Put the mainframe's
content into this tag, and link to the other framed pages. IE
NS
<FRAME [...]>
Defines a frame within the FRAMESET tag. The following parameters
can be used: IE NS
NAME="text"
NAME is the name of the frame, for example used in the TARGET
parameters to refer to the specified frame.
SRC=url
The url to the page which should be placed within the tag.
[SCROLLING=yes|no|auto]
Defines if the frame should have scrollbars. If auto is used,
scrollbars will be used if they are needed.
[MARGINHEIGHT=n] [MARGINWIDTH=n]
Sets the margins to the frameborder in pixels.
[NORESIZE]
Prevents the user from resizing the frames by dragging the border.
[FRAMEBORDER=yes|no] [BORDER=n] [BORDERCOLOR=color] [FRAMESPACING=n]
The same properties as in the FRAMESET tag.
Other tags
<HTML>
Starts and ends the HTML document. A page should start with the
<HTML> tag followed by the HEAD section and it's content
inside the <BODY> tag. Finally it should end with </HTML>.
<!DOCTYPE>
A tag which usually starts the pages, describing the language
in which is written. If the document contains HTML 2.0 code,
DOCTYPE should be <!DOCTYPE HTML PUBLIC "-//IETF//DTD
HTML 2.0//EN">. To just define that the content is HTML,
use <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">.
DOCTYPE is not required, and not widely used, but it's no reason
to not use it.
Links
<A HREF="[url][#anchor]" [TARGET=text]>text
or picture</A>
Stands for "anchor". URL is the path to the linked
file, usually a page, picture or a sound. #ANCHOR is a specified
part of a linked page. To link to an email address, use HREF=mailto:email
where email is the address. Read about the TARGET parameter beneath.
You may also check out the FORM tag for another way to send email.
<A NAME="text">text or picture</A>
Defines a new anchor on a page. "text" will not show
up for the user and can be anything at all. To link to the anchor
from the same page, use <A HREF=#text>.
TARGET=text
TARGET can be specified in different tags, for example the link
(A) and the FORM tags. It is used to open a link in a specified
frame or window named "text". Some special variables
can also be used. "_self" will open the link into the
current frame (or window), "_top" which will open it
in the current window but not in a frame (used for externals
link in frame pages), "_blank" which will open a new
window and "_parent" which will open it in the frame
or window that contains the FRAMESET tags for the current frame.
To stop using frames, use the "_parent" parameter,
and be sure to not capitalize the code! IE NS
The linked text will show up in a different color, usually blue
(or magenta if the user has visited the linked site before).
You can change the color with the BODY command, see the chapters
menu. Pictures will have a blue or magenta border, usually one
dot width.
Lists
There are three different list styles. All of them can include
new lists.
• unordered list
2. ordered list
definition list
text, text, text
Unordered list
<UL [TYPE=DISC|CIRCLE|SQUARE]>
Stands for 'unordered list'. Starts a new unordered list. The
bullet (•) can be changed with TYPE, between DISC (•),
CIRCLE (°) and SQUARE (¤). Must end with </UL>
<LI [TYPE=DISC|CIRCLE|SQUARE]>
Stands for 'list insert' or 'list item'. Starts a new line. It
should be used within the <UL> tags, but it's not necessary.
It should also end with </UL>, but that isn't necessary
either.
Ordered list
<OL [TYPE=A|a|I|i] [START=n]>
Start a new ordered list in the same way as <UL>. TYPE
changes the numbers in the front of the entries between A,B,C
(A), a,b,c (a), I,II,III (I), i,ii,iii (i) and 1,2,3 (only <OL>).
START starts the numeration at n. Must end with </OL>
<LI [TYPE=A|a|I|i]>
Stands for 'list insert' or 'list item'. Works in the same way
as in an unordered list. Must end with </LI>
Definition list
<DL>
Starts a defined list. Must end with </DL>
<DT>
Stands for 'defined tag'. Insert a new 'header' in the list.
The text shows up in bold. Must end with </DT>
<DD>
Use it to display normal text in a new line inside the list.
Must end with </DD>
Menu list
There are also two other tags which look the same as a list.
These are often used in ftp-pages, but aren't supported in all
browsers.
<MENU [DINGBAT=text] [CLEAR=align]>
Starts the new menu list. DINGBAT is the name of an icon which
will start the line. Can be "text.document", an icon
of a small text file, "no" which is no dingbat at all,
or about 30 others.
Directory list
<DIR>
About the same use as <UL>. Must end with </DIR>.
<LI>
Start tag for a new list item inside the directory list. See
unordered lists for more.
About Maps
Webmaps are also called imagemaps or clickable pictures. When
the user clicks in the picture, he is linked to different pages
depending on where in the picture he clicked. A map isn't written
in the same way as an HTML file.
Webmaps consists of two files, a gif picture and the map file.
They are written in a special file, and must be supported by
the server. Talk to the administrator to find out if the server
supports maps. If it does, it can either be in CERN format, NCSA
format, or both. CERN is the company which originally developed
the WWW, and NCSA has created, for example, Mosaic. Maps use
a cgi-script (like a program) to run, but you can define the
map within the HTML file if the user has a newer browser such
like Netscape 2.0. These maps are called Client Side Image maps.
NCSA format
In the NCSA format, all objects are separated with return characters.
The list of objects starts with the objects ordered from the
front to the back. It ends with the default url.
# text
Defines a comment, not used by the browser.
rect url x,y x,y
Defines a rectangle.
circle url x,y x,y
Defines a circle. x,y is the center point and the edge point.
oval url x,y x,y
Defines an oval. x,y x,y is the rectangle of the oval.
poly url x,y...x,y
Defines a polygon. Each 'x,y' specifies a point.
point url x,y
Defines a point at x,y.
default url
Defines the default URL (locations where no other objects are
defined. Must be after the objects.
url is always the URL (address) to the page which will be linked.
CERN format
In the CERN format, all objects are separated with return characters.
The list of objects starts with the default url, followed by
the objects ordered from the back to the front.
# text
Defines a comment, not used by the browser.
default url
Defines the default URL (locations where no other objects are
defined. Must be before the objects.
rect (x,y) (x,y) url
Defines a rectangle.
circle (x,y) rad url
Defines a circle specified by it's center point and radius.
poly (x,y)...(x,y) url
Defines a new polygon specified by a number of (x,y)'s.
url is always the URL (address) to the page which will be linked.
Client Side map format
Each object is separated by a linebreak (return). The objects
is stored in order from the back to the front. If the user clicks
in an area which is not specified as an object, there will be
no action. See the 'picture' chapter for more about how to call
and use these maps.
<MAP NAME="text">
Start tag of the map definition. Must end with </MAP>.
NAME is the anchor, used by the IMG tag to locate the map
<AREA [SHAPE=rect|circ[le]|poly[gon]] COORDS="x,y,x,y"
[NOHREF] [HREF=url] [ALT=text] [TARGET=text]>
Indicates a map object. If SHAPE is not given, RECT will be used.
HREF is the url to which a click in the object will point. NOHREF
will make no action. COORDS is the coordinates for the object.
With the shape RECT, it's written as "left,top,right,bottom".
With the shape CIRCLE, use "center_x,center_y,radius"
and with the shape POLYGON, use "x1,y1,x2,y2...". ALT
is the text to be showed if the browser can't display the picture,
the same as ALT in IMG. TARGET is a Netscape extension which
opens the link in a (new) window or frame named "text".
If text is "_blank", the window will be unnamed. If
it is "_self", the current window or frame will be
used.
Paragraphs
<BR [CLEAR=ALL|LEFT|RIGHT]>
Begin a new line under the startpoint of the current line. Use
<BR CLEAR> to make the line start in the left or right
margin, if you e.g. have a picture on the side of the text. Use
CLEAR=ALL if you have pictures on both side of the text. CLEAR
is not in the HTML standards. (IE NS)
<NOBR>
Stands for 'No BReak'. Use it if you want the text inside the
tag to appears on the same line. Don't forget to end with </NOBR>.
(IE NS)
<WBR>
Stands for 'word break'. Starts a new line if the browser need
to. Use it, for example, inside a long word.
<P [ALIGN=LEFT|RIGHT|CENTER|JUSTIFY]>
Stands for 'paragraph'. Use it to start a new paragraph. Use
ALIGN to start the line in the left, right or center part of
the page. Justify makes straight margins. <P> can end with
</P>, but it's optional. ALIGN=JUSTIFY is an Explorer extension.
(IE)
<CENTER>
Use it to center text and pictures. Netscape tag, but well supported.
Must end with </CENTER>. IE NS
<DIV ALIGN="left|center|right">
Aligns text, pictures and other contents together. Should probably
end with </DIV>. IE NS
Rulers
<HR [SIZE=n] [WIDTH=n|n%] [ALIGN=LEFT|RIGHT] [NOSHADE]
[COLOR=color]>
Use it to insert a horizontal line to separate text. The following
tags can be used:
SIZE=n
Sets the height of the line in dots. Default is 1.
WIDTH=n|n%
Sets the width of the line, either in dots or in percent. Standard
is 100%. IE NS
ALIGN=LEFT|RIGHT|CENTER
Sets the align of the line. IE NS
NOSHADE
Remove the 3D-look from the line. IE NS
COLOR=color
Defines the color of the line. IE
Pictures
<IMG SRC="url" [...]>
Use it to insert pictures inside the pages. The following tags
can be used after IMG:
SRC="url"
The path or destination to the picture file. Can be the whole
url or just the filename, if the file is located in the same
folder as the rest of the page.
[ALT="text"]
Use it to display text if the picture, by some reason, can't
be loaded. This happens if the filepath is wrong, if the user
stops the loading or the browser can't show pictures. Depending
on your browser, the ALT-text can also be displayed while the
image is loading, or when the pointer is moved over the graphic.
[LOWSRC="url"]
Use it to display a preview of the picture, for example a black
and white picture. The LOWSRC picture loads first, while the
SRC picture won't load until the page is done.
[HEIGHT=n|n%]
Changes the height of the picture in dots or percent. Defining
the height will make the page to be drawn faster.
[WIDTH=n|n%]
Changes the width of the picture in dots or percent. Defining
the width will make the page to be drawn faster.
[ISMAP]
Define that the picture is a imagemap, which means that the picture
become links, defined by where on the picture the user clicks.
Please read the Maps chapter for more.
[USEMAP=#anchor]
Defines that the picture is a Client-Side map. These map data
is stored within a document. anchor is the name of the map, see
the 'Maps' chapter for more. USEMAP can be used together with
ISMAP. If the browser doesn't supports Client-Side maps, ISMAP
will be used instead.
[BORDER=n]
Define the width of the border around the picture in dots. If
the picture is a link, the border will be colorized.
[VSPACE=n]
Define the vertical space to the text next to the picture. IE
NS
[HSPACE=n]
Define the horizontal space to the text next to the picture.
IE NS
[NAME="text"]
An optional parameter which is mostly useful in external languages
such as Javascript. IE NS
[ALIGN=LEFT|RIGHT|TOP|TEXTTOP|MIDDLE|ABSMIDDLE|BASELINE|BOTTOM|ABSBOTTOM]
Align the picture on the page. Left and right aligns the picture
to the left resp. right side of the page. TOP puts the top side
of the picture in the same height as the highest thing on the
line. TEXTTOP does the same with the highest character on the
line. MIDDLE aligns the picture to the center of the baseline
of the textline, while ABSMIDDLE aligns it to the center of the
middleline of the text.BASELINE and BOTTOM put the bottom line
of the pictures on the same height as the baseline of the textline.
ABSBOTTOM put it on the same height as the bottom thing on the
text line, e.g. in characters like g, j etc.
[DYNSRC=url]
Stands for 'Dynamic source' and defines the url to a sound or
VRML file. If the browser doesn't support dynamic IMG's, the
normal SRC will be used. A sound must be in the format .au, .wav
eller .mid. VRML (Virtual Modelling Language) is a 3D standard
for WWW pages. IE
[CONTROLS]
Defines if a DYNSRC object should display controls or not. IE
[LOOP=n|INFINITE]
Defines the number of loops for a DYNSRC object. INFINITE starts
over until the page is closed. IE
[START=FILEOPEN, MOUSEOVER]
Defines when the DYNSRC object will start. Both parameters can
be used, or just a single. IE
Picture formats
The picture should be either in the gif or jpeg formats. Other
file formats requires a special helper application or plugin
for the browser, and isn't recomended. The gif format is devloped
by Compuserve, and allows transparency pictures, interlaced pictures
(where it is displayed while it loads) and can be used as webmaps
(please read the Maps chapter). Jpeg (Joint Photographers Expert
Group) compresses the picture to be smaller than a gif file.
You can set the quality of the jpeg-picture, here's room for
experiments with your graphics! Netscape 2.x and Internet Explorer
can read "progressive JPEG", which has almost the same
features as the gif format, but is not a standard. GraphicConverter
(shareware by Thorsten Lemke) and Photoshop (commercial by Adobe)
are two good graphic programs with different advantages, but
there's much more.
By using something called animated gifs, small animations can
be used in the page. This feature requires no plugins, and is
supported in both Netscape (2.x) and Explorer. It can however
be very slow to load the page. Animations can be transparent,
but according to a bug in Netscape, they are not sometimes. I'd
recommend GifBuilder, a freeware by Aaron Giles, to make animated
gif's, but there's probably other choices that can fit you better.
Spacer
<SPACER TYPE=horizontal|vertical|block [SIZE=n] [...]>
TYPE is the type of space. Use horizontal to insert an empty
space on the single line, vertical to insert space between paragraphs
(for example) and block as an empty picture. block is two-dimensional,
while the others are one dimensional. SIZE is the height or width,
not used with blocks. When using blocks, the HEIGHT, WIDTH and
ALIGN properties can be used, in the same way as in the IMG tag.
NS
Java applets
<APPLET [...]>
Inserts an applet, which is a small program written in the language
Java. For more information about Java, visit sites like Yahoo,
java.sun.com, etc. This is just a short listing of the common
HTML-tags. Must end with </APPLET>. The following parameters
can be used: NS IE
ALIGN=left|center|right
Defines the alignment of the applet.
HEIGHT=n WIDTH=n
Defines height and width of the applet.
HSPACE=n VSPACE=n
Defines horizontal and vertical margins, similar to the IMG-tag.
CODE=text
Defines the name of the applet.
CODEBASE=url
Defines the url to the applet.
<PARAM NAME="text" VALUE="text">
Sends parameters to the applet.
Floating frames
Floating Frames is an Explorer extension. A floating frames works
like a picture and can be placed anywhere in the page. See also
the "Body & head tags" chapter for standard frames.
<IFRAME [...]><FRAME [...]></IFRAME>
Start and end tags for the floating frame. Since Microsoft changed
the way to use the tag in the beta releases of Explorer, both
the IFRAME and FRAME tags should be used. IE
NAME="text"
NAME is the name of the frame, for example used in the TARGET
parameters to refer to the specified frame.
SRC=url
The url to the page which should be placed within the tag.
WIDTH=n
Defines the width of the frame.
HEIGHT=n
Defines the height of the frame
[SCROLLING=yes|no|auto]
Defines if the frame should have scrollbars. If auto is used,
scrollbars will be used if they are needed.
[HSPACE=n] [VSPACE=n]
Sets the horizontal and vertical space in the same way as the
IMG tag.
[ALIGN=LEFT|RIGHT|TOP|TEXTTOP|MIDDLE|ABSMIDDLE|BASELINE|BOTTOM|ABSBOTTOM]
The same properties as the IMG tag..
[FRAMEBORDER=yes|no] [BORDER=n] [BORDERCOLOR=color]
The same properties as in the FRAMESET tag.
Layers
Layers is a new, powerful feature implemented into Netscape 4.0.
You can put two or more layers in top of each others, make them
overlap and create different effects on your pages. With some
JavaScripting, you can make dynamic animations and much more.
Just remember that very few of your visitors may have Netscape
4. NS
<LAYER ...>
This defines a new layer, which later must end with </LAYER>.
The following parameters can be used:
[NAME="text"]
Defines the name of the layer, for use with external languages
such as JavaScript. The first character must be alphabetical.
[LEFT=n] [TOP=n]
The topleft position of the layer, in pixels counted from the
topleft of the page. By default, the layer will appear where
the content of the layer should be displayed if the LAYER-tag
wasn't used. Tags, for example new layers and style sheets, that
are used within the LAYER-tags will use TOP and LEFT as their
default topleft.
[WIDTH=n]
The preferred width of the layer, in pixels. If the layer contains
pictures wider than this, the layer will be enlarged. If the
window is too small to display the entire layer, it will be thinner
than the specified value.
[CLIP="[x1,y1,]x2,y2,..."]
The inline border of the layer, defining the invisible margins
between the layer and the contents of the same. x1 is the number
of pixels related to the LEFT value, y1 related to the TOP value
and x2 and y2 the number of pixels to the right resp. bottom
of the layer. If x1 and y1 are not specified, they will default
to 0.
[Z-INDEX=n | ABOVE=layer | BELOW=layer]
These properties, only one can be used at a time, defines the
stacking order of the layers. ABOVE and BELOW are self-explained,
defining the next or previous layer in the stacking order. The
value 'layer' is the name of an already created layer. Z-INDEX
is a number which will be used to sort the layers. Layers with
high Z-INDEx values are shown above layers with low numbers.
[VISIBILITY=show|hide|inherit]
This defines if the layers content should be visible, use show,
or not, use hide. By default, it is set to inherit which is the
same visibility as the parent layer.
BGCOLOR=color
Defines the background color of the layer. This will also make
the layer opaque, which means that none of the underlaying objects
will be visible.
BACKGROUND="url"
The url of a picture that will be shown as a background, overriding
the BGCOLOR property. The background picture can be transparent.
Embedded objects
<EMBED SRC="url" [NAME=text] [WIDTH=n] [STANDBY="text"]
[TYPE=mime] [HEIGHT=n] [...]>
This tag is used to include objects that requires a plug-in.
For example, a QuickTime movie, a MIDI music sequence etc. You
may need different parameters depending on which type of object
you may use, but WIDTH and HEIGHT can be used most of the times.
In the Read me-files for the plug-in, you can learn about how
to include the plug-in in the HTML source. EMBED, and plug-ins,
are Netscape tags, but supported in both Explorer and Cyberdog.
<NOEMBED>
If the browser doesn't support the plug-in, text within the <NOEMBED>
tag will be displayed, usually as a link. Often used after a
EMBED tag, <NOEMBED><A HREF=...>text</A></NOEMBED>
As you can see, it must end with </NOEMBED>.
Special characters
Special characters is written either with the code, or as &#ascii;
where ascii is the ascii code for the character. Sometimes the
ascii variant isn't usable, so use it only when needed.
character / tag
" "
# #
$ $
% %
& &
' '
( (
) )
* *
, ,
- ‐
. .
: :
; ;
< <
> >
[ [
\ \
] ]
^ ˆ
_ _
` `
{ {
| |
} }
~ ˜
¡ ¡
¢ ¢
£ £
¤ ¤
¥ ¥
| ¦
§ §
® ®
© ©
À À
Á Á
 Â
à Ã
Ä Ä
Å Å
Æ Æ
Ç Ç
È È
É É
Ê Ê
Ë Ë
Ì Ì
Í Í
Î Î
Ï Ï
Ñ Ñ
Ò Ò
Ó Ó
Ô Ô
Õ Õ
Ö Ö
Ø Ø
Ù Ù
Ú Ú
Û Û
Ü Ü
† Ý
ß ß
à à
á á
â â
ã ã
ä ä
å å
æ æ
ç ç
è è
é é
ê ê
ë ë
ì ì
í í
î î
ï ï
› ð
ñ ñ
ò ò
ó ó
ô ô
õ õ
ö ö
ø ø
ù ù
ú ú
û û
ü ü
‡ ý
_ þ
ÿ ÿ
(no-break space, ascii 160) inserts a hard space.
Block text
Block text is text that is set off from the surrounding paragraph
by being indented or separated by some space. There are two tags
to do this:
<address>...</address>
which is for surrounding people's addresses. In some browsers
it may also cause a font change. It does not honor linebreaks,
so if you need to split the address up into separate lines, use
the <br> tag: Peter Flynn
Computer Center
University College
Cork, Ireland
<blockquote>...</blockquote>
is for block quotations. Browsers may indent this or otherwise
set it off from the surrounding text. It does not honor linebreaks,
so if you need to split the address up into separate lines, use
the <br> tag:
Zerbrochen ist das Steuer und es kracht
Das Schiff an allen Seiten. Berstend reißt
Der Boden unter meinen Füssen auf!
Ich fasse Dich mit beiden Armen an!
So klammert sich der Schiffer endlich noch
Am Felsen fest, an dem er scheitern sollte! Mathematics
and Tables
HTML as it currently stands does not define any tags for math
or tabulations, so you can't type them in directly like you can
in TeX or LaTeX.
HTML+ may
contain math and tables definitions, but in any event, the jury
is still out on math in SGML.
However, there are some simple fixes for this:
- for math, use LaTeX
and convert the .dvi file to HTML using Nikos Drakos'
latex2html,
from Leeds University;
- for tables, prepare the file as formatted text in fixed-width
characters and enclose it in the
<listing>...</listing>
tags.
Including external files
There are two mechanisms for including other files at a given
point in your document. <img> is for including
graphic images (pictures) and <inc> is for
text files. <inc> is not in the original HTML
but is a new extension.
Images
Graphics can be included at any point with the <img
src="...">: tag (defined empty, so there's
no end-tag involved). You supply the URL (in quotes) of the graphics
file, which must be in one of the following formats:
- GIF, a popular portable graphics format
- JPEG, another format with better compression
- PS, Adobe Postscript, a printer-specification language
- [others may be implemented]
For example, the picture above (the main quad at University
College Cork) was specified as The optional align="..."
attribute is an addition to HTML and can be either `top',
`bottom' or `middle', which determines if the
top or the middle of the image is aligned with the preceding
text. By default (if you leave out the align="..."
attribute), it aligns the bottom of the image with the preceding
text. In any case, the text is not moved, it's the image position
which is moved.
Users with text-only clients will obviously not get the graphics,
but the client may display a marker like [IMAGE] where
the graphic would normally come. To make this more meaningful,
another new optional attribute to the <img...>
tag has been proposed: alt="..." which
lets you supply alternate identifying replacement text in quotes
which non-graphical browsers can display in place of just saying
[IMAGE]. Setting it to null (alt="")
is a way of preventing non-graphical browsers from displaying
anything at all in place of the image.
Take care in including images: many users who are on slow
lines or congested networks do not appreciate the wait while
their client downloads megabytes of pretty but inessential pictures.
If you include the ISMAP attribute in a <img
src="..."> reference, it is possible to arrange
for some browsers to transmit mouse coordinates to a mapping
server (mapd) which will take appropriate action depending
on whereabouts within the graphic the mouse was located when
it was clicked.
Other non-text included files
Still pictures are not the only things you can include in
your document. If your readers have MPEG viewers or audio support,
you can use the <img src="...">
mechanism to refer to movie clips and sound files, which brings
W3 into the multimedia field.
The warning above about transmission time applies doubled
here: movies over the network take a lot of bandwidth.
Including text files
Some systems (notably Mosaic and the NCSA server) allow the
in-line inclusion of external files. This is not a part of the
original HTML but will likely be included in HTML+.
To include such a file, use the <inc srv "...">
tag (defined empty, so there's no end-tag) giving the name of
the file in quotes. The directory and path should be given as
from the server-root of the server being referenced. The file
will be interpreted as HTML and formatted accordingly: to display
it as plain text, enclose the <srv...> tag
in one of the fixed-width display elements. Here's a local file
I included this way: An SGML document type definition (DTD) is
like the description of a grammar for a programming language.
WARNING: this uses non-standard syntax (there is no `=' sign
between srv and the filename argument, so strictly speaking
this is not valid SGML. It is also dependent on using the NCSA
server. Details of other forms of the tag and how to include
the output of server-side commands are in the NCSA's
documentation.
Forms
<FORM ACTION="url" METHOD=method [ENCTYPE=encrypt]
[SCRIPT="url"] [TARGET="text"] [NAME="text"]>
This is the start tag of a new form. ACTION is the URL of a cgi
script, an email address, or a page to which the data will be
sent. METHOD is either "post" or "get", depending
how the data is to be sent. ENCTYPE is the encryption type, not
often used. SCRIPT is a client-side URL script. TARGET is a Netscape
extension which opens the result in a specified window or frame,
read the Link chapter for more. NAME is an optional parameter
which can be useful when languages like JavaScript are used.
Must end with </FORM>.
Input objects
<INPUT [...]>
INPUT is a form object, for example a field. The following parameters
are allowed:
NAME=text
The name of the object. The result will be sent as 'name=value'
TYPE=text
Defines the object type. Can be either TEXT (Text field), INT
(Number field), PASSWORD (Password field, characters is viewed
as bullets, •), RADIO (radio button, only one can be selected),
CHECKBOX (Selected or not), HIDDEN (A hidden textfield), FILE
(A special button which will ask the user for a file to upload.
This requires special cgi-scripts and servers.), SUBMIT (a button
used to send the form), IMAGE (Imagemap as a submit button) and
RESET (a button which reset all objects to their default values).
A form must have at least one SUBMIT or IMAGE object.
VALUE=text
Is the default value of the object, for example "Hello"
in a text field. If TYPE is RADIO or CHECK, VALUE is returned
only if the radiobutton or checkbox is checked. May be used in
all objects.
[SIZE=n]
Defines the width of the object in pixels. Not needed in all
objects, for example not in buttons.
[MAXLENGTH=n]
Defines the maximum length of the value, for example 3 (characters).
Needed in the same objects as used by the SIZE parameter.
[CHECKED]
Set the highlight of a radio button or check box to true as default.
Not used in other objects.
[SRC="url"]
For use with TYPE=IMAGE only. Same as for the <IMG> tag.
[ALIGN=right|center|left]
Optional parameter for use with TYPE=IMAGE. Same as for <IMG>.
Other form objects
<SELECT NAME="text" [SIZE=n] [MULTIPLE]>
Start tag for a popup button or list. Must end with </SELECT>.
NAME is the object name and SIZE the number of visible rows.
If the optional MULTIPLE parameter is used, the object will be
a list. If not, it will show up as a popup button. Multiple items
can be highlighted in a list by holding the command and control
keys. Use the following tag within the <SELECT> tag:
<OPTION [VALUE=text] [SELECTED]>text2
Defines a new popup menu option. Don't end with </OPTION>!
Value is the text to be sent, usually "text2".
<TEXTAREA NAME=text [COLS=n] [ROWS=n] [WRAP=virtual|physical|off|soft|hard]>
Insert a scrolling text field. COLS is the number or columns
(horizontal characters). WRAP is a Netscape tag and sets the
text alignment of the text field. OFF is the default option,
which will insert horizontal scrollbars to the field. Using another
parameter, the text will begin on a new line when reaching the
right end of the field. Using physical or hard, the text will
be sent wrapped. Using virtual or soft, the text will be viewed
but not send wrapped. Must end with </TEXTAREA>. The text
between the start and end tag is the default text in the field,
for example <TEXTAREA>Hello</TEXTAREA>. (NS)
Form-filling
The form-fill
feature is a proposed enhancement in HTML+ which Mosaic,
Lynx and some other browsers have started to support.
A form is made up of text interspersed with a series of input
areas which the user can fill in, and finally send the completed
form to a destination you (the author) specify. In most cases
this destination is a HTTP server, which will run a script or
program to parse (check) the input data and then file or process
it or send it to a specified email address. Details of how to
specify processing are complex and beyond the scope of this document:
you should read (for example) the NCSA's
documentation.
Here is a brief overview of the structure of a form and how
to specify the input areas (fields). If you want to use forms,
you need to have access to a server where you can place the script
or program which you want to process the data.
Form definition
A form must be entirely defined within <form...>...</form>
tags. The attributes for the start-tag are:
- method="POST", the only value so far defined
(in the NCSA's server at least, please let me know if you have
more information on others)
- action="url", which specifies the
URL of the server and script which is to do the processing.
For example:
Input areas (fields)
An input area is defined with the <input...>
tag (defined empty, so there's no end-tag). This tag takes a
variety of attributes which define the name of the field, what
type of input it is, the maximum length (in the case of text)
or a restricted range of values (in the case of radio or checkbox
buttons):
- name="..." lets you name the field (in
quotes). This name is passed to the server script so that field
values can be identified. In the case of repetitive fields like
radio buttons, this name must be repeated identically in each
tag;
- type="..." specifies the type of field
(in quotes). The main types are:
- "text", used for names, addresses
or any textual data;
- "number", used for numeric input;
- "radio", for multi-choice questions where
only one choice can be activated (this is the `check one only'
type of question);
- "checkbox", for multi-choice questions
where any number of choices can be activated (this is the `check
all that apply' type of question);
- "reset", to let the user reset all fields
to blank or default;
- "submit", which the user can activate
when the form is completed and ready to send to the server.
- size=nnn is used with text and number fields
to specify the maximum size of text allowed. Giving two numbers
separated by a comma indicates multi-line text (the first value
is the number of lines, the second the maximum length for all
lines);
- value="..." specifies the value that this
input area will take on if activated (use with non-text fields);
- checked can follow the value="..."
attribute of a radio or checkbox field to specify a default.
The button is pre-highlighted to show it is already chosen.
This structure is best shown in an example:
|