Home >> Products >> Guides

HTML basics

HTML is a simple language that is used to create web pages. When you view a web page on your computer or device, it sends a request to a server. The server will then return HTML code. It is your web browser that decodes the HTML into a viewable web page.

HTML can be fairly simple to learn and within this brief tutorial we shall cover the basics.

HTML stands for Hyper Text Markup Language. Put simply is it the code we 'markup' to allow a web browser to render a page.

HTML uses tags to break up a page or document. The first tags and the most important is the <html> tag. This tag determines that everything within the tags is HTML.

<html>this is html code</html>

You will notice from the above example that html uses a system of open and closing tags to determine the start and end points for a specific tag. <Open> and </Closed>

Another tag that we will discuss is the head tag. The head tags enclose an area of the document called the header. The header of the document is not entirely visible to the end user, but it is an important aspect of correct page markup...

<html>
<head>
</head>
</html>

In the very simplistic example shown above we have a header section enclosed within the opening and closing head tags. These tags are nested within our html tags. These are an example of nested tags. In this case we could say that the head element is a child of the html tags because the entire head is enclosed within the html tags. If we think of the main <html></html> tags as the parent tag. Any tag that is contained within the opening and closing html tags is a child tag.

<parent>
<child>
</child>
</parent>

The html tag marks the start of your html code and the very end of your html code. All other elements are nested within the opening and closing html tags.

We will now add another element to create the header section...

<html>
<head>
<title>This is our page title</title>
</head>
</html>

As you can see we have placed a set of title tags within our header section of the document. The title is a child of the header and the header is a child of the html section. This is now giving us a better picture of just how the parent child analogy can be used to describe the nesting of elements within an html document.

We will now add a body element to our page. The body section is where all our on page content will be placed. The body is where all the html code that will make our page work will be placed.

<html>
<head>
<title>This is our page title</title>
</head>
<body>
Your page content goes here!
</body>
</html>

Again we can see how the body section of the page has an opening and closing tag.

In the previous example we simply placed a place holder to show where content will be placed, but coding a web page does not simply mean you can then copy and paste your text into the body tags and expect it to work.

Html uses a wide range of tags and syntax to allow you to better control just how your page will look. Lets create a simple web page on our computer. Create a text file and call it index.html

The best place to do this would be within your documents folder. Create a folder there called 'Testsite' for example. The name is up to you. Create your index.html file there.

Copy and paste the code example from above into your new document and save the file. You can then right click on the file and select open with. You should open it with a web browser such as Firefox, Chrome or Internet Explorer.

When you open the page within your browser you will see nothing. Depending on the browser you have chosen to use you may see the page title displayed at the top, but you will see no content within the actual browser. It's now time to add some content to our web page.

Lets focus on the area between the body tags. This is where we want to create some content to use on our website. The first thing we will do is create a page heading...

<h1>This is a page heading</h1>

If you save the file at this point and click refresh on the browser you are viewing your page on you should now see a heading has been placed at the top of the page.

Page headings are an important aspect of page design, they allow you to headline your content and you can use different sized headings. You can experiment with this by changing the size of your headings.

<H1>Big heading</H1>
<H2>A bit smaller</H2>
<H3>Smaller again</H3>


and so on...

You can use headings sized from H1 through to H6, but they need to be nested correctly. Lets imagine you have a website about types of birds. You would use a main heading at the top of the page, followed by some text then a less important heading to introduce another section, for example...

<H1>Black Birds</H1>
Intro text about blackbirds
<H2>Feeding Habits</H2>
More text
<H2>Habitat</H2>
More text

Our heading tags are also nested, in that we have a hierarchy of how they will be used. Looking at a newspaper or magazine will give you a good example of how headings are used. There are major headings for a page followed by lesser headings that draw your attention to specific points within an article.

Lets add some text below our existing heading. We will place this text within a paragraph tag..

<h1>This is a page heading</h1>
<p>This is just some simple text that I have used to demonstrate the use of a paragraph tag.</p>

Like most other elements our paragraph tag also uses an opening and closing 'p' tag to enclose a paragraph.

We can then add another paragraph below it...

<p>This is my second paragraph, and it is placed below my first paragraph</p>

We will now place a second level heading and another paragraph

<H2>I am learning HTML</H2>
<p>I am learning HTML for the following reasons...</p>

We how have 2 types of headings and a few paragraphs of text on our page. Every time we make a change, save the index.html document and refresh your web browser. This will allow you to view changes each time you save the file.

Our last paragraph hinted that we where going to give some reasons why we are learning html. The most effective way to display these reasons would be using a list. We can use a list with numbered points, or bullet points. These are refereed to as 'ordered lists' (numbered) and 'unordered lists' (not numbered)

Lets use a numbered list first to see how it looks. The first thing we need to do is create our ordered list opening and closing tags. We then need to create opening and closing tags for our list items. The tag used for the ordered list is <ol></ol> and for our list item is <li></li>

<ol>
<li>To build a website</li>
<li>To get my company online</li>
<li>To increase my skill set</li>
</ol>

