1. Creating Your First HTML Document

Well done, by choosing to enter into these lessons, you have made the choice to expand your knowledge on HTML. Let's begin by showing you the basic structure of a web page.


<html>
 <head>
 <title> </title>
 </head>
 <body text=black bgcolor=white link=blue vlink=red>
  :
 <!--This is a comment-->
  :
 </body>
</html>

As you can see there are 3 opening commands. Each command, is closed by using the </name> command. Lets discuss these commands in more detail.

<html> This is the most important commands there is. This is because it is one of the first commands that a browser reads, and when the browser reads this command it knows that the rest of the file is a web page composed of html commands. As you can see the last piece of html code that a browser reads should be </html>, this tells the browser that there is no more code.

<head> This code is used to separate the code and tell viewers of the code that all header information is stored here. This area also contains descriptive information about the page.

<title> This command is useful, but not an essential command of html. You see the blue bar at the top of your screen, notice how it says 1. Creating Your First HTML Document , well in the code to this page it has <title> and </title> around it. It is useful for creating the history list, so when you click on the go menu item, there will be a list of useful names instead of an address. It tidys up the tagging of pages.

<body> Now this is a very useful and important command and as you can see by the example, it contains a lot of information. The body command enables the creator of a web page to determine the background colour of the web page, the text colour of the web page, the link colour and the visited link colour. The list of colours are here (Colour Page).

<!...> This is the HTML comment line. What ever is typed between < and > is not read by the browser, this can be used to take out lines of code whilst testing them or it can be used for placing comments in a large page so that when you search through the code it doesn't take to long to find what specific piece of code you are looking for.

Example
Okay, so lets make your first web page, open Notepad, and type in the following code :

<html>
<head>
<title>My first web page</title>
</head>
<body text=black bgcolor=white>
<pre>
 This is going to look extremely boring
but the concept of web structure is highly
important when it comes to ensuring
that pages are easy to modify at first glance.
</pre>
</body>
</html>

Now save your file as test.html (or test.htm if using Win3.x), open a new browser and look at it, then compare it with the example here (Example 1). Notice, I've added a link back to this page, this is to ensure that my example doesn't get confused with the file you just made. Boring to look at, but it's a start. With the lessons following, I'll show you how to use this basic structure to create a web site, which will contain links, graphics and lots of other interesting things.

Click on Lesson 2 to continue, or click here (Top) to return to the top of document