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

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.

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
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). In strict HTML 4.0 TR tags can only contiain the standard attributes, such as id.
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
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.

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.

    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 2001-2010, Geoff Knagge.
    Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.