Lesson 2: Building Your First Web Page

Building your first web page: Part 2

Tag Diagram

You may have noticed that HTML tags come in pairs; HTML has both an opening tag (<tag name>) and a closing tag (</tag name>). The only difference between the opening and closing tags is that the closing tag contains an extra forward slash.

An HTML tag explained

Some EXAMPLE HTML tags that might make things clearer: 

<b>Makes text bold</b>
<i>Makes text italic</i>
<h1>Tells the browser that this text is very important -the browser usually
makes this text really big</h1>
<table>Creates an HTML table - think of a spreadsheet</table>

I hope you can see the pattern in the list above.

HTML tags are not just for placing and formatting text, HTML tags can be used to include other things like: animation, video, Flash, audio, and even multimedia programs.

Comparing HTML code and the web page it creates

Let’s start with a very simple web page to make it as easy for you to understand. First lets look at the final page: sample web page

Now that we’ve seen what the page looks like, let’s look at the HTML code used to create the page.

What you should do now is take a little time and compare the HTML page and the page with the code that is used to create the page. Notice where the tags are and what they are doing.

Some Theory: The structure of an HTML page

An HTML page is divided into two major sections:

1. The head
The head (<head>) section contains underlying information about the page which does not get displayed in the web page (except for the title of the page). It does, however, have an affect on how the web page is displayed.
2. The body
The body (<body>) section: this section contains all the stuff that appears on the actual web page when someone happens to come along with their web browser. We are talking about the actual text, images, flash movies, and so on that people will see. That, of course, means the tags used to format all this stuff are there too…

You will notice that both the head and the body sections of a web site are marked in the HTML page with their respective tags: (<head> </head>) and (<body> </body>).

If the body tag creates the body of an HTML page, and the head tag creates the head of an HTML page, how do you create an HTML page itself? You guessed it, use the HTML tags: 

<html></html>

The ‘mother of all tags’ is the HTML (<html>) tag, and like all tags it must have a start tag (<html>) and an end tag (</html>). The difference between the start and end tags is the forward slash (/), but you already knew that.

Every web page MUST begin and end with the HTML tag, otherwise the web browser (programs like Internet Explorer) will not be able to display the page. You also have to have the head tags and the body tags. All the other tags are optional.

So the bare-bones HTML page must have these tags and in this order: 

<html>
	<head>
		<title>Title of your page</title>
	</head> 
	<body> 
	</body>
</html>
Top of Page