HTML Tutorial!

Affiliates

Top Sites

HTML Tutorial

Here I will teach you HTML (Hyper Text Markup Language). The basic building blocks of making a web page.

1. To Start off you obviously need a host, try some of these free hosts below:

My suggestion will be Geocities, but pick what ever host you want.

2. Now that you've got a host you can start writing HTML to make your page. But before you start you must know that HTML is not case-sensitive meaning you can write html, HTML, or HtMl.

3. Start the page of like this:

<html>

<head>

<title>Put your title</title>

</head>

<body>

Your text goes here

</body>

</html>

4. Now I'll explain what each <tag> does:

<html> tells the computer that your starting to write in HTML not English.

<head> element contains all information about the document in general. For example you can set the colour of the scrollbar in the <head> tag.

<title> is contained in the <head> of the document. Here you type in the Title of the page which will appear at the top of the page above File. For me it is HTML Tutorial.

<body> is where you place all of your text.

Note: All tags must </end> with </>.

5. In the body tag you can do many things for example you can set a background colour like this:

<body bgcolor="#hexcode here> Lets say you put 000000 in the hexcode area. Your page background will be black. For more hexcodes visit HTML color hexcodes.

Other than putting a background colour, you can put a background image like this <body background="url of background">. After you put in the url of the background you can also put bgproperties="fixed>. That means that when you scroll down and up the background won't move. Pretty cool.

If you want to set a certain colour of links and text without having to change them all the time do this: <body link="#hexcode" alink="#hexcode" vlink="#hexcode" text="hexcode">. Your probably wondering what is alink and vlink well alink is the active link meaning when it has been clicked on. Vlink means the visited link so you can set the link color for after when it have clicked it.

6. Now let me tell about putting text and links inside the body

<font></font>this will tell the computer what type of font you want for example:

<font color="FFFFFF">Now your wondering why put color when you already set the text color in the body tag. Well your page may look boring if the font is only one colour.</font>

<font size="1,2,3,4,5,6,7">Seven is the highest.</font>

<font face="Tahoma">By setting the font face you are picking the kind of...font face you want like Times New Roman and Arial.</font>

7. Now I'll tell you about special tags like bold.

<b></b> is the bold sign any text in-between the <b> tag will be bold.

<u></u> Any text in-between the <u> tag will be underlined.

<i></i> Any text in-between the <i> tag will be italicised.

<h1></h1> These tags will make your text headers. They vary from <h1> to <h7>

<strike></strike> Any text in-between the <strike> tag will be ~~stroked~~.

These are a few tags I just learned:

<sup></sup> Any text in-between the <sup> tag will be ^above normal text.

<sub></sub> Any text in-between the <sub> tag will be _under normal text.

Also I think there is a tag that allows text to be overlined but I'm not sure.

8. Linking text is easily done:

<a href="url of the site you want to link to">The text that you want to be linked</a>.

Make sure you add </a> so that you end the link or else everything else will be linked.

9. Now that you've learned that, I think you should learn about lines and paragraphes.

<br> This will make another line. Note: Even if you click enter in your HTML the real text will just keep on continuing, this is because you need to give HTML a specific command using the <br> tag. Note you don't have to close the <br> tag.

<p></p> This tag will make a

new paragraph. If you close the tag then write again a

new paragraph will be made.

10. Now I'll teach you about how to place and link images.

<img src="url of image"> use this code to put images onto your site.

This HTML would show:

Now you may want to set the dimensions of the image this is done easily.

<img src="url of image width="put #" height="put #">. The number you put there will determine the dimensions of the image.

Now to teach you how to link images.

Linking images is exactly the same as linking text.

This HTML would show this but this time linked

However now that it's linked you probably noticed that the image now has a border. If you like the border you can keep it but if you don't like the border do this:

Now there won't be a border since you designated border="0" making the image look like this.

However if you want the border to be bigger you can write border="8" or more or less.

Same with text you need to add </a> to end the link.

11. It's time that you learn about aligning.

This way you can set if you want you text to be at the left, center, or right. However by using the <p> tag I'm sure you remember that it'll start a new paragraph so just use the <center></center> but It'll still start a new paragraph the only way to do this is by using tables which I'll explain afterwards.

12. I think it's time we get on to tables.

<table>
<tr>
<td>Here is where the text goes/td>
</tr>
</table>

Now using the <table> tag you start of the table. However there are many other things you can put in there.

This way you can set the background colour for the table. Now adding on.

This was you can tell the computer how thick you want the border of the table. Note if you put <table border="0"> there will be no border. That is how layout's are made.

This way you set the colour of the border. Red, blue, yellow, anything you like.

<tr> sets the number of rows you want. For example:

<table>

</table>

This way you will have two rows since there are only two <tr>'s.

<td> sets the number of columns you want. For example:

This way you will have two columns since there are only two <td>'s. In the <td> tag you also put in your text. With <td> you also set the width.

This way you will have 2 rows and 2 columns. Now imagine this.

<table border="1">
<tr>
<td width="50%">Hello</td>
<td width="50%">how</td>
</tr>
<tr>
<td width="50%">are</td>
<td width="50%">you</td>
</tr>
</table>

This would look like this:

Hello how

are you

Now that's all I'm going to teach you today but I will update soon.