Home : Internet : HTML : Basics
HTML Tutorial: Introduction | HTML Basics | Hyperlinks | Images | Tables
On This Page: HTML Basics | Tags & Structure | Hyperlinks | Images

HTML Basics

A web page is an "HTML Document". This is a file format which usually uses the extension ".html" or ".htm". For example, if you use Microsoft Word, you will usually save your files with the extension ".doc". However you can also save your files with many other extensions such as ".txt", ".wps" etc. Amongst the options is ".html".

HTML documents are actually just plain text, but contain snippets of code which carry vital information about how the page should be displayed. You can create such a document using any text editor - even a very simple one like Windows Notepad. In fact many web designers prefer to use simple text editors.

This is what a very simple HTML document looks like:

<html>
<head>
<title>A Simple Web Page</title>
</head>
<body>
This is about as simple as a web page can get.
</body>
</html>

To view an HTML document, you must use a browser (or similar software). The browser opens the HTML document in the background and "decodes" it before showing it to you. What you see is your browser's interpretation of how the web page should look (note: this is actually an important point - it's why you should test your site using a variety of browsers).

Tags and Page Structure

HTML uses a system of "tags" to record instructions on how the page should be displayed. Tags are placed inside angle brackets like so: <instruction>
Tags often exist in pairs: The "beginning tag" specifies the instruction and is placed where you want the instruction to begin. The "end tag" is placed where you want the instruction to end, and is identified by the inclusion of a forward slash like so: </instruction>. The instruction is applied to everything between the two tags.

The most important tags are <html> and </html> - the entire document is contained within these two tags. The instruction here is simply "This is an HTML document".

Within the document, there are two parts: the "head" and the "body". The head is contained within the tags <head> and </head>, the body is contained within the tags <body> and </body>. The head includes information about the document, and is not displayed by the browser. The body contains all the contents for the page, and is what the browser displays.

Note: The original specification for HTML allowed you to use either upper or lower case letters in tags. Although this still applies, the latest specifications say you should use lower case only.

Confused yet? Never mind, it becomes clearer soon...

Let's have another look at our example HTML document. To make things easier to see we've coloured the HTML tags blue and separated the head and body with an empty line (empty space between tags is ignored). The tags also don't have to be on new lines, in fact the entire document could all be on one line - it would still be displayed the same.

<html>

<head>
<title>A Simple Web Page</title>
</head>

<body>
This is about as simple as a web page can get.
</body>

</html>

The first and last tags identify this as an HTML document, so your browser or other software knows what to do with it. The head contains the "title" tags which identify the name of this document (we'll talk more about that later). The body contains one line of text, which is what you see when you open this document in a browser. To see what this example document looks like, click here, then click your browser's back button to return and continue.

More Tags

Although the example above is a valid web page, it's not very exciting. To make the page more interesting it needs to be formatted. To arrange the text and other elements on your page, there is an array of HTML tags available. The rest of this page includes a quick look at a few important tags, then we'll get into more detail on the following pages. Here are a few to get started:

Let's look at a slightly more advanced example (click here to see how this document looks):

<html>

<head>
<title>A Simple Web Page</title>
</head>

<body>
<center>
<p><b>A Simple Web Page</b></p>
<p><i>This is still a simple web page, but it has a bit more to it.</i></p>
</center>
</body>

</html>

Hyperlinks

There is one very important tag you'll need to be familiar with: the hyperlink tag. It looks like this:

<a href="mypage.html">Click here</a>

This example creates a hyperlink to a file called "mypage.html". The text inside the tags is the part which becomes the clickable hyperlink.

Images

Here's a very important thing to understand: HTML doesn't actually contain any graphical content. Instead, graphic files are created and stored separately (we'll explain it more later). Image tags look like this:

<img src="myimage.jpg">

Note: Image files must be in one of two formats: ".gif" or ".jpg".

Summary

To finish this section, let's see an example which uses all the tags we've covered (click here to see how this looks):

<html>

<head>
<title>A Simple Web Page</title>
</head>

<body>
<center>
<p>It's nice to be able to add <b>bold text</b> and <i>italics.</i></p>
<a href="webdesign04.html">Click here</a> to return to the tutorial.<br>
<img src="logo.gif">
</center>
<hr>
</body>

</html>

Now here's the good news: If you can understand the example above, you have mastered the concept of creating websites. Everything else just builds on this system. Even if you never manually write a single line of HTML, the knowledge of how it works will be invaluable.

Before we move on, here's a trick: Browsers have a function which enables you to view the HTML source of any page you visit. From your browser's menu select "View" then "Source" (these options may have slightly different names depending on your browser). Voila! The HTML code which makes up the page is revealed.

Next Page: Hyperlinks