|
|
The site with something for everyone
|
|
|
|
Tutorials> Building a web page: The Template
|
|
|
The Template
The name of this section alone is very important. Consistent page design is very important and a template
is a great way of ensuring that all the pages of your site look and feel the same even though each is unique. This is important
because you want your visitors to know that they are still in your domain and not in another world.
Here is an example of a template:
<HTML>
<HEAD>
<TITLE>
Shiroh's Homepage
</TITLE>
</HEAD>
<BODY>
Welcome to my home on the net!
</BODY>
</HTML>
|
|
|
What is this?
The above code is a simple web page. This is what your browser sees and displays it in a particular way as specified by the
tags surrounding the information.
Examples of tags are <HEAD> and </HEAD>.
|
|
|
What do you notice?
Do you notice anything about the above code? Well you should notice that all of the HTML tags come in pairs.
That is, for every starting tag e.g. <HEAD> there is a closing tag e.g. </HEAD>. This is generally true but as
with every rule, there are exceptions. You will also notice that the closing tags contain a "/" which denotes it as a
closing tag, this is true for all closing tags without exception. The last thing you should notice is
that tags are embedded. That is, you can place some tags inside others. For example <HTML><TITLE></TITLE></HTML>
It is very important to note that tags cannot span other tags for example <HTML><TITLE></HTML></TITLE>. This would
cause alot of problems....so let's end that there. Just DON'T do it!
|
|
|
What does it all mean?
I will now try to explain the code above.
The above code is a simple HTML page. All of the tags used are the basic tags that
are required for any browser to display your page. The ordering of the basic tags are
important. You cannot place the BODY tag before the HEAD tag for example. You should note
that the way the tags are formatted in the above code is the way that it should be formatted
for all documents.
Now, a breakdown of the tags.
The <HTML> and </HTML> tags denote that the document is an HTML document and always encloses all
other tags.
The <HEAD> and </HEAD> tags denote that header information held between them. Header information is
information that helps search engines locate your site and other information that you may want to include. This
information is contained within special tags that are designed for this purpose. One example are the <TITLE> and
</TITLE> tags which hold the title of the page. In the example above it is "Shiroh's Homepage". This will appear on
the top left hand site of your browser window just before the browser name.
The <BODY> and </BODY> tags hold the information that will be actually displayed on the screen.
|
|
|
Now it's time to try it out!
To try it out
- Open up MS Notepad or any text editor of your choice
- Copy the HTML code above and paste it into a new Notepad document
- Save this document as test1.html
- Open your browser and choose FILE, OPEN and browse your computer until you find test1.html
- When you have found it click the open button and the click open again.
Your test page should now be displayed in your browser window.
You may edit the code and change the information like "Shiroh's Homepage" to any thing you like and see what is displayed.
You can click here to see what the page should look like!
|
|
|
This page is boring! How do I liven it up?
|
|
|
|
|
