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

Comments

All text between the <!-- --> tags is ignored by the viewing program, and are usually comments.

Horizontal Lines

<HR align="?" size="?" width="?" noshade>
This rules a horizontal line of thickness SIZE. ALIGN can be left, right, or center. The WIDTH can be specified in either a number of pixels, or a percentage of available space. The NOSHADE attribute is used if you want a solid line, rather than the 3D effect.

DIV and SPAN

<DIV> </DIV> ; <SPAN> </SPAN>
These organise the document into groups of information. DIV is meant to group blocks of data, and SPAN is for elements within a block. The standard attributes can be used with DIV and SPAN tags to apply to everything between them.

Links

These are about the next fundamental part of a web page after text. I'm sure you all know what links are... if not, go find out for yourself! The following code creates a simple link...

<a href="source" target="name">Link Text</a>

In this example, "Link Text" is the text that appears on the screen, and "source" is that address which the user goes to if they click on your link. "Target" is the name of a frame or window which you want the link to be loaded into (see frames below for special names). If you want the link to open in a new browser window, you can just specify a non-existant name.
Instead of the "Link Text", you can alternatively use an image, or a mixure of text or images.

The following attributes can be used in <A> tags:
  • name = "???" : Specifies the name of the anchor so that another can reference it with the href attribute. Same function as the id attribute.
  • href = "address" : Specifies what is loaded if the link is clicked on. If the want to go to an anchor within a document, add #name after the address. eg. href="http://www.dot.com#name"
  • hreflang = "??" : Sets the language code of the resource designated by href.
  • rel = link-types (see below) : This attribute describes the relationship from the current document to the anchor specified by the href attribute. The value of this attribute is a space-separated list of link types.
  • rev = link-types (see below) : This attribute is used to describe a reverse link from the anchor specified by the href attribute to the current document. The value of this attribute is a space-separated list of link types.
  • target="framename" : Used to specify the name of the frame or window in which the link's destination is to be displayed.
  • tabindex = ?? : gives a value to determine in what order the links will become focussed when the TAB key is pressed repeatedly.
  • accesskey=? : provides a shortcut key with which to access the link.

<LINK>s

These can only be specified in the HEAD section, and are displayed at the top of a page. However, note that most web browsers don't seem to support them. Allowable attributes are:
  • id, class, lang , dir, title, style : as defined for all elements
  • href : The address where the link points
  • hreflang : The language of the linked object
  • type : Describe the type of contents that the link points to e.g. "test/css"
  • rel, or rev (reverse link): list specifying the link type
  • target : The frame which the link will be displayed in
  • charset : The code for character set to be used

Link Types

The rel and rev attributes of A and LINK can have the following values, in the form of a list with items seperated by spaces:
  • Alternate: Different versions for the document. Can be used with the lang attribute to specify translated version.
  • Stylesheet: Refers to an external style sheet. If used with "Alternate", you can have user-selectable style sheets.
  • Start: The start or cover page of a set.
  • Next:The next page in the sequence.
  • Prev:The previous page in the sequence.
  • Contents: The table of contents.
  • Index: The index for the site or document.
  • Glossary: a glossary of terms
  • Copyright: a copyright statement
  • Chapter: A new chapter in a set.
  • Section: A section of a chapter.
  • Subsection: A sub-section of a chapter.
  • Appendix, Help, Bookmark

Anchors

Been wondering how some of my links have been loading some of the pages part way down the documents? It's done by using anchors...

<a name="anchorname"> </a>

This then defines the position of the anchor by the name "anchorname", and you would link to it by using

<a href="pagename.htm#anchorname">Link Text</a>

Image Maps

These are the next step up from basic links. With image maps, you can define certain parts of an image as seperate links. For an example of what image maps look like, see my home page and note how the status bar changes as you move the mouse over various parts of the top image. To setup up a map, you first need the image:

<img src="imagefilename" usemap="mapname">

and then you can define the map...

<map name="mapname"> </map>

