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
...META tags
...Character sets
...<LINK>s

The <BODY> tag

A note on colours

Attributes

 ...that are available for all BODY objects

Text

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

Organisation tools

 Comments

Horizontal lines

DIV and SPAN

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

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

...Head, Body & Foot

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

Embedding special files
The Object Element

Forms

 Inputs and buttons
Selection menus
Element Labels
Fieldsets and legends

Image

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//4.0"> shows 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".

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 whatacter 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 and background

In strict HTML 4.0, all colours and background images are specified by use of style sheets.
(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.