Slack 'n' Hash

HTML Tutorial

The HTML Document

Put simply, each web page is a separate text document. Each of these documents' filenames has the extension .htm or .html. Let's create our first web page. Create a new text file and save it as index.html. If you open it with your web browser you'll notice you just get a blank page.

What did you expect? We've hardly even started yet!

Okay, open index.html in your text editor. It's time to actually start learning some code.

Getting Started

HTML consists of markup tags or 'elements'. Each tag consists of an element name between two angle brackets, like <this>. When the browser encounters a tag, it knows it has to apply a certain function to the page, or indeed to stop applying it. How does the browser know where to start and stop? Quite simply, tags are traditionally organised into pairs: an opening tag and a closing tag. Let's jump right in and learn our first tag pair.

<html>
</html>

This pair of tags shows where the HTML document begins and ends. Everything on the page is contained between those two tags. A web page contains two main sections: a head and a body.

The Head:
Contains information about the page, such as the title, a description, keywords and links to stylesheets.
The Body:
Contains everything you'll actually see in the page.

The tag pairs associated with these sections are absurdly easy.

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

Save the file again and open it in your browser. You'll notice that the page is still blank. Yes, index.html is perfectly well-formed, every tag is closed, but there's no actual content. Let's start putting things on the page.

To start with, we'll give the page a title. Every single web page should have a title; that way the page makes more sense to search engines. The web page's title goes in the page's head section.

<html>
 <head>
  <title>My first web page!</title>
 </head>
 <body>
 </body>
</html>

So far so good. We've got something to show up in the web page's title bar, but nothing much beyond that. It's time to put something in the page's body. To do that we need to learn some more code.


Last modified: 26/11/08. All material ©2003-8 its creators.

Customise the Sidebar