WWW Manual for the AIUB
(HTML Primer for the AIUB,
... and more - HPAM 1.15)
0. Table of content
- Introduction
- URLs and places for HTML documents
- HTML dialects and the general structure of HTML
documents
- Empty tags
- Container tags
- Special characters
- Style Sheets
- Available set of icons
- Useful hints for creating good homepages
- Useful hints for webmastering
- Links for further information
This document started as a translated cut of the German manual
"Bedienungseinführung in die Computer der AI Bonn"
internally available as GNU zipped PS file in the directory
'~webstw/Manual' as
'aibonn97.ps.gz'.
In my notation everything written in italic should be replaced
by a proper text (e.g. 'username' by 'jbraun')
and everything which is written in typewriter and embraced by
'quotation marks' can be typed in as source code for a World Wide Web
(WWW, W3) document.
The simple quotation marks (' ') mustn't be typed in, the double quotation
marks (" ") have to be typed as is.
If there is a choice in an option, the possibilities are given separated
by a vertical bar ('|') - choose only one (and leave out the
separation mark).
[WWW is one method (beneath E-Mail, File Transfer Protocol (FTP) etc.)
to use the Internet, a global computer network.
The roots of the Internet are lying in the military network ARPANET, which
started with 4 hosts end 1969 (to be compared with more than 28 thousand
internet hosts in December 1987 and more than 16 million hosts in 1997).
ARPANET was given up in March 1990.
CERN made the WWW techniques 'public domain' in April 1993.]
This document should help the members of the Astronomical
Institutes of the Rheinische
Friedrich-Wilhelms Universität Bonn (AIUB)
to create own homepages,
give some tricks and serve as a test for the browser
use.
As it is recommended to download this document to use it locally, you may
visit the original version of this page at the URL:
to look for the latest version of HPAM.
Since 23rd November, 1996 the WWW address, called Uniform Resource
Locator (URL), of the AIUB is no longer
'http://aibn55.astro.uni-bonn.de:8000'
but 'http://www.astro.uni-bonn.de'.
Generally speaking, a URL consists out of three parts:
- The access method, normally specified by 'http:' which
is the abbreviation for Hypertext Transfer Protocol.
HTTP 1.0 is standard, but version 1.1 will be available soon
(improvements: persistent connections, intelligent caching,
digest authentication, virtual hosts) [the first internet
draft on HTTP is dated July 1993].
Other alternatives for 'http:' are:
- 'file:': load a local file (useful for testing own
homepages not yet linked to the W3),
- 'ftp:': use the File Transfer Protocol for
data transfer,
- 'telnet:': address a telnet server,
- 'mailto:': connect to an E-Mail address,
- 'nntp:': NetNews transfer protocol,
- 'news:': for NetNews (USENET) addresses (worse than
NNTP),
- 'gopher:': address a gopher server,
- 'WAIS:': address a WAIS server,
- ...: and some more!
The method is separated from the rest of the URL by the double
slash '//'.
- The name of the computer or the Internet Protocol (IP) number
(or E-Mail address etc. for special methods of accessing a server).
Generally the computer name has a (normally three letter - for USA
locations [in the "Memorandum of Understanding" (Geneva,
May 1997), 7 new TLDs for the US are planned, which do not follow
this convention], or two letter - for codes of other countries)
suffix, the so called Top Level Domain
(TLD),
which should identify the organization running this server:
- '.com': commercial,
- '.edu': educational,
- '.gov': government,
- '.mil': military,
- '.net': networking,
- '.org': noncommercial;
- '.arts': (planned),
- '.firm': (planned),
- '.info': (planned),
- '.nom': (planned),
- '.rec': (planned),
- '.store': (planned),
- '.web': (planned);
- '.ar': Argentina,
- '.at': Austria,
- '.au': Australia,
- '.be': Belgium,
- '.bg': Bulgaria,
- '.ca': Canada,
- '.ch': Switzerland,
- '.cl': Chile,
- '.cn': China,
- '.cz': Czech Republic,
- '.de': Germany,
- '.es': Spain,
- '.fr': France,
- '.gr': Greece (Hellenic Republic),
- '.ie': Ireland,
- '.il': Israel,
- '.it': Italy,
- '.jp': Japan,
- '.kr': South Korea,
- '.lu': Luxembourg,
- '.mx': Mexico (United Mexican States),
- '.nl': The Netherlands,
- '.pl': Poland (Republic of),
- '.ru': Russia (Russian Federation),
- '.se': Sweden,
- '.tw': Taiwan,
- '.uk': United Kingdom,
- '.us': United States of America,
- '.za': South Africa,
- ...: and some more!
The allocation of domains including the IP number blocks are currently
done by the Internet Assigned Numbers
Authority (IANA) and by Network Solutions (NSI),
but will soon be
shifted to the international organization
Internet Corporation for Assigned Names
and Number (ICANN).
If not the standard port 80 is used, one has to add the port like
':8000'.
This second token is separated by a slash '/' from the last part.
[The Transmission Control Protocol (TCP) was published
('A Protocol for Packet Network Internetworking') by Bob Kahn and
Vinton Cerf in May 1974, 4 years later the Internet Protocol (IP)
is discussed;
the concept of the Domain Name Service (DNS) was published
by Paul Mockapetris as RFSs 882 and 883 in November 1983.]
- The path of the file.
If this is not specified, the default 'index.html' is searched.
Additionally to the file name one can link to an anchor in the
given HTML (see chapter 3) document, with
'#' as separation mark (see the container tag
'<A>').
To read the homepage of the user 'username' just set the URL
'http://www.astro.uni-bonn.de/~username'.
The pages of the Astronomical Institutes (AI) can be entered by the following
web accounts set for 'username':
- 'webaiub':
- web account of the Astronomical Institutes
of the University of Bonn (AIUB; not necessary to specify it
for the URL),
Webmaster: G. Lay (room 2.23, E-Mail:
glay@astro.uni-bonn.de);
- 'webstw':
- web account of the Institute for Optical
Astronomy (Sternwarte, including the
Observatory Hoher List),
Webmaster: J.M. Braun (room 3.08, E-Mail:
jbraun@astro.uni-bonn.de);
- 'webrai':
- web account of the Institute for Radio Astronomy,
Webmaster: C. Brüns (room 1.14, E-Mail:
cbruens@astro.uni-bonn.de);
- 'webiaef':
- web account of the Institute for Astrophysics and
Space Research,
Webmaster: M. Römer (room 3.01, E-Mail:
roemer@astro.uni-bonn.de);
- 'webgk':
- web account of the Bonn/Bochum Graduiertenkolleg,
Webmaster: J.M. Braun (room 3.08, E-Mail:
jbraun@astro.uni-bonn.de).
If the links are made in the web pages of the institutes to a special user of
the AIUB,
the only thing for him to do is to make a directory
'public_html' in his home directory '~' (or making a link
with the same name to a special HTML document, see the useful hints of
chapter 9) and to create a text file
'index.html' with a general structure described in
chapter 3 and HTML orders described in
chapter 4, chapter 5 and
chapter 6.
A WWW document is written in the HyperText Markup Language (HTML),
which exists in multiple versions.
To be sure that many browsers can display the desired results, one should
use HTML 2.0 only.
The latest generally supported standard version is
HTML 3.2
[local AIUB link]
with some enhancements (but not the interesting features like mathematical
formulae, which should come up with HTML 3.0 - but the version 3.0
was supported only by the former W3C browser
Arena).
HTML 3.2 is the new standard (including all HTML 2.0 operations),
because it is supported by many firms (IBM, Microsoft, Netscape Communications
Corporation, Novell, SoftQuad, Spyglass, and Sun Microsystems),
and first browsers are getting available (e.g. Netscape 4.0, which has
some additional goodies like absolute positioning, layering and
[cascading|Java script] style sheets, see
chapter 7).
The hottest version is
HTML 4.0
[local AIUB link]
which has become the new W3C
Proposed Recommendation in
November 1997, but we all have to wait for browsers using its enhancements.
All HTML tags & attributes together with the first
Netscape
Navigator/Communicator version which has implemented their functions
are given in the local HTML Tag
Reference and the local HTML
- NN release - sheet by Netscape.
-
Overview on todays Browsers:
The concentration on Netscape
(NN 1.0 was launched on 15. Dezember 1994) is due to the availability
(since 31. March 1998 most parts can even be downloaded as sorce code,
see the MOZILLA project) and amount
of implemented functions, which made
NN
the number 1 webbrowser in sciences.
The current release is 4.51 which seems to be as stable as 4.08, all other
versions of 4.xx should not be used.
The next real release after so many bugfixes is version 5, which will contain
the new rendering engine 'gecko' and will fully support HTML 4.0,
CSS 1.0 and 2.0, DOM, and XML - let's wait for the revolution to come
in July '99 (as announced, more than 13 months later than I had expected) ...
This position was kept in the first WWW years by the graphical browser
Mosaic
(with its first release published in September 1993),
but NCSA has stopped the development in January 1997 (i.e. no frame,
style sheet or scripting support in the latest version).
Microsofts Internet Explorer
(MS IE, version 1.0 emerging in mid 1995) is still not available for most
Unix systems
(until now only Solaris and HP-UX [SUN's and HP's UNIX derivates]
were supported by IE 4.0 and 5.0 - no Linux, DEC Unix [formerly called
OSF/1] or AIX [IBM's Unix derivate] version is available).
Furthermore MS seems to have different thoughts about stability of programs
and the keeping of standards
(IE 5 still has problems
with HTML 4.0, CSS and DOM).
The use in the scientific community is thus extremely rare.
Amaya by the W3C was launched
in February 1997 and is still in the phase of extreme development (basing
on Thot), but may
soon be the best browser available - the actual release 2.0a is more than
interesting, with 95% HTML 4.0 support - it only lacks complete support
of frames [who needs them anyway?] and a part of new features in tables and
forms (next release: end of April '99).
This test-bed browser/authoring tool of the W3C
supports many platforms, keeps the given standards (which is not the case for
all the above cited browsers, having advantages and disadvantages) and
houses really new features:
Amaya is also an editor, supports the first XML DTD Mathematical Markup
Language - MathML (see the
local W3C Recommendation)
and can view a document in many ways, e.g. giving the structure of an HTML
document (see the local Manual for
V. 1.4a).
If the described browser situation changes, you will read it right
that place.
Personally I hope that one day in future we all can stop recommending special
browsers; if you share this dream, you should look at the homepage of
The Web Standards Project
fighting for standards in our browsers since 10. August 1998!
HTML is an application of the Standard Generalized Markup Language
(SGML), which was standardized in 1986 by the International Organization
for Standardization (ISO 8879) for data and document interchange in open
system environments.
The formal specification of a markup language written in SGML is called
Document Type Definition (DTD), so HTML is a SGML DTD (if you are
wild about abbreviations).
[You may note that SGML has its own language to define the format:
Document Style Semantics and Specification Language (DSSSL).]
Tim Berners-Lee (see also
this
link) invented HTML while at CERN,
the European Laboratory for Particle Physics in Geneva [the proposal was dated
March 1989 and the first draft on HTML 3. November 1992].
He is now the overall
Director of the WWW Consortium
(W3C, founded on 1. Oktober 1994 at the MIT), which is responsible for
the evolution and standardization of HTML.
The latest version of PostScript (PS, see
Adobe), called Level 3, will digest HTML
documents.
First devices understanding postscript level 3 will be available in mid 1997.
Future developments:
Coming back to present day worldwide information exchange, HTML has
two groups of operators:
Most of these operators are used in the document body and fall in one of
the following 2 cathegories:
- block level elements which cause paragraph breaks (e.g. 'P',
'HR', 'Hx', 'OL', 'UL',
'DL', 'LI', 'PRE', 'TABLE',
'FORM', 'DIV', 'CENTER',
'BLOCKQUOTE', 'ISINDEX', 'DIV') and
- text level elements which don't (e.g. 'BR', 'B',
'I', 'EM', 'FONT', 'A',
'IMG', 'APPLET', 'SPAN').
Note that text level elements never contain block level elements.
Generally, an HTML document should have the following structure:
<HTML>
<HEAD>
<TITLE>title_text</TITLE>
other_head_elements
</HEAD>
<BODY>
<!-- Here comes a commentary, afterwards the main document -->
main_text_with_HTML_orders
</BODY>
</HTML>
Even if most web browsers don't need this structure (e.g. a normal browser will
get the '<HTML> </HTML>' information by the ending of the
file name: '*.html' or '*.htm'), it is very advisable
to build every document out of this skeleton. Feel free to use as many
comments as you find useful to arrange your documents.
If you write an HTML 3.2 document, you must say
'<!DOCTYPE ...>' as first element (i.e. before the
'<HTML>'-tag, e.g. '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">' for the final version of HTML 3.2 or
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">' for the
transitional version of HTML 4.0).
Such an HTML 3.2 document also has to include exactly one title
specification:
'<TITLE>title_text</TITLE>'.
If you want to use frames (see container tag
'FRAMESET'), you must have a document with a special structure
working together with normal HTML documents of the above structure.
Just try this frame document containing the
following lines:
<HTML>
<HEAD>
<TITLE>WWW Manual, frame test</TITLE>
</HEAD>
<!-- Now the fame structure of the homepage 'w3_man_f.html' -->
<!-- Created: 16th February, 1997, last changes: 20th February,
1997 -->
<FRAMESET ROWS="270,*">
<FRAME SRC="w3_man_h.html"
SCROLLING="NO">
<FRAMESET BORDERCOLOR="RED"
COLS="33%,33%,*">
<FRAME SRC="http://www.astro.uni-bonn.de/~webstw/" NAME="3rd floor">
<FRAME SRC="http://www.astro.uni-bonn.de/~webrai/" NAME="2nd floor">
<FRAME SRC="http://www.astro.uni-bonn.de/~webiaef/" NAME="1st floor">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
Your browser doesn't understand frame definitions.
Try with a Netscape browser (2.0 or higher)!
<BR>
Go back to the <A HREF="w3_man.html">WWW Manual</A>
for the Astronomical Institutes of Bonn.
</NOFRAMES>
</HTML>
Before going into details with special HTML commands, I want to make a remark
about what is going on behind the scenes.
Server (delivering data) and client
(user agent - UA, or normally called 'browser', see above) are working
together, so it is possible to run programs from one of these sides.
A program running on the server is able to use the Common Gateway
Interface (CGI), like forms (see the container tag 'FORM') and
image maps via the option 'ISMAP' (see empty tag 'IMG'),
while other programs like image maps via the option 'MAP' (see empty
tag 'IMG') or Java scripts (see container tag 'SCRIPT') use
the client.
Empty tags are single tokens out of a name in angle brackets
('<name>') with or without further options.
These are namely:
- '<ISINDEX>':
- Indicates (with a special message, if one uses the option
'PROMPT="prompt_message"', which is a
Netscape/HTML 3.0/3.2 special, or with the default message
"This is a searchable index. Enter search keywords:")
that the user agent (normally a CGI script of the used WWW server)
should provide a single line text input field for entering a query
string; employed in the container tag 'HEAD' - note that
'ISINDEX' is deprecated in HTML 4.0, so please use
'INPUT' for a single-line text input control;
- '<BASE HREF="base_URL">':
- Defines a special base URL 'base_URL' (normally
not necessary, the default is the URL of the document);
employed in the container tag 'HEAD';
- '<META>':
- Supplies meta info as name/value pairs describing properties of
the document, e.g. '<META HTTP-EQUIV="Expires"
CONTENT="Tue, 20 Aug 1996 14:25:27 GMT">';
employed in the container tag 'HEAD';
- '<LINK>':
- Defines relationships with other documents, e.g. '<LINK
REL="Chapter" REV="Contents"
HREF="chapter2.html">';
employed in the container tag 'HEAD';
this HTML 2 tag is oftenly used to embed a style sheet (see
chapter 7), e.g. '<LINK
REL="stylesheet" HREF="name.css"
TYPE="text/css" MEDIA="screen">', or to
give search engines additional information about related documents,
e.g. '<LINK MEDIA="print"
TITLE="Docu_in_PS"
TYPE="application/postscript" REL="alternate"
HREF="WWW_URL">';
- '<P>':
- Beginning of a new paragraph (for HTML 3.0/3.2 or higher one can
use '</P>' as delimiter and one can use further
options like 'ALIGN="RIGHT|CENTER|LEFT"',
so you can write right,
centered and
left [default] aligned paragraphs);
- '<BR>':
- Forcing a linebreak - normally this is made automatically by the
used browser. In HTML 3.0/3.2 one can give the option
'CLEAR="LEFT|RIGHT|ALL"' to specify
whether text should flow around images (see 'IMG')
on left/right/both margin(s);
- '<HR>':
- Horizontal ruler to seperate text. With Netscape or an HTML 3.2
browser one can use the options 'SIZE' to define the
thickness and 'WIDTH' to define the length of the line
in pix. You can also use the options
'ALIGN="LEFT|RIGHT|CENTER"' for the alignment
and 'NOSHADE' for the use of one single color.
Don't use '<P>' and '<HR>' together,
that would be bad HTML style;
- '<WBR>':
- Introducing a place were line break is allowed (not forced as by
'BR'), normally used in the 'NOBR' environment
- NN 1.1 special;
- '<LI>':
- Defines a list element (possible options are depending on the special
list type, see the container tags 'DIR',
'MENU', 'OL' and 'UL' for the different
types of lists);
- '<DT>':
- Definition term (1st element of container tag 'DL', see
empty tag 'DD');
- '<DD>':
- Definition description (2nd element of container tag 'DL',
see empty tag 'DT');
- '<IMG SRC="picture_name" ALIGN="TOP|MIDDLE|BOTTOM" ALT="[text_instead_of_picture]">':
- Displays the GIF (graphics interchange format) or JPEG (joint
photographic experts group) picture 'picturte_name'
with the specified alignment or the
'[text_instead_of_picture]' if one uses a text
browser or force not to display any picture.
In HTML 3.2, one can make an image map by giving the option
'USEMAP="#map_name"' and defining the
areas and links by the container tag 'MAP' and the empty
tag 'AREA' (the older 'ISMAP' option, an operation
of the server, should no longer be used).
In HTML 4.0 the new option 'LONGDESC' can be used to
give an URL to a long description of the image and
the 'ALT' option is always required;
- '<FIG SRC="picture_name">':
- Displays the GIF (graphics interchange format) or JPEG (joint
photographic experts group) picture 'picturte_name',
options (and function) like the empty tag 'IMG'
(but additionally with the possibility to overlay other graphics)
- only defined in HTML 3.0, so use 'IMG' instead;
- '<AREA HREF="linked_URL" ALT="help_text" SHAPE="shape_of_area" COORDS="coord_values">':
- Defines an area of shape 'shape_of_area' out of
'DEFAULT' (specifying the entire region; HTML 4.0
addition), 'RECT' (Default), 'CIRCLE' or
'POLY' with coordinates 'coord_values'
(in the notation:
'left_x, top_y, right_x, bottom_y' for 'RECT',
'center_x, center_y, radius' for 'CIRCLE'
or 'x_1,y_1, x_2,y_2, x_3,y_3, ...' for 'POLY' with
'x,y' in pix or per cent if used with the suffix '%')
of an image embedded by 'IMG' as a link to the URL
'linked_URL' (or to nothing if one uses
'NOHREF' instead of 'HREF' to cut a hole in the
underlying hot zone) with the text label 'help_text',
the option 'TABINDEX' can get a value between 0 and 32767
specifying the position in the tabbing order and 'ACCESSKEY'
sets a single character to give focus to an element (beneath
'AREA' this option is also applicable to 'A',
'BUTTON', 'INPUT', 'LABEL',
'LEGEND', and 'TEXTAREA';
'AREA' is used in the HTML 3.2 container tag
'MAP' (in HTML 4.0 the 'ALT' option is always
required);
- '<INPUT TYPE="text" NAME="name" SIZE="45">':
- Creates an input field with a specific type, name and size in
characters (here 45), see the container tag 'FORM';
- '<INPUT TYPE="radio" NAME="choice" VALUE="remark">':
- Creates a button and deliver 'remark' if choosen, see
the container tag 'FORM';
- '<INPUT TYPE="submit">':
- Creates a button to submit the form, see the container tag
'FORM';
- '<INPUT TYPE="reset">':
- Creates a button to erase all given entries of a form, see the
container tag 'FORM';
- '<OPTION>item_text':
- Defining an item in a selection list on an HTML form (with the
attribute 'SELECTED' specifying a pre-selected item),
see the container tags 'SELECT' and 'FORM'
(note that there can be an optional end tag);
- '<KEYGEN NAME="name"
CHALLENGE="challenge">':
- Facilitates the generation of key material and submission of the
public key as part of an HTML form suited for web-based certificate
management systems, see the container tag 'FORM' - NN 1.0
special;
- '<TR>':
- Introduces a table row (line) with horizontal/vertical alignment
options 'ALIGN="LEFT|CENTER|RIGHT"' and
'VALIGN="TOP|MIDDLE|BOTTOM"', see the
container tag 'TABLE' - HTML 3.0/3.2
(in HTML 4.0, the end tag is optional);
- '<TD>':
- Introduces a table data cell. If a cell should span more than one
column or row one can use the options 'COLSPAN' or
'ROWSPAN', to set the alignment use the options
'ALIGN' with 'LEFT' (Default),
'CENTER' or 'RIGHT' and 'VALIGN' with
'BOTTOM', 'MIDDLE' (Default) or
'TOP', to suppress word wrapping say 'NOWRAP'
(i.e. automatical use of ' ' between words of
a cell) and in purpose of giving the absolute size of the cell
try 'HEIGHT' and 'WIDTH'
[you can choose the background color of cells when viewed
with Netscape 3.0 / Internet Explorer 2.0 by
'BGCOLOR', see container tag 'BODY'],
see the container tag 'TABLE' (in HTML 4.0, the end tag
is optional);
- '<TH>':
- Introduces a table header cell; one can use the options introduced
for the tag '<TD>' above, see also the container tag
'TABLE' (in HTML 4.0, the end tag is optional);
- '<COLGROUP>':
- Creating an explicit column group, e.g. specifying the width of 40
columns by: '<COLGROUP SPAN="40"
WIDTH="20"></COLGROUP>'
(the 2nd tag is optional), see the 'COL' tag - new
HTML 4.0 empty/container tag employed in the container tag
'TABLE';
- '<COL>':
- Groups together attribute specifications for table columns (e.g.
via the attributes 'SPAN' and 'WIDTH' or by using
them as anchors for style sheet definitions (see
chapter 7) -
new HTML 4.0 empty tag employed in the container tag
'COLGROUP';
- '<SPACER TYPE="HORIZONTAL|VERTICAL|BLOCK" SIZE="n">':
- Inserts horizontal/vertical/both space of 'n' pix for
absolute positioning, like this space of 32 pix between the two
normal quotation marks:
'' - Netscape 3.0 special;
- '<PARAM NAME="param_name" VALUE="param_value">':
- Gives parameter 'param_name' with the value
'param_value' to a Java Applet, see the HTML 3.2
container tag 'APPLET', also used in combination with
'OBJECT' tag (note that only ``children'' will feed their
information) - NN special and new HTML 4.0 tag;
- '<FRAME SRC="URL_of_embedded_HTML_document">':
- Gives the URL 'URL_of_embedded_HTML_document' of the
HTML document, which should be loaded in the current frame introduced
by the embracing container tag 'FRAMESET'.
Other options available are
'SCROLLING="YES|NO|AUTO"' to enable/disable
scrolling in the frame,
'NORESIZE' to prohibit the user from changing the frames size,
'NAME' to specify a name of the current frame and
'MARGINWIDTH' and 'MARGINHEIGHT' to give the size
of the borders of the frame
[in Netscape 3.0 one can choose the color of the frame border
by 'BORDERCOLOR', see container tag 'BODY',
in HTML 4.0 the new option 'LONGDESC' can be used to
give an URL to a long description of the frame]
- Netscape special and new HTML 4.0 tag.
Container tags consist of two tokens, one introducing and the other
deliminating the operation.
The 1st token can include options, the 2nd token has a slash '/' in front
of its name but no options.
Here comes the (complete ?) list:
- '<HTML>main_document</HTML>':
- Declares the file as an HTML document (see
chapter 3), with possible options
'LANG' specifying the language, e.g. 'en' [for
English], 'en-US', 'en-cockney', 'de'
[German], 'nl' [Dutch], 'it' [Italian],
'fr' [French], 'es' [Spanish], 'i-navajo',
'x-klingon' ['x' for experimental language], and
'DIR' specifying the base direction of directionally neutral
text, i.e. 'LTR' (default: left to right) or 'RTL';
- '<HEAD>head_of_the_document</HEAD>':
- Declares the head of the document where one can set a title with the
container tag 'TITLE' or use other head elements, namely
the container tags (see chapter 5)
'STYLE' and 'SCRIPT' and the empty tags
(see chapter 4) 'ISINDEX',
'BASE', 'META' and 'LINK'
(see chapter 3);
- '<TITLE>title_text</TITLE>':
- Sets the title of the HTML document, which is displayed by the
browser - this command is used in the container tag
'HEAD';
- '<STYLE> <!-- style_definition_text -->
</STYLE>':
- Reserved for use with style sheets (see
chapter 7); employed in the container tag
'HEAD' (note that the commentary tags are to stop older
browsers [e.g. NN < 4.01 or IE < 3.01] from displaying the
style sheed code and that the tag is not defined in HTML 3.2!);
- '<SCRIPT LANGUAGE="JavaScript"> <!-- Java_Script_program_code //--> </SCRIPT>':
- Embedding client-side JavaScript code (or another specified scripting
language) 'Java_Script_program_code' for all Java
enabled browsers (NN 1.0/3.0 special; for future versions of
HTML, not defined in HTML 3.2, but marked as reserved; in
HTML 4.0 the option 'LANGUAGE' had been marked as
deprecated and should be replaced by the option 'TYPE', e.g.
giving the value 'text/javascript');
this tag is employed in the container tag 'HEAD';
- '<NOSCRIPT>alternative_text</NOSCRIPT>':
- Giving 'alternative_text' for browsers not supporting
JavaScript (not implemented or not activated), employed in the
container tag 'BODY' - NN 3.0 special and new
HTML 4.0 tag;
- '<SERVER>JS_appl</SERVER>':
- Embedding server-side JavaScript statements that are used in a
JavaScript application on the server (see the local Netscape Manual
"Writing Server-Side JavaScript
Applications") - NN 1.0 special;
- '<BODY>main_document</BODY>':
- Declares the main part of an HTML document (see
chapter 3).
In the first (i.e. starting) tag you can use options for Netscape or
an up-to-date HTML 3.2 browser to control the displayed colors
of the text by 'TEXT', of the background by
'BGCOLOR', of a normal link by 'LINK', of a used
link by 'VLINK' and of an active link by 'ALINK',
each value given in HEX in red-green-blue notation, e.g. to get
black-gray-yellow-red-green combination just type in '<BODY
TEXT="#000000" BGCOLOR="#BBBBBB"
LINK="#FFFF00" VLINK="#AA0000"
ALINK="00AA00">'.
Instead of the color codes you can use the following names:
'BLACK'
| corresponding
to
| '#000000',
|
'SILVER'
| corresponding
to
| '#C0C0C0',
|
'GRAY'
| corresponding
to
| '#808080',
|
'WHITE'
| corresponding
to
| '#FFFFFF',
|
'MAROON'
| corresponding
to
| '#800000',
|
'RED'
| corresponding
to
| '#FF0000',
|
'PURPLE'
| corresponding
to
| '#800080',
|
'FUCHSIA'
| corresponding
to
| '#FF00FF',
|
'GREEN'
| corresponding
to
| '#008000',
|
'LIME'
| corresponding
to
| '#00FF00',
|
'OLIVE'
| corresponding
to
| '#808000',
|
'YELLOW'
| corresponding
to
| '#FFFF00',
|
'NAVY'
| corresponding
to
| '#000080',
|
'BLUE'
| corresponding
to
| '#0000FF',
|
'TEAL'
| corresponding
to
| '#008080',
|
'AQUA'
| corresponding
to
| '#00FFFF'.
|
Without these options each browser takes default colors.
If you want to play with colors, just use my small
Java example.
To use a (automatically repeated) picture as background just type
the option 'BACKGROUND="name_of_picture"'
(please note that all color and background defining options are
deprecated in HTML 4.0 and should be replaced by style sheets);
- '<Hx>header_text</Hx>':
- Makes a header with charactersize 'x' - '1'
for the greatest and '6' for the smallest characters.
The option 'ALIGN="CENTER"' can be used to create
centered headings.
Before and after its use an automatical line break is set;
- '<BASEFONT SIZE="5"> ... </BASEFONT>':
- Setting the base font size (here '5', values: '1' - '7', default: '3'),
employed in the container tags 'HEAD' and 'BODY'
- NN 1.0/1.1 special, deprecated in HTML 4.0 (see the
'FONT' tag);
- '<FONT SIZE=[+|-]1|2|3|4|5|6|7>text</FONT>':
- Chooses the size of the text (absolute or
relative to the used character size defined by 'BASEFONT')
and color (with option
'COLOR=RRGGBB' in hexadecimal
red-green-blue - code, see '<BODY>')
[you can choose the special font (if available on the system of the
viewer) and some alternatives by the option 'FACE' with
Netscape 3.0 / Internet Explorer 2.0, e.g. this text in
Times New Roman (or Helvetica
or standard) font by '<FONT
FACE="Times New Roman,Helvetica">'],
- Netscape / HTML 3.2 special - nowadays these settings
should be declared via CSS, see chapter 7;
- '<MULTICOL COLS="n">col_text</MULTICOL>':
- Breaks the text 'col_text' into 'n'
columns, the options 'WIDTH' and 'GUTTER' can
be used instead of the automatic choice of the size and space
between the columns - Netscape 3.0 special.
Is this (mad) text, gshasasah uwidiaa llldd
lldsds lioldlds lldsl dl ld leldsd kKssaj kjahsh jhd J Hs jjdsjdjs kk
JHJHSJDGZ llsa lls llasa llleffefl ll ll fefeox llde lllf llferropwm
ldk dJhdsu fdfdk lklf l l feof oorioer dhffueuwegxcv JjhhdJDjfjffJ
JJHJd dsdds d dskdjskj kkdsiwi dwdie iidewhidieih iihf ifhie iiesd
Ihifefhi hHdjd, written in 4 columns?
- '<MARQUEE BEHAVIOUR="SLIDE|SCROLL|ALTERNATE" DIRECTION="LEFT|RIGHT" LOOP="n">scrollable_text</MARQUEE>':
- Marking text 'scrollable_text' by moving it in the
specified manner/direction 'n' times ('-1'
or 'INFINITE' for infinity),
the options 'SCROLLAMOUNT' and 'SCROLLDELAY' could
be used to give the step size and time,
the options 'HEIGHT', 'WIDTH' and 'BGCOLOR'
set the hight, width (in pix or per cent) and background color (see
container tag 'BODY'),
- Internet Explorer 2.0
special;
- '<CENTER>centered_text_or_pictures</CENTER>':
- Displays the embraced items centered in the active
line - Netscape / HTML 3.2 special (deprecated in
HTML 4.0, so use the equivalent
'<DIV ALIGN="CENTER">' instead);
- '<DIV>structured_text</DIV>':
- Structures a text, for alignment use the option
'ALIGN="RIGHT|CENTER|LEFT"' - HTML 3.0/3.2
special, so the container tag 'CENTER' should be replaced
by '<DIV ALIGN="CENTER"> ...';
this block-level element is oftenly used to put style to a text block
(see chapter 7);
- '<SPAN>structured_text</SPAN>':
- No opearation (NOP) command for all user agents, oftenly used to put
style to an inline text (see chapter 7) -
new HTML 4.0 command [remember that all browsers not familiar to
this command will simply ignore it - so even they do the right thing
;-)];
- '<B>text</B>':
- Writes the text in boldface;
- '<I>text</I>':
- Writes the text in italics;
- '<U>text</U>':
- Underlining the text - nowadays it is better to use this
function via CSS (see chapter 7), e.g.
'<SPAN STYLE="text-decoration:
underline">text</SPAN>';
- '<BLINK>text</BLINK>':
- Makes the text ; this command should not be
used further, so use'<SPAN STYLE="text-decoration:
blink">Blinking_Text</SPAN>' instead
(e.g. for NN 4.x and higher, see
chapter 7);
- '<TT>text</TT>':
- Writes the text in typewriter (not proportional);
- '<S>text</S>':
-
Striking through the text (HTML 3.0/4.0 command, will
replace the older container tag 'STRIKE');
nowadays it is better (i.e. this tag is deprecated in HTML 4.0)
to use this function via CSS (see chapter 7),
e.g. '<SPAN STYLE="text-decoration:
line-through">text</SPAN>';
- '<STRIKE>text</STRIKE>':
-
Striking through the text (Netscape /
HTML 3.2 special, should be replaced by the container tag
'S'; if you want to use this style, say:
'<STRIKE><S>text</S></STRIKE>');
- '<BIG>text</BIG>':
- Enlarges the font size of the text (HTML 3.0 command);
- '<SMALL>text</SMALL>':
- Writes the text in a smaller size (HTML 3.0
command);
- '<SUB>text</SUB>':
- Writes the text as subscript, i.e. lower and smaller
(HTML 3.0 command);
- '<SUP>text</SUP>':
- Writes the text as superscript, i.e. higher and smaller
(HTML 3.0 command);
- '<EM>text</EM>':
- Emphasizes the text - for most browsers this means
italic;
- '<STRONG>text</STRONG>':
- Writes the text strong - for most browsers this means
boldface;
- '<CITE>quotation_text</CITE>':
- Marks the text as a quotation - for most browsers this
means italic;
- '<DFN>definition_text</DFN>':
- Marks the text as a definition;
- '<CODE>program_code_text</CODE>':
- Marks the text as
program code
, for most browsers
this means typewriter;
- '<SAMP>sample_output_text</SAMP>':
- Marking text as sample output from programs, scripts
etc., for most browsers this means typewriter;
- '<KBD>user_typed_text</KBD>':
- Marks the text as typed by the user, for most browser
this means typewriter;
- '<VAR>variable_text</VAR>':
- Marking the text as variables or command arguments, for
most browser this means italic;
- '<Q>quotation_text</Q>':
- Marks the text (inline content) as a
quotation
, with
'quotation_text' beeing a short quotation text
without paragraph breaks, which should (if supported) be rendered
with delimiting quotation marks (thus left out by authors using this
tag), see also the 'BLOCKQUOTE' tag -
new HTML 4.0 tag;
- '<BLOCKQUOTE>quotation_text</BLOCKQUOTE>':
- Marks the text (block-level content, thus suited for long quotations
including paragraph breaks) as a
quotation,
displayed normally as an indented block (note that the usage of
'BLOCKQUOTE' to indent text is deprecated in favor of
style sheets, see chapter 7), see also
the new HTML 4.0 tag 'Q';
- '<ABBR>abbreviation</ABBR>':
- Indicating abbreviations (see also the 'ACRONYM'
tag) - special HTML 4.0 command;
- '<ACRONYM>acronym_name</ACRONYM>':
- Marks the text as an acronym with the possible options
'TITLE' giving text to which the acronym expands and
'LANG' specifying the language (e.g. 'FR' for
French and 'EN-US' for US-English acronyms), e.g.
'<ACRONYM TITLE="World Wide Web">WWW</ACRONYM>',
special HTML 4.0 command;
- '<ADDRESS>address_text</ADDRESS>':
- Marks the text as an address, the way (alignment,
font etc.) this 'address_text' is displayed depends on the
used browser;
- '<INS>inserted_stuff</INS>':
- Mark a text passage, a whole table etc. as new inserted text
(also datable via the option
'DATETIME="1994-11-05T08:15:30-05:00"'),
usually used together with 'DEL' to mark the old text,
e.g. HTML
3.24.0 is the new standard -
new HTML 4.0 tag;
- '<DEL>inserted_stuff</DEL>':
- Marking a text passage, a whole table etc. as old text, usually
used together with 'INS' to mark the new text - new
HTML 4.0 tag;
- '<NOBR>text</NOBR>':
- Forces the text to be displayed without line breaks (NN 1.1
special), see empty tag 'WBR';
- '<BDO DIR="LTR|RTL">text</BDO>':
- Turning of bidirectional algorithm for selected fragments of text and
specifying the direction ``left-to-right'' or ``right-to-left'' (note
that the 'DIR' attribute can be associated like the language
attribute 'LANG' to many HTML tags) -
new HTML 4.0 tag;
- '<OL>list</OL>':
- Creates an ordered list - the list elements are introduced by the
empty tag 'LI' with the following options for the different
"numberings":
- (i.e. arabic numbers) by 'TYPE="1"',
- (i.e. lower alpha) by 'TYPE="a"',
- (i.e. upper alpha) by 'TYPE="A"',
- (i.e. lower roman) by 'TYPE="i"',
- (i.e. upper roman) by 'TYPE="I"',
- (i.e. arabic numbers starting with a special
value, here '30') by 'TYPE="1"
VALUE="30"';
- '<UL>list</UL>':
- Creating an unordered list - the list elements are introduced by the
empty tag 'LI' with the following options for leading symbols:
- by 'TYPE="DISC"',
- by 'TYPE="SQUARE"',
- by 'TYPE="CIRCLE"';
- '<MENU>list</MENU>':
- Creates an unordered list (similar to 'UL', but more compact),
the list elements are introduced by the empty tag 'LI' -
depracated in HTML 4.0, please use 'UL' instead;
- '<DIR>list</DIR>':
- Creating an unordered list for list elements with less than 20
characters - the list elements are introduced by the empty tag
'LI' - depracated in HTML 4.0, please use 'UL'
instead;
- '<DL>list</DL>':
- Creates a definition list - the definition term is introduced by
the empty tag 'DT', the definition description is
introduced by the empty tag 'DD';
- '<A HREF="URL_address">text</A>':
- Makes an anchor out of 'text', i.e. a link to the
given URL (in HTML 4.0 the option 'TITLE', which can
be set on virtually every element not only 'A', can be used
to offer additional advisory information);
- '<A NAME="anchor_name">text</A>':
- Defining a target location (e.g. a title of a chapter of an HTML
text) in a document; please note that you can create such anchors
by this 'A' command or by specifying the 'ID'
attribute (new in HTML 4.0) to an HTML tag (all allowed except
'BASE', 'HEAD', 'HTML', 'META',
'SCRIPT', 'STYLE' and 'TITLE');
- '<A HREF="#anchor_name">text</A>':
- Links to a target location in the same document (if it would be in
another document, one has to specify the URL in front of the
'#'), see the previous command for the creation of such
anchors;
- '<PRE>text</PRE>':
- Treats 'text' as preformatted text, i.e. all spaces
and line breaks will appear as they are, useful to make tables or
graphics out of text (in former times -before the definition of
'PRE'- one had to use the container tags 'XMP',
'LISTING' or 'PLAINTEXT' instead);
- '<FORM>form_text_with_special_operations</FORM>':
- Switching to form mode where one can use special form commands like
'INPUT', 'OPTION', 'SELECT' and
'TEXTAREA', etc. - frequently used options are
'METHOD="POST"' and
'ACTION="mailto:username@astro.uni-bonn.de"';
- '<SELECT ...>select_defs</SELECT>':
- Defining a selection list (where the user can select one or - with the
'MULTIPLE' attribute given - several options at a time) on an
HTML form with items defined in 'select_defs' via
the empty tag 'OPTION', see container tag 'FORM';
- '<OPTGROUP ...>select_defs</OPTGROUP>':
- Defining groups of options defined in 'select_defs'
via the empty tag 'OPTION' in a form selection list, see
the container tags 'SELECT' and 'FORM' - note
that future versions (i.e. > 4.0) of HTML may extend the grouping
mechanism to allow for nested groups (i.e., 'OPTGROUP'
elements may nest) - HTML 4.0 special;
- '<TEXTAREA NAME="name" ROWS="15"
COLS="60"></TEXTAREA>':
- Creates an input area of multiple lines (here 15 with 60 columns
each) used in the container tag 'FORM';
- '<LABEL FOR="identifier">label_text</LABEL>':
- Attaching information to a single form control (which carries the
attribute 'ID="identifier"' to determine
the association, e.g.
<FORM ACTION="http://somesite.com/prog/adduser" METHOD="post">
<P>
<LABEL FOR="firstname">First name: </LABEL>
<INPUT TYPE="text" ID="firstname"><BR>
<LABEL FOR="lastname">Last name: </LABEL>
<INPUT TYPE="text" ID="lastname"><BR>
<LABEL FOR="email">email: </LABEL>
<INPUT TYPE="text" ID="email"><BR>
<INPUT TYPE="radio" NAME="sex" VALUE="Male"> Male<BR>
<INPUT TYPE="radio" NAME="sex" VALUE="Female"> Female<BR>
<INPUT TYPE="submit" VALUE="Send"> <INPUT TYPE="reset">
</P>
</FORM>
using 'LABEL' for specification of an input field) -
new HTML 4.0 command employed in the container tag
'FORM';
- '<FIELDSET>form_definition_text</FIELDSET>':
- Grouping thematically related controls and labels of an HTML form -
new HTML 4.0 command employed in the container tag
'FORM';
- '<LEGEND>caption_text</LEGEND>':
- Assigns the caption 'caption_text' to a group of
controls and labels of an HTML form - new HTML 4.0 command
employed in the container tag 'FIELDSET';
- '<BUTTON>button_def</BUTTON>':
- Creating buttons in forms like 'INPUT', but with richer
rendering possibilities ('button_def' may be text
and or images embedded by the 'IMG' tag [but no image maps]) -
new HTML 4.0 command employed in the container tag
'FORM';
- '<MAP NAME="map_name">area_and_link_definitions</MAP>':
- Creates an image map named 'map_name' with definitions
'area_and_link_definitions', see the empty tags
'IMG' and 'AREA' - special HTML 3.2 operation;
- '<TABLE>table_text_with_special_operations</TABLE>':
- Switches to table mode (HTML 3.0/3.2) where one can use special
commands like 'CAPTION', 'TR', 'TD' and
'TH'.
The new option 'SUMMARY="large_explicative_text"'
should always be used to support people using speech or Braille-based
user agents.
To specify the width of the border lines, use the option
'BORDER="x"' (Default: 'x' =
'0', i.e. no borders around the table or the cells),
to give the vertical size of the table (in pix or per cent
'%'),
try the parameter 'WIDTH', the alignment is set with
'ALIGN="LEFT|CENTER|RIGHT"' and the spacing by
'CELLSPACING' and 'CELLPADDING'.
Simple example:
table_caption
| header_col1 | header_col2 | header_col3
|
header_row1 | data_1,1
| data_1,2 | data_1,3
|
header_row2+3
| data_2,2+3 ..............
|
data_3,1 | data_3,2 |
data_3,3
|
generated by:
<TABLE BORDER="3" SUMMARY="This is just a small
table example.">
<CAPTION>table_caption</CAPTION>
<TR> <TH> <TH> header_col1
<TH> header_col2 <TH> header_col3
<TR> <TH> header_row1 <TD ROWSPAN="2"
VALIGN="TOP"> data_1,1
<TD> data_1,2
<TD> data_1,3
<TR> <TH ROWSPAN="2"> header_row2+3
<TD COLSPAN="2"> data_2,2+3
..............
<TR> <TD> data_3,1 <TD> data_3,2
<TD ALIGN="RIGHT" BGCOLOR="RED">
data_3,3
</TABLE>
Just try own examples;
- '<CAPTION>table_caption_text</CAPTION>':
- Defines the caption of a table (i.e.
'table_caption_text') and with
'ALIGN="TOP|BOTTOM"' the position above or
below the table (HTML 3.0/3.2);
- '<THEAD>row_group_defs</THEAD>',
'<TFOOT>row_group_defs</TFOOT>' and
'<TBODY>row_group_defs</TBODY>':
- Grouping together table rows ('row_group_defs' must
contain at least one row defined by 'TR') into a table head,
a table foot and one or more table body sections (note the order:
``'TBODY' definition(s) must be given at last'', and that
the end tags are optional;
thus in scrolling and printing of huge tables the head and foot
[containing information about the table's columns] can always
be shown) - new HTML 4.0 container/empty tags employed in
the container tag 'TABLE';
- '<APPLET CODE="applet_file_name">Java_applet_parameter_definitions</APPLET>':
- Embedding a Java Applet of name 'applet_file_name' for
all Java enabled browsers (NN 2.0/3.0 special and HTML 3.2);
further options are 'ALT' to specify an alternative text
for browsers understanding 'APPLET' but not beeing able
to run a Java Applet,
'HEIGHT' and 'WIDTH' to give the size of the
display area of the applet in pix and
'ALIGN="LEFT|CENTER|RIGHT"' for the alignment;
the 'Java_applet_parameter_definitions' stands
for possible single tags 'PARAM' - note that the use of
'APPLET' is deprecated (with all its attributes)
in HTML 4.0 in favor of 'OBJECT';
- '<EMBED ...> ... </EMBED>':
- Displays output from a file that is executed by a plug-in as part of
the HTML document in a rectangular area of the page - NN 2.0
special;
- '<NOEMBED>alternative_text</NOEMBED>':
- Giving 'alternative_text' for browsers not able to
display content from plug-in programs specified by the 'EMBED'
tag - NN special;
- '<OBJECT CLASSID="URI">alternative_text</OBJECT>':
- Controlling whether data should be rendered externally or by some
specified program (here via the 'URI'), that renders
the data within the user agent (if this cause a problem, then the
'alternative_text' is displayed instead) - special
HTML 4.0 command;
- '<FRAMESET>frame_definition_text</FRAMESET>':
- Divides Web pages into multiple, scrollable regions to embed multiple
HTML documents.
A basic frame document has the normal structure with the body of the
document replaced by a frameset region (see end of
chapter 3).
There one can use this container tag 'FRAMESET' with
'frame_definition_text' consisting of the empty tag
'FRAME' and possibly other (nested) 'FRAMESET'
operations.
With the options 'COLS' and 'ROWS', you can specify
the width and height of a frame (in pix, per cent '%' or
filling the rest of the page '*').
Even if most "professional" homepages make use of frames,
there are many disadvantages:
You must use one of the few browsers wich support frames (see
container tag 'NOFRAMES'),
you can't easily go back/forward in a frame document in the usual way,
blind people have severe problems with frames (please be kind),
and the transferred data amount is not getting less - originally the
reason for introducing frames
[in Netscape 3.0 one can choose the color of the frame border
by 'BORDERCOLOR', see container tag 'BODY']
- Netscape special and new HTML 4.0 tag;
- '<NOFRAMES>help_HTML_text</NOFRAMES>':
- Implementing help for people using browsers without frame support.
The 'help_HTML_text' include HTML operations, which
are ignored by a browser which knows frames but are displayed by
any other browser - if you want to use frames, don't forget to give
here at least a message that one should use a frame supporting
browser (Netscape and HTML 4.0 special);
- '<IFRAME SRC="URL_of_embedded_HTML_document" WIDTH="400" HEIGHT="500" SCROLLING="auto" FRAMEBORDER="1">alternative_text</IFRAME>':
- Specifying an inline frame and 'alternative_text'
if the browser does not support frames (this tag is similar to
'OBJECT', see also the empty tag 'FRAME') - new
HTML 4.0 tag;
- '<LAYER ID="layer1" TOP="20pt"
LEFT="5pt" BGCOLOR="#CC00EE"
WIDTH="200">text_passage</LAYER>':
- Combining a 'text_passage' (e.g. out of several
'P'-blocks) to a layer for exact positioning (here giving
the layer an identifier, background color and width of 200 pixels);
this NN 4.0 special should better be expressed via CSS properties
'position' (value: 'absolute|relative|static|fixed'),
'top', 'left', 'background-color',
'border-width', 'border-color' and 'width'
(see chapter 7);
- '<ILAYER>text_passage</ILAYER>':
- Function like the above 'LAYER' tag, but this layer follows
the natural flow of the page - NN 4.0 special;
- '<NOLAYER>alternative_text</NOLAYER>':
- Giving 'alternative_text' for browsers not supporting
'LAYER' and 'ILAYER' (this makes sense when the
layer concent is specified via the 'SRC' option, so
'text_passage' is empty) - NN 4.0 special;
- '<MATH>mathematical_text_with_special_operations</MATH>':
- Switches to formula mode (HTML 3.0, not in HTML 3.2 or 4.0!)
where one can use special math-commands like 'SUB',
'SUP', 'OVER', 'TEXT', etc. -
this was intended to get the standard, but only the former W3C
test-bed browser Arena supported this tag;
now this tag should be used to embed the XML DTD MathML (specified via
the 'META' tag in the header, see example below; see also the
local W3C specs)
in HTML documents, e.g.:
...
<META Content-math-Type="text/mathml">
...
<DIV ALIGN="CENTER"><MATH>
<msup><mi>x</mi><mn>2</mn></msup><mtext>,</mtext>
<mspace/ width="2em"><mi>α</mi><mo>=</mo><mn>0.4</mn>
<mrow>
<munder>
<mo> ( </mo>
</munder>
<mfrac>
<mi> a </mi>
<mi> b </mi>
</mfrac>
<mover>
<mo> ) </mo>
</mover>
</mrow><mtext>,</mtext>
<mrow>
<mi> x </mi>
<mover>
<mo> → </mo>
<mtext> maps to </mtext>
</mover>
<mi> y </mi>
</mrow>
</MATH></DIV>
...
testing your browser:
result of the new W3C test-bed browser Amaya 1.3 as picture:
and programs for converting LaTeX documents to MathML are already
available.
For some characters have special meanings in HTML ('"', '&', '<',
and '>'; never type these ASCII characters directly for usage in text but
only in HTML commands) and to make characters of foreign languages (like
the German Umlaute, 'ä' etc.) available in HTML, one can use tokens
with a leading ampersand and a finishing semicolon.
In case of a '#' followed by a number (160-255), it refers to an
ISO Latin-1 character [or 8859-1-] code.
Using the code is more secure for most signs, cos the names are mostly
Netscape / HTML 3.2 specials (e.g. use ' '
instead of ' '),
except the first four in the list ('"', '&',
'<', and '>') and some characteres for foreign
languages (like 'ö' or 'é').
Note that the codes 128 - 159 may only be available with Microsoft Windows
fonts, so instead one should use the names for Unicode characters, see next
section (e.g. '™' for the (TM) sign should be replaced
by '™' [Unicode: '™']).
Here are all ISO Latin-1 characters, which should be known to all browsers:
- '"' = '"':
- '"' equals '"' (double quotation
marks, HTML 2.0);
- '&' = '&':
- '&' equals '&' (ampersand,
HTML 2.0);
- '<' = '<':
- '<' equals '<' (less sign,
HTML 2.0);
- '>' = '>':
- '>' equals '>' (greater sign,
HTML 2.0);
- ' ' = ' ':
- ' ' equals ' ' (non-breaking
space; some old browsers know the code, NOT the name);
- '¡' = '¡':
- '¡' equals '¡' (inverted
exclamation mark);
- '¢' = '¢':
- '¢' equals '¢' (cent sign);
- '£' = '£':
- '£' equals '£' (pound sterling
sign);
- '¤' = '¤':
- '¤' equals '¤' (general currency
sign);
- '¥' = '¥':
- '¥' equals '¥' (yen sign);
- '¦' = '¦':
- '¦' equals '¦' (broken vertical
bar);
- '§' = '§':
- '§' equals '§' (section sign);
- '¨' = '¨':
- '¨' equals '¨' (umlaut - dieresis);
- '©' = '©':
- '©' equals '©' ((C) - copyright);
- 'ª' = 'ª':
- 'ª' equals 'ª' (ordinal indicator,
feminine);
- '«' = '«':
- '«' equals '«' (left angle
quotation mark);
- '¬' = '¬':
- '¬' equals '¬' (not sign);
- '' = '':
- '­' equals '­' (soft hyphen);
- '®' = '®':
- '®' equals '®' ((R) registered
trademark);
- '¯' = '¯':
- '¯' equals '¯' (macron);
- '°' = '°':
- '°' equals '°' (degree sign);
- '±' = '±':
- '±' equals '±' (plusminus);
- '²' = '²':
- '²' equals '²' (squared - to the
2nd - superscript two);
- '³' = '³':
- '³' equals '³' (cubed - to the 3rd
- superscript three);
- '´' = '´':
- '´' equals '´' (acute accent);
- 'µ' = 'µ':
- 'µ' equals 'µ' (mu - Greek
alphabet - micro sign);
- '¶' = '¶':
- '¶' equals '¶' (pilcrow - paragraph
sign);
- '·' = '·':
- '·' equals '·' (small central
dot);
- 'ç' = '¸':
- 'ç' equals '¸' (the French c
with cédille);
- '¹' = '¹':
- '¹' equals '¹' (to the 1st -
superscript one);
- 'º' = 'º':
- 'º' equals 'º' (ordinal indicator -
masculine);
- '»' = '»':
- '»' equals '»' (right angle
quotation mark);
- '¼' = '¼':
- '¼' equals '¼' (1/4 - one
fourth - one quarter);
- '½' = '½':
- '½' equals '½' (1/2 - one half);
- '¾' = '¾':
- '¾' equals '¾' (3/4 - three
fourth);
- '¿' = '¿':
- '¿' equals '¿' (inverted question
mark);
- 'À' = 'À':
- 'À' equals 'À' (the French A
with accent grave);
- 'Á' = 'Á':
- 'Á' equals 'Á' (the French A
accent aigu);
- 'Â' = 'Â':
- 'Â' equals 'Â' (the French A
accent circonflexe);
- 'Ã' = 'Ã':
- 'Ã' equals 'Ã' (A with tilde);
- 'Ä' = 'Ä':
- 'Ä' equals 'Ä' (the German
Ae);
- 'Å' = 'Å':
- 'Å' equals 'Å' (A with ring);
- 'Æ' = 'Æ':
- 'Æ' equals 'Æ' (capital AE
diphtong - ligature);
- 'Ç' = 'Ç':
- 'Ç' equals 'Ç' (the French C with
cédille);
- 'È' = 'È':
- 'È' equals 'È' (the French E
with accent grave);
- 'É' = 'É':
- 'É' equals 'É' (the French E
accent aigu);
- 'Ê' = 'Ê':
- 'Ê' equals 'Ê' (the French E
accent circonflexe);
- 'Ë' = 'Ë':
- 'Ë' equals 'Ë' (E with dieresis);
- 'Ì' = 'Ì':
- 'Ì' equals 'Ì' (the French I
with accent grave);
- 'Í' = 'Í':
- 'Í' equals 'Í' (the French I
accent aigu);
- 'Î' = 'Î':
- 'Î' equals 'Î' (the French I
accent circonflexe);
- 'Ï' = 'Ï':
- 'Ï' equals 'Ï' (I with dieresis);
- 'Ð' = 'Ð':
- 'Ð' equals 'Ð' (the Icelandic Eth);
- 'Ñ' = 'Ñ':
- 'Ñ' equals 'Ñ' (N with tilde);
- 'Ò' = 'Ò':
- 'Ò' equals 'Ò' (the French O
with accent grave);
- 'Ó' = 'Ó':
- 'Ó' equals 'Ó' (the French O
accent aigu);
- 'Ô' = 'Ô':
- 'Ô' equals 'Ô' (the French O
accent circonflexe);
- 'Õ' = 'Õ':
- 'Õ' equals 'Õ' (O with tilde);
- 'Ö' = 'Ö':
- 'Ö' equals 'Ö' (the German
Oe);
- '×' = '×':
- '×' equals '×' (x - times);
- 'Ø' = 'Ø':
- 'Ø' equals 'Ø' (O slash - empty
set);
- 'Ù' = 'Ù':
- 'Ù' equals 'Ù' (the French U
with accent grave);
- 'Ú' = 'Ú':
- 'Ú' equals 'Ú' (the French U
accent aigu);
- 'Û' = 'Û':
- 'Û' equals 'Û' (the French U
accent circonflexe);
- 'Ü' = 'Ü':
- 'Ü' equals 'Ü' (the German
Ue);
- 'Ý' = 'Ý':
- 'Ý' equals 'Ý' (Y with acute
accent);
- 'Þ' = 'Þ':
- 'Þ' equals 'Þ' (the Icelandic
capital THORN);
- 'ß' = 'ß':
- 'ß' equals 'ß' (the German
sz);
- 'à' = 'à':
- 'à' equals 'à' (the French a
with accent grave);
- 'á' = 'á':
- 'á' equals 'á' (the French a
accent aigu);
- 'â' = 'â':
- 'â' equals 'â' (the French a
accent circonflexe);
- 'ã' = 'ã':
- 'ã' equals 'ã' (a with tilde);
- 'ä' = 'ä':
- 'ä' equals 'ä' (the German
ae);
- 'å' = 'å':
- 'å' equals 'å' (a with ring);
- 'æ' = 'æ':
- 'æ' equals 'æ' (small ae diphtong
- ligature);
- 'ç' = 'ç':
- 'ç' equals 'ç' (the French c with
cédille);
- 'è' = 'è':
- 'è' equals 'è' (the French e
with accent grave);
- 'é' = 'é':
- 'é' equals 'é' (the French e
accent aigu);
- 'ê' = 'ê':
- 'ê' equals 'ê' (the French e
accent circonflexe);
- 'ë' = 'ë':
- 'ë' equals 'ë' (e with dieresis);
- 'ì' = 'ì':
- 'ì' equals 'ì' (the French i
with accent grave);
- 'í' = 'í':
- 'í' equals 'í' (the French i
accent aigu);
- 'î' = 'î':
- 'î' equals 'î' (the French i
accent circonflexe);
- 'ï' = 'ï':
- 'ï' equals 'ï' (i with dieresis);
- 'ð' = 'ð':
- 'ð' equals 'ð' (the Icelandic eth);
- 'ñ' = 'ñ':
- 'ñ' equals 'ñ' (n with tilde);
- 'ò' = 'ò':
- 'ò' equals 'ò' (the French o
with accent grave);
- 'ó' = 'ó':
- 'ó' equals 'ó' (the French o
accent aigu);
- 'ô' = 'ô':
- 'ô' equals 'ô' (the French o
accent circonflexe);
- 'õ' = 'õ':
- 'õ' equals 'õ' (o with tilde);
- 'ö' = 'ö':
- 'ö' equals 'ö' (the German
oe);
- '÷' = '÷':
- '÷' equals '÷' (division sign);
- 'ø' = 'ø':
- 'ø' equals 'ø' (o slash - empty
set);
- 'ù' = 'ù':
- 'ù' equals 'ù' (the French u
with accent grave);
- 'ú' = 'ú':
- 'ú' equals 'ú' (the French u
accent aigu);
- 'û' = 'û':
- 'û' equals 'û' (the French u
accent circonflexe);
- 'ü' = 'ü':
- 'ü' equals 'ü' (the German
ue);
- 'ý' = 'ý':
- 'ý' equals 'ý' (y with acute
accent);
- 'þ' = 'þ':
- 'þ' equals 'þ' (the Icelandic
small thorn);
- 'ÿ' = 'ÿ':
- 'ÿ' equals 'ÿ' (y with dieresis).
If the mathematical environment becomes standard (see HTML 3.0 container
tag '<MATH>'), there are plenty of additional special
characters, for example:
'': 'α' (1st Greek character),
'': '&ldots;' ('...', low dots),
'': '<VEC>a</VEC>':,
etc.
But it is doubtful whether this will get standard.
It is more probable that the support of the Unicode after ISO/IEC 10646
[I18N], proposed by the W3C in
HTML 4.0
[local AIUB link]
(since 10th November: Proposed
Recommendation), will be part of all new browsers.
This 16-bit extension of the above described 8-bit ISO-8859-1-Code will contain
many special characters,
e.g. the total Greek alphabet necessary for scientific publications.
(Until now its use is only possible by a big amount of GIF pictures grabbed
normally from the screen output of a TeX DVI viewer.)
Just look at the following table of codes (which are all unknown to
todays browsers, except Amaya 1.3a [and higher] knowing the entity names
[not the codes] and delivering the right display, so don't be bothered about
the beginning - it is just a test for future releases of browsers pretending
to support HTML 4.0; but this makes new rendering engines necessary, so
we have to wait for NN 5.xx and IE 5.xx):
- 'Α' = 'Α':
- 'Α' equals 'Α' (greek capital
letter alpha);
- 'Β' = 'Β':
- 'Β' equals 'Β' (greek capital
letter beta);
- 'Γ' = 'Γ':
- 'Γ' equals 'Γ' (greek capital
letter gamma);
- 'Δ' = 'Δ':
- 'Δ' equals 'Δ' (greek capital
letter delta);
- 'Ε' = 'Ε':
- 'Ε' equals 'Ε' (greek capital
letter epsilon);
- 'Ζ' = 'Ζ':
- 'Ζ' equals 'Ζ' (greek capital
letter zeta);
- 'Η' = 'Η':
- 'Η' equals 'Η' (greek capital
letter eta);
- 'Θ' = 'Θ':
- 'Θ' equals 'Θ' (greek capital
letter theta);
- 'Ι' = 'Ι':
- 'Ι' equals 'Ι' (greek capital
letter iota);
- 'Κ' = 'Κ':
- 'Κ' equals 'Κ' (greek capital
letter kappa);
- 'Λ' = 'Λ':
- 'Λ' equals 'Λ' (greek capital
letter lambda);
- 'Μ' = 'Μ':
- 'Μ' equals 'Μ' (greek capital
letter mu);
- 'Ν' = 'Ν':
- 'Ν' equals 'Ν' (greek capital
letter nu);
- 'Ξ' = 'Ξ':
- 'Ξ' equals 'Ξ' (greek capital
letter xi);
- 'Ο' = 'Ο':
- 'Ο' equals 'Ο' (greek capital
letter omicron);
- 'Π' = 'Π':
- 'Π' equals 'Π' (greek capital
letter pi);
- 'Ρ' = 'Ρ':
- 'Ρ' equals 'Ρ' (greek capital
letter rho);
- 'Σ' = 'Σ':
- 'Σ' equals 'Σ' (greek capital
letter sigma);
- 'Τ' = 'Τ':
- 'Τ' equals 'Τ' (greek capital
letter tau);
- 'Υ' = 'Υ':
- 'Υ' equals 'Υ' (greek capital
letter upsilon);
- 'Φ' = 'Φ':
- 'Φ' equals 'Φ' (greek capital
letter phi);
- 'Χ' = 'Χ':
- 'Χ' equals 'Χ' (greek capital
letter chi);
- 'Ψ' = 'Ψ':
- 'Ψ' equals 'Ψ' (greek capital
letter psi);
- 'Ω' = 'Ω':
- 'Ω' equals 'Ω' (greek capital
letter omega);
- 'α' = 'α':
- 'α' equals 'α' (greek small
letter alpha);
- 'β' = 'β':
- 'β' equals 'β' (greek small
letter beta);
- 'γ' = 'γ':
- 'γ' equals 'γ' (greek small
letter gamma);
- 'δ' = 'δ':
- 'δ' equals 'δ' (greek small
letter delta);
- 'ε' = 'ε':
- 'ε' equals 'ε' (greek small
letter epsilon);
- 'ζ' = 'ζ':
- 'ζ' equals 'ζ' (greek small
letter zeta);
- 'η' = 'η':
- 'η' equals 'η' (greek small
letter eta);
- 'θ' = 'θ':
- 'θ' equals 'θ' (greek small
letter theta);
- 'ι' = 'ι':
- 'ι' equals 'ι' (greek small
letter iota);
- 'κ' = 'κ':
- 'κ' equals 'κ' (greek small
- 'λ' = 'λ':
- 'λ' equals 'λ' (greek small
letter lambda);
- 'μ' = 'μ':
- 'μ' equals 'μ' (greek small
letter mu);
- 'ν' = 'ν':
- 'ν' equals 'ν' (greek small
letter nu);
- 'ξ' = 'ξ':
- 'ξ' equals 'ξ' (greek small
letter xi);
- 'ο' = 'ο':
- 'ο' equals 'ο' (greek small
letter omicron);
- 'π' = 'π':
- 'π' equals 'π' (greek small
letter pi);
- 'ρ' = 'ρ':
- 'ρ' equals 'ρ' (greek small
letter rho);
- 'ς' = 'ς':
- 'ς' equals 'ς' (greek small
letter final sigma);
- 'σ' = 'σ':
- 'σ' equals 'σ' (greek small
letter sigma);
- 'τ' = 'τ':
- 'τ' equals 'τ' (greek small
letter tau);
- 'υ' = 'υ':
- 'υ' equals 'υ' (greek small
letter upsilon);
- 'φ' = 'φ':
- 'φ' equals 'φ' (greek small
letter phi);
- 'χ' = 'χ':
- 'χ' equals 'χ' (greek small
letter chi);
- 'ψ' = 'ψ':
- 'ψ' equals 'ψ' (greek small
letter psi);
- 'ω' = 'ω':
- 'ω' equals 'ω' (greek small
letter omega);
- 'ϑ' = 'ϑ':
- 'ϑ' equals 'ϑ' (greek small
letter theta symbol);
- 'ϒ' = 'ϒ':
- 'ϒ' equals 'ϒ' (greek upsilon
with hook symbol);
- 'ϖ' = 'ϖ':
- 'ϖ' equals 'ϖ' (greek pi symbol);
- '•' = '•':
- '•' equals '•' (bullet, black
small circle);
- '…' = '…':
- '…' equals '…' (horizontal
ellipsis = three dot leader);
- '′' = '′':
- '′' equals '′' (prime, symbol
for [arc]minutes or feet);
- '″' = '″':
- '″' equals '″' (double prime,
symbol for [arc]seconds or inches/Zoll);
- '‾' = '‾':
- '‾' equals '‾' (overline,
spacing overscore);
- '⁄' = '⁄':
- '⁄' equals '⁄' (fraction slash);
- '℘' = '℘':
- '℘' equals '℘' (script capital
P, power set);
- 'ℑ' = 'ℑ':
- 'ℑ' equals 'ℑ' (blackletter
capital I, imaginary part symbol);
- 'ℜ' = 'ℜ':
- 'ℜ' equals 'ℜ' (blackletter
capital R = real part symbol);
- '™' = '™':
- '™' equals '™' (trade mark sign);
- 'ℵ' = 'ℵ':
- 'ℵ' equals 'ℵ' (alef symbol,
first transfinite cardinal);
- '←' = '←':
- '←' equals '←' (leftwards arrow);
- '↑' = '↑':
- '↑' equals '↑' (upwards arrow);
- '→' = '→':
- '→' equals '→' (rightwards arrow);
- '↓' = '↓':
- '↓' equals '↓' (downwards arrow);
- '↔' = '↔':
- '↔' equals '↔' (left right arrow);
- '↵' = '↵':
- '↵' equals '↵' (downwards arrow
with corner leftwards, carriage return sign);
- '⇐' = '⇐':
- '⇐' equals '⇐' (leftwards double
arrow, 'is implied by' symbol);
- '⇑' = '⇑':
- '⇑' equals '⇑' (upwards double
arrow);
- '⇒' = '⇒':
- '⇒' equals '⇒' (rightwards double
arrow, 'implies' symbol);
- '⇓' = '⇓':
- '⇓' equals '⇓' (downwards double
arrow);
- '⇔' = '⇔':
- '⇔' equals '⇔' (left right double
arrow, 'is equivalent' symbol);
- '∀' = '∀':
- '∀' equals '∀' (for all);
- '∂' = '∂':
- '∂' equals '∂' (partial
differential);
- '∃' = '∃':
- '∃' equals '∃' (there exists);
- '∅' = '∅':
- '∅' equals '∅' (empty set = null
set, diameter sign);
- '∇' = '∇':
- '∇' equals '∇' (nabla, backward
difference);
- '∈' = '∈':
- '∈' equals '∈' (element of);
- '∉' = '∉':
- '∉' equals '∉' (not an element
of);
- '∋' = '∋':
- '∋' equals '∋' (contains as member);
- '∏' = '∏':
- '∏' equals '∏' (n-ary product,
product sign);
- '∑' = '∑':
- '∑' equals '∑' (n-ary sumation);
- '−' = '−':
- '−' equals '−' (minus sign);
- '∗' = '∗':
- '∗' equals '∗' (asterisk
operator);
- '√' = '√':
- '√' equals '√' (square root,
radical sign);
- '∝' = '∝':
- '∝' equals '∝' (proportional to
sign);
- '∞' = '∞':
- '∞' equals '∞' (infinity sign);
- '∠' = '∠':
- '∠' equals '∠' (angle);
- '∧' = '∧':
- '∧' equals '∧' (logical and sign,
wedge);
- '∨' = '∨':
- '∨' equals '∨' (logical or sign,
vee);
- '∩' = '∩':
- '∩' equals '∩' (intersection
symbol, cap);
- '∪' = '∪':
- '∪' equals '∪' (union symbol, cup);
- '∫' = '∫':
- '∫' equals '∫' (integral);
- '∴' = '∴':
- '∴' equals '∴' (therefore);
- '∼' = '∼':
- '∼' equals '∼' (tilde operator,
varies with or similar to sign);
- '≅' = '≅':
- '≅' equals '≅' (approximately
equal to);
- '≈' = '≈':
- '≈' equals '≈' (almost equal to
sign, asymptotic to);
- '≠' = '≠':
- '≠' equals '≠' (not equal to sign);
- '≡' = '≡':
- '≡' equals '≡' (identical to
sign);
- '≤' = '≤':
- '≤' equals '≤' (less-than or equal
to sign);
- '≥' = '≥':
- '≥' equals '≥' (greater-than or
equal to sign);
- '⊂' = '⊂':
- '⊂' equals '⊂' (subset of);
- '⊃' = '⊃':
- '⊃' equals '⊃' (superset of);
- '⊄' = '⊄':
- '⊄' equals '⊄' (not a subset of);
- '⊆' = '⊆':
- '⊆' equals '⊆' (subset of or
equal to);
- '⊇' = '⊇':
- '⊇' equals '⊇' (superset of or
equal to);
- '⊕' = '⊕':
- '⊕' equals '⊕' (circled plus,
direct sum);
- '⊗' = '⊗':
- '⊗' equals '⊗' (circled times,
vector product);
- '⊥' = '⊥':
- '⊥' equals '⊥' (up tack,
orthogonal to = perpendicular);
- '⋅' = '⋅':
- '⋅' equals '⋅' (dot operator);
- '⌈' = '⌈':
- '⌈' equals '⌈' (left ceiling,
apl upstile);
- '⌉' = '⌉':
- '⌉' equals '⌉' (right ceiling);
- '⌊' = '⌊':
- '⌊' equals '⌊' (left floor,
apl downstile);
- '⌋' = '⌋':
- '⌋' equals '⌋' (right floor);
- '〈' = '〈':
- '⟨' equals '〈' (left-pointing
angle bracket, bra);
- '〉' = '〉':
- '⟩' equals '〉' (right-pointing
angle bracket, ket);
- '◊' = '◊':
- '◊' equals '◊' (lozenge);
- '♠' = '♠':
- '♠' equals '♠' (black spade
suit);
- '♣' = '♣':
- '♣' equals '♣' (black club suit,
shamrock);
- '♥' = '♥':
- '♥' equals '♥' (black heart
suit, valentine);
- '♦' = '♦':
- '♦' equals '♦' (black diamond
suit);
- 'Œ' = 'Œ':
- 'Œ' equals 'Œ' (latin capital
ligature OE);
- 'œ' = 'œ':
- 'œ' equals 'œ' (latin small
ligature oe);
- 'Š' = 'Š':
- 'Š' equals 'Š' (latin capital
letter S with caron);
- 'š' = 'š':
- 'š' equals 'š' (latin small
letter s with caron);
- 'Ÿ' = 'Ÿ':
- 'Ÿ' equals 'Ÿ' (latin capital
letter Y with diaeresis);
- 'ˆ' = 'ˆ':
- 'ˆ' equals 'ˆ' (modifier letter
circumflex accent);
- '˜' = '˜':
- '˜' equals '˜' (small tilde);
- ' ' = ' ':
- ' ' equals ' ' (en space);
- ' ' = ' ':
- ' ' equals ' ' (em space);
- ' ' = ' ':
- ' ' equals ' ' (thin space);
- '' = '':
- '‌' equals '‌' (zero width
non-joiner);
- '' = '':
- '‍' equals '‍' (zero width joiner);
- '' = '':
- '‎' equals '‎' (left-to-right
mark);
- '' = '':
- '‏' equals '‏' (right-to-left
mark);
- '–' = '–':
- '–' equals '–' (en dash);
- '—' = '—':
- '—' equals '—' (em dash);
- '‘' = '‘':
- '‘' equals '‘' (left single
quotation mark);
- '’' = '’':
- '’' equals '’' (right single
quotation mark);
- '‚' = '‚':
- '‚' equals '‚' (single low-9
quotation mark);
- '“' = '“':
- '“' equals '“' (left double
quotation mark);
- '”' = '”':
- '”' equals '”' (right double
quotation mark);
- '„' = '„':
- '„' equals '„' (double low-9
quotation mark);
- '†' = '†':
- '†' equals '†' (dagger);
- '‡' = '‡':
- '‡' equals '‡' (double dagger);
- '‰' = '‰':
- '‰' equals '‰' (per mille sign);
- '‹' = '‹':
- '‹' equals '‹' (single
left-pointing angle quotation mark);
- '›' = '›':
- '›' equals '›' (single
right-pointing angle quotation mark);
- '€' = '€':
- '€' equals '€' (euro sign).
The WWW has grown faster than expected, so
polishing/styling got part of HTML (see e.g. the
container tags 'FONT', 'S',
'BLINK' and the tag-options defining color and alignment)
- which was never intended.
With HTML 4.0
[local AIUB link]
it is planned to concentrate on the structuring of information and leave
the styling to style sheets
(see HTML and Style Sheets
[local AIUB link],
W3C Working Draft March 1997).
The standard are Cascading Style Sheets (CSS),
available -up to now- in two versions:
If you want to use CSS, you ought to set the default style sheet language
to CSS by adding the line:
'<META HTTP-EQUIV="Content-Style-Type"
CONTENT="text/css">'
to the header of the HTML file.
Style Sheets can be embedded in HTML files via the following mechanisms:
- The first and best method is to link a special CSS file (or several
files) via the empty tag 'LINK' in the
header of an HTML file, e.g.
'<LINK REL="stylesheet" HREF="name.css"
TYPE="text/css" MEDIA="screen">'.
You can look at this simple
example which I have constructed for the
Workshop
Proceedings of the
Bonn/Bochum-Graduiertenkolleg.
Only with external style sheets optimal flexibility can be achieved,
and the other two ways are just given for the sake of
completeness.
- The second possibility works by explicitly writing style definitions
and relate them to specified HTML commands via
the container tag 'STYLE',
also used in the header of the HTML file, e.g.
<STYLE TYPE="text/css">
<!--
P { font-size: 12pt } /* example of commentary text */
H3.TEST { color: blue; }
SPAN.U { text-decoration: overline }
-->
</STYLE>
which will provoke a font of 12pt after the 'P' tag
and blue color of header text behind the command
'<H3 CLASS="TEST">' - the commentary tags
prevent old browsers from displaying the CSS definitions.
[Note that the syntax of the CSS definitions is equal to the one used in
external style sheets.]
- The third and last version uses the option 'STYLE' which can
be attributed to any HTML tag (except 'BASE',
'BASEFONT', 'HEAD', 'HTML', 'META',
'PARAM', 'SCRIPT', 'STYLE' and
'TITLE'), e.g. '<SPAN STYLE="text-decoration:
overline">overlined_text</SPAN>' (this is
analogue to the definition of 'SPAN CLASS="U"' above;
please note that this example only works with an UA supporting overlining,
like the W3C
browser/editor Amaya [see
the local manual] - not
NN 4.x).
This method is appropriate to exceptionally overwrite a style defined
by an external style file (see first method).
To put style to text passages and blocks, the two container
tags 'SPAN' and 'DIV' are very useful, which have no
effect on any UA (except in connecting the styling to the embraced text).
For selecting some tags in an HTML document for style sheet definitions, one
can combine these tags of the same token (e.g. several - not all - of the
'P' tags; allowed are all HTML tags except 'BASE',
'BASEFONT', 'HEAD', 'HTML', 'META',
'PARAM', 'SCRIPT', 'STYLE' and 'TITLE') by
the new HTML 4.0 attributes
- 'CLASS'
- (i.e. '<P
CLASS="MYPARAGRAPH">text_paragraph</P>') or
- 'ID'
- (i.e.
'<P ID="example">example_text</P>';
see also the container tag 'A').
Thus you can refer to all these paragraph elements in the CCS code, e.g.,
via
'P.MYPARAGRAPH { color: green }' and via 'P#example
{ letter-spacing: 0.5em }' respectively.
CSS definitions consist of a selector (in the most simple case just one HTML
tag, or several tags separated by commas ',') and the declaration, the latter
put in braces ('{' ... '}') and consisting of one or more sets, which are
separated by semicolons ';', of combinations of a property
(e.g. 'color') and a value (e.g. 'yellow') separated
by a colon ':'.
All CSS style sheets are case-insensitive, except for parts that are not
controlled directly by CSS, like URLs (so its the same as for HTML documents,
but different from XML, which is totally case-sensitive).
CSS definitions will override prior definitions, so one can specify general
styling first and give then all exceptions (e.g. writing at first
'H1, EM { color: blue }' setting the color of header-1 and emphasized
text to blue and after this 'H1 EM { color: red }' defining the color
of emphasized text in header-1 to be red.
Users can specify their own CSS definitions.
In the case of double definitions, authors' definitions will override users'
definitions.
This is inverted (in the CSS 2 specifications, contradictory to the older
CSS 1 rule) when the '!important' declaration is given - so in
the end the user has the power to set fonts etc.!
Styling defined by style sheets will always win against definitions in HTML
(e.g. via the 'FONT' command or an 'ALIGN' or 'COLOR'
option).
Even though many browsers support CSS (like NN 4.0x and IE 3.0x), most features
do not work properly.
For professional web designers it would not be wise to rely totally on CSS
in respect of the styling, but a combination of HTML style settings and CSS
definitions may be useful.
Please note that concerning the HTML successor XML one can use CSS and the new
styling language eXtensible Stylesheet
Language - XSL [local AIUB
link], which is a transformation language using XML syntax - but
can not be used with HTML.
If you want to embellish your websides with icons, just have a closer look
at the icons at the WWW Manual Icons - Homepage.
They can be used by
'<IMG SRC="/~webaiub/Icons/name">' with
'name' as the name of the special icon.
In former times this list was here but the Manual got to slow - even if
called in Bonn.
So think wisely about the use of icons in your own homepage.
- English is the language of the air, of computers and of international
information exchange, so it is wise not to urge people learning
native language (German, French, Spanish,
Swahili ...) to get the information out of your homepages.
But it would be nice if you have a second (or third etc.) document
written in another language and containing the same data.
For that case let visitors switch the language and place an appropriate
remark at the top of your document (e.g. with a flag of that nation, see
chapter 8 for available icons and
my homepage as an example).
- Use capitals for the names of HTML operations - normally it makes
no difference whether to select capitals or not, except for the
special characters (see chapter 6) and for
URL addresses (important with servers under UNIX).
- If you can avoid it, don't use HTML 3.0/3.2 or special Netscape
commands (especially no Frames or Java applets). Normally these
things would not increase the given information, the only sense
of any good W3 document!
But if you prefer playing, just do it. For the people interested
in testing, just try the new
HTML 4
[local AIUB
link] specifications of the W3C.
- I recommend to rely on a special HTML
'dialect' as strictly as possible.
To look for correct HTML the W3C tool
TIDY (15th Apr.
'99) by Dave Raggett is highly recommended
[local AIUB
link].
It is an HTML Parser
and Pretty Printer, i.e. you can use it with option '-e'
for giving errors and warnings only or with option '-m' to
overwrite existing files by corrected versions (don't forget a backup
version).
Additionally one can use an HTML checker like the
W3C validator [you can run
it directly with the URL of the testpage by typing
'http://validator.w3.org/check?url=testpage_URL'
as WWW URL] or Bobby.
Note that my pages would not pass the test - and especially this
document will never be correct because of testing all flavors of
HTML.
Tidy actually (17/04/99) print 223 warnings/errors. ;-)
- View the source code of every interesting HTML document (e.g. with
Netscape 3.x by 'View'-'Document Source', and in
NN 4.x via 'View' - 'Page Source').
You can get all pictures embedded in HTML codes by pressing the
right mouse button if the mouse cursor is upon the image,
then say 'Save this Image as...' (or something similar).
But please respect the copyright - at least you should write an
E-Mail to the author informing him about your usage.
- If you find this text helpful, you can display it with your browser
and display the HTML document you are working on with a second
(mirror) browser at the same time (in Netscape 3.x: 'File' -
'New Web Browser', in NN 4.x: 'File' - 'Navigator
Window').
- Use space to make your documents readable - line feeds and more than
one blank character won't be displayed by any browser.
If you want to make an unordered list, you can use the following
structure:
<UL>
<LI> 1st_list_element
<LI> 2nd_list_element
</UL>
- An HTML document with all its pictures should not be larger
than 50 kB, so it can be loaded quickly.
If one wants to show high detailed pictures, use thumbnails as
links and make a remark about their sizes.
Don't support the common translation "world wide waiting"
for the W3!
On the other hand deviding a document in several homepages is not
good style (too much clicking, no general search and no simple download
possibility); that is the reason this manual is more than 4 times bigger
than the limit given above - sorry.
- Look for convenient fonts in your UA.
In Netscape 3.x you change the proportional/typewriter font by:
'Options' - 'General Preferences' - 'Fonts' - 'Use the Proportional
Font:'/'Use the Fixed Font:' and in NN 4.x via:
'Edit' - 'Preferences ...' - 'Appearance Fonts' - 'Variable
Width Font:'/'Fixed Width Font:',
just try my favourites:
'Helvetica (Adobe)'/'Clean (Schumacher)|Fixed (Misc)'.
Note that I give two typwriting fonts, cos all non proportional fonts
have problems with the tilde '~', with the German Umlaute
(e.g. ä: 'ä', which occur with my first favourite),
with the angle brackets (<: '<' and >: '>')
or with the typewriter and italic font (like this
text, which should NOT be the same as this
typewriter and boldface text, which occur with my
second favourite).
- Please switch off the disk cache of your browser
(in Netscape 3.x: 'Options' - 'Network Preferences' -
'Disk Cache: 0 Kilobytes';
in Netscape 4.x: 'Edit' - 'Preferences' -
'Advanced [the arrow on the left]' - 'Cache' -
'Disk cache: 0 kBytes [text field]' - 'Clear Disk Cache [Button]' -
'OK'),
otherwise it uses much space and the created files '*.html'
are automatically backed up if not hidden.
By the way, you can get information about the Netscape Navigator
caches by typing 'about:cache', 'about:memory-cache'
and 'about:image-cache' in the location - bar.
There are more about commands available,
see the list below.
- Save space on the login harddisk if it is nearly full (e.g.
'/user1').
In this case make a link from 'public_html' directory to
a special HTML directory (say 'html') on a data harddisk via
'ln -s /.../username/html /user1/username/public_html'.
But check that the data harddisk is mounted on the machine running
the WWW server ('aibn91').
In case of a big login harddisk (e.g. '/user3') please put
your homepages on this disk to avoid problems.
- Connection too slow? Just try the Proxy of the Institute for Computer
Sciences (Informatik) at the University of Bonn at the WWW-URL:
'http://www.informatik.uni-bonn.de/dv/www/cache/autoconf-netscape.pac'
(in Netscape 3.x by: 'Options' - 'Network Preferences' -
'Proxies' - 'Automatic Proxy Configuration, Location (URL):', and
in NN 4.x by: 'Edit' - 'Preferences ...' - 'Advances
[arrow at the left side]' - 'Proxies' - 'Configuration location (URL)
[field]').
For further information see the
WWW - Cache Page.
- Advertisements (like big images) are annoying. To deny such stuff,
people in the AIUB can use the proxy 'aibn38.astro.uni-bonn.de'
with port '8000' (e.g. in NN 4.xx by: 'Edit' - 'Preferences' -
'Advanced' - 'Proxies' - 'manual proxy configuration (view)'), which will
additionally use the above cited proxy.
Please note that all proxies have disadvantages - so I would prefer
the direct connection to the internet.
- Create a subdirectory (e.g. 'Pic') for your pictures
('*.GIF' and '*.JPG').
They always take the most space on the disk, so make sure you delete
all your old, no longer used pictures.
A second advantage is, that you can get your files via FTP easier,
the HTML documents in ASCII (7 Bit) mode, the pictures in binary
mode.
- If you search people/themes/newsgroups in the WWW, you can use
a search machine; a list of
such tools can be entered in the last chapter
about links.
- Look at your HTML documents with as many text/graphic browsers
as you can. You will be astonished at the different displayed
colors (see '<BODY>' and '<FONT>'
in chapter 5), special
characters (the given should appear always), and the disturbing
results by commands not known to a special browser.
The most frequently used browser in the AI is Netscape Navigator 4.08,
which should display our pages as intended. Just download it:
If you prefer Mosaic, you have to disable tables, otherwise the data
given as tables after HTML 3.2 (see also the older
Request for
Comments [RFC]
1942)
will be lost (REMEMBER: '<TR>', '<TD>',
... are empty and NOT container tags!).
If you want to see a new concept, look at the new release of the
W3C test-bed browser/authoring tool Amaya 2.0a.
- In Netscape, you can get information by inserting an
about command in the Location bar instead of
an URL.
Just have a look at the following list:
- 'about:':
getting the NN info page [startup page] with displaying the
current version;
- 'about:fonts':
creating a dialogue window informing about installed
font devices;
- 'about:plugins':
listing pieces of information about installed plugins;
- 'about:ns_programmer':
going to the homepage of a special NN programmer, e.g.
'about:marca';
- 'about:cache':
getting statistics about the disk cache;
- 'about:memory-cache':
showing statistics about the memory cache;
- 'about:image-cache':
displaying statistics about the image cache;
- 'about:global' or 'about:globalhistory':
history of visited pages during your W3 journey
(see 'Alt'+'H');
- 'about:document':
displaying information about the loaded page - the same
as you can get via 'View' - 'Page Info';
- 'about:license':
getting the license agreements;
- 'about:logo':
showing the Netscape logo;
- 'about:javalogo':
showing the Java logo;
- 'about:rsalogo':
showing the RSA logo;
- 'about:qtlogo':
showing the Quick Time logo (not working here?);
- 'about:mozilla': last but
not least - just for fun - try this one: Mozilla escaped!
Additionally, you can use special keys (examples valid in NN 4.x), e.g.
- 'Sh'+'Curs.': moving mouse pointer (X window, not NN special);
- 'Curs. up/down': scrolling up/down a line in the document;
- 'PgUp/Dn': scrolling up/down a window page;
- 'Alt'+'Curs.': going forward/back to the next/last visited
homepage;
- 'Alt'+'R': reload the shown document;
- 'Alt'+'F': finding something in the current document ['Edit' -
'Find in page ...', 'Enter' to repeat the search];
- 'Alt'+'G': resume an older search ['Edit' -
'Find Again'];
- 'Alt'+'H': looking at the history (see
'about:global');
- 'Alt'+'N': opening a (second) NN browser window;
- 'Alt'+'1': activating the next browser window on current
desktop;
- 'Alt'+'W': closing the active NN window ['File' -
'Close'];
- 'Alt'+'Q': closing all NN windows ['File' - 'Exit'];
- 'Alt'+'K': adding to personal bookmarks ['Bookmarks' -
'Add Bookmark'];
- 'Alt'+'B': editing personal bookmarks ['Bookmarks' -
'Edit Bookmarks ...'];
- 'Ctrl'+'Alt'+'T': getting info about the link (best when
loading);
- 'Ctrl'+'Alt'+'F': making link to the "Amazing Fish
Cam".
- If you have information which should be available
locally (i.e. for AIUB users coming from our
domain) in the WWW,
ask your webmaster (see end of chapter 2)
to put your HTML document(s) in the directory
'~web*/public_html/secret',
available under the URL
'http://www.astro.uni-bonn.de/~web*/secret/name.html'.
- Interested in a Web Counter? Then go to G. Lay (room 2.23) and ask
for the creation of some special files (one for each counter) and
look at the Manual
of the Web Counter.
- Don't forget to write information about authors (with E-Mail
addresses) and the date of creation/last change of the document,
normally at the end of the HTML document.
- Take a look at the 6th COSS (computer seminar of the Sternwarte)
on 27th February, 1996 about the world wide web.
- The WWW should stay a place for scientists and
other people interested in worldwide information exchange - without
the need for censorship.
Keep
our
W3
a
fascinating
place
!
- For nearly two years this chapter ("useful hints") ended
with the above petition - but latest discussions in mass media, scientific
organizations and also in our institutes have convinced me of the
necessity to stress the need for online free speech from my personal
point of view.
Thus I wish
to support the
Electronic Frontier Foundation in
its Blue Ribbon Campaign:
"EFF and other civil liberties groups ask that a blue ribbon
be displayed to show support for the essential human right of free speech,
a fundamental building block of free society, affirmed by the U.S. Bill
of Rights in 1791, and by the U.N. Declaration of Human Rights in 1948.
Nevertheless, legislators and regulators in the US and around the world
are intent on telling you what you and your children may read.
Please help us teach government that such a decision belongs in your
hands, and those of every other Internet user and parent.
The Blue Ribbon will be a way to raise awareness of online censorship and
freedom issues, from locally to globally."
| |
Further information are also available at the Internet Page of
the Human Rights Watch and also at the
Global Internet Liberty Campaign Webpage
(US link).
Probably one may be astonished that online free speech is
in danger, but this problem is no longer a general problem but one
considering sciences worldwide - also in Germany:
×
A growing number of students and also scientists does not get the
possibility to link directly to the internet but by a proxy,
filtering information and rejecting special URLs - despite the fact
that there are no criminal servers but only criminal people using some
servers, also the ones basically holding scientific data.
×
Universities and scientific organizations start reducing WWW support
by denying to host and/or link 'private' homepages - but how should
'private' be defined keeping in mind what scientists do in their
spare time?
Without these 'personal' homepages the information available in
the WWW would be extremely reduced (note that many pages like this
manual have this 'private' status).
×
The reasons for internet communication restrictions are known - one
of the most frequently rehearsed argument is the spreading of child
pornography.
But instead of fighting against the criminals the
communication means are damned and with these the people engaged in
this business, like Felix Somm, the former head of the German division
of the U.S. on-line service provider Compuserve, who was convicted by
a Bavarian court of this offence in May 1998.
Please reflect upon these points - and put
a blue ribbon on your homepage.
It is up to all internet useres to fight for their own rights - this
is especially true for scientists!
October 1998 J.M.B.
- The webmasters of institutes belonging to Bonn University should
subscribe to the
"Bonner
Mailingliste" and get registered in the
"Liste
der Webmaster" kept by Frau Monika Pertsch
(Phone: 0228 / 73-3488, Fax: 0228 / 73-2743, RHRZ Universität Bonn,
Wegelerstr. 6, D-53115 Bonn, E-Mail:
wwwadmin@uni-bonn.de)
[see "Rundschreiben Nr. 34/97"].
- ...
Please mail any additional hint you miss here (or in other chapters) to
jbraun@astro.uni-bonn.de.
- Most interesting organizations concerning the World Wide Web and
the Internet in general:
- Sites of browsers:
- Netscape's
home
(Navigator/Communicator; the standard browser)
- Amaya
(new W3C browser and editor)
- NCSA
Mosaic
(old frozen version)
- Arena
(in former times by W3C, now by Yggdrasil)
- Microsoft Internet
Explorer
(only for Windows, Solaris, and HP-UX)
- Opera
(nice compact browser by Opera Software, but still
only available for Windows)
- Lynx
(Textbrowser by the University of Kansas)
- Professionel utilities concerning HTML / WWW:
- HTML validators:
- TIDY
(HTML Parser and Pretty Printer by Dave Raggett
of W3C, program available for all standard platforms
[see local AIUB Manual])
- W3C Validator
(free web service by the
W3C, checking for compliance
with W3C HTML Recommendations and other HTML
standards)
- Bobby
(free web service by
CAST, checking
for accessibility to people with disabilities and
browser compatibility)
- Announcing URLs, i.e. getting own sites beeing found by search
machines:
- List of search machines
for the WWW
- Java related links:
Links back/forward to:
First version: | 23rd | November, | 1996 |
Last update: | 06th | August, | 1999 |
© 1996-99 Jochen M. Braun
(jbraun@astro.uni-bonn.de)