GeoffKnagge.com

Home

Web Development


Short Contents

For Beginners...
Introduction
Changes from 3.2
Document
Attributes
...that are available for all BODY objects
Text
Organisation tools
Forms
Images
Sounds
Style Sheets
Special Effects - Javascript
Search Engines

Full Contents

For Beginners...


Introduction

 Other HTML sites
Putting pages online
Tips For beginners
Download this Guide

Changes from 3.2

Document

 Specifying Language
Structure

The <HEAD> section

...General attributes
...Title
...Setting the Base address
...Queries : ISINDEX
...META tags
...Character sets
...<LINK>s

The <BODY> tag
... General Attributes
...Document Colours
...Background

Attributes

 ...that are available for all BODY objects

Text

 Headings
Fonts
Preformatted text
Change text direction
Special Characters
Character Formatting
...Blink
...Bold
...Italics
...Underline
...Strikethrough
...Superscript
...Subscript
Paragraph formatting
...Blockquote
...Line Breaks
...New Paragraph
...Stop Line Breaks
...Word Break
...Centre text
...Marking Modifications
Miscellaneous
...Abbreviation
...Acronyms
...Addresses
...Use Bigger/Smaller fonts
...Citations
...Code
...Definitions
...Keyboard input
...Sample
...Teletype
...Variables
...XMP

Organisation tools

 Comments

Horizontal lines

DIV and SPAN

Links
...<LINK>s
...within pages
...Image maps

Frames
...Naming and Targeting
...Inline Frames

Tables
...example tag
...Rows
...Cells
...Captions

...Head, Body & Foot

Lists
...Definition lists
...Directory Lists
...Menu Lists
...Ordered Lists
...Unordered Lists

Embedding special files
The Object Element

Forms

 Inputs and buttons
Selection menus
Element Labels
Fieldsets and legends

Images

Sounds

Style Sheets

 specifying version
individual elements
in the HEAD section
specifying media types
external sheets
cascading sheets
media-dependant defaults
HTTP headers

Special Effects - Javascript

 Events
...onAbort
...onBlur
...onChange
...onClick
...onError
...onFocus
...onLoad
...onMouseOver
...onMouseOut
...onReset
...onScroll
...onSelect
...onSubmit
...onUnload
Basic Commands
...Changing the status bar
...Opening a new window
...changing page being viewed

Search Engines

Language Provisions

Many HTML elements ("tags") now allow the inclusion of the lang="???" and dir="???" attributes to specify the language to be used.
  • The lang attribute specifies which language is to be used - "en" is english, others are described at http://ds.internic.net/rfc/rfc1766.txt.
  • dir is LTR or RTL - it specifies whether text is displayed left-to-right or right-to-left.

Document Structure

HTML documents are made up of text which includes "tags" enclosed in the < > symbols. Most HTML tags usually have a corresponding "closing tag" which marks the end of whatever effect the opening tag had. For example, <B> Example Text </B> would display everything between the opening <B> and closing </B> in bold print (as the B tag does).

HTML tags should also be used in a "nested" pattern, which basically means that the matching closing tag for a tag within another opening / closing pair must also be within that pair. That is, <B> bold text <I> Bold Italics </I> </B> is allowed since the <I> </I> pair is within the <B> </B> pair, but <B> bold text <I> Bold Italics </B> Italics only </I> will not work because it does not conform to these rules.

Note that most web browsers are very tolerant of such mistakes, but may not display the document as you intended. Be sure to test your pages on more than one browser, because while one may display things properly, another may get confused by any mistakes.

This is the most basic structure of a HTML document :
<!doctype html public "-//ietf//dtd html//en//4.0">
<HTML lang="???" dir="???">
<HEAD lang="???" dir="???">
.......
</HEAD>
<BODY lang="???" dir="???" style="???" title="???">
........
</BODY>
</HTML>

<!doctype html public "-//ietf//dtd html//en//3.0"> is really unnecessary, but the specification states that it should be there to show what HTML version is being used. Use one of the following forms :

  • Strict DTD : includes all elements and attributes, except those which have been superceded, and anything to do with frames : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
  • Transitional DTD : includes everything in the HTML specification, except for frames. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
  • Frameset DTD : includes everything in the transitional DTD plus frames as well. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">
The address at the end of each document type declaration allows your web browser to download any information needed about the chosen HTML version. The following refer to some special entity sets for HTML 4.0 :
The <HTML lang="???" dir="???" > </HTML> pair should enclose the entire HTML document. See above for details of the language attributes.

The <HEAD></HEAD> section generally contains information about the document such as the title and the META tags used by search engines. If you plan on using Javascript functions, this is the best place to put them to ensure that they are loaded before something in the body of the document executes them.

