HTML Help

 

How to do your own HTML coding - Lesson one...
 
So, you want to learn HTML? Right. It's real simple, all you need is a computer and, essentially, a copy of Windows Notepad. Okay. Let's go.
HTML is split into two sections, a 'head' and a 'body'. The head contains the 'invisible' information about the page, such as its name, or the search keywords, and the body contains the information that will appear on the screen. So. Here, in its simplest form, is a HTML page that will display the words "A High Spirited Life", with the title HSLife. Type the following into Notepad.

<html>
<head>
<title>HSLife</title>
</head>
<body>
A High Spirited Life
</body>
</html>

Choose save, change the document type from text.(*.txt) to all files, and save it as hs1.html . This will be how you save your document each time I tell you to.

Load it up, and hey presto! There are the words "A High Spirited Life". Let's look at the text, and break that down.

<html> - This tells the computer that it is about to receive HTML code. All HTML commands are surrounded by the < > characters.
<head> - This tells the computer that the Head section has started. The Head has opened.
<title> -  This opens the title prompt
HSLife - This tells the computer what the title is
</title> - This closes the title prompt. Notice the / which means close.
</head> - This closes the head section
<body> - This opens the body section.
A High Spirited Life - This displays whatever you type.
</body> -This closes the body section
</html> - This tells the computer the HTML code has finished.

You can change the words A High Spirited Life to read whatever you want. Try it.
Now, onto character manipulation. Here is how it is done. We'll mess with the word 'Life' in 'A High Spirited Life'.

Change the line with 'A High Spirited Life' in to read:

A High Spirited <b>Life</b>

Notice the <b> statement. Anything surrounded by < > in HTML will be a command, and will not be displayed on screen. <b> means to start making text bold. </b> means stop making it bold, and go back to normal. By the same theory, <u> is underline (with </u> to stop) and <i> is italic (with </i> to stop).
If you wanted to use more than one, then just type it, for example:

A High Spirited <b><u>Life</u></b>

Would make the text bold and underlined. Experiment all you like. Now lets play with the font itself, using the <font…> command. Try:

A High Spirited <font color="blue">Life</font>

Yup - you guessed it, the word Life is blue. You can substitute blue for any colour, pink, yellow, green. Note the american spelling of the word 'colour'. Also note that because there is more than one word inbetween the <>, you only use the first one, in this case, font, to close it again. Try this:

A High Spirited <font size=6>Life</font>

Hey-hey! The word 'Life' is big! Now, see how to put the two together…

A High Spirited <font color="blue" size=6>Life</font>

None of the above are restricted to just one word. You can do as many as you like. This is how you would change all of them:

<font color="blue" size=6>A High Spirited Life</font>

To change the font, use the command <font face>. Type:

A High Spirited <font face="arial">Life</font>

Now, the word 'Life' is in the Arial font. Beware however; the end user must have the font installed on his system otherwise the font will default to Arial.

Try putting all three together.

<font face="arial" color="blue" size=6>A High Spirited Life</font>

Now centre the words, by using the <center> command (American spelling again)

<center><font face="arial" color="blue" size=6>A High Spirited Life</font></center>

And re-add the bold and underline commands:

<center><font face="arial" color="blue" size=6><b><u>A High Spirited Life</u></b></font></center>

And look… You've got a title, big letters, blue and centered. Simple, huh? This is how it was done.

<html>
<head>
<title>HSLife</title>
</head>
<body>
<center><font face="arial" color="blue" size=6><b><u>A High Spirited Life</u></b></font></center>
</body>
</html>

Using the Break command, <br>, we'll add a few more lines. The <br> command is the HTML equivelent of pressing enter in Word. Use one, and it will start a new line. Use two, and it will make a gap. Check it.

<html>
<head>
<title>HSLife</title>
</head>
<body>
<center><font face="arial" color="blue" size=6><b><u>A High Spirited Life</u></b></font></center>
<br>
It's HSLife, the best online magazine in the world… EVER!!
<br><br>
Click here to enter!
</body>
</html>

And there we are. Looks a little ugly, it could do with all being centered. To do this, let's just move the </center> command to the end, and add another break under the title.

<html>
<head>
<title>HSLife</title>
</head>
<body>
<center><font face="arial" color="blue" size=6><b><u>A High Spirited Life</u></b></font>
<br><br>
It's HSLife, the best online magazine in the world… EVER!!
<br><br>
Click here to enter! </center>
</body>
</html>

Much better. Now, it would be a good idea if you could click on the bottom sentence to change pages. We need to make a hyperlink. First, lets create a new page for it to link to. Make a page titled HSLife2. Put the words "Here is page two" on it. Try and do it yourself, but if you get stuck, copy what is below.

<html>
<head>
<title>HSLife2</title>
</head>
<body>
Here is page two!
</body>
</html>

A quick note : it doesn't matter where you separate lines. You can do a whole web page on one line if you wish, but splitting them up makes it easier for you to see what is going on.
Now, save the new page in the same folder as the old one, with the name hs2.html. Go back to the old file.

Change the line that says 'Click here to enter! </center>' to the following:

<a href="hs2.html">Click here to enter!</a></center>

The <a href statement tells the computer to look for a link, named whatever is in the quotes after the equals sign. Folder info can be included, but is not necessary if both files are in the same folder. However, file extensions (.html) are necessary, and the names are case sensitive. Run it, click it, and see what happens.

Clever, huh? The a href command applies to many things. Use it in the same way, but with a different .html name to link to different pages. Anything that isn't a .html page will bring up the download dialog box. And the command <a href="mailto:squirrell100@yahoo.co.uk"> would send me an e-mail. Links? Easy, mate.

Let's embed an image. That means put a picture on the page. It's simple. First, you tell you computer you want to add an image, by typing <img and then you tell it where the file is, say src="picture1.gif">

And that's it! So. Make a folder where you are saving your HTML pages and name it pictures. Find a picture, and copy and paste it into the Pictures folder, naming it pic1. Now, change the Body text on HS2 to read :

<body>
Here is page two!
<img src="pictures/pic1.gif">
</body>

If the picture isn't a gif, remember to change the code to pic1.bmp or pic1.jpg.
Run it! There's your picture!

You can link a picture to another page the same was as you link text. Change the line to read the following:

<a href="hs1.html"><img src="pictures/pic1.gif"></a>

Now you can click onto the picture to link back to the first page.
Some people don't display internet pictures on their computer. If this is the case, your page can display some writing instead. This is called "Alternate Text". Change the line to look like this :

<a href="hs1.html"><img alt="No pictures? Why not?" src="pictures/pic1.gif"></a>

And if you look quickly while the image loads, you can see the words displayed. Also, if you hover the mouse above the picture for a few seconds, then the words will appear as tool tip text. Try it!

Next, let's move away from the body and onto the head section. Now we are going to put some search keywords and descriptions into the site. These are the things that search engines look for. The keywords describe your site, and the description is what people see next to the link on your search pages. Lets add some to page 1. Here is the current head of hs1.

<head>
<title>HSLife</title>
</head>

Add the following:

<head>
<title>HSLife</title>
<meta name="keywords" content="hslife laugh funny humour music">
</head>

Now, if anyone types in any of the words in your content section, the search page will identify you as a possible source of information. Now let's add a description.

<head>
<title>HSLife</title>
<meta name="description" content="This is a test page for my own use.">
<meta name="keywords" content="hslife laugh funny humour music">
</head>

Now, although there is no way I can prove it, that will make your site 'visible' to search engines.
Anyway… Phew! That is enough for lesson one. Next lesson, we'll take a look at tables and backgrounds, amongst other things.

 

This is page 37