Within the Map tags, you define a rectangular area for each of the links...

<AREA SHAPE=RECT COORDS="left,top,right,bottom" HREF="linkedaddress">

On Netscape and Internet Explorer, aswell as some others, you can also use...

<AREA SHAPE=CIRCLE COORDS="x-centre,y-centre,radius" HREF="linkedaddress">

<AREA SHAPE=POLY COORDS="x1,y1,x2,y2,etc..." HREF="linkedaddress"> Defines an irregular polygon

If you want an area to not link somewhere, replace the HREF section with NOHREF. This is particularly useful if you want a no-link area within another area. If this is the desired effect, note that where areas overlap, the first defined area is used.

Frames

Basically, frames allow you to display multiple pages within the one web browser window. This HTML guide contains frames - one for the contents page, and the one in which this text is displayed. To achieve this, we need a special HTML file whose sole purpose is to set up the frames. First we need the Frameset tags, which MUST be placed before the BODY section of the HTML file

< frameset cols="width1,width2,..." border=0> </frameset>
or
< frameset rows="height1,height2,..." border=0></frameset>

The border=0 section is only used if you don't want the frame boundaries to be seen, but can be set to values other than 0 if desired.
The height and width values are specified in pixels, or you can use the * wildcard to use all of the remaining area. To split all of the remaining area into proportions, we assign wightings to each *. For example, if width1=4* and width2=3*, the first frame receives 4/7 of the available space, and the second would receive the remaining 3/7 of that space.

Within the Frameset tags, we then define each individual frame :
<frame src="URL of frame's initial contents" name="framename" marginwidth="###" marginheight="###" scrolling="yes/no/auto" noresize>
The optional noresize attribute stops the user from using the mouse to alter the size of your frames. The scrolling option determines whether or not scrollbars are to be displayed. If "auto" is specified, they are only shown where needed if the frame is filled.

To ensure that your frames display properly, ensure that you don't define more frames than you have rows or columns for!

Naming Frames

It it possible to "name" each frame, which allows you to use links in other frames to change the page being displayed in the named frame. That is how this guide works - links in the contents frame contain target = "viewdow", where viewdow is the name which has been given to this frame.
There are some special names :
  • _blank : open in a new window, with no target name.
  • _self : open in the same frame in which the link was contained
  • _top : open in the current web browser window, clearing all frames.
  • _parent: replaces the frameset in which the link was contained.

Inline Frames

<IFRAME> </IFRAME> Allows documents to be loaded within other doucments. Allowable attributes include:
  • longdesc = "???" : Address of a long description of the frame. It is in addition to the short description provided in the title attribute.
  • name = "???": Gives the frame a name, as desribed in the above section.
  • width, height :dimensions of the frame, as pixels or percentage.
  • src = "address": The initial contents for the frame
  • frameborder =1 or 0 :whether or not to draw a border
  • marginwidth =?, marginheight =?
  • scrolling = yes|no|auto : whether to draw scroll bars.
  • align

Tables

Surprisingly enough, these allow your page content to be arranged in rows and columns, the intersections of which are called "cells". All of the HTML code for a table is enclosed in the <table> </table> tags. There are quite a few possible attribute which can be added withing the <table> tag, as in the following example table :
Attribute Possible Values Description
align="???" left, right, center, justify sets the alignment of the table on the page, but doesn't always work reliably...
background="???" an image's filename Sets the image to be used as the wallpaper for all cells
border nil Specifies that a border should be drawn around the table
border="???" a number of pixels Indicates the width of the borders to be used
bordercolor="#rrggbb" hexadecimal values for red, green and blue The colour of the table's border
bordercolordark="#rrggbb" hexadecimal values for red, green and blue The darker colour of the table's border, for 3D effects
bordercolorlight="#rrggbb" hexadecimal values for red, green and blue The darker colour of the table's border, for 3D effects
bgcolor="#rrggbb" hexadecimal values for red, green and blue The colour to be used for cell backgrounds
char="?" Chosen character of alignment Aligns text around the chosen character
charoff="?" Offset of chosen character of alignment Aligns text around the chosen character of the position (offset) given
cellpadding="???" a number How much space (in pixels) is left between the cell wall and the cell's edge.
cellspacing="???" a number How much space (pixels) is left between the cells
frame= void |above |below |hsides |lhs |rhs |vsides |box |border Specifies where a border for the table is drawn: none, top, bottom, top and bottom, left, right, left and right, all side, all sides respectively.
rules = none |groups |rows |cols |all Specifies where lines are drawn between cells : never, defined column groups, between rows, between columns all sides respectively.
height="???" a number or percentage How high the table should be, in number of pixels of as percentage of available space.
width="???" a number or percentage How wide the table should be, in number of pixels of as percentage of available space.
summary="???" any text A general description of what the table contains.

