HTML Tutorial

HTML with Arachnophilia (the very basics)

First open a new page

You can choose your colors and name the page now or later.

Without doing any programming you now have the basics of a page.
I have added remarks in red.

<!doctype html public "-//w3c//dtd html 3.2//en">

<html> Open html page

<head> Open head section
<title>HTML Tutorial</title> We did not name the page but we can here at any time.
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
</head> Close head section

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#008000" alink="#ff0000">
Open body section

</body> Close body section

</html> Close html page

HTML uses tags to control everything.
Most tags come in pairs with an opening tag <head> then some content and a closing tag </head>
The closing tag name is identical to the opening tag but preceeded by a forward slash.
You can include information in the opening tag. In this case the body tag assigns the colors that you chose in computer jargon called hexidecimal.

You don't need to know this.
but in case you are interested computers do not count in tens so they had to add some letters to make it up to 16.
Hexidecimal numbers go like this. 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
The long and the short of it is that in these 6 digit numbers the lowest 000000 is black and the highest ffffff is white and all other colors and shades come somewhere in between.
This is how they get 16.7 million colors from 6 digits.
I told you you didn't need to know.

Now save the page by clicking the 'Save' button.
Because this is the first page on the site it must be called 'index.html'
Future pages can be called whatever you like but be aware there can be no spaces or punctuation in any file names.
'mypage.html' will work 'my page.html' or 'my,page.html' will not.
Once you have named the file clicking this button will save it automatically.
As with any program you should save often as you work in case of computer crashes, blackouts etc.

Now that we have a page let us give it a title in the head section.
This is what shows when you save a page to 'Favorites'
I will call it 'My First Page'
<title>My First Page</title>

Next a simple heading.
Arachnophilia has a wealth of toolbars along the bottom of the screen

Yours will be a little different because I have added some of my own.
Click the 'Fonts' button and the 'Fonts' toolbar opens along the top.

Click 'H1' (heading one) and type in the heading for your page.

I am now going to center the heading and make an obvious mistake
so that you can see how Arachnophilia keeps you on the right track.

The center tag is easy to remember <center></center>

<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>
<title>My First Page</title>
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#008000" alink="#ff0000">
center>
<h1>My Page</h1>
</center>
</body>

</html>

You will notice that the pretty coloring has gone all wrong.
Until now the tags have all been blue and color numbers etc. green.
Only our own input (title and heading) have been black.
By going back to where the colors changed I find that I missed a '<' in the center tag.

The last thing to do on this tutorial is a preview.
Since this is the first time you should decide which browser you want to use.
Click 'Preview' on the top menu bar and choose.
The internal browser opens in the Arachnophilia page.
The System browser (normally Internet Explorer) is the one I use most of the time
because it shows me exactly what the page will look like on the web.

After this you only need to press the preview button unless you want to change browsers.

I know it is not very impressive but you have just created your first web page.

Back Next