If you paste the above code into your existing document and save it you will be able to now see an ordered list has been created using the information you provided. Feel free to change the text within the list items to reflect your own reasons. You can add more list items if you want simply by placing a new opening and closing 'li' tag and placing your text within it.

If you want to see how this would look using bullet points as opposed to numbers you can replace the opening and closing <ol></ol> tags with <ul></ul>

Feel free to experiment with the code you currently have to add headings, use lower headings and experiment with different types of lists.

Creating a new page

Now what we are going to do is create a new page. We will call this new page aboutme.html you should create this page just like the previous page within the same folder we previously created.

Open the new document with your text editor (notepad etc.) and paste this very simple template code into the new document.

<html>
<head>
<title>About Joe Blogs</title>
</head>
<body>

</body>
</html>

This will create the foundations for our new page. Now what we want to do is create a page to provide information about us. What sort of details can we provide from this page, well to be honest you can provide as much or as little information as you like, it's your page and it's just a little example remember. Nothing you produce here will be visible on the internet. It is only stored on your computer.

Lets provide some content

<html>
<head>
<title>About Joe Blogs</title>
</head>
<body>
<H1>About me</H1>
<p>Hi there, my name is Joe Blogs and from this page you will be able to read a bit more about me. I am 25 years of age and I live in London.</p>
</body>
</html>

We now have a heading and some simple intro text. You will remember that we place text in paragraphs, but there are also a number of different things we can do to alter text.

<b>Bold text</b>
<u>Underline</u>
<i>Italic Text</i>

You should experiment with different uses of text styling. It is important to remember, the above examples should be used in moderation. For example the bold text can be used to highlight words that are important, but should not be overused. The same applies for italic text and underlined text.

You can use combinations of the above code to create interesting styles. Bold Italic, or italic underline for example...

<b><i>Bold and italic text goes here.</i></b>

You can also specify different colours to be used within your text. To do this you need to specify a font colour. This can be done using font tags.

<font color=''red''>This text is red</font>

In our font example, we have shown an html item with an attribute. In this case we have the opening tag, with an attribute followed by the closing tag.

Opening tag: <font color="red">
Closing tag: </font>

In the fonts example it is important to understand that the colour will only be applied to text that occurs between the opening and closing font tags. All other text will use system defaults. You should also bear in mind that the font tag is slowly being depreciated from html. At some point in the future it will not work. There are alternatives that we will cover in a future article.

Tabular data

Tables are designed to allow you to display tabular data. In the past they have been used to control entire layouts, although this is now clearly seen as the wrong way to do things. What we will do is create a table to display some information about you.

Html tables are controlled using our old friend, the tags. For our example, we will be using the following tags. Table <table>, table row <tr> and table data <td>.

Lets imagine we want a table with 2 columns and 5 rows. The left column will be a question and the right column will be an answer. We would use something like the following code...

<table>
<tr><td>First name:</td><td>Joe</td></tr>
<tr><td>Last name:</td><td>Blogs</td></tr>
<tr><td>Age:</td><td>25</td></tr>
<tr><td>Location:</td><td>London</td></tr>
<tr><td>Job:</td><td>Web Designer</td></tr>
</table>

If you include this into aboutme.html you will notice that the table does display, but it looks very basic. There are a number of things we can do to improve it's appearance. The first thing we will do is give it a border. You can do this by adding an attribute to the opening table tag...

<table border="1">

What we will also do is apply some padding to each cell of our table. The cell is the area where our table data is placed. <td>this is a cell</td>

<table border="1" cellpadding="5">

You can experiment with cellpadding to get the effect you require. There is also an attribute called 'cellspacing' that allocates a space between cells.

You may also wish to use colour within your table. I find it can be quite a nice effect if you use 2 colours that alternate between rows. This can be achieved using the attribute "bgcolor" (background colour) For this example we will use two different shades of a pastel colour. You can use any colours you wish. You can specify a number of colours by name within html, or you can use their html notification.

<table border="1" cellpadding="5">
<tr bgcolor="e5d8d8"><td>First name:</td><td>Joe</td></tr>
<tr bgcolor="f9e8e8"><td>Last name:</td><td>Blogs</td></tr>
<tr bgcolor="e5d8d8"><td>Age:</td><td>25</td></tr>
<tr bgcolor="f9e8e8"><td>Location:</td><td>London</td></tr>
<tr bgcolor="e5d8d8"><td>Job:</td><td>Web Designer</td></tr>
</table>

You could shorten this code by simply specifying a background colour for the entire table, then overwriting this colour on alternative rows...

<table border="1" cellpadding="5" bgcolor="e5d8d8">
<tr><td>First name:</td><td>Joe</td></tr>
<tr bgcolor="f9e8e8"><td>Last name:</td><td>Blogs</td></tr>
<tr><td>Age:</td><td>25</td></tr>
<tr bgcolor="f9e8e8"><td>Location:</td><td>London</td></tr>
<tr><td>Job:</td><td>Web Designer</td></tr>
</table>

