Using HTML

Basic HTML page

So you want to make a webpage? Well you'll be glad to hear that you don't actually need any fancy software for a basic webpage. If you've got a basic word processor (such as notepad) and a browser (such as internet explorer, netscape or firefox) you've got all you need. Follow the exercises in the order provided, as each exercise assumes that you have understood the previous one.

There are different 'flavours' of HTML. One of the most commonly used is HTML 4.01. Another is XHTML 1.0. There are also strict and transitional versions of each of these, but you won't have to worry about this just yet. Each exercise will illustrate the code for both HTML and XHTML. You can use either. But once you pick one, stick to it.

Time to get started...

Exercise 1

  1. Open your web browser and shrink the window to fit the left half of your screen.
  2. Open a text editor and shrink to fit the right half of your screen. Try to make sure that you can see both windows simultaneously, because you want to jump back and forward between the two.
  3. In the text editor, carefully write the following text to create the very bare bones example of HTML or XHTML

HTML

<HTML>
<HEAD>
<TITLE>My first Web page</TITLE>
</HEAD>
<BODY>
Welcome to the world of HTML.
</BODY>
</HTML>

XHTML

<html>
<head>
<title>My first Web page</title>
</head>
<body>
Welcome to the world of HTML.
</body>
</html>

Column 1, with the darker background, is HTML code. The tags can be either upper or lower case.

Column 2, with the lighter background, is XHTML code. The tags must be lower case, otherwise you will get an error.

What it all means

  • The <HTML> tag is fairly obligatory. It tells the browser to expect a HTML document.
  • The <HEAD> tag denotes the page’s header information
  • The <BODY> tag denotes the ‘body proper’ of the page.
  • Note the position of the </HTML>, </HEAD> and </BODY> tags. The <HEAD> must end before the <BODY> begins.
  • Each tag is ended by the same tag word with a forward slash inside the tag. For example, the <TITLE> tag specifies the document's title. The corresponding </TITLE> tag tells the browser that the title has ended. The contents of the title tags are displayed on the blue bar at the very top of the browser window.
  • Most tags end like this, but there are exceptions which we will see later.

But it doesn't look like a webpage???

It won't look like a webpage until you look at it through a browser window. Common browsers you might have used before are internet explorer, netscape navigator and mozilla firefox.

To see your page:

  1. Save what you’ve typed so far as ‘plain text’.
  2. Save as mypage.html
  3. Make sure the file has .html at the end otherwise it won't be a web page, and remember the folder in which you’ve saved it.
  4. Now click on the browser and open the very same file with ‘File/Open File’. Hey presto – a web page is born!
  5. You can also open files by double-clicking the page icon.
  6. Next, jump back to the text editor. From now on when you save the file, simply ‘Refresh’ or ‘Reload’ it in the browser to see the changes take effect.

The next step is basic text formatting