HTML Tutorial
To create a simple webpage you need to understand HTML. The screen shots below will show you how to create a simple page. To create this page, I am using 'Allaire Homesite 4.0', there are literally hundreds of editiors currently on the market for both Mac and PC. If you don't have an editor don't worry because you can use 'Notepad for PC' or 'Simple Text for Mac' to create your documents.
These are the tags that have to be included within every HTML document you ever write. You will notice that there is an opening <HTML> tag and a closing </HTML> tag. The same process applies for the <HEAD>, <TITLE> and the <BODY> tags.
Note: Within HTML almost every opening tag has to be ended by a closing tag. Type this into your document and move down to the next screen shot, try not to miss any tags out otherwise your document will not work.
We are going to add some text to our document by using the <FONT> tag. You will notice that the <FONT> tag has an opening tag and a closing tag. Within the opening tag we have specified what size, type face and colour we want the text to appear. Try changing these to see what different results you get.
Type this into your document and save it to your desktop as 'any_name.html' then, open it in your browser and see if it works, If it does not work then you have made an error in your HTML.
Please note the American spelling of 'Color' (without the u).
We are now going to centre-align your text, so it appears in the centre of your web page, using the <DIV ALIGN="CENTER"> tag. Once again, please note the American spelling of this word. Insert the <DIV ALIGN="CENTER"> tag before the opening <FONT> tag and don't forget to close it after the closing </FONT>
Type this into your document and save it, open it in your browser and click on 'Refresh'. You should notice that the text has moved into the centre. If it does not work then you have made an error in your HTML.
Note: You can align to the right, left or centre in the <DIV> tag.
You can add a picture to your document using the <IMG SRC> tag. Although most modern web browsers will open many different types of image, it is most common to use GIFs and JPEGs on a website.
When you have created a picture, save it to the same directory as your HTML file. As you can see in the box below, I called my image 'my_first_picture.gif'.
I have also used the <BR> tag here. The <BR> acts as a 'Return', 'Space' or a 'Break', this will put some space between your text that we wrote earlier and the picture that we've just added. This tag is important, as web browsers ignore all white space in text, except for single spaces. If you enter two spaces into some text on your website, almost all browsers will only display it as one space.
Type this into your document and save it, then open it in your browser and click on 'Refresh'. You should notice that the text now has a picture under it. If it does not work then you have made an error in your HTML.
We are now going to add some text below the image that we have just put in, simply do as shown in the screen shot. I have used the <BR> tag again to put some space between them as shown before.
Type this into your document and save it, open it in your browser and click on 'Refresh'. You should notice that there is new text below your image. If it does not work then you have made an error in your HTML code.
If you have followed every piece of this tutorial with great care, you should have a document that looks something like this when opened in a browser.
Note: If you were to put this page into your free webspace you would need to save the file as 'index.html'. The first page of any website on the Internet is always called 'index.html'. The spelling of 'index.html' needs to be in lowercase and once pages are uploaded they become case sensitive.
There is a variety of free and commercial software that will help you to create a website. The following are links to sites that offer free guides to help you create a website using HTML:
http://www.w3schools.com
http://www.htmlcodetutorial.com
http://www.htmlgoodies.com
http://werbach.com/barebones
http://www.davesite.com/webstation/html
Disclaimer: Claranet is not responsible and will not be held liable for any content on external sites.