A Brief Guide To HTML
(Where {} is used in the following guide, use angle brackets instead)

To create a web page, text and graphics are controlled by the use of HTML (HyperText Markup Language) tags. Some of these only work with newer browsers. Most of these tags have an 'on' tag, and an 'off' tag, with text between the tags being affected. The 'off' tag is the 'on' tag with a preceding forward slash (/) i.e. :~
{center}This text is centered{/center}

A web page needs to start and end with the HTML 'on' and 'off' tags i.e. :~

{HTML}
Rest of page...
{/HTML}

The text to appear in the browser title bar is enclosed in the HEAD 'on' and 'off' tags, and is signified by the TITLE tag i.e. :~

{head}
{title="Web Design"}
{/head}

The body of the web page is enclosed in the BODY 'on' and 'off' tags. This is the main part of the document i.e. :~

{body}
My Picture
Hello World!
Email me
{/body}

The background of a page is set in the BODY tag. This can be a colour as in :~

{body bgcolour="red"}
web page
{/body}

or a graphic, as in :~

{body background="bground.gif"}
web page
{/body}

Graphics need only be small, as they are automatically scrolled across the page.

If you want a carriage return rather than having the text wrap around, use the {br} tag, which has no 'off' equivalent. The return key is redundant, except to make the page easier to read in development. A web page can, in fact, be written on one line, but it would be a very long line! For paragraph breaks use the {p} tag, with no 'off'.

To separate the different sections of a page, use a horizontal line with the {hr} tag, which has no 'off' i.e. :~


Text size is set by the FONT tag. The normal font size is 4, so to make the text bigger, use something like :~
{font size=5}This text is bigger{/font}

Emboldening is done with the B tag as in {b}Bold{/b}

Italics is done using the I tag, for example {i}Italic{/i}

Inserting graphics is done with the IMG tag, which has no 'off', but does have other parameters i.e. :~

{img src="zetlogo.gif" alt="Zetnet Internet Services" border=0 align="absmiddle"}
would do the following :~ Zetnet Internet Services.

IMG says that it is an image. SRC gives the path to the image file. ALT gives the text to display when the mouse is moved over the image. ALIGN sets the alignment of the graphic to the rest of the text on the line - other valid alignment settings are BOTTOM, TOP etc. The BORDER setting specifies how much border surrounds a image. In the following examples, the first picture has a border setting of 2 and the second has a setting of 0 :~

Border setting of 2 ~ Border setting of 0

You can also include links to other web sites. These can be in the form of highlighted text which you click on, or a graphic to click. For text, use the A tag :~

{a href="http://www.zetnet.co.uk"}Zetnet Internet Services{/a} which would appear as Zetnet Internet Services

Graphic links use a combination of inserting a graphic and creating a text link i.e. :~

{a href="http://www.zetnet.co.uk"}{img src="zetlogo.gif" alt="Zetnet Services Limited" border="0" align="absmiddle"}{/a}
would give Zetnet Services Limited
You insert the link to the graphic between the page link 'on' and 'off' tags.

Another type of link is for email. You click on a graphic or text, and your email program loads with the relevant address in place.
This is done by substituting the web address in the HREF statement of the above links with MAILTO:email@address i.e. :~

{a href="mailto:fluke@bugs-bunny.com"}{img src="talk2.gif" alt="Speak now, or forever hold your peace..." border="0" align="absmiddle"}{/a}
would give Speak now, or forever hold 
your peace...

Graphics in web pages are generally either GIF files or JPG files. Both file types are small, and, as such, download faster. GIF files can be transparent (the background can be seen through) or animated, but are limited to 256 colours. JPG files can have up to 16 million colours.

The table is another way of displaying text and graphics in a web page.
Use the TABLE tags, along with TR tags for the rows, and TD tag for the data. The TH tags are used for the table heading, with the COLSPAN tag specifying the number of columns the header should cover :~

{table}{th colspan=2}A Sample Table{/th}{tr}{td}This is one cell{td}This is another cell {/tr}{tr}{td}this a third cell{td}And yet another{/tr}{/table}
gives
A Sample Table
This is one cellThis is another cell
This a third cellAnd yet another

To have a border around the cells, use the BORDER tag in the TABLE 'on' tag.
The following table starts with {table border=1} :~
A Sample Table
This is one cellThis is another cell
This a third cellAnd yet another

Notice that the Header is automatically bold and centered. Notice also that columns are automatically set to the largest cell width. This and alignment can be altered with the WIDTH and ALIGN tags in any of the separate sections of the table i.e. :~
{table width=60 align=right} will give a 60 character width and be right flushed on the page. You can also use {td align=center} to center a cell, or {tr align=center} to center a row etc.
A Sample Page
Use copy and paste on any of the above examples, or the example below to create your own pages.
Remember to replace the {} brackets with andle brackets.
{html}
{head}
{title}Sample Page{/title}
{/head}
{body background="mybackgr.gif"}
{center}
{img src="mypictr.jpg" alt="This is me!"}{br}
{font size=5}{b}{i}My Page{/i}{/b}{/font}{/center}
{hr}
Hello and welcome to my sample page.{br}
You can email me {a href="mailto:myname@myprovider"}here{/a}.
{p}
Thanks to my providers {a href="http://www.zetnet.co.uk"}Zetnet Internet Services{/a} for given me this free space.{br}
{table}
{th colspan=2}My Children{/th}{tr align=center}{td}My son is called Chris and he's a pain{td} My daughter is called Joanna and she's just like her brother!{/tr}
{/table}
{p}
Thanks for visiting!
{hr}
{/body}
{/html}

Back to Main Page