HTML Tutorial

Why did I wrote this tutorial?

I have written this tutorial to encourage others to learn HTML easily so that more people will be able to create websites. I personally prefer to use the Joomla content system because with Joomla you don’t have to write the HTML yourself. If you install Joomla,if you install some extensions and a template and you have a website that looks attractive to your visitors lots faster than if you would write all the HTML code yourself.

But even if you use a content management system like Joomla, Drupal or Wordpress you will find you need to use HTML sometimes to get your articles the way you want them to look like. So I like to use HTML, but I prefer to use it in combination with a content management system.

All website names, subnames or subdirectory names mentioned in this tutorial need to be replaced for the real website names, subnames or subdirectories to work in a real life site or in an offline webserver.

What is HTML?

HTML stands for Hyper Text Markup Language. HTML is the basic language a website is written in. Every website on the internet does contain HTML.

Why was HTML created?

In 1989 the World Wide Web was invented by Tim Berners-Lee. The WWW was created with HTML as its publishing language.

Tim Berners-Lee was not a computer programmer but a physicist. That’s why his main aim with creating the WWW and the language HTML was to collaborate and share information with other researchers.

Write a HTML Page with HTML tags

If you write a website in HTML you will start with the following tags

<head><title>If you place a text in here it will show up in the Titlebar</title></head>

But you might also want to add metatags to your website. Metatags are secial HTML tags that describe the contents of your website with the use of a description and keywords. With the use of the following HTML code you can add metatags to your website:

<head><title> If you place a text in here it will show up in the Titlebar </title><meta name="description" content=" Place the description of your site of webpage "><meta name="keywords" content="keword,another keyword, another keyword, and another keyword"> <meta name="robots" content="index,follow"><meta name="author" content="Your Name"></head>

Now you have the main metags you can also describe to the search engines if you want the website to be indexed and want the links to be followed

You use <meta name="robots" content="index,follow">

But you also use the following HTML tags:

<meta name="robots" content="noindex,follow">

<meta name="robots" content="index,nofollow">

<meta name="robots" content="noindex,nofollow">

Metatag index = index this page

Metatag noindex = do not index this page.

Metatag follow = follow the links on this page

Metatag nofollow = do not follow the links on this website

It is also possible that you do not want the searchengines to spider the path to your images With this HTML tags the search engine will index your page and your images, but not the path to your images.

Even though you do want to be indexed in the searchengines, sometimes there is one of your pages that should not be indexed. In that page you should add the following code to your metatags <meta name="robots" content="noindex,nofollow">

If you only want to prevent that the Google Bot indexes your page and if you want to allow other bots to index your site you can add the following code to your metags

Its is also possible that you have an old page on your website and you want to redirect your users to the new page. In that case you can use the following HTML tags in your Meta Tag code:

<meta http-equiv="refresh" content="10; ,URL=/yoururl.html">

10 is the amount of seconds the page waits before the new page is loaded. In this case Yoururl.html is the internal link on your website where you want the meta refresh to redirect to.

Many visitors and searchengines don’t like the use of metarefresh so you should be carefull with using a metarefresh on your website. Just use it if there is no other option.

How do I add an image to a website with HTML?

The HTML code to add an image to HTML is <IMG SRC=”yourpicture.jpg”>

JPG can be replaced for any image format like jpg, png, gif.

You can also add an image with the following code:

Now that you know how add an image to your website you might also want to place the image on a certain place in your website, the so called aligment of an image. If you want to align the image to the right you can use this code for example

And of course you can do the same if you want the image to appear on the left side of your text:

If you use the image in an article and you use the LEFT alignment for the picture, your text will appear on the right side of your image. If you use the RIGHT alignment for your image the text will be on the right side of the image. It’s also possible that you do not want to see any text around the image, and that you want the image to be centered with text above and below the image. You do that with the HTML tags <CENTER></CENTER>. This is how you should use the CENTER tag:

</CENTER>

If your link is an internal link that links to a link on your own website you don’t have to add the domain name in the link, you can use the following code instead

<A HREF=” /yourdirectory/yourfile.html”> <IMG SRC=”button.gif”></A>.

It’s also possible that you don’t want to use the orginal size of the image because the image will not fit within your text correctly if you use the original size of the image

In that case you use the text HEIGHT and WIDTH to specify the correct height

Width for the image like in this example

You can also use a percentage from the original image for example

<IMG SRC=”http://yourwebsite.com/yourdirectory/yourpicture.jpg” ALIGN=LEFT HEIGHT=500 WIDTH=90%>Or

You might want to add a description to your images, if a user scrolls over they can see the description you gave the image.

In html this is done with the ALT tag.

How do I add a link to my website with HTML?

If you want to add an external link to your website in HTML you will add the following link to your website:

<A HREF=”http://yourlink.com”>Title or description of what to find on the website</A>

It is also possible to add a link to a html file on your website, just add a link to the file by adding the following code

Your file might be in a directory on your website. You can also add a link to the file if it is in a directory by using the following code:

Or if your file is in a submap

It is also possible to add a link to an image. Let say you have website button and you want it to link to another page on your website, in this example the html file

Home.html and the button is called button.gif.

Of course you can also use an image or button to link to an external website with a html file called Home.html (or any name) on it, the HTML code you would use in that case would be something like

It is also possible that your file would be in a different directory of your site or someone elses site

If you link to an external website your code would be:

<A HREF="http://someoneelseswebsite.com">Someon elses website i like to link to</A>

How do I create tables in HTML?

