What is HTML and Why Do I Need It?

What is html and how does it help with building an online business? What is the difference between html files and using Online Templates when designing your website?

Html is a computer language which is understood by web browsers such as Internet Explorer.

Simple experiment for beginners

Open your text editor - if you have Windows, this is Notepad. You will find it if you press START, then "All Programs" then "Accessories" then "Notepad".

Type in "Hello. How are you?".

Then save this notepad file to your desktop and call it "hello.html".

Now go to your desktop and double click this file to open it. Windows knows to open it in your default internet browser such as Internet Explorer because it is in html format.

You will see "Hello. How are you?".

Congratulations, you have just created your first web page.


A website would generally consist of a lot more than this. It would have Navigation, headers, pictures, links and information for the Spiders.

In a previous section we looked at using online templates. With templates, the html to make the navigation, headers etc are all done for you. All you have to do is insert the pictures and text. It is usually very easy and great for beginners. But it can be limiting.

The great advantage of html is that you can be more creative and have more scope. For example, with the SBI software, the width of the page is set by the templates. You could have any width using your own html - you set it.

An online template is something you develop through the internet. You usually hit a 'submit' button and your website is online for everyone to see.

When you create an html file, you do so on your computer. You then upload it on to your 'area' at the hosting website - more on this later.

What is an html file

If you did the 'yellow box' above, you created a very simple html file.

To see a more complicated piece of html code, click on the "Page" button at the top of your browser (Top Right in Internet Explorer) and scroll down to "View Source". Clicking on this option will open a notepad file and you can see some of the html code used to make this page.

Looks complicated but it answers the question, What is Html. To create a website, you would have lots of these html files which link to each other.

How do you make an html file?

There are a few ways, some easier than others. You don't have to learn the complicated language.

Use a WYSIWYG piece of software, such as Frontpage or Dreamweaver. This stands for What You See is What You Get. You design the webpage in a similar way to editing a picture by inserting objects and text which can be moved around the design area by clicking and dragging. When you are finished with the page, the software converts it to html.

Use a web designer to design your own template - this person will give you the code for the page set up and you enter the text and pictures. This is not the same as an online template where you access the software over the internet. You would make the files up in your desktop and upload them to your hosting website.

Use and html editor - this page was made using Arachnophilia which is free. This helps by making it easier to insert the html codes. For example, to make something BOLD, you would highlight the text and press the Bold button. This automatically inserts the html code.

Learn the basics by using this great tutorial to get you started.

Organising your Files

Imagine all the files saved on your computer. You would have a folder system so that you can find them and organise them easily. I recommend you set up a folder system and keep the website files in them. Use the following naming conventions unless there is a good reason not to.

Firstly, set up a folder where you keep everything to do with the website, eg, ... mydocuments/website1. Place only the html files you create in this folder.

Create a sub folder called ... mydocuments/website1/images. You only keep final pictures that you use in your website here.

Create another sub folder called ...mydocument/website1/support-files. In this folder, keep any css files plus any other file you will use in your website, such as pdfs, powerpoint etc.

Keep only the files and images you use on your website in these 3 folders. Create other sub-folders for other information you want to use in connection with the website but not actually appearing on it. For example, a research sub-folder.

When you reference a link in your website to another page, the link will be http://www.yourdomain.com/name-of-html-file.html. When you use a picture in your website, you will reference it with http://www.yourdomain.com/images/name-of-image-file.jpg (or.gif). When you reference a pdf or other file, the link will be http://www.yourdomain.com/support-files/name-of-html-file.pdf (or.doc, .ppt etc).

Uploading your files

Once you have created your html files, you will upload them to your website hoster. To upload files you will need some software called ftp (File Protocol Transfer). This is often included in your package. Please see the ftp section for more information.

Doing this depends largely on your hoster and the system they use. You will need to log into your area using the log in details given to you. You need to navigate to the area where your webfiles are stored.

Sometimes this is a blank, file area which looks similar to the way your computer files are stored. In which case, create 2 sub-folders called images and support-files. Sometimes, you will have pre-arranged sub folders already set up for images and support files. If this happens, make sure your naming conventions above reflect this. For example, if images are stored in a folder on your hoster called "image-files" then substitute the word "image" for "image-files" in the above section.

Now load the html files (including your includes) into the top level area. Then load your images into your images sub folder and your support files into your support-files sub folder.

If using SBI, you will be asked to upload your image files, css files and includes at the same time as you upload your html file. You will upload special files using the "special file manager". The naming conventions are as above.

Finding a Website Hoster

Please see the section on website hosting.

Apart from SBI, which is my top recommendation, I have used:

www.bluehost.com and

www.easily.co.uk

Postscript - if you are wondering what css and includes are, don't! As this website is not an html tutorial site, I do not want to get side-tracked. For more information, go to www.w3schools.com.