The <BODY></BODY> part is the main section of a HTML document. It contains all your text, images, links, etc. If you want to use frames, the<FRAMESET></FRAMESET> tag must be placed before the BODY section.

The <HEAD Section >

HEAD attributes

The HEAD tag is of the form <HEAD lang="???" dir="????">
These attributes are described at the top of this section.

Choosing the title

The document's title appears, in most browsers, along with the browser name, above the menubar of the browser window. To give your document a title, place the following within the HEAD section :

<TITLE lang="???" dir="???"> (place your chosen title here) </TITLE>
Bear in mind that your document's title is also used by search engines when displaying results, so make sure that you use something that is likely to attract people to choose your page from the hundreds of other results. For example "Geoff Knagge's HTML guide" is preferable to "My HTML page".

Generating a query

Not much use to Xoom or Geocities users, unless you direct the query to another location. The
<ISINDEX Prompt="(Message to tell people what to do)">
 tag will generate an input box in the browser window. When the user types something and hits Enter, a query is sent to the base address (see below) of the document in the form [base address]?[your query string], where the query string has the spaces replaced by +, and other special characters replaced by their codes. For example, if my base address was http://www.dot.com/ and I typed the string This is a test, the query sent would be http://www.dot.com/?This+is+a+test

You'll have to check with individual servers to find out how you can use this feature - Once again, it is pretty much useless in Geocities.

Setting the Base Address

This tells the web browser what address to put in front of all the relative links, and is also used by the ISINDEX feature. Usually, this will be exactly the same address as the document itself, but sometimes you may wish to over-ride it if you have files on. or have moved to, a different location. An example of the tag, for the online version of this guide, is :

<BASE href="http://www.geocities.com/Athens/Aegean/4756/html.htm">

META tags

<META name="(variable name)" content="(description or value for name)" lang="???" dir ="???">
These provide special information to web browsers and search engines,with the most useful values of NAME as follows:
  • KEYWORDS : A list seperated by commas, which is used by many search engines to obtain results.
  • AUTHOR : The name of the person who wrote the page
There are others, but they aren't really of much use. Sometimes NAME is replaced by HTTP-EQUIV. For example :

<META HTTP-EQUIV="Expires" CONTENT="DDD, DD MM YYYY HR:MM:SS GMT">
specifies when the page should be cleared from a cache, and an update sought. Set this to a date that has passed, and the will be loaded fresh every time.

Specifying Character set

To conform with the HTML standard, you should also specifying what chatacter set your document uses, by placing the following within the HEAD section:
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">as used in this document
A list of available charsets is at ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets

<LINK>

This tag is covered in the Organisational tools section of this guide. However, most web browsers ignore it, with the same effect being achieved by using <A> tags in the body of the document.

The <BODY> Tag

BODY attributes

  • lang="???" dir="???" : language info. see above.
  • style="???" : Inline style info - see the style sheets topic
  • title="???" : A name or description, to be displayed when mouse pointer is held over the object.

A Note on Colours

When specifying colours within the BODY section of a document, you can either use the #rrggbb format (explained later), or colour names. The latter is not advised, since various browsers interpret some names differently, Also be aware that some people use a 16-colour display, seeing variations on what you specify, and that many people suffer various forms of colour blindness. However, the following do seem to be standard colour names:

  • Black = #000000
  • Green = #008000
  • Silver = #C0C0C0
  • Lime = #00FF00
  • Gray = #808080
  • Olive = #808000
  • (White = #FFFFFF)
  • Yellow = #FFFF00
  • Maroon = #800000
  • Navy = #000080
  • Red = #FF0000
  • Blue = #0000FF
  • Purple = #800080
  • Teal = #008080
  • Fuchsia = #FF00FF
  • Aqua = #00FFFF

Your Default colours

The default colours for HTML documents are rather bland... grey background, black text, blue links... you'll almost definitely want to choose your own. To do so, your BODY tag should look like this :

<BODY text="#rrggbb" link="#rrggbb" bgcolor="#rrggbb" alink="#rrggbb" vlink="#rrggbb">
All sections are optional, and if any are absent the default will be used. In all, rrggbb refers to the hexadecimal values for red, green and blue respectively.
text : this sets the colour of normal text and headings.

link : the colour of all unvisited links

alink : active links. Most of the time, this doesn't really seem to do much, but it's supposed to be the colour of links to the current page.

vlink : the colour of links to pages which have been visited

bgcolor : background colour

Setting the background

There are basically two things that can be done to the background : settting colours and setting a wallpaper image. To set a colour as the background, the BODY section should contain the Bgcolor section as such :

<BODY bgcolor="#rrggbb" >

To use an image wallpaper, which over rides and colour selection for the background, use

<BODY background="filename">


Back to HTML Contents | Short Sited Ohm Page
(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.