Free Web space and hosting from 20megsfree.com
Search the Web

HTML

LOCATIONSHTML HowTo

Creating a Template for your Web Pages

Introduction to HTML

HTML stands for HyperText Markup Language. All a web page is, is a text-file that has been marke...... wait wait wait!!! You don't want the history of HTML... You just want to create a web page right? Well lets get started...

Our template will be simple. Let's start with all of the tags that are required for each page. So, fire up your favorite text editor and let's get started. (if you don't have a favorite editor, Notepad for Windows, VIM on Unix/Linux, or whatever text editor you Mac Users use will work just fine.)

When you see text in a pair of <angled brackets> that means that you are to type the text exactly as shown (including the brackets). And text in bold will inform you to press a key on your keyboard.

  1. The <html> tag is used to begin our page, type that in at the beginning of our text file. To make our file easier to read, and maintain, let's insert a line break after this tag by pressing the Enter key.

  2. Next type in <head>. This will let the browser know not to display the following code on our web page. Let's put a line break after this one too, press Enter

  3. Now it is time to give our page a title. This tag is not required for our page, but who wants a page with no title? Type in the opening <title>, then type in the title of your page, the title will appear in the title bar of your browser, (this pages title is HowTo HTML...). Got your title picked out? well let's close it up then. Almost every HTML tag comes in pairs, the opening tag, to tell the browser where to start processing that tags data, and a closing tag that lets the browser know that it is done with that tags data. Close up our title tag by typing </title>. Notice that the closing tag is exactly like the tag we used to open with, except that it begins with a slash /. If we forget to close a tag, It could mess up our entire page, so let's be sure to always finish what we start. let's put a line break after the closing title tag.

  4. That is all we need for our page header right now so we can close the head tag by typing </head>. Later we will come back and add to this section of our page, but for our template we can just leave with the title. Insert a line break.

  5. Now for the 'MEAT' of our page. Type in the opening <body> tag. The body is where all of the data we want to have displayed on our page will go. Now you can insert a line break and type in This is the body of my web page followed by another line break. And lets close up the body of our page by typing </body>. Again we will come back to modify this section but for our template we will keep it short

  6. Finally we need to close our HTML document by typing </html>

Does your text file look similar to the one pictured below?

my html template
figure 1, our finished template.

Now we need to save our work.

If you are using Notepad, Click on the word File on your menu bar at the top of the Window. Then click Save, this will open the Save dialog box. Near the bottom of the save dialog box, there is a white box with text on the left side of it that says Save as type, click the arrow on the right side of the white box and select All files ( *.* ). and type wptemplate.html into the File name box. And click the Save button.

If you are using VIM, press the Esc key and type :w wptemplate.html and press Enter.

And for you Mac users, consult your user manual to find out how to save a file.


click here to see what our page looks like in the browser so far.

Beginner Help with HTML
And Cascading Style Sheets
Drop me an e-mail