MY HOMEPAGE

is not defined in the HTML specification. As unrecognized tags are ignored by a browser putting the tag in does no harm.

HTML BASICS

This page is designed to help you understand basic HTML, and creating your basic web page. If you have any questions, post them here using "HTML help" as the subject, thankyou

Contents

Introduction to HTML
Simple formatting tags
Colour
Specifying a colour by name
Specifying a colour by RGB value
Colours for text, links, etc.
Logical formatting tags
Paragraph and line breaks
Headings and rulers
Insertion of in-line images
A background image
Creating a list of items
Hyper text links
URL
Tables
Single cell
Row(s) of cells
Heading to a column
Spanning rows and columns
Colouring table cells
Using HTML Special characters
Literal copy and centering of text
Inserting an e-mail address
Redirect to new page

Warning if you are not using a browser that supports tables
such as Netscape 1.1 or later then this page
will probably be very difficult to read.

Introduction to HTML

HTML (HyperText Markup Language) is a markup language which consists of tags embedded in the text of a document. The browser reading the document interprets these markup tags to help format the document for subsequent display to a reader. However, many of the decisions about layout are made by the browser. Remember, web browsers are available for a wide variety of computer systems.

The browser thus displays the document with regard to features that the viewer selects either explicitly or implicitly. Factors affecting the layout and presentation include:

The markup tags used.
The physical page width.
The fonts used to display the text.
The colour depth of the display.

The browser, ignores extra spaces and new lines between words and markup tags when reading the document. Thus, the following three text fragments will be formatted identically.

Fragment 1	Fragment 2	Fragment 3
The browser will ignore new lines and extra spaces in the text.	The browser will ignore new lines and extra spaces in the text.	The browser will ignore new lines and extra spaces in the text.

to produce the following:

The browser will ignore new lines and extra spaces in the text.

The markup language is made up of tags such as which requests text that follows to be in bold type. This bolding is turned off by the inverse markup tag .

In writing a tag, the case of the letters in the tag name is unimportant so that and represent the same tag.

The basic layout of an HTML document and the resultant information displayed by a browser such as Netscape is shown below:

Displayed by browser HTML markup required

An example of a simple web page.
Title of the web page

An example of a simple web page.

The tags used are:

Informs the browser that this is an HTML document. This is an SGML tag to identify the version of HTML being used, in this case just HTML. Version 3.2 browsers (e.g. Netscape) are happy about this pretense that this document is just plain HTML.

Defines the extent of the HTML markup text

Contains descriptions of the HTML page. This meta information is not displayed as part of the web page.

Describes the title of the page. This description is usually displayed by the browser as the title of the window in which the web page is displayed. This information is also used by some search engines to compile an index of web pages.

Delimits the body of the web page. In the body is the text to be displayed as well as HTML markup tags to hint at the format of the text.

Displays the enclosed text in a bold typeface.

Note:
The tags can be written in upper-case or a mixture of upper- and lower-case or just lower-case. For example, , and all represent the same tag.

Simple formatting tags

The following are some of the simple formatting tags available in HTML.

Formatted text HTML markup required

The text is bolded.
The text is bolded.

The text is italicized.
The text is italicized.

The text is in a teletype font.
The text is in a teletype font.

The text is 2 sizes larger and the text is in red. The size attribute may also be an absolute value in the range 1 .. 7.
The text is 2 sizes larger and the text is in red. The size attribute may also be an absolute value in the range 1 .. 7.

Use the e-mail address
[email protected]
to contact me.
Use the e-mail address
[email protected]
to contact me.

Note:
How the formatting is turned off by the inverse of the HTML formatting tag.

Colour

The following are some of the formatting tags available in HTML to specify colour in a document.

Specifying a colour by name

The formatting tag with the attribute COLOR="red" is used to change selectively the colour of the text of the document to red. This temporary colour change terminates on the tag.

Formatted text HTML markup required

* Red* Green* Blue*
* Red* Green* Blue*

