click for English language website click for Spanish language website

A beginners guide to HTML

The basis of ninety-nine percent of websites is HTML (unless its one of those rare Flash only websites!). HTML stands for HyperText MarkUp Language. If you are scared of programming (join the club!) then don't worry as HTML is not strictly a programming language, it is a semantic and visual language. This essentially means there is no logic in HTML, instead it is more of a building tool.

HTML needs a buddy to function which is called CSS (Cascading Style Sheets). While HTML gives you the tools to build your house for example the cement, the bricks and the windows, CSS controls the style and design – it controls the colours of the bricks, the size of the individual elements such as the windows and pipes.

The current version of HTML is version 5. It is a simple and compressed language, if you make a small mistake your website should still function. It is also somewhat easy to test and check what you are doing, simply by testing your work as you go in your favourite web browser.

Below shows a basic HTML 5 template.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A website title!</title>
<meta name="description" content="what is your website about?">
<meta name="author" content="Adam Hauser">
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>

Feel free to copy and paste this into your web building software. If you don't have one yet I would recommend Aptana or Notepad++.

Create a new document – call it whatever you like as long as .html is at the end of it. For instance index.html. Copy and paste the code above onto the page, go to your web browser and open your web page (so you are viewing it offline!).

In your web browser you should see 'Hello World!' proudly displayed. Congratulations you have your first website!

Now to explain what is going on here. If you have worked with other more complex programming languages before, HTML is a procedural language, which means a web browser goes through your code one line at a time and processes it – kinda like a recipe for a cake.

Let's go through the code quickly.

<!doctype html> <html lang="en">

This simply tells the web browser it is looking at an HTML document and the language is 'en' for English.

<head> <meta charset="utf-8">

Anything between a par of crocodile mouths is a tag. Some tags already exist and are instantly recognised by the web browser and treated as they should be. For example the <head> creates an invisible 'head' block which basically sets the properties of a web page.

Any tag must also be closed at some point, so we would need a </head> tag somewhere on the same page or your web page may start to do crazy things! More on tags later.

<title>A website title!</title> <meta name="description" content="what is your website about?"> <meta name="author" content="Adam Hauser">

The title tag sets the page title (at the top of the browser). This should be short, concise yet descriptive and contain any important keywords about your website. The meta names tell search engines who wrote the website and what the website is about. Again be descriptive and concise, no room for waffle here!

<link rel="stylesheet" href="index.css">

Every web page worth its weight also has an accompanying CSS page. Create another document named whatever you like as long as it has .css at the end. Make sure this link above to it has the same name otherwise it won't find it. Leave the CSS page blank for now - that's another topic!

The </head> tag closes the head tag so we can now start on the visuals!

<body> <h1>Hello world!</h1> </body>

So this at the moment is our entire website! The <body> is always formally recognised as the start of the website you see on screen, no more background tricks now. Anything you want to appear on the website should go in between the body tags.

You can nest tags within tags as many times as you like. For example above we have an <h1> nested within <body> tags. As long as each tag is closed and closed in the right place!

<h1>Hello world!</h1> indicates a header. H1 is the most important header in any web page, followed by H2, H3 etc. Any search engines that come to your website will recognise and read these headers. Hence make sure they are descriptive of the content it relates to.

You will notice 'Hello world!' has large bold formatting, this is default formatting the web page applies to an H1 tag, if you change the tag to H2 you will notice slightly different formatting applied You can completely manipulate this formatting within a CSS document – we will come to this soon!

In this next tutorial I go over more basics; specifically the essential tags you need to know to get a basic website functioning. So stay tuned!