No Fluff Description Of Good HTML
Basic information on writing HTML files. OUT OF DATE: developed for mid-1990s.
1995, 2000, 2001
by Gilbert Healton
All rights reserved
If your browser is smart enough,
selecting one of the following subjects should jump you
to that section of this document.
Once there,
selecting the hyperlinked section number should return you
to this table of contents.
- 1. Important
- 2. Introduction
- 2.1 Document Intent
- 2.2 Restrictions
- 2.3 Document Conventions
- 2.4 Point And Click
- 2.5 Target Audience
- 3. WWW History
- 3.1 WWW Project History
- 3.2 HTML History
- 4. Web Growth
- 5. Generalizations Of Web Pages
- 5.1 Web Browsers & URLs
- 5.2 Web Servers
- 5.3 Where To Put HTML Files
- 6. Writing Web Pages
- 6.1 File Names
- 6.2 HTML Files
- 6.3 Basic HTML Theory
- 6.4 Basic HTML Syntax
- 6.4.1 Element (Command) Chars & Escapes
- 6.5 Character Sets
- 6.5.1 Elements (Commands, or Tags)
- 6.5.2 Document Template
- 6.6 Elements For The Heading Area
- 6.6.1
<HTML> Element
- 6.6.2 <HEAD> Element
- 6.6.3 <BASE> Base URL
- 6.6.4 <TITLE> Element
- 6.6.5 <LINK> Element
- 6.7 Elements For The Text Area
- 6.7.1 Comment Elements
- 6.7.2 <BODY> Element
- 6.7.3 Heading Elements
- 6.7.4 Paragraph And Line Break Elements
- 6.7.5 <CENTER> Element
- 6.7.6 Block Quote, a.k.a. Extended Quote Elements
- 6.7.7 List Elements
- 6.7.8 <PRE> Preformatted Text
- 6.7.9 <PLAINTEXT> Plain Text
- 6.7.10 Character Style Elements
- 6.7.11 Tricks For Special Chars
- 6.8 <IMG> In-line Image Element
- 6.8.1 Basic Image Command
- 6.8.2 Image Placement
- 6.8.3 Borrowing Images
- 6.9 <A> Hypertext Anchors
- 7. Testing & Debugging Documents
- 7.1 Local File Opens
- 7.2
Reload Button
- 7.3 Which Host To Login On
- 7.4 HTML Validation Programs
- 8. Putting Web Pages On Your ISP
- 9. Tips On Writing HTML files
- 9.1 Maximum File Size
- 9.2 Thumbnail Images
- 10. Forms and Imagemaps
- 11. References To Other Documents
- 12. Footnotes
- 13. Disclaimer
1. Important
This information was first written in 1995 to reflect popular,
and effective, ways of writing web pages at that time.
While the contents of this page have not been updated much since then
as the techniques described herein will still work.
I hope to get these pages updated to full HTML4 sometime this year.
2. Introduction
2.1 Document Intent
- Good Techniques
- Portable HTML
The intent of this document is to provide a practical introduction to
directly writing good Web Pages with a minimum of fluff.
For people who want to understand HTML and/or write their own
web pages without using any of the HTML editors out there
(which tend to produce verbose, and ugly HTML,
all too often not looking good on all browsers).
While this document doesn't describe the entire HTML mark-up language,
what it does describe is fairly detailed.
Hopefully I've combined the more useful information spread over numerous
areas of the Internet into a single document to make it easier to
learn how to write good html.
HTML that will work on many browsers.
People wanting more to chew on can look at the
references at the end of this document.
Some of the documents I referenced from are public domain.
This is all intensively mixed up with my own words and discoveries.
(Borrow from one document, and it is called plagiarism.
Borrow from a dozen documents and it is called research.)
I've been pushing composition systems beyond their intended limits
for twenty years and have stumbled across some tricks in HTML that
I haven't seen
elsewhere.{1}
Some of the less esoteric ones are shared herein.
![[NOTE!!]](/~ghealton/images/check0.png)
To keep
things simple I am not above telling little white lies.
If you spot some small technical detail that is wrong, I don't want
to hear about it unless either,
1) you can think of a simpler way of saying things I can use, or,
2) what I say can get people into trouble.
For the most part,
only features widely available on most current browsers are described.
Newer HTML features only rarely supported are rarely described,
and only then, if they are particularly useful.
In practice this document is a direct result of wanting something to
handout during a HTML presentation I made to a local group. Something
short enough for people to read yet practical enough to be used.
While doing
HTML consulting
I developed a number of tricks not in any
documents I've seen.
Some of the simpler ones are in this document.
2.2 Restrictions
This document assumes traditional ASCII character sets
and the English language
are sufficient for your web pages.
Other encodings are quite possible, but not covered by this document.
2.3 Document Conventions
Throughout this document additional information is available by footnotes.
Such information may be interesting, but is rarely critical.
Each footnote uses the format
{footnote number},
in curly braces, as hot text.
Click on the footnote if you want to read more about the subject.
Paragraphs
that start with this graphic need to be read with care.
They describe features, etc., that are frequent sources of problems
to HTML authors.
Paragraphs
that start with this graphic contain helpful, often overlooked,
helpful hints.
Something that is not required, but often very useful.
Some may argue, not without reason,
that these graphics have been over used in this document, making
the document uglier than needed.
My response is important information before beauty.
2.4 Point And Click
In the beginning programmers created the Internet.
People saw that it was good, but it was also difficult to use.
Finding resources required acts of great technical virtuosity.
Today, with a decent Web Browser, it takes little more than point-and-click
(getting most Web Browsers to work however can still be a technical feat).
2.5 Target Audience
This document is targeted at people who know something about the Internet,
and should have at least moderate "Web Browser" experience.
3. WWW History
3.1 WWW Project History
http://www.w3.org/hypertext/WWW/History.html
The Web is fairly new.
- The first project proposal was made in March of 1989 and started as
a text (ASCII) browser.
- By November 1990 the WWW prototype was developed on the NeXT.
- March 1991 the line mode browser was released to a limited audience
on some machines.
- By Jan 1993 there were about 50 known HTTP servers.
- By Sept 1993 WWW service consists of 1% of the NSF backbone traffic.
- By October 1993, there are over 500 know HTTP servers.
- By July of 1994 there are over 1,500 known servers.
- April 1995 WWW service is the largest mover of packets on the NSF backbone.
- May 1995 NSF is no longer being used.
All packets now transitioned to the new architecture,
where traffic is exchanged at interconnection points called NAPs (Network Access
Points) .
3.2 HTML History
HTML was designed with the original Web software to distribute information.
HTML was based on ISO Standard 8879:1986 -- Standard Generalized Markup
Language (SGML).
Only text information was distributed at that time.
There were no provisions for pictures or sounds.
However, images became implemented and rapidly supported.
HTML gave away to standard extensions that became known as
HTML2.
At the time of the latest revision of this document
HTML 4.01 is the latest version.
Then some people, most notably those at Netscape,
have added their own extensions to HTML. Although this document is mostly
concerned with strict HTML compliance,
some popular Netscape enhancements will be described herein.
Most remaining netscape enhancements should be avoided to keep your document
readable by most browsers.
Others can be used if proper care is taken to prevent them from breaking
your documents on non-netscape browsers.
4. Web Growth
HREF="http://www.cc.gatech.edu/gvu/stats/NSF/Packet_3_Area.GIF"
From Jan 1993 when there were about 50 known HTTP servers to
to April 1995 with over 12,000 servers web has grown exponentially.
As of January 1995,
WWW packets now compose over 13% of the Internet packet count,
second only to ftp packets (18%, and I'll bet a lot of those packets
are from web browser requests).
For reports on WWW growth, complete with charts:
5. Generalizations Of Web Pages
5.1 Web Browsers & URLs
Programs that let people read the web are called "Web Browser" programs.
There are browsers for most platforms. Likely many browsers.
Two popular browsers are Mosaic, the original browsers, and Netscape.
All web pages are known by their URL (Uniform Resource Locator).
The key here is Uniform.
URLs provide a consistent, uniform, way of accessing the diverse types
of information on the Internet.
No matter
Most URL's are in the format:
method : //hostname : port / path/name
Where method identifies how the web browser is to access the data,
hostname identifies the computer on the Internet
(defaults to current computer if omitted),
port is the "port" number (usually omitted to default to 80),
and path is the optional path name to the resource you want.
Most of the time Web users do not directly use URLs.
The web pages themselves contain hypertext pointers to the URLs of interest.
However, there are times users need to enter URLs directly,
so be prepared.
URLs can be case sensitive, so copy them exactly as given.
5.2 Web Servers
Each computer providing information to the web is called a "web server".
The typical server program is called httpd for
"HyperText Transport Protocol Daemon".
Unless you are very serious in your webbing,
you will rarely encounter the name of this program.
Even this document only mentions it in a very few places.
If you are experiencing trouble on a particular web server,
the E-mail address webmaster@www.wherever.com
usually works in getting a message to the local "webmaster".
Please be sure it really is their problem before sending a message.
Describe the tests you made, their results, etc., to help the
webmaster fix the problem.
5.3 Where To Put HTML Files
Most UNIX web page servers allow users to create a
public_html directory within their home directory.
HTML files placed in public_html are available to the web.
The public_html directory, and
all files in it that anyone, even yourself,
are to access through the web must be readable to the world.
Directories must have execute permission for the world set.
(chmod a+rx ~; chmod -r a+rX ~/public_html is one way to get this
on UNIX systems).
Remember, your browser is not reading the files, but the httpd
program.
So if they are not readable by "other",
likely httpd will not be able to read them,
even from requests from your logon.
The alternative to public_html, at least on UNIX systems,
is to put the files into a special directory tree.
The httpd program is configured to call some directory
it's local "root" directory where incoming absolute path names start at.
Unlike public_html, this later method
usually requires the services of a friendly system administrator.
I would love to hear about conventions on other systems.
You can E-mail me at ghealton@exit109.com.
Please refer to the document title in your E-mail.
6. Writing Web Pages
6.1 File Names
Generally any file name acceptable to the server can also be made acceptable
to the web. The operative word is generally.
Restricting file names to the basic special characters of
"-",
".",
and
"_",
is strongly recommended.
Under pain of extreme headaches, avoid
"<",
">",
"&",
"?",
"*",
"+",
quotes,
"#"
and
"%".
The names of HTML hypertext files must have
an extension of ".html"
(".htm" on MS-DOS systems{2}
Regular ASCII files, which are displayed without any formatting,
have extensions of ".txt".
Graphic files can use a variety of data formats,
though more web browsers support ".gif than any other format.
Unfortunately .gif files are now subject to a licensing
controversy. If you use gif files not produced by a
product properly licensed by Unisys you may be subject to legal action.
Therefore using the newer, and now very popular, .png
image format is suggested.
Web browsers support file types beyond graphics.
The one additional format I'll mention here is ".au for
audio messages.
Look at the configuration / preferences of your own web browser for
additional types.
The name of the file extension identifies the type of data in the file.
Your friendly web browser uses this extension to determine how to process the
file.
Somewhere each browser has a list of file extensions that identify the
program needed to process them.
If the extension is unknown, the typical default is to ask users if they
want to stop the operation or download the
file{3}
A slash (/) is
always used to separate directory names, regardless of the server.
The permissions of all .html files must be readable by the world.
The
file name index.html is reserved by most UNIX web servers
(and other servers?).
When a URL pointing to a directory name is given,
the server first attempts to open the file index.html
to return that as your index.
If this is not found, then some type of listing of the real directory is
made and returned. Each file having a hot anchor to allow its selection.
This typically includes "..", or "Up to previous level",
to return to previous directory level.
To
keep your directories secure, always have an index.html
file in your top-level directory;
This is a wonderful place to put your welcome to the world.
It also provides a shorter web address:
/~ghealton/
instead
/~ghealton/index.html.
It also helps you to keep your secrets.
6.2 HTML Files
HTML documents are in plain text format (e.g., ASCII).
They can be created and updated using your favorite text editor.
A few Web browsers include rudimentary HTML editors in
them{4}
Stand alone WYSIWYG editors are also available
(e.g. HotMetal for Sun SparcStations, HTML Edit for Macintoshes),
along with programs that convert between HTML and the formats of
some word processors.
However, there is nothing like knowing the basics of HTML to
let you know what can and can not be done in HTML.
Most browsers provide a way of viewing the "Source": the original
raw HTML file before it is edited.
Looking at documents that do things you want is a good way to learn HTML.
Finding good documents to mimic however......
This document describes files formatted in the
HyperText Mark Up Language, HTML.
While some web browsers support
PostScript
{5},
HTML documents by far and away allow more people to read them.
6.3 Basic HTML Theory
Hypertext Mark Up Language (HTML) is derived from
Standard Generalized Markup Language,
SGML.{6}
To
cope with the truly huge variety of computer hardware used to read,
and print, web pages, HTML has been designed from the start to be
truly device independent.
You have no control, yea not even any idea,
about how browsers around the world are configured.
You can take some averages, but that is about
it{7}
You really can't have tight control over your document the
way you may be used to over your local printer.
Unlike WYSIWYG word processors,
HTML authors only have minimal control over most aspects of the final output.
Web browsers locally format the document and images to get viewable
pages each time the document is referenced.
Thus HTML is simple to allow quick formatting to the local environment.
There are text environments and graphic environments.
Environments with narrow windows and wide windows.
Environments that default to English and those that don't.
Environments for the color blind
and environments for the plain blind.
Most styles of the page: text size, heading size, etc., are under the
control of the local browser configurations.
You can say where things like paragraph breaks are to occur,
but you can't control what they look like.
Therefore authors must
forget about having much control over point size, fonts, etc.
True, there is some control which we will get into later, but it is minimal,
and in practice, not always known in advance.
The only way to have 100% control is to make a graphic with the text you
want, and display that. But this greatly degrades performance of your
pages, especially to people using dial-up Internet access.
It can also make your documents quite difficult to read in some environments
and impossible to read in too many others.
HTML was originally designed for text documents.
The ability to include graphics was included later and was
only intended for occasional graphics.
HTML is not a graphics oriented mark-up language.
Was a result, HTML is not a beautiful language.
Documents with lots of elements can be quite clumsy.
Personal tastes of authors also affect the way the raw unformatted files look.
For many years, SGML and HTML were generated
by manually editing the raw files.
Thus many people used to better WYSIWYG editors develop a
hatred of these languages.
The growth of WYSIWYG HTML editors should help here.
However, some advanced people may still wish to do extensive
hand editing to retain total control over the files.
6.4 Basic HTML Syntax
6.4.1 Element (Command) Chars & Escapes
HTML documents are made of regular text interspersed with elements (commands)
and special escape sequences for character references.
Commands are sometimes called tags.
Each tag, including any contents and ending tag, is called an element.
Escapes are sometimes known as Entities.
All HTML tags are enclosed within "angle brackets",
"< >".
Escape sequences for special
"character references" are introduced by an ampersand character,
"&",
and end with a semi-colon, ";".
As a result of this, the three characters
"<",
">",
and
"&",
can not be keyed directly into a document for printing.
The corresponding escape sequence
"<",
">",
and
"&",
must be used instead.
Other escape sequences are possible, and discussed elsewhere.
One of interest is """, which provides a
printable double quote within < > characters.
Visit http://www.w3.org/TR/html401/sgml/entities.html
for a complete list of references.
Never omit the semi-colon that closes the escape sequence!
To simplify formatting, multiple white spaces, which usually
includes line endings, are collapsed into a single white space.
It doesn't matter what combination of carriage return/line-feed codes
are used to end lines. Indeed you don't even have to use these codes
at all in your document.
At the start of paragraphs, and a few other places, white space is ignored.
The first part of an element is the HTML tag name,
which may be up to 33 letters, digits, hyphens, or periods.
Many tags have optional attributes.
Some attributes have values (arguments) to them.
Attributes with values have an attribute name, an equal sign,
and then the value.
The standard requires all values to be quoted with double or single quotes,
though most browers do not enforce this for simple values without strange
characters or spaces.
(NOTE: this author has yet to meet a browser that enforces the double
quote rule... if you know of one, please E-Mail the author about it
at ghealton@exit109.com).
Values may be up to 1024 characters.
<IMG src="/~ghealton/images/warning1.png" ALT="[WARNING!!]" align=bottom>
Browsers
are supposed to silently ignore tags, attributes, or entities
they do not understand.
While this makes it possible for old browsers to read pages with newer
commands,
care must be taken if the resulting page is to still look appropriate.
A lot of this document is dedicated to this facet.
6.5 Character Sets
In general the complete ASCII character sets are available to all users.
Most graphic browsers support the
The ISO LATIN I character set.
This includes fractions, section marks, and other useful characters.
A general discussion of entities is also available at
http://www.w3.org/MarkUp/html3/latin1.html.
If you need to make pages readable by text-only browsers,
you need to avoid these characters
(but see Tricks For Special Chars).
6.5.1 Elements (Commands, or Tags)
A non-blank character should immediately follow the <.
The tag name, followed by any attribute names,
are nOt sENSiTIve To THE CASE oF the LETTERS.
Text arguments after "=" attributes are case sensitive only if they contain
text to be printed.
Once the initial tag name is given, line breaks may occur wherever spaces are
valid.
Never
forget the closing > nor attempt to use > or < embedded within
text arguments of the attribute.
Some browsers totally mess up the formatted pages on these omissions.
Always close elements requiring closure
and properly use escape sequences.
Another
popular mistake is to omit the closing quote on a string.
This too blows up some web browsers while others terminate on the >,
even though it is officially in a quote
(remember, use > escapes to output magic characters,
except in ALT, where some browers do not service & escapes).
The
mistakes in the previous two warnings are the most common mistakes for
both beginning and advanced authors.
Head this warning well.
Some tags are paired (e.g., start and end italic type).
In this case, the same tag name is used to both start and stop the
element pair,
but the closing tag starts with a slash,
"<BLOCKQUOTE>/</BLOCKQUOTE>".
To close an element, it is very important to use a "/".
to close an element, "<STRONG>it is very important to use a "/"</STRONG>.
6.5.2 Document Template
The following provides a template for preparing HTML documents.
While beyond the absolute minimum needed to make documents,
it provides the minimum format considered "good" by various authorities.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Quick Overview To Writing Html</TITLE>
<META name=author content="Gilbert Healton">
</HEAD>
<BODY>
<CENTER><H1 align=center>QUICK OVERVIEW TO WRITING HTML</H1></CENTER>
<H1>Introduction</H1>
<H2>Document Intent</H2>
The intent of this sample is to show you text
close to what was used to open this document.
<EM>The rest of the document</EM>
<HR>
</BODY>
</HTML>
6.6 Elements For The Heading Area
6.6.1 <HTML> Element
<HTML> should start all HTML files and 