Website Building - HTML Tutorial
Thank you for deciding to try out my tutorial. Hopefully it will give you a taste of what is to come.
It is neither brilliant nor terribly out of date and will hopefully help you in your path to becoming
a good website programmer.
My tutorial is very short but should help you to set up your first page and gain some satisfaction from it. It is not too
complicated and deals with the important aspects of HTML.
I hope you find this tutorial useful even though you may not find it perfect or able to answer your every question.
The Basics
There is a basic structure of webites that always applies whoever builds it. I have displayed it below.
Example 1:
<![CDATA[
<html>
<head>
<title>Title of page
</title>
</head>
<body>
]]>
It is important to understand that every tag which is opened must be closed.
Opening tags:
<![CDATA[
<HTML> <HEAD> <TITLE> <BODY>
]]>
Closing tags:
<![CDATA[
</HEAD> </TITLE>
]]>
Please notice in Example 1 how each set of tags is a sandwich and how every tag which is opened must be closed.
Please write out or if you're lazy, copy and paste example 2 into a new notepad document (I do NOT recommend Frontpage at all, it is an inefficient, slow and a poor way to build sites.)
Example 2:
<![CDATA[
<html>
<head>
<title>The Wigoder Website (Change this!)
</title>
</head>
<body bgcolor="black">
<center>
<h1>
<font color=yellow><u>Welcome</u></font>
</h1>
</center>
<h3><font color=red>This page will be amazing!</font></h3>
]]>
Please save it as 'index.html' (If you know how put it in a new folder, otherwise My Documents will do fine.) Now load it up in Internet Explorer (File>Open>Browse) and look at and admire your work!
Now for some more tags:
<![CDATA[
<br> - Inserts a line break. E.g.: Line 1<br>Line 2
<u></u> - Place around the text you want to underline
<i></i> - Place around the text you want to make italic
<b></b> - Place around the text you want to make bold
<font color="red" size="3" face="Ariel"> - Sets font
]]>
There are loads of html tags, for a complete list click here.
Most websites have more than one page, to do this, they link between each other. I am now going to teach you how to link between pages.
<![CDATA[
<a href="http://www.kineticvibe.com">Click here</a> to go to page 2.
Or
Visit this <a href="http://www.kineticvibe.com"> cool site!</a>
]]>
There are often many images, to insert and image use the following code:
<![CDATA[
<image src="welcome.gif" width="100" height="80">
Or
<image src="welcome.gif" width="10%" height="20%">
Or
<image src="hi.gif" onClick="'newpage.html')">
OR
<image src="welcome.gif" >
]]>
Using more colours
You do not have to stick with the red, yellow, green, blue, aqua, magenta set of colours. You can have any colour you like!
<![CDATA[
<font color="#cb0d00">Murkey Brown Text</font>
]]>
Because you are obviously not going to memorize hundreds of 6 digit codes I have a very helpful tool here. You can use these colour codes
for everything, backgrounds, fonts and even text boxes.
Congratulations! You have successfully completed this tutorial. Hopefully you have understood most of what we have covered.
If you would like to learn more and you are really ambitious take a look at my Javascript tutorial.
← ← Website Building Home ← ←
|