This is a very simple example of how tables can be used to display data. It is bad practice to use tables for layout, although in the past this was common practice. Designers would create a table to fill their page, then have a row with a cell for the top of the page, then two rows one for navigation and one for content and a cell at the bottom for the lower section of the page. This can still be done, but it is not recommended. The correct way of doing this will be featured in a future article and will centre around CSS (cascading style sheets).

Now that we have a page about us, what we need to do now is add a picture. Images are great for web pages, and they help to break up the content. It's time to add your photo. If you do not have a suitable photo feel free to download this image to experiment with.

Sample image file

NB: To save the image simply right click and select "save as". This image is actually a very accurate portrait of a director of UK Locate LTD who shall remain nameless.

We are going to add the image into the about us page. It is entirely up to you where you place the image. You may wish to place it at the top of the page or below the table we have just created. I suggest placing it above the table.

In order for this to work you need to save the image file in the same folder as your two existing pages (index.html and aboutme.html) If you have saved the file to another location on your computer copy it to this location.

Now we can use the following html code to place the image on our web page...

<img src="me.jpg">

This is an example of an html element that only has one tag. The image location has been added as an attribute to the tag. Edit the code to reflect the name of your image file. For example of your image is called photo.png use that as opposed to me.jpg It is important to get the file extension correct, and not just the name. If you do not specify the correct image name and path the image will not be visible when you view your page using your web browser.

We can also add some additional attributes to the image tag...

<img border="1" src="me.jpg" alt="My Photograph" width="100" height="100">

The border attribute places a border round your image. The "alt" places alternative text. This will be displayed whenever the image can't be displayed. The width and height attributes allow you to specify a size for the image and the size will be scaled to the size requested. Note: If you use the size attributed your image may be come distorted if you do not maintain it's aspect ratio.

What we are going to do now is place a link on index.html pointing to aboutme.html and a return link from aboutme.html to index.html. This is how the web works. Pages link to pages and sites link to sites.

On aboutme.html use the following code...

<a href="index.html">Home page</a>

On index.html use the following...

<a href="aboutme.html">About me</a>

Links are all placed within the <a></a> tags. The attribute for the link is placed within the opening tag. The attribute used is 'href' and is short for hypertext reference. It points to the resource we wish to link to. In our examples both links point to pages within our website.

The text used between the opening and closing tags becomes the text that will make up our link within the web page. This is sometimes referred to as 'link text' or 'anchor text'.

What we will also do is place a quick link to an external website. Lets use Google.com as an example. We will place this link on either of our pages, you decide what page you want to place this link to.

<a href="http://www.google.com/">Google</a>

You will notice that when we link to an external website we need to use http:// this is because we are linking directly to a remote resource. If we simple used www.google.com it would try and link to a folder on our computer called /www.google.com and this doesn't exist. You can try experimenting with different variations of external linking. Try linking to other websites such as YouTube and Facebook. It might even be a good idea to add links to your Facebook and Twitter accounts from the aboutme.html page.

Linking can however get a lot more interesting when you have a website based on several folders. Lets say you set up a website and have an index.html page as your main homepage. You then have a folder called /aboutme and within this folder you have another index.html file.

By default placing a file called index.html within any folder will cause it to become the homepage for that specific folder. If we have two files called index.html and something.html within a folder and we visit that folder with a web browser it will be index.html that will be displayed by default.

Relative linking and absolute linking

These two methods of linking work in very different ways. Absolute linking involves linking to every file from it's base directory. This is not something you can easily experiment with on your computer, it needs to be run on a web server. You could install a home server on your PC and this would assist you to further understand this fundamental issue. If you are running on Windows I recommend Xampp. Download site If you are running on a Linux or Mac system you should check your package manager for ways to install the Apache web server.

A web server is just like your computer, except it serves pages from a very specific location. This location is known as 'document root' within the file system your website can't go any further down than this. This is the point where your sites homepage would be located.

We will use the UK Locate website as an example. If a user types uk-locate.co.uk into their browser the server will look for the file requested. It will present the homepage. On that page we have links pointing to other pages on the website. One such link points to our 'For Business' page uk-locate.co.uk/for-business/ the html code we would use to create that link is simply

<a href="/for-business">For Business</a>

You will notice that we have used a forward slash '/' just before the folder name. This indicates that the location of the folder is right at the very bottom, then up one directory to 'For Business'

We use this because our website system uses a common top navigation bar that will occur on all pages of the website. If we simply used...

<a href="for-business">For Business</a> (No "/")...

This would cause problems. From the homepage it would work fine. It would be looking for uk-locate.co.uk/for-business but what if the user was already on the accounts page and wanted to go to the 'For Business' page?

The accounts page is /accounts/ the link would point to accounts/for-business this page does not exist.

On the UK Locate website we use absolute linking at all times. It makes it a lot simpler to manage the site. The only time I would recommend using relative links is when your entire website is within one folder.

This has just been a very basic prime that will help you understand the very basics of html. We hope it has been of some use. We highly recommend the following resources.



Back to self help guides

Account

User:
Pass:
Register here

UK Areas


UK Locate


Directory