Possible values for a named colour are: black [###], maroon [###], green [###], olive [###], navy [###], purple [###], teal [###], gray [###], silver [###], red [###], lime [###], yellow [###], blue [###], fuchsia [###], aqua [###], white [###].

Specifying a colour by RGB value

A general colour is specified in terms of the three primary colours red, blue and green. Each primary colour is defined as a two digit Hexadecimal number that representing the strength of that primary colour.
In this specification hexadecimal 00 means 0% of the colour and hexadecimal FF means 100% of the colour.
For example, to specify red the hexadecimal number FF0000 is used. In this number:

The first two digits FF define 100% of red
The second two digits 00 define 0% of green
The third two digits 00 define 0% of blue

Formatted text HTML markup required

* Red* Green* Blue*
* Red* Green* Blue*

* Yellow* White* Purple*
* Yellow* White* Purple*

Global colours of the text, links, etc.

Additional attributes to the tag

allow a user to specify global colouring of the web page. Attributes of this tag include:

BGCOLOR=
Specifies the background colour of the document.
TEXT=
Specifies the colour of the text in the document.
LINK=
Specifies the colour of the hypertext links in the document.
ALINK=
Specifies the colour of the link when activated by your mouse.
VLINK=
Specifies the colour of the visited hypertext links in the document.

For example, to create a web page with a background colour of green normal text in red and links in blue is specified with the following attributes to the tag

The document may also be given a background image. The selected image is tiled across the document and then the text of the document is written over the image(s). It is thus important to choose a background image that will not be too distracting for the reader. The background image is achieved by adding a background attribute to the BODY markup tag. For example:

Remember, the ability to display the colour depends on the colour depth of the monitor used by the viewer. Many people will only be able to display 256 distinct colours, and some will only have a black and white display.
For viewers with a monitor with a limited colour depth other colours will be displayed by dithering. A process which simulates the un-displayable colour, by creating a pattern of dots in colours which when viewed at a distance will fool the eye into seeing them as a single new colour. Unfortunately this reduces the resolution of the displayed area.

Logical formatting tags

The following are some of the logical formatting tags in HTML. These should be used to describe a logical unit of your document. The formatting of this logical unit may in some cases be the same as produced by other formatting tags. Remember, the tags specify logical units of the document, software other than the web browser may need this information.

Formatted text HTML markup required

The following is a citation.
The following is a citation.

Represents computer code
Represents computer code

A sequence of literal characters
A sequence of literal characters

Note:
This is a blockquote of some text

Note:
This is a blockquote of some text

The following is a definition
The following is a definition

The following text is emphasized.
The following text is emphasized.

keyboard characters.
keyboard characters

The following text is strongly emphasized
The following text is strongly emphasized

The following name is a program variable
The following name is a program variable

Paragraph and line break

A new paragraph is started with the
tag, and may be optionally terminated with the inverse paragraph tag
. However, it is usual not to specify the inverse paragraph tag

A line break is created by the
tag, which has no inverse tag.

Formatted text HTML markup required

Last sentence of a paragraph
The first line of a new paragraph.

Last sentence of a paragraph
The first line of a new paragraph.

A line of text.
On a new line.
A line of text.
On a new line.

Headings and rulers

A heading in the text is created with the
tag. There are in fact six heading tags
the largest to
the smallest.

Formatted text HTML markup required

An H1 heading

An H1 heading

An H3 heading

An H3 heading

An H6 heading

An H6 heading

A heading tag generates line break(s) before and after the heading text. For example:

Formatted text HTML markup required

Just before the heading.
An H4 heading
Just after the heading.
Just before the heading.
An H4 heading
Just after the heading.

A horizontal ruler across the page can be created with the
tag. For example:

Formatted text HTML markup required

End of a section
New section
End of a section
New section

Only 40% of width
New section
Only 40% of width
New section

The size of the ruler
New section
The size of the ruler
New section

Note: The size of the ruler is by default specified in pixels.

Insertion of in-line images

As well as text, images may be inserted into the document. An image may be held in several formats, though the main ones used are GIF and JPEG. Due to limited bandwidth, JPEG with its high compression of picture data and its ability to represent 24 bit colour images is the best to use. Even though the JPEG compression is lossy the degradation of picture quality is not very noticeable to the human eye.
However, if the picture is very small or a graphical image then the GIF format may be the best.

Inserted image HTML markup required

jpeg
jpeg

A gif image with a transparent background.
A gif image with a transparent background

Text can be made to flow around an image on the left hand side by using the attribute ALIGN=RIGHT.
Text can be made to flow around an image on the left hand side by using the attribute

The image size can also be specified using HEIGHT and WIDTH. This will speed up the construction of the page on the web browser.
The image size can also be specified using HEIGHT and WIDTH. This will speed up the construction of the page on the web browser. ALIGN=RIGHT.

This can also be used to distort the picture.

This can also be used to distort the picture.

Note:
There are many graphic editing programs which allow you to specify that one of the colours of a gif image is transparent when displayed by a browser. For example, LView Pro and Paint Shop Pro, allow the creation of a transparent colour in a gif image. However, in order to do this, the version used for the saved gif image must be 89a.
An image may be used as the displayed item for a hypertext link. For example: .

The attributes of the tag include:

ALT="mas"
If the image can not be displayed, then the text associated with the ALT attribute will be displayed instead of the image. This occurs, if for example the display of images has been turned off in the browser, or for some reason the browser can not display the image.
ALIGN=TOP
Causes any following text to be displayed aligned with the top of the picture.
ALIGN=BOTTOM.
Causes any following text to be displayed aligned with the bottom of the picture.
ALIGN=MIDDLE.
Causes any following text to be displayed aligned with the middle of the picture.
ALIGN=LEFT
Cause the image to be left aligned on the page. Text is flowed around the image on the right hand side.
ALIGN=RIGHT
Cause the image to be right aligned on the page. Text is flowed around the image on the left hand side.
HEIGHT=n
Set the height of the image to be n pixels.
WIDTH=n
Set the width of the image to be n pixels.

Insertion of a background image

The document may be given a background image. The selected image is tiled across the document and then the text of the document is written over the image(s). It is thus important to choose a background image that will not be too distracting for the reader. The background image is achieved by adding a background attribute to the BODY markup tag. For example:

Creating a list of items

There are several types of list, an un-ordered list can be created by the following markup:

Formatted text HTML markup required

Item one of list
Item two of list

Item one of list
Item two of list

An ordered list is similar to an un-ordered list, except that each entry is consecutively numbered.

Formatted text HTML markup required

Item one of list
Item two of list

Item one of list
Item two of list

A definition list allows a list with a backward hanging indent to be created.

Formatted text HTML markup required

Definition tag.
Text of the definition list. Which may stretch over several lines.
Another definition tag.
Text of the definition list.

Definition tag.
Text of the definition list. Which may stretch over several lines.
Another definition tag.
Text of the definition list.

Note:
It is a common practice for the definition tag with an image or even have it prefixed with an image.

Hyper text links

A hyper text link allows a browser of the document to navigate either: to a new point in the document or to navigate to a different document. A named point in a document is specified with an anchor tag which has the attribute NAME. For example:

Formatted text HTML markup required

Here Here

Note:
There does not need to be any text to visibly name the anchor point.

To effect a transfer to a named anchor point, the HREF form of the anchor tag is used. For example:

Formatted text HTML markup required

Transfer to anchor Transfer to anchor

The # before the name of the hypertext link tells the browser that the link is to a named point in a document. As no document name is specified before the # the hypertext link is to a point in the current document. It is usual for the browser to visibly highlight the hypertext link.
Hypertext links may also link to other documents, in which case the HREF component names the document. If the file is held on another machine then a URL (Uniform Resource Locator) is used to describe the location of the document. For example:

Hyper text link to the file
file.html Hyper text link to the file
file.html held on another machine using an URL
Name Name

To go to a named point in a file the format of the anchor is:

Hyper text link to the file
file.html at point mark Hyper text link to the file
file.html at point mark held on another machine using an URL
Name Name

Tables

Single cell

A table is created using the markup tag. The simplest table consists of a single data cell. The markup is somewhat unclear. Netscape 1.1 requires the end of table data cell tag to terminate the cell in certain circumstances. Other browsers sense the end of the cell by the defines the start of a table data cell. The status of the tag or other formatting tag. The tag

Formatted text

HTML markup required

Text in a table

 
 
  Text in a table

The following extra attributes can be added to a TABLE tag:

UNITS=: Either en, relative or pixels. This defines the units that will be used in defining other attributes. The default is pixels.
BORDER: Specifies that a border is to be placed around the table cells. The width of the border is optionally specified with BORDER=n.
CELLPADDING: Specifies the gap to be placed around the table contents.
CELLSPACING: -
BGCOLOR: Specifies the background colour of the cells.
WIDTH: Specifies the width of the table. For example:
WIDTH="80%" 80% of window width.
WIDTH=200. 200 pixels wide.

The following extra components can be added to a TD tag:

ALIGN=: Alignments are LEFT, RIGHT CENTER.
BGCOLOR=: Set the back ground colour for the cell. All cells to the right of this cell will also have this colour

Formatted text

HTML markup required

Text in a table

 
 
  Text in a table

Row(s) of cells

A row of cells can be created by repeating the tag.

Formatted text

HTML markup required

Data cell 1

Data cell 2

 
   Data cell 1 
   Data cell 2

To form a table of many rows, the markup tags are inserted around each row in the table.

Formatted text

HTML markup required

Data cell 1	Data cell 2
Data cell 3	Data cell 4

 
  
    Data cell 1 
    Data cell 2 
  
  
    Data cell 3 
    Data cell 4

Heading to a column

The tag may be used instead of if the cell is a header to a column of cells. For example:

Formatted text

HTML markup required

Mnemonic	Expansion
HTML	Hyper Text Markup Language

 
  
    Mnemonic
    Expansion 
  
  
    HTML
    Hyper Text
Markup Language

Spanning rows and columns

The attributes ROWSPAN and COLSPAN of the HTML tags and are used to form data cells which span more than one row or column. For example:

Formatted text

HTML markup required

Language	Encapsulation
Ada 95	Using	Packages
C++	Using	Class

 
  
   Language
   Encapsulation 
 
  
  
    Ada 95
   Using
    Packages
  
  
    C++
    Class

Colouring table cells

The cells in a table may be coloured by using the BGCOLOR attribute. However once a cell is coloured all cells in the same row to the right will also be coloured.

This can be used to give an area of text a background colour

Formatted text

HTML markup required

Language	Encapsulation
Ada 95	Package
C++	Class

 
  
   Language
   Encapsulation
  
  
    Ada 95
    Package
  

  

    C++
    Class

Using HTML special characters

The markup language uses the character < to start a markup tag. The consequence of this is that < can not be used to represent the less than character directly in a web page. The HTML markup languages defines an escape sequences of characters to represent such special characters.

The following are some of the character sequences used to represent characters that have a special meaning in the HTML language.

Character	Represent by sequence	Character	Represent by sequence
<	<	>	>
&	&	"	"

Thus to include

as part of the text of a document the sequence <BODY> can be written.

Characters not in the normal ASCII character set are also represented by an escape sequence. This is so that they may be typed on computer systems which do not directly support the input of such characters. For example:

Character	Represent by sequence	Character	Represent by sequence
à	à	ç	ç

To prevent the web browser breaking a line at a space character a non breaking space character is used rather than the normal space character.. A non breaking space character is represented by the escape sequence . This can also be used to introduce more than one space character between words. For example:

HTML	Formatted text
A B A B	A B A B

In addition a character from the LATIN-1 character set is represented by &#nn;. Where nn represents the character code in decimal. For example:

Character	Represent by sequence	Character	Represent by sequence
?	†	A	A

Printable Latin-1 characters

Literal copy and centering of text

Text can be copied literally by using the

tag. However, any HTML tags in the text will be processed. For example:

Formatted text	HTML markup required
* * ***	* * ***

Note:: The copied text is formatted using a non proportional font to preserve the layout.

Any text to be centered is enclosed between the tags

and .

Formatted text	HTML markup required
A line of normally formatted text. Some lines of text that are centered	A line of normally formatted text. Some lines of text that are centered

Inserting an e-mail address

An e-mail address may be inserted into the document using a special form of the anchor markup tag. A user selecting this will be presented with a form on which to prepare their message for eventual sending in this case to the e-mail address:

[email protected]

Formatted text	HTML markup required
Mail me	Mail me

Of course your browser has to support this facility.

Automatic redirect

A page may contain a tag that will cause an automatic redirection to another URL after a specific time interval. For example, the tag

will cause the current page to be automatically replaced with the contents of the URL http://domain/directory/file.html after 3 seconds.

Note:: This tag must be included immediately after the tag

THIS SITE WAS CREATED 27th FEB 2000