HTML for beginners

Sections

Getting Started
For the absolute novice.

Web Building software
The tools of the trade.

Design Tips
How to make your Web site look great

Web Building scripts
Things that make your Web site dazzle.

PPC> Web building> Getting Started

HTML for Beginners – Part 1

Iain Laskey guides you through the basics of HTML – the language behind every website.

Web pages are created using a page description language called HTML. You’ll probably have noticed that many web site addresses have either a .htm or .html file extension. If you have created your own web pages, the chances are you used something like FrontPage or DreamWeaver. These tend to hide the horrors of the raw HTML code and instead let you work with a word-processor type interface where you can easily edit and arrange the page to your hearts content. Today though we’ll be rolling up our sleeves, firing up Windows Notepad and getting our hands dirty. We’re going to look at the basics of writing raw HTML code.

Description

The first thing to understand is that HTML is a page description language. It’s a bit like a programming language in that it has a definite syntax and contains different commands to control the way text on a page appears on screen. These commands are called tags. The second thing is that the interpretation of how the finished page should look is down to the browser. Different browsers do things slightly differently and what looks OK on Internet Explorer might be out of alignment in Netscape Navigator and vice-versa. There are techniques for minimising the differences though and a good HTML coder or package will produce HTML code that tries to achieve this.

Time to open up Windows Notepad. Now, type in the following code. Don’t worry about getting the formatting exactly right, as long as the actual text is correct it will be OK.

<html>

<head>

<title>My first web page</title>

</head>

<body>

This is the main part of the web page and can contain

one or more lines

</html>

Save the listing above as first.html then using Windows Explorer, find the file you just saved and double click on it. Your web browser will open up, load the html file and display it. You should see the title bar of the browser says ‘My first web page’ and the main window has the text ‘This is the main part of the web page and can contain one or more lines’.

Let’s go through this step by step. First there is the <html> tag. Most tags have a start tag and an end tag to indicate the beginning and the end of the text they effect. You can see the last line is </html> and everything between these two should be valid HTML code. These tags mark the start and end of the html document. Whenever tags work as a start and end tag, the end one is usually the same as the start but with a forward slash at the beginning e.g. <br> and </br>

Going back to the top, after the <html> tag is the <head> tag. This should always be after the <html> tag and before the <body> tag and is used to define the header for the document. It does little in itself but is effectively a container for the next item which is <title>. This tag is used to set the title of the window and is also the text that gets displayed and stored if you save the page to your favourites or bookmarks. Any text after the <title> is considered to be the title until the browser encounters a </title>. The next line contains </head> which indicates you have finished describing the header.

Now we start on the page itself. The main part of a web page is called the body and this is described between the <body> and tags. Any text between these will be displayed on the browser as a web page. The example above only has plain text but you can include extra tags with further formatting information. We’ll be looking at that later. For now, it is worth noting that even though our listing has two lines of body text, it gets interpreted as one long line by the browser. This is to allow for the fact that a browser can be any width with the text on the page adjusting itself to fit. You can force separate lines but we’ll be saving that for part 2 when we look at text formatting in more detail.

Part 2

Part 3

Iain Laskey