Writing your own webpages

Before we start, it's worth pointing out that this is just a very basic crash course and if you know much about writing HTML you'd be better looking elsewhere to deepen your knowledge. This is for people who fancy writing their own webpages and have never done so before.

Many people use programs like Dreamweaver or Frontpage to put their webpages together. I don't believe in those, basically because they do all the hard work for you and teach you nothing about what you are doing. When things don't work out right and you want to change something, you won't have a clue how to. I use a very basic text-editor similar to Windows "Notepad" so know exactly what's happening, and why, within the webpages I create. I actually use a great, and powerful text-editor called Editpad which is much more HTML orientated. I also use Adobe Photoshop, OrbSoft's Colorpad and AceFTP Pro. Email me about those if you want to know more.

The first this you need to know is that writing html is all about tags. They are usually 2 or 3 letters within < and >. The 3 basic tags that are needed in an HTML file are <html>, <head> & <body>.

When a browser reads an HTML file the first thing is needs to know is that it's the right kind of file, so you open the file with the <html> tag. That should always be the first text in the file. Almost all tags need closed again. For that you re-write the tag with a forward slash before the text, so at the end of the file you put </html>. By the way, you'll often see HTML files saved as HTM rather than HTML. That's fine, it's just Microsoft being lazy!

After you've told the browser that it is indeed an html file, you need a head, so you need the <head> tag, then any information you want to put in the head, then you must close the head with </head>. Only then you can start writing the main part of the file, the <body>.

So your basic html file looks like this:

<html>

<head>
This is where you write whatever information you want to put inside the head, like meta tags, title etc
</head>

<body>
This is where you actually write whatever will be displayed on the page
</body>

</html>

The head
The first thing you would want to do within the head is make the title that will appear in the browsers title bar. In this file, for example, it's got "foyerlive.com". If you look at the top left of your browser it will probably say something like "foyerlive.com - Microsoft Internet Explorer" To do this you use the tag <title> inside the head, so your head section would become:

<head>
<title>
foyerlive.com
</title>
</head>

Later on you will also want to add javascripts etc, but let's keep things simple just now. The other thing you want to add to the head section is meta tags. When you search in google, the search engine simply searches for the words inside the meta-tags of all the sites it sees. If you forget to add them to the head section, your pages will be invisible to seach engines. Well worth remembering! We'll go into more details about meta-tags later on and how to use them.

By the way, the spacings away from the edge of the page are (I believe) very important. As your HTML file becomes more and more complicated, it becomes very awkward to see what you're doing. Distinguishing each individual part from the others at a glance becomes very tricky. If you space things away from the edge regularly, as I've done in the examples above, it's a lot easier to see what you are doing.

The body
In the body tag it is possible to set the background colour for your page. Html uses what is known as RGB colour coding, Red, Green, Blue in case you are wondering, but I'm afraid it's not quite as simple as it might sound. White is ffffff, which is "full" red, green and blue. Black is 000000, "zero" red, green and blue. Red is ff0000, full red, zero green and zero blue. Pretty straightforward so far, however other colours get very complicated. Grey for example is c0c0c0. Figure that one out! You need a decent program to give you the colour settings. I use a small program called Colorpad that lets you pick any colour from a picture (or a website) and gives you the right coding. To set the background colour of a page you use "bgcolor=". Note that html coding uses american spelling!

So the opening body tag for this page is: <body bgcolor=FFFFFF>
If I wanted it to have a funky green background I would use: <body bgcolor=219624>

Naming files
When a browser is pointed to an address on the web it automatically looks for a file called index.html or index.htm. That's the first file it will read and display whatever it's told to in that. This file doesn't have to have the pages you want displayed. For example, if you are using frames your index.html will only tell the browser what other html files to use and how to put them together to display the page correctly. You can name your files anything you want to. As long as your first file is called index.html and that tells the browser what HTML files it should be displaying, and where to find them.

Fonts
When you type text, like this, into your HTML file for the browser to display, you use the font tag to tell it how you want the text displayed. I hate Bill Gates favorite font (times new roman) which windows and all micros**t products use as a default, so I always change the font. To do that we add the word face= (and name the font you want it to use). Bear in mind that if the machine which is displaying the HTML file doesn't have the required font installed, it will default to Mr Gates favourite font again. So it's best to keep things simple and use the regular fonts that almost all machines will have installed. You will also need to think about colours. If the background on this page was dark blue (like this text) the text would be impossible to read unless we changed the font to white. To do that we add the word color= to the font tag. Size is also set in here with size=. Sizes for text can be anywhere between 1 and 9. So if I wanted large red text with 'tahoma' as my font I would use the tag:

<font face=tahoma color=ff0000 size=5> Which will display text like this

Links
These are critical within HTML. Without them you'd be stuck to one page and wouldn't be able to go anywhere else! There's only a few things you need to learn about links. Here's the a brief guide:

A link is an "action" which is created with the tag <a>. The browser then needs to know what action you want it to take. If you want it to load another HTML file you use <a href=(the address for the next file)> or if you want it to send an email you use <a mailto:(the email address you want it sent to)>.

So if you wanted to write a link which will open up the Foyer Music website it would be: <a href=http://www.foyerlive.com/>. A link to send me an email would be: <a mailto:music@foyerlive.com>.

You must remember to close every link or all the text after it will be included as the same link! As always you use the forward slash to close the action again, so after the link you need </a>. Don't forget it! You also need to remember that the browser won't display whatever's inside the tag so you'll need text or a picture to display as the link. Normallly you would want to have a bit of text or something to act as the link, so that people can see what to click on, but you could use a picture. More on that later! In this case I've just used the word link which would show up and act as the link. So your link would be:

<a href=http://www.foyerlive.com/>link</a>

That will display this...

link

One other thing worth metioning. If you click on the link above it will open up the site in a new window so that you won't lose the place and when you shut the page you will still have this displayed. To do this you add the word target to the link and I use _blank so that the new paqge opens up in a new browser. So in reality the link above is actualy:

<a href=http://www.foyerlive.com/ target=_blank>link</a>

With me so far? Cool.

If any of that makes no sense, just say the word!

Next page!