corner filler corner
 
Description Mascot

Text/Note Pad Page Building Tutorial

Welcome to our step by step tutorial on creating your Web page on an open text pad editor. This is a highly recommended tutorial to better comprehend the HTML language, even if your using a homepage editor software program that does it all.

 
corner

filler

corner

We are pleased to present to you this step - by - step page building tutorial with all the knowledge you need in a simple and understandable terminology of HTML codes. We won't boggle your mind with programmers terminology of codes, we pronounce codes with a terminology you can relate to and fully understand.

We offer you one of the most comprehensive, explanatory, and understandable forms of tutorials offered on the World Wide Web today.

We guarantee that by completion of this tutorial that you have the essential knowledge to create a spectacular web page. Only limited by your own imagination and unique creativity.

Throughout this tutorial we will provide you with options of using generated codes using our online HTML Generators, downloading our Banner Maker Pro - Banner/Button/Logo Maker software, Java Script Menu Maker software download if you like, Java Script codes from our Public Archives and other useful tools and utilities as we progress through lessons.

You will view your HTML Web page you create on your text pad editor using our HTML Test Bed Generator. You will visually see your creation for a better comprehension and understanding of lessons and demonstrations.

We also provide you with a complete resource area to keep your Web Site tuned and developed with all the proper resources, tools, and technologies available today. Most of these being absolutely free, or others with free trial demonstration period.

Okay: Are You Ready? Let's Get Started!

HTML is a short name version for Hyper Text Markup Language. The HTML in any document instructs the viewers browser to decipher what exactly you have instructed the viewers browser to display by reading your HTML document for their viewing your Web page. For a quick guide to remembrance, click here.

To follow our tutorial lesson, you will need to open your Note Pad, Word Pad, Text Pad Editor, etc., to show a blank page now.

All maroon text in this tutorial section is either a code, or example, point of illustration, etc. and should be read.

We will start by beginning to inform the browser what type of document it is reading. We are discussing an HTML document, so we obviously are talking about HTML. We will begin with installing this HTML document as a code into your empty Pad Editor. You can type your own code, or copy code from code cut & paste window provided with every code necessary to make this document.

Note: If you do not know how to cut & paste objects, click here for a quick tutorial on how to do this. If you highlight text to be copied you can cut & paste codes provided. All other areas of this lesson have an anti right click script preventing copy of our copyright images.

Please do not use our copyright logo's, mascot, images or text without our expressed permission.

Install this HTML code: --> <HTML>

Cut & Paste Code Below:

Now we will hit enter on your keyboard and will start a new line of command on your Pad Editor known as the head.

Install second line of HTML: --> <HEAD>

Cut & Paste Code Below:

Now we will hit enter on your keyboard and will start a new line of code command on your Pad Editor.

Install the Title of your Web page here. This is what appears at the top of the viewers browser window giving a description title tag. This is beneficial to helping viewer determine that they have been transported to the right destination after hitting a link & search engine relevance.

Install beginning of Title tag: --> <TITLE>

Cut & Paste Code Below:

We are going to name our <TITLE> Wiz Tutorial

Example:

Note: On all HTML commands, you need a start and stop decipher code tag. This is accomplished by all commands starting with <example> and ending it's code with this type of attribute </example>.

We hope you have understood coding:
start=<> and end=</> on all codes.

We will now add our Title close tag.

Install Title name closing tag: --> </TITLE>

Cut & Paste Code Below:

Example of TITLE Tag Now Below:

Now we will hit enter on your keyboard and will start a new line of code command on your Pad Editor.

We will now add our Head closing tag.

Install Head closing tag: --> </HEAD>

Cut & Paste Code Below:

Now we will hit enter on your keyboard and will start a new line of code command on your Pad Editor.

Now we have the area known as the body of your HTML document.

Install Body start tag. --> <BODY>

Cut & Paste Code Below:

Now we will hit enter on your keyboard and will start a new line of command on your Pad Editor.

This is where the entire viewing contents of your Web page is visible to your viewers browser screen.

We will skip over this content section to give us the rest of the HTML to create a full page HTML document. We will come back to this section after completion.

As we stated above, we must now tell the browser the Body section has closed. We will now add the closing Body tag.

Install Body closing tag: --> </BODY>

Cut & Paste Code Below:

Now we will hit enter on your keyboard and will start a new line of code command on your Pad Editor.

We will now inform the browser that this is the end of the HTML document we have written by installing the closing HTML tag.

Install HTML closing tag: --> </HTML>

Cut & Paste Code Below:

You have now successfully created an empty HTML document file that informs the viewers browser the type of document to read, and to show contents that are placed within the body area. Now this wasn't to hard to understand, right?

Guide To Remembering

Think of the definition of HTML as follows:
H = head
T = to
M = my
L = legs

Think of HTML as being similar to the human body in description and functions. Your head contains the brain that operates all functions of your body and legs. If your brain doesn't function, neither will your body.

The visitors browser is capable of reading HTML documents. We name this document HTML ( Hyper Text as in text pad editor Markup Language ). The browser then must locate your head and read what the brain is instructing the body to do. When it has read the brain, it will show what instructions were given; and show anything detected ( Java Scripts and Meta tags included in later lessons ) other than a Title tag.

Body is the area totally visible with all content, images, etc,.

We hope this has helped you to have remembrance of the functions of HTML, Head, and Body areas purpose. Go back to start.

Lesson Review


You should have code on your Pad Editor looking like this example here. If not, go back and slowly read this page again until completely understood.

We will move onto installation of Meta tags in our next tutorial.