Example: The code for this table is <table border="1" border bgcolor="#FFFF80" bordercolorlight="#C0C0C0" bordercolordark="#828282">



You then define a series of rows as required, with the information for each row contained in <tr> </tr> tags (TR means Table Row). TR tags can contain the following attributes :
Attribute Possible Values Description
align="???" left, right, center, sets the alignment of the text in the cells
bordercolor="#rrggbb" hexadecimal values for red, green and blue The colour of the row's border
bordercolordark="#rrggbb" hexadecimal values for red, green and blue The darker colour of the row's border, for 3D effects
bordercolorlight="#rrggbb" hexadecimal values for red, green and blue The darker colour of the row's border, for 3D effects
bgcolor="#rrggbb" hexadecimal values for red, green and blue The background colour to be used for the row
Valign="?" top, middle, bottom or baseline Specifies alignment of text in the cells. Baseline alligns all cells to the same base line.

Finally, you can define the individual cells, of which there are two types. The first is called a Table Header, which typically displays things in bold and is implemented by use of <th></th> tags. The other is called Table Data, and uses <td> </td> tags. Note that, unless you specify otherwise, the web browser will draw your table so that the best arrangement is achieved. Colspan and Rowspan are used if you want a cell to cover multiple rows or columns. Both types can have almost any HTML elements between the tags, and both can have the following attributes :
Attribute Possible Values Description
align="???" left, right, center, sets the alignment of the text within a cell
background="???" an image's filename Sets the image to be used as the wallpaper for the cell
bgcolor="#rrggbb" hexadecimal values for red, green and blue The colour to be used for the cell background
bordercolor="#rrggbb" hexadecimal values for red, green and blue The colour of the cell's border
bordercolordark="#rrggbb" hexadecimal values for red, green and blue The darker colour of the cell's border, for 3D effects
bordercolorlight="#rrggbb" hexadecimal values for red, green and blue The darker colour of the cell's border, for 3D effects
colspan="???" a number of columns How many columns the cell should be spread across.
headers="item1,item2,..." list of header id's Used to reference a cell to a group of TH cells, particularly in a non-visual presentation.
nowrap nil Specifies that all text must be on one line.
height="???" a number or percentage How high the cell should be, in number of pixels of as percentage of table height.
width="???" a number or percentage How wide the cell should be, in number of pixels of as percentage of table width.
Valign="?" top, middle, bottom Specifies alignment of text in the cell

Table Captions

No surprises to what this tag does... just insert <caption> (your caption) </caption> within the TABLE tags, but not within any TR tags. The CAPTION tags can contain the Align or Valign attributes, as described above.

Table Head, Body, Foot sections

The table can be divided into these three sections with the <THEAD> </THEAD> , <TBODY> </TBODY> and <TFOOT> </TFOOT> tags. For long tables, the viewing progam should make the head and foot sections visible at all times, by scrolling the body, or resdisplaying them.

Table Column Groups

