How To HTML! Lesson One


Lesson One

You do not need any special software to create webpages - just a simple text editor - even a basic word processor. A very simple text editor comes free with Windows, called Notepad. To find it, click on the start menu, then you will probably find it in Programs, then Accessories.

The html source of a webpage should be divided into two sections, aptly named the head and body. The head contains special information for browsers and search engine spiders, such as the page title, while the body contains the text, display instructions, images etc, of the web page itself.

Html consists of 'tags' - instructions enclosed in these < brackets >. If these instructions involve altering a section of text, then one tag opens the instruction <example>, while another closes it, by including a slash symbol </example>. Remember, < > open, </ > close. The most common error is to miss a bracket or symbol.


EXERCISE ONE.

Create a new folder named website, or something similar, in My Documents, on your computer hard drive. We will create the website in this folder on your computer's hard drive, before it is launched onto an Internet web server.

Open up Notepad (or another text editor), type the following example code. Any hits on the return key will not show on the webpage, so feel free to use the return key as a way of laying out tidy manageable html (if using Notepad also click on Edit and make sure that word wrap is on if that is your preference.). Keep the tag code lower case (not capitals), and use the correct < > less-than, greater-than keys. We are writing a set of instructions in a language that browsers are programmed to understand. However, browsers are stupid, we have to get the code right:

<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>My First HTML Page</h1>
<p>Simple isn't it - a home made webpage in minutes.</p>
</body>
</html>

Now, save as: index.htm in the new folder on your computer. Remember to type the .htm suffix into the file name, as this will save it as a webpage, rather than just as a text file. Now all you have to do is open up the folder that you saved the new file in, double click on the html file icon called index, and your default browser will recognise it as an html web page and open it up!

By the way, you can cheat a little by copying the above sample code, and pasting it into Notepad, rather than typing it all out - but, you will learn the tags faster if you avoid this shortcut for the time being.

Explanation

But what does this gobbledegook code mean? Ok, start from the top, <html> tells browsers that it is an html document. Later when your skills develop, you may wish to use a more elaborate and descriptive !doctype tag. Note that the page ends with a corresponding close tag </html>

Everything between the <head> and </head> tags will be contained in the head. For now, the only element that we are using is the page title, typed between the <title> and </title> tags. This is displayed at the top left hand side of the browser. Search Engines usually use this title reference in their webpage listings.

Everything between the <body> and </body> tags will be contained in the body, and will form a part of the displayed web page. In this first exercise, we have only added a little text. The <h1> tags will make the enclosed text very large and bold. The <p> tags enclose normal paragraphs. Because we have not yet defined a style, the exact font, size and style of text will be defined by the browser default styles. Note that both the <h1> and <p> tags include automatic line breaks.


NEXT: EXERCISE TWO.

HOME