http://www.voidspace.org.uk
Voidspace: Exploring the worlds of spirituality, cyberpunk, technology and more

Introduction

This is a 'quick and dirty' primer to learn HTML. It covers all the basics and will gain you the knowledge needed to code quite nice looking webpages. In actual fact with web design - simpler is often better......

Voidspace: Cyberpunk, Technology, Fiction and More

IronPython in ActionIronPython in Action

Search this Site:
 
Web Site

Contact Me

Python Books and Gadgets

Hosting for an agile web





HTML Tutorial


This is a 'quick and dirty' primer for learning HTML.
Although there are *many* different things you can do with ordinary HTML - you only actually need to know a few of them to be able to code smart looking pages.
The following tutorial is a 'quick and dirty primer' on HTML..... this won't make you a *good* web-designer, but it will give you everything you need to put together some good looking pages. It does assume a basic knowledge of computers - like how to use notepad text editor and what a URL is for example - but not too much.


You start the page with the <HTML> tag and close the page with </HTML>

You then have *some* information that isn't going to appear in the body of the page. This is enclosed in <HEAD> </HEAD> tags. The most important of these is the <TITLE>This is the title bar</TITLE>. Anything between the <TITLE></TITLE> tags appears on the title bar.

The main body of the HTML page appears between <BODY></BODY> tags.

Therefore a *very* basic page is a text file (called .htm .html .shtm or .shtml) that looks like this.

<HTML>
<HEAD>
<TITLE>This is the title</TITLE>
</HEAD>
<BODY>
And this should appear on the screen.
</BODY>
</HTML>


The two most important things you'll want to know are how to put links and images on your page.

A link is added using the ANCHOR tag... like this
<A HREF=http://www.voidspace.org.uk>Very Good Website</A>
Very Good Website

the http://.... bit is where the link points to and Very Good Website is the bit that appears on the screen. If the user 'clicks' on 'Very Good Website' (which will probably appear with a line below it to let him know its a link) the page will change to www.voidspace.org.uk


If you are sending someone to a page that is *off* your website then you may want the new page to open in a *new* window rather than getting rid of the page that is already there. To do this you add target=_blank into the anchor tag... like so.....

<A HREF=http://www.voidspace.org.uk target=_blank>Very Good Website</A>
Very Good Website
Clicking on the 'Very Good Website' now opens a *new* window with voidspace in it.

However a lot of webpages will be on your local website rather than to an outside site and you can use local paths rather than absolute paths : e.g.

<A HREF=alpha.html>Alpha</A>
Would link to the page alpha in the current directory.

<A HREF=beta/alpha.html>Alpha</A>
Would link to the page alpha in the beta subdirectory of the current directory.

<A HREF=/alpha.html>Alpha</A>
Would link to the page alpha in the root directory.

<A HREF=/beta/alpha.html>Alpha</A>
Would link to the page alpha in the beta subdirectory of the root directory.

<A HREF=../beta/alpha.html>Alpha</A>
I'm sure you get the idea by now :-).

The directory structure of the website follows the directory structure of the server..... sometimes 'virtual servers' have a funny root directory (your website might all be located in /website rather than in the root directory for example..... this particularly matters when giving paths to the server... for example in SSI which need absolute paths).

The method for showing an image is similar - it uses the <IMG> tag... except you can specify a few more parameters.

<IMG SRC=http://www.voidspace.org.uk/images/header.gif>
Tells the browser to put on the screen the picture called header.gif - its located in the images subdirectory of voidspace.org.uk
Again that location can be specified as local or absolute.

e.g.

<IMG SRC=/images/header.gif> - this looks in the images folder for a file called header.gif.

However, if the browser doesn't know how big the image is it doesn't know how to fit the rest of the page around it.... therefore it won't show *any* of the page until the image has finished loading. Sooooooo....... you can specify HEIGHT= and WIDTH= parameters in the tag... like so....