It is possibly to highlight groups of columns within a table as belonging to a particular group. This is done by adding the following tag before and HEAD, TR or CAPTION information, but after the opening <TABLE> tag :
<COLGROUP span=??? width=???> </COLGROUP>
span designates how many columns are covered in the group, and width gives the default width for each column. Widths can be in pixels, as a percentage of available space, or as a proportion of available space (using the * wildcard - see frames for more info) You may also use the align, valign, char and charoff attributes, as are used for cells.

Between the COLGROUP tags, you can place <COL width=???> tags if the columns have different widths. These may also include the attributes for cell alignment, as above.

Lists

There are a few types of lists which can be used...
Definition List
This is the definition of a definition list!
These are contained in <DL> </DL> tags. Each term is preceded by <DT> and it definition must have a <DD> tag before it. DT and DD do not have closing tags.

  • Directory list
    •  These are contained in <DIR> </DIR> tags, with each item preceded by <LI> (for "list item"). The HTML standard states that you can have up to 20 characters for each item, although some browsers allow more. These lists are arranged in 24-character wide columns.

  • Menu list
    •  These are contained in <Menu> </Menu> tags, with each item preceded by <LI> (for "list item"). These lists are arranged with one item per row

    1. Ordered list
    These are contained in <OL start="?" type="?"> </OL> tags, with each item preceded by <LI value="?"> (the value bit is optional). Type specifies the typ e of ordering which occurs, allowable values being:
    1. A : capital letters
    2. a : lower capse letters
    3. 1 : numbers - the default
    4. I : large Roman numerals
    5. i : small Roman numerals
    The optional start attribute must be a number, 1 or greater, which specifies how far through the sequence to start counting from. LI tags can contain the value attribute to change the ordering at any stage through the list (i.e. to skip or repeat values). LI tags can also use the type attribute to change the list type.

    • Unordered list
    These are contained in <UL type="?"> </UL> tags, with each item preceded by <LI> . Type specifies one of disc, circle, square to indicate what type of symbol to use in front of each item:
    • Disc
    • Square
    • Circle
    The LI tag can also use the Type tag to change the symbol midway through a list.


    Embedding Special Files

    <embed src="address of file" width="?" height="?"> Use this to embed special files that require a browser plug-in. width and height should be in pixels. Examples include sounds, images, movies, Real Audio, etc.

    The <OBJECT> element

    This is a replacement for the IMG, APPLET, and IFRAME tags:
    <OBJECT> </OBJECT>
    The following attributes are allowed:
    • classid : used to specify the location of an object's implementation via a URI. It may be used together with, or as an alternative to the data attribute, depending on the type of object involved.
    • codebase ="??": The base path for relative addresses given in classid, data, and archive attributes.
    • codetype : Specifies the type of data expected in the linked file.
    • data = "address" : the location of the object's data, for instance image data for objects defining images, or more generally, a serialized form of an object which can be used to recreate it.
    • type = content-type : the type of data being specified. Allows the web browser to avoid loading information for unsupported content types.
    • archive = "space seperated list of resources" : files required by the object.
    • declare=true|false : makes the OBJECT a declaration .
    • standby ="??" : a message that is displayed while loading the object.
    • tabindex=?? : used to determine the order in which objects become focussed by repeated pressing of the TAB key.
    • usemap="mapname" : Specifies an image map to use
    • name, align, width, height, border, hspace, vspace as normal

    Initialising the Object

    In the case of such things as Java applets, you'lll want to set some starting conditions. This is done by the inserting the following between the object tags:
    <PARAM name="???" value="???" valuetype=data|ref|object>
    valuetype is either a string of text of numbers (data), an address (ref), or a reference to an object. name and value depend on the object.

    Example Objects

    <OBJECT width=100 height=50 border=0 
          standby="Please wait while loading..."
          data="cgi\counter">
 <PARAM name="count_start" value="45" valuetype=data>
 <PARAM name="count_number" value="1" >
</OBJECT>

<OBJECT codetype="application/java-archive"
        classid="java:program.start">
        codebase="http://www.dot.com/javaproggy/"
</OBJECT>
    (C)opyright, Geoff Knagge.
    Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.