If you have a HTML document you sometimes want to show your information in a structured table. You can create a table by starting with the HTML tag <table border="1">. You can adjust the table border number to have a thicker table line around the table. It is possible to not use the border="1" but most of the time a table will look better with a border around it. Just on some occasions you might decide not to use a border around a table.

The <TR> tag creates a Table row in which you add data cells with the <TD></TD> tags

In this example shows you how to make a basic table with 2 cells in them

<table border="1">

<TR>

<TD>Name: </TD><TD>Your Name</TD>

<TD>Gender: </TD><TD>Female</TD>

</TR>

<TR>

<TD>Phonenumber: </TD><TD>Your Phonenumber</TD>

<TD>E-mail:</TD><TD>This email address is being protected from spambots. You need JavaScript enabled to view it.</TD>

<TR>

</table>

If you want to create a table with a background color you could use the following HTML tag bgcolor=”#FFFFCC” where FFFFCC is the code for color chosen for the table in this example, like in the following example:

<TR>

<TD>Gender: </TD><TD>Female</TD>

</TR>

<TR>

<TD>Phonenumber: </TD><TD>Your Phonenumber</TD>

<TD>E-mail:</TD><TD>This email address is being protected from spambots. You need JavaScript enabled to view it.</TD>

<TR>

</table>

It is also possible to use a background image as the background of your table with the following HTML code

So the HTML code for your table would change to:

<TR>

<TD>Gender: </TD><TD>Female</TD>

</TR>

<TR>

<TD>Phonenumber: </TD><TD>Your Phonenumber</TD>

<TD>E-mail:</TD><TD>This email address is being protected from spambots. You need JavaScript enabled to view it.</TD>

<TR>

</table>

You might want to change the appearance of the columns in your table. You can do that by giving the TD data tags a background color , for example use

<TR>

<TD>Gender: </TD><TD>Female</TD>

</TR>

<TR>

<TD>Phonenumber: </TD><TD>Your Phonenumber</TD>

<TD>E-mail:</TD><TD>This email address is being protected from spambots. You need JavaScript enabled to view it.</TD>

<TR>

</table>

How can I create a form in HTML?

If you create a website you most likely feel the need to interact with the visitors on your website. You could feel the need to create a small feedback form.

A form is created by the <FORM></FORM> html tag. But that is just not the only tag you use to create form. You want to add a radio button, a submit button, a text area

And perhaps also an upload button and a spam checker. Usually the form is processed by a php or asp script.

You can create several textfields by using the following html tags:

For example:

<form>

Your Name: <input type="text" name="yourname"><br>

</form>

Using forms in Content Management Systems

If you use Joomla or any other content management system you can install a component or module which will create a form on your website for which you don’t have to have much knowledge of HTML because the form itself will be created for you.

Add checkboxes to your form

You can use checkboxes in your form. For example to ask your visitors how they found your website.

A checkbox can be created with the following html tag

Like you can see in the following example:

<form>

<input type="checkbox" name="found" value="Google">Google<br>

<input type="checkbox" name="found" value="Yahoo">Yahoo<br>

<input type="checkbox" name="found" value="Direct">Direct visit<BR>

</form>

Add a radio button to your form

If you want to add a radio button to your website you can add the following html code to your form.

You do that with the following html tag:

Let say you want to sell an item which has different colors:

Color:

<form>

<input type="radio" name="color" value="black">Black<br>

</form>

If someone fills in the form and clicks the radio button that option will become checked. And all other radio buttons will stay unchecked.

Add an textarea to your form

If you create a form you most likely also want to enable people to use a text area where they can leave a longer

Text. To make a text area in your form you should use the following html code:

</textarea>

You could adjust the amount of rows (in this example 5) and cols (in this example 50) to fit your form and your preferences.

Add an upload button to your form

In some cases you might want to enable your page visitors to send you a file. For example if you want them to join a photo contest in which you want them to send you photos. Or if you have a company and you want people to apply for a job with a certain form.

They can use the upload button to send you their resume

You can add an upload button to your form with the following code:

Upload your file <input name="upload" type="file" size="12"></select><br>

Add a submit button to your form

The submit button sends the data that is filled in in the form to

your e-mailaddress.. You can add a submitbutton button by adding the following html tag to your form:

Username: <input type="text" name="user">

</form>

Its also possible that you have a php script that submits your form to you

You don’t have to use an asp script to submit your form you can also use a javascript file to submit your form.

Most Common Used HTML TAGS

ALIGN=LEFT	Align your image to the left, your text will appear on the right
ALIGN=RIGHT	Align your image to the right, your text will appear on the right
<BODY></BODY>	Opening and closing HTML tags
<BODY BGCOLOR=#FFFFCC”></BODY>	The BGCOLOR is the background color of website
FONT SIZE=”3”>Here is some text</FONT>	Size=3 is the font size
FONT FACE=”Arial”>The Font Face</Font>	The font Face, so the type of font you want to use in your website. You can choose all kinds of fonts like Verdana, Comic Sans, and many more.
FONT Color=”#FFFFCC”>The Font Color</Font>	The color the Font has to have, you can use different kind of colors for your fonts. But make sure you don’t use to many colors, that will not improve the readability of your text.
<CENTER></CENTER>	If you place an image, text or link inside these two tags they will be centered.
<P></P>	These are paragraph tags. If you place your text inside the paragh tags the text is devided in paragraphs. The end of the pargaph is the </P>. It ends the textline in your text as well.
<TR></TR>	Create a Table Row
<TD</TD>	Add Data Cells to the table
<TABLE BORDER="1”>	The border 1 is the size of the border around your table
<TABLE BGCOLOR="#FFFFCC">	The BGCOLOR is the background color of the table

Most Read

HTML Tutorial