<IMG SRC=/images/header.gif HEIGHT=50 WIDTH=670>
If we want to put a natty black border around it (or make sure there isn't one!) we specify BORDER=0 or BORDER=1 or BORDER=2 etc... the number is the thickness, in pixels, of the border (BORDER=3 therefore specifies a 3pixel black border all round the picture).

Just below is the picture we've been working with - with a big, ugly border of 4 :


If you add an ALIGN=LEFT or ALIGN=RIGHT parameter inside the tag then the image will be placed at the left (or right..) of the page. Any text on the page will then flow round the image... so this is a nice way of including pictures, within an article for example.


So we can now do a simple page :


<HTML>
<HEAD>
<TITLE>This is the title</TITLE>
</HEAD>
<BODY>
And this should appear on the screen.
<A HREF=http://www.voidspace.org.uk target=_blank>Whilst this will be a link</A>
<IMG SRC=http://www.voidspace.org.uk/images/header.gif HEIGHT=50 WIDTH=670 BORDER=1>
</BODY>
</HTML>


Try saving this as a .html file and loading it into internet explorer.
What will surprise you is that what appears on screen is :
And this should appear on the screen. Whilst this will be a link
with no line in between them. This is because HTML ignores carriage returns in your text (and it will also ignore more than one space in a row). This means you can use carriage returns to format your code and text in the knowledge that HTML will ignore them.

What it means is that you need to use another tag to force a line break its the <BR> break tag.

Try this :

<HTML>
<HEAD>
<TITLE>This is the title</TITLE>
</HEAD>
<BODY>
And this should appear on the screen.<BR>
<A HREF=http://www.voidspace.org.uk target=_blank>Whilst this will be a link</A><BR>
<BR><BR><BR>
<IMG SRC=http://www.voidspace.org.uk/images/header.gif HEIGHT=50 WIDTH=670 BORDER=1>
</BODY>
</HTML>


See the difference.
Now a neat trick is that you can make the image a link as well... you do that by including the image tag ( <IMG> ) in between the anchor ( <A HREF=...> </A> ) tags............

like this
<A HREF=http://www.voidspace.org.uk target=_blank>
<IMG SRC=http://www.voidspace.org.uk/images/header.gif HEIGHT=50 WIDTH=670 BORDER=1>
</A>

(we can have the extra lines in because HTML ignores them... in practise you'd probably have it all on the same line).




<HTML>
<HEAD>
<TITLE>This is the title</TITLE>
</HEAD>
<BODY>
And this should appear on the screen.<BR>
<A HREF=http://www.voidspace.org.uk target=_blank>Whilst this will be a link</A><BR>
<BR><BR><BR>
<A HREF=http://www.voidspace.org.uk target=_blank>
<IMG SRC=http://www.voidspace.org.uk/images/header.gif HEIGHT=50 WIDTH=670 BORDER=1>
</A>
</BODY>
</HTML>

Now clicking on the image takes you to voidspace as well !


You can even mix text and images as part of the link, and include the <BR> tag to make it look nicer.

Try this to see what I mean :


<HTML>
<HEAD>
<TITLE>This is the title</TITLE>
</HEAD>
<BODY>
And this should appear on the screen.<BR>
<A HREF=http://www.voidspace.org.uk target=_blank>Whilst this will be a link</A><BR>
<BR><BR><BR>
<A HREF=http://www.voidspace.org.uk target=_blank>
<IMG SRC=http://www.voidspace.org.uk/images/header.gif HEIGHT=50 WIDTH=670 BORDER=1>
<BR>
This text is all within the anchor tag<BR>
and so it's part of the link.
</A>
</BODY>
</HTML>



This text is all within the anchor tag
and so it's part of the link.


But it doesn't look that good does it.
Lets look at a few tags for improving the way text look.

Anything between <CENTER></CENTER> tags appears in the centre of the screen (note the American spelling of CENTER in the tag !!) - this applies to images and also tables later !

So lets try our example again :

<HTML>
<HEAD>
<TITLE>This is the title</TITLE>
</HEAD>
<BODY>
And this should appear on the screen.<BR>

<CENTER>

<A HREF=http://www.voidspace.org.uk target=_blank>Whilst this will be a link</A><BR>
<BR><BR><BR>
<A HREF=http://www.voidspace.org.uk target=_blank>
<IMG SRC=http://www.voidspace.org.uk/images/header.gif HEIGHT=50 WIDTH=670 BORDER=1>
<BR>
This text is all within the anchor tag<BR>
and so it's part of the link.
</A>

</CENTER>

</BODY>
</HTML>


See the bits between the <CENTER> tags appear in the middle of the browser page... including the image !

There's three more straightforward tags <B></B> Bold, <I></I> Italics, and <U></U> underline.
Any text between these tags will have these attributes. Very easy.

Here's another nice tag..... the headline tag <H1></H1>, <H2></H2> and <H3></H3>. H1 tags are the biggest, H2 are a bit smaller and... you guessed it... H3 are a bit smaller than that.



Lets Have a Nice Big Headline

In the Middle of the Screen

Notice We Don't Need BR Tags with Headlines

We Can Even Underline and mix with italics



Lets have a look at what we've got so far.

<HEAD>
<TITLE>This is the title</TITLE>
</HEAD>
<BODY>


<CENTER>

<H1>Lets Have a Nice Big Headline</H1>
<H2>In the Middle of the Screen</H2>
<H3>Notice We Don't Need BR Tags with Headlines</H3>
<BR>
<BR>
<A HREF=http://www.voidspace.org.uk target=_blank>
<IMG SRC=http://www.voidspace.org.uk/images/header.gif HEIGHT=50 WIDTH=670 BORDER=1>
<BR>
Check out Voidspace<BR>
It's great.
</A>
<BR>

</CENTER>
<BR>
<BR>
<BR>
Now we can have <B>some really bold text</B> or <I>some italics</I> or even <U>underlined</U> or if we're going really crazy <B><I><U>mix it all up together</B><I></U>... !!!


</BODY>
</HTML>





But - the basic system font is *horrible*... so lets look at changing the font attribute. I can never remember it and have to cut and paste it everytime !!

<FONT COLOR=silver style="font-family:arial;font-size:9pt;">

Like all tags it has its counterpart </FONT> for when you have finished with it.
The two important parameters are font-famil:arial; followed swiftly by font-size:9pt. Anything between these tags ( <FONT....> </FONT> ) is going to be in the arial font, size 9. Arial is a nice safe, attractive font that is on everyone's machine - you can experiment with other fonts though.... but using several on a page makes it look messy.

If you wanted 12 point text (bigger) you could use :
<FONT COLOR=silver style="font-family:arial;font-size:12pt;">
which is 12 point or go for 15 etc etc

Notice the COLOR=silver
That tells the browser to draw the text in the silver colour. (Again notice the American spelling COLOR - the browser will ignore a COLOUR tag !!). The COLOR parameter appears all over the place, along with BGCOLOR (background colour), BORDERCOLOR (guess!) and so on. If ommitted the text will probably be black. COLOR is actually looking for a numerical value e.g. COLOR=#000000 is the same as COLOR=black. But a long list of colours are predefined as names to make them easier to use.

Check out
gotomy.com/color

For a nice chart of colors with names and numerical values. Lots of nifty shades of grey for those stylish webpages !!

Or try webmonkey for more handy charts like this (and lots of other hints for learning HTML.
Webmonkey


One place you will often use the COLOR parameter is as part of the body tag........ This will specify the basic colours for the body of your page. Takea look at the body tag I use in voidspace -

<body bgcolor="#000000" link="#000099" vlink="#990099" alink="#000099" onload="cycleAds()">

Note the dodgy lowercase !! bgcolor (background) is set to black (#000000) link, vlink (visited link) and alink (active link) also set the colours for links on your page. Its not *essential* to define them. onload="cycleAds()" activates a funky piece of javascript that I might explain later on !! But you see the principle for setting colours ?

Lets have a look and see what our page looks like now :

<HEAD>
<TITLE>This is the title</TITLE>
</HEAD>
<BODY bgcolor="#000000" link="#000099" vlink="#990099" alink="#000099">

<FONT COLOR=white style="font-family:arial;font-size:9pt;">

<CENTER>

<H1>Lets Have a Nice Big Headline</H1>
<H2>In the Middle of the Screen</H2>
<H3>Notice We Don't Need BR Tags with Headlines</H3>
<H3>Should be in a nicer FONT now !</H3>
<BR>
<BR>
<A HREF=http://www.voidspace.org.uk target=_blank>
<IMG SRC=http://www.voidspace.org.uk/images/header.gif HEIGHT=50 WIDTH=670 BORDER=1>
<BR>
Check out Voidspace<BR>
It's great.
</A>
<BR>

</CENTER>
<BR>
<BR>
<BR>
Now we can have <B>some really bold text</B> or <I>some italics</I> or even <U>underlined</U> or if we're going really crazy <B><I><U>mix it all up together</B><I></U>... !!!


</BODY>
</HTML>

Yeeeurgh.......... horrible isn't it !! Thats because we set the background color to black and the text to white..... yeeuck !! But we're getting there.

Now the real *trick* is to use tables. Technically the proper W3C body says you *shouldn't* use tables to define the page layout... you should use stylesheets..... sorry.

Tables are great !!
I'll start by showing you how to do a basic table for presenting data... and finish by showing you how you can use that to define your page layout !! Then you know *everything*... well, sort of.

We define the basic table by using <TABLE></TABLE> tags.
A basic table is divided into rows and columns.

A table must have at least one row using the <TR></TR> tags and then inside each row..at least one column using <TD></TD>...... if you don't do this its goign to get confusing for the browser... and who knows what it will do !!

So a basic table looks like this

<TABLE>
<TR>

<TD>
This is the text inside our lonely table cell
</TD>

</TR>
</TABLE>


If our table had two columns then we could do it like this :

<TABLE>
<TR>

<TD>
This is in column 1
</TD>

<TD>
And This is in column two
</TD>

</TR>
</TABLE>

This is in column 1 And This is in column two


But until we give our table an extra row... it doesn't look much like a table !! Try this :

<TABLE>


<TR>

<TD>
This is in column 1
</TD>

<TD>
And This is in column two
</TD>

</TR>



<TR>

<TD>
This is in column 1, second row
</TD>

<TD>
And This is in column 2, second row
</TD>

</TR>


</TABLE>

This is in column 1 And This is in column two
This is in column 1, second row And This is in column 2, second row



Neat huh. Now for two more tricks we can use the BORDER tag again inside the <TABLE> tag and *also* a new tag called WIDTH. Width fixes the size of the table. WIDTH can either be specified in pixels e.g. WIDTH=80 or WIDTH=500 or it can be specified as percentage of the browser window size e.g. WIDTH=50% or WIDTH=80% . putting text in a table with WIDTH=100% is a neat way of forcing the text to fit into the browser window (so the user doesn't have to scroll sideways to read it). If the user resizes the window... the browser automatically resizes the table - nice. Like so......

<HEAD>
<TITLE>Did You Spot I Changed the Title ?</TITLE>
</HEAD>
<BODY bgcolor="#EEEEEE" link="#000099" vlink="#990099" alink="#000099">
<FONT COLOR=black style="font-family:arial;font-size:9pt;">
<CENTER><H1>This is a Nicer Colour Isn't It ??</H1><BR><IMG SRC=http://www.voidspace.org.uk/images/header.gif HEIGHT=50 WIDTH=670 BORDER=1></CENTER><BR><BR><BR><B>How about a TABLE...<BR><BR>

<TABLE WIDTH=150 BORDER=1>
<TR>
<TD>
This is in column 1
</TD>
<TD>
And This is in column two
</TD>
</TR>
<TR>
<TD>
This is in column 1, second row
</TD>
<TD>
And This is in column 2, second row
</TD>
</TR>
</TABLE>

</BODY>
</HTML>

This is in column 1 And This is in column two
This is in column 1, second row And This is in column 2, second row


Did you notice two things...... first of all the table was on the left of the screen... it would look nicer centred wouldn't it ? Secondly... all the text *inside* the table is back in the awful system font... yup you need to a <FONT... declaration inside *every* cell.... thats in between every <TD> </TD> pair..... get ready for some cutting and pasting !! Lets try again - but this time lets use a WIDTH=xx%, put the FONT declarations in and put the table in the centre of the screen :

<HEAD>
<TITLE>And Again......</TITLE>
</HEAD>
<BODY bgcolor="#EEEEEE" link="#000099" vlink="#990099" alink="#000099">
<FONT COLOR=black style="font-family:arial;font-size:9pt;"><CENTER><H1>This is a Nicer Colour Isn't It ??</H1><BR>
<IMG SRC=http://www.voidspace.org.uk/images/header.gif HEIGHT=50 WIDTH=670 BORDER=1></CENTER>
<BR><BR><BR><B>How about a TABLE...<BR><BR><CENTER>

<TABLE WIDTH=75% BORDER=1>
<TR>
<TD>
<FONT COLOR=black style="font-family:arial;font-size:9pt;">
This is in column 1
</TD>
<TD>
<FONT COLOR=black style="font-family:arial;font-size:9pt;">
And This is in column two
</TD>
</TR>
<TR>
<TD>
<FONT COLOR=black style="font-family:arial;font-size:9pt;">
This is in column 1,<BR> second row
</TD>
<TD>
<FONT COLOR=black style="font-family:arial;font-size:9pt;">
And This is in column 2,<BR> second row
</TD>
</TR>
</TABLE>

</CENTER>

</BODY>
</HTML>

This is in column 1 And This is in column two
This is in column 1,
second row
And This is in column 2,
second row


Try resizing the browser window and look at the table size change !!

How does the browser know how many columns your table has ? Simple... the row with the maximum number of columns in sets the number of columns !! This means if your rows have different number of columns its going to look very odd !! Also - the width of each column is determined by the widest cell in that column ! Be warned if you define a table width of 200 pixels and then put a picture three hundred pixels wide in one of the cells... its going to 'break the table' - a definite no-no in web design.

But what if you want a column on one row to span across more than one column below it........... weeeeeell.... theres a very useful COLSPAN (column span) parameter that you can put in your <TD> tag....

For example :
<TABLE BORDER=1>
<TR>
<TD>a,1</TD>
<TD>a,2</TD>
<TD>a,3</TD>
<TD>a,4</TD>
</TR>
<TR>
<TD>b,1</TD>
<TD>b,2</TD>
<TD>b,3</TD>
<TD>b,4</TD>
<TR>
<TR>
<TD>c,1</TD>
<TD>c,2</TD>
<TD>c,3</TD>
<TD>c,4</TD>
<TR>
<TR>
<TD>d,1</TD>
<TD>d,2</TD>
<TD>d,3</TD>
<TD>d,4</TD>
</TR>
</TABLE>

Defines a basic table with four rows and four columns in each row.

a,1 a,2 a,3 a,4
b,1 b,2 b,3 b,4
c,1 c,2 c,3 c,4
d,1 d,2 d,3 d,4


Try missing a couple of cells out :

<TABLE BORDER=1>
<TR>
<TD>a,1</TD>
<TD>a,2</TD>
<TD>a,3</TD>
<TD>a,4</TD>
</TR>
<TR>
<TD>b,1</TD>

<TD>b,3</TD>
<TD>b,4</TD>
</TR>
<TR>

<TD>c,3</TD>
<TD>c,4</TD>
</TR>
<TR>
<TD>d,1</TD>
<TD>d,2</TD>

</TR>
</TABLE>



a,1 a,2 a,3 a,4
b,1 b,3 b,4
c,3 c,4
d,1 d,2


looks odd doesn't it........

Now try -
<TABLE BORDER=1>
<TR>
<TD>a,1</TD>
<TD>a,2</TD>
<TD>a,3</TD>
<TD>a,4</TD>
</TR>
<TR>
<TD COLSPAN=2>b,1<TD>

<TD>b,3</TD>
<TD>b,4</TD>
</TR>
<TR>

<TD COLSPAN=3>c,3</TD>
<TD>c,4</TD>
</TR>
<TR>
<TD COLSPAN=2>d,1</TD>
<TD COLSPAN=2>d,2</TD>

</TR>
</TABLE>

Thats a bit better isn't it.

a,1 a,2 a,3 a,4
b,1 b,3 b,4
c,3 c,4
d,1 d,2


In fact you can use COLSPAN to do nice title bars. Like so........

<TABLE BORDER=1 >
<TR>
<TD COLSPAN=2 ALIGN = CENTER><B>Title Here</B></TD>
</TR>
<TR>
<TD>Piece of data 1 here</TD>
<TD>Piece of data 2 here</TD>
</TR>
</TABLE>

Title Here
Piece of data 1 here Piece of data 2 here


Getting the idea ??

Now we can do a bit more to format the layout of the contents of each cell - which is where it starts to get interesting...............

Heres a column delaration from a voidspace table :
<TD VALIGN=top WIDTH=100% ALIGN=CENTER BGCOLOR=#DCDCDC>

Notice -
VALIGN is the vertical alignment of the cell contents. It can be top, middle or bottom
You can specify the width of an individual cell !
ALIGN is the horizontal alignment of a cell contents - left, right or center and BGCOLOR is the background color of that cell !!

Very nifty.
So lets look at what we can do with all of this -

The following is from the voidspace *header* :


<TABLE WIDTH=100%> - ## this puts the *whole *page* inside a table....
<TR> - ## which only has one row and one column !! This keeps everything inside the browser window !!
<TD>

<TABLE WIDTH=100% BORDER=0> - ## define a table with no border (so the table outline can't be seen CELLSPACING=0 and CELLPADDING=0 are two extra tags you can add to ensure this.... check out http://www.htmlcodetutorial.com/tables/_TABLE_CELLSPACING.html for an explanation of cellspacing and cellpadding if you want one)
<TR><TD><IMG SRC=/images/blank.gif WIDTH=670 HEIGHT=5></TD></TR> - ## this uses a one pixel image... but forces it to be 670 pixels wide and 5 pixels high - a neat way of forcing the table width at the top. This is the first row - in this table they've all got just one column.
<TR><TD ALIGN=CENTER BGCOLOR=darkblue HEIGHT=25> </TD></TR> - ## This is the second row the background color is set to dark blue, the height is forced to 25 pixels high
<TR><TD ALIGN=CENTER BGCOLOR=darkblue><A HREF=http://www.voidspace.org.uk><IMG SRC=/images/header.gif WIDTH=670 HEIGHT=50 BORDER=0 ALT="http://www.voidspace.org.uk"></A></TD></TR> - ## and this is my header image, which is a link

<TR><TD ALIGN=CENTER BGCOLOR=darkblue HEIGHT=25><FONT COLOR=silver style="font-family:arial;font-size:13pt;font-weight:bold;">Voidspace:</FONT> <FONT COLOR=silver style="font-family:arial;font-size:9pt;">Exploring the worlds of spirituality, cyberpunk, technology and more</TD></TR> - ## and this is my header title which is also a link... you can see the two font declarations... so Voidspace is in 13point text and the rest is smaller. Font color is silver and the background is dark blue.
</TABLE>

So the header is just a table with 4 rows.
NExt is the clever bit - we define a table
<TABLE WIDTH=100%>
<TR>
<TD WIDTH=120> -## first row is 120 pixels wide
<!-- #include virtual = "_ads.shtml" -->
The above line is SSI and it includes the _ads.shtml file... which is the sidebar..... the contents of that all goes in a bar 120 pixels wide on the left. To change anything in that sidebar we just edit _ads.shtml

<TD>
<TD WIDTH=100%>
The width=100% forces the next cell to fill the rest of the page and this is the main page body. This can have tables inside it as well if we want..............

</TD>
</TR>

Then the footer at the bottom is an entire row

<TR>
<TD COLSPAN=2>
<!-- #include virtual = "footer.shtml" -->
</TD>
<TR>
</TABLE>

So long as at the end we remember to close everything off at the end it works fine !!

footer.shtml is itself a table ... with several columns that spaces all the items at the bottom neatly !!


Thus concludes the second lesson.
You can now design and layout neat pages with everything you want. So long as you name a page something.shtml the server knows you are using includes. usually the default page is set to be index.html though... which can't have any includes on it.


Lets put this together in a final example so you can see what it looks like :


<HEAD>
<TITLE>Did You Spot I Changed the Title ?</TITLE>
</HEAD>
<BODY bgcolor="#EEEEEE" link="#000099" vlink="#990099" alink="#000099">
<TABLE WIDTH=100%>
<TR>
<TD>

<TABLE WIDTH=100% BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR><TD><IMG SRC=http://www.voidspace.org.uk/images/blank.gif WIDTH=670 HEIGHT=5></TD></TR
<TR><TD ALIGN=CENTER BGCOLOR=darkblue HEIGHT=25> </TD></TR>
<TR><TD ALIGN=CENTER BGCOLOR=darkblue><A HREF=http://www.voidspace.org.uk><IMG SRC=http://www.voidspace.org.uk/images/header.gif WIDTH=670 HEIGHT=50 BORDER=0 ALT="http://www.voidspace.org.uk"></A></TD></TR>
<TR><TD ALIGN=CENTER BGCOLOR=darkblue HEIGHT=25><FONT COLOR=silver style="font-family:arial;font-size:13pt;font-weight:bold;">Voidspace:</FONT> <FONT COLOR=silver style="font-family:arial;font-size:9pt;">Exploring the worlds of spirituality, cyberpunk, technology and more</TD></TR>
</TABLE>

<TABLE WIDTH=100%>
<TR>
<TD WIDTH=120 ALIGN=CENTER VALIGN=MIDDLE BGCOLOR=red>
<FONT COLOR=black style="font-family:arial;font-size:9pt;">

This is the sidebar.<BR>
Lots of stuff.<BR>
Could even be <BR>
images<BR>
see if you can work out what this following table does !!<BR>


<FONT style="font-family:arial;font-size:8pt; font-weight:bold;">
Usenet News Groups<BR>

<TABLE CELLPADDING=4 CELLSPACING=0 BORDER=2 BORDERCOLOR=#191970 BGCOLOR=#F5F5F5 WIDTH=130>
<TR><TD ALIGN=CENTER VALIGN="MIDDLE"><FONT COLOR=#cccccc style="font-family:arial;font-size:7pt;">
<A HREF="http://groups.google.com/groups?hl=en&lr=&ie=UTF-8&oe=UTF-8&group=alt.cyberpunk" TARGET="_blank" style="color: #424242;">+ alt.cyberpunk +</A>
<BR><A HREF="http://groups.google.com/groups?hl=en&lr=&ie=UTF-8&oe=UTF-8&group=alt.cyberpunk.chatsubo" TARGET="_blank" style="color: #424242;">+ alt.cyberpunk.chatsubo +</A>
<BR><A HREF="http://groups.google.com/groups?hl=en&lr=&ie=UTF-8&oe=UTF-8&group=alt.cyberspace" TARGET="_blank" style="color: #424242;">+ alt.cyberspace +</A>
<BR><A HREF="http://groups.google.com/groups?hl=en&lr=&ie=UTF-8&oe=UTF-8&group=alt.cypherpunks" TARGET="_blank" style="color: #424242;">+ alt.cypherpunks +</A>
<BR><A HREF="http://groups.google.com/groups?&group=comp.sys.handhelds" TARGET="_blank" style="color: #424242;">+ comp.sys.handhelds +</A>
</TD></TR></TABLE>
</FONT>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
</TD>

<TD WIDTH=100%>
This is the body of the page !!
</TD>
<TR>
<TD COLSPAN=2 BGCOLOR=green>
and this is the footer
<BR>
<BR>
In a really, really, awful, horrible color !!
</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

</BODY>
</HTML>


One of the things this shows very nicely is that you can include a table within a table ! (The table in the sidebar is in one of the elements of the other table). Also if you have all the background colours set the same then the user won't *see* the layout format you've used - but you'll still be able to neatly format your page... putting your copyright information on the bottom of the page for example, in the footer.



I've shrunk it down so that it fits on the page... but this is what it looks like :


http://www.voidspace.org.uk
Voidspace: Exploring the worlds of spirituality, cyberpunk, technology and more
This is the sidebar.
Lots of stuff.
Could even be
images
see if you can work out what this following table does !!
Usenet News Groups
+ alt.cyberpunk +
+ alt.cyberpunk.chatsubo +
+ alt.cyberspace +
+ alt.cypherpunks +
+ comp.sys.handhelds +








This is the body of the page !!
and this is the footer

In a really, really, awful, horrible color !!






By the way the horizontal line above was created using the 'horizontal rule' tag - <HR>

If you just use it like that then you'll get a horizontal line all across the page, but as usual you can specify attributes inside the tag - in this case I used width=50%. <HR width=50%>


If you want to create a website with several pages you will want a consistent theme and style. We have mentiobed SSI - server side includes. Before I show you how *exactly* to do this I'm going to mention frames and frameset.
Frames are a way of putting (for example, you can use them to do other things too) a menu bar on the left and a title bar at the top. Clicking on the menu options loads the main bar into a seperate frame (sort of a browser within a browser).

The advantage of that is that the menu bar is always visible on the left (or whereever). The dis-advantage is that when a search engine indexes (crawls) your site it will see the frames as *seperate* pages - therefore people will be directed by search engines to your frames rather than your main page... this can look very odd and for this reason I prefer SSI. Also, frames are not compatible with older browsers.

To have several frames you use the frameset command - rather than explain it I'll point you to a nice tutorial :
http://www.htmlgoodies.com/tutors/fram.html

I do however use a frame command - the IFRAME command
Here's the example from my library of Aleister Crowley stuff :
<IFRAME name="mainpage" HEIGHT="3000" WIDTH="100%" SRC="Crowley/index.html" frameborder="2" framespacing="0" scrolling="auto" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0"></IFRAME>

Now, to be fair... I've never fully explored all of these parameters because most of them are pretty self explanitory. The important things are that HEIGHT=... and WIDTH=... will create a 'box' on your page of certain height and width and the SRC (in this case Crowley/index.html) will be loaded into it. The user can follow any links within it. (If any of the links lead back to your main page it can start to look very odd - you can have your website, in a frame - on a page in your website... and so on).

Anyway - I'll leave you to experiment. You can see a couple of pages I've used frames on :

http://www.voidspace.org.uk/esoteric/crowley.shtml
This is a big library of Aleister Crowley's work - because of the quntity of stuff I've loaded the index page into a frame rather than convert every page over. All the pages then load in the frame.

http://www.voidspace.org.uk/gallery/church.shtml
Here are some pictures from my church. Because there were too many pictures for one page I've loaded the index up into a frame - see the header bar... thats on all the pages and switches between the frames. I could have done that even more neatly by using Frameset and having the header bar as a header frame... but I didn't know that at the time.

--

The reason I have never learned frames too much is beacuse I started with SSI - which is a bit neater.
Imagine we decided on the layout from the last example as the basic layout for our website and then set out designing every page.

We would very soon discover that the basic code for every page was very similar - in actual fact it would only be the body and the title of each page that varied !!

*Soooo* we can use includes to divide the page up into chunks of code. When you fetch the page from the server it puts the chunks back together - so as far as your browser is concerned it is just receiving a normal page - the browser never even knows about the includes... which is why iyt is called SERVER SIDE includes. As a result it puts a slightly higher load on the server (not much though) and bypasses the problems of frames. If we divide the code into a header include, a sidebar include and a footer include - then we can make changes to the header, footer and sidebar of every page just by changing the include file.

Every page that has includes on it must be named with .shtml or .shtm. Some servers like the includes to be called .shtml as well. The only disadvantage is that you can only test this by uploading it to a server and fetching the page. If you load it from your harddrive then the browser will ignore the INCLUDES !!

The command is :-
<!--#include virtual="/esoteric/_articlelist.shtml" -->
Where the include file is pointed to by the virtual=.......

Therefore we can reduce the page we had above to soemthing like this :

<HEAD>
<TITLE>A Page Using Includes</TITLE>
</HEAD>
<BODY bgcolor="#EEEEEE" link="#000099" vlink="#990099" alink="#000099">

<!--#include virtual="header.shtml" -->

<!--#include virtual="sidebar.shtml" -->

This is the body of the page !!

<!--#include virtual="footer.shtml" -->


As you can see thats a lot shorter !! All you have to do is set up the include files and edit the titlebar and body of each page.

*However* - the only reason its simpler because all the other stuff is hidden in those include files.

The contents of header.shtml

<TABLE WIDTH=100%>
<TR>
<TD>

<TABLE WIDTH=100% BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR><TD><IMG SRC=http://www.voidspace.org.uk/images/blank.gif WIDTH=670 HEIGHT=5></TD></TR
<TR><TD ALIGN=CENTER BGCOLOR=darkblue HEIGHT=25> </TD></TR>
<TR><TD ALIGN=CENTER BGCOLOR=darkblue><A HREF=http://www.voidspace.org.uk><IMG SRC=http://www.voidspace.org.uk/images/header.gif WIDTH=670 HEIGHT=50 BORDER=0 ALT="http://www.voidspace.org.uk"></A></TD></TR>
<TR><TD ALIGN=CENTER BGCOLOR=darkblue HEIGHT=25><FONT COLOR=silver style="font-family:arial;font-size:13pt;font-weight:bold;">Voidspace:</FONT> <FONT COLOR=silver style="font-family:arial;font-size:9pt;">Exploring the worlds of spirituality, cyberpunk, technology and more</TD></TR>
</TABLE>

<TABLE WIDTH=100%>
<TR>


The contents of sidebar.shtml

<TD WIDTH=120 ALIGN=CENTER VALIGN=MIDDLE BGCOLOR=red>
<FONT COLOR=black style="font-family:arial;font-size:9pt;">

This is the sidebar.<BR>
Lots of stuff.<BR>
Could even be <BR>
images<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
</TD>

<TD WIDTH=100%>


The contents of footer.shtml


</TD>
<TR>
<TD COLSPAN=2 BGCOLOR=green>
and this is the footer
<BR>
<BR>
In a really, really, awful, horrible color !!
</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

</BODY>
</HTML>



Anyway - armed with that lot you can do an awful lot... anything else you need to know you'll have to search on the web. Unsurprisingly there are thousands of pages teaching you how to do this stuff !!

As a nice little extra I'll add the HTML tag for a bullet style list (unordered list in HTML jargon) :
The whole thing goes between <UL> </UL> tags nad every item has an <LI> before it.

e.g.

    <UL>
  • <LI>First item
  • <LI>Second item
  • <LI>Next item
  • <LI>Last item
  • </UL>

Neat.....


Fuzzyman

--

A useful HTML reference page :
Barebones

A good HTML tutorial :
Learning HTML

Working with SSI :
Working with SSI

The INCLUDE command in SSI :
The INCLUDE command

Looking at frames :
Frames



For a wider range of techie books, science fiction, computer hardware or the latest gadgets, visit The Voidspace Amazon Store.

If you're looking for a new techie job, try the Voidspace Tech Job Board. This is part of the Hidden Network of technology and programming jobs.



SitemapClick
here for
Sitemap

Back to top