Learn how to make a webpage with this easy to understand html tutorial.

HTML Tutorials
Learning Basic HTML
HTML Tags. HTML Codes

Handy Tip: Learning HTML raw code will allow you to be more flexible when creating your website. You won't be kept only to the limitations of any particular editor.

Learning basic HTML to write a webpage.

Here you will learn to make a basic web page in your notepad or word processor.

As you may have learned previously, html stands for Hypertext Markup Language. It is what your browser looks for to display a webpage the way the webdesigner intended it to look, and is a series of tags <tags> that tells the
browser where to display what. They are commands that you control, just like telling a dog to sit. They are in plain English and an example is if you want to make text bold, you tell it to be <BOLD> if you want it to be in italics, you tell it to be <ITALIC>, you may even abbreviate some of them like  or 

All tags that are opened must correspondingly
be closed, just as if you are writing a quoted statement with those "inverted commas".

A tag is closed this way </tag> therefore we open a new tag <tag> and close the tag </tag>

Different tags call different functions. A full list of html tags and their functions is provided here.

Let's get straight into making your first page. Open up your notepad program and follow these step to make your first basic page in html.
(To open notepad, click on start, programs, accessories, notepad.)

To begin a webpage you must first tell the browser that it is indeed a html document, so you begin your webpage with the opening tag of <html> and end the page by closing the tag. </html>

Everything else that you put into a webpage goes in between these 2 <html> tags

So to begin with, our page looks like this:

<html>

</html>

Hint, You can use capital OR lower case letters within your tags but DO NOT mix capitals with lower case.

The Head

Directly under the <html> comes the <head> The head is for the browsers use and shows such things as the page title, the designers name, keywords and a detailed description of what can be found on the page. The contents of the head are not visible to visitors. The tags within the head are called "Meta Tags" which if you haven't already heard mention of them, you will certainly hear a lot of as your internet experience grows. *smiles*

(If you would like to see this pages Meta Tags, select "view" at the top of your browser and click on "source".)

The easiest way to write your meta tags is to copy and paste an existing set of meta tags from an established page and change the wording within to suit your needs. Or another alternative is to go to someone who has a Meta Tag Generator and use that service. There is one you can freely use here. META TAG GENERATOR

In this example we will only add the title of the page. We will deal with meta tags in greater detail later on in the html tutorial series.

Now our page would look like this. Notice how the <head> is placed between both <html> tags

<html>

<head>
<title>Tanya's HTML Tutorial</title>
</head>

<html>

The Body

Within the body is where you place all of the things you want your visitors to see. Your background, text, images and other effects. This begins with the <body> tag and you usually put in a background, which can be enclosed within the body tag. This page has a white background. The html will be :
<body bgcolor="#FFFFFF">

(Explanation of html code)
<body Beginning of the main body or "guts" of your webpage.
bgcolor= background color.
"#FFFFFF"> This is the hexidecimal color code for browser safe colors. This code is for white.

Now we need to put in an opening statement, something like Welcome to My Website. This is done by adding a heading command or what I prefer to use FONT SIZE.

In this example we will use the font size 5 and we will center the welcome message.

Welcome to My Webpage

(Explanation of html code.)
 Close the font tag so the browser does not make this font for any following text.
 Close and end this paragraph.

Are you getting the hang of this? It really is just plain English.
P is for paragraph.
Align equals where you want it to be on your page.
Font is the typing letters.
You are giving the commands to the browser to do what you want it to do.

Next we will add some text and to begin we need to tell the browser it is the start of a new paragraph and where to place the text. This is the html to do that:

 Type in text here, blah blah blah. We are making a webpage.

(Explanation of html code.)
 tag
and of course we close the tag 

Now let's place an image in the center of your page to finish it off.

First we have to have a space between the text and the image.
Treat this the same as a new paragraph with the tag.

<img src="http://www.hypergurl.com/images/hypermouse.gif" width="100" height=150" border="0" alt ="Hypergurl Webhosting. Unrivalled Support.">

(Explanation of html code.)
 place the image in the center of your monitor screen.
<img scr is the location of you image, in this example it is coming from my website address, from the images folder, and the image is called hypermouse.gif.
width="100" This is the width in pixels of the image.
height="150" This is the height of the image in pixels.
border="0" This tell the browser not to place a border around the image.
alt ="Hypergurl Webhosting" The alt tag shows a little box of text when you place your mouse pointer over the image. You can put a small description of the image here.
 close the paragraph tag.

This is now your first basic html page and you finish off by closing the body tag.
</body> close the body.

Our finished page in html would now look like this:

<html>

<head>
<title>Tanya's HTML Tutorial</title>
</head>

</html>

Here is what it would look like when viewed. Click Here

That is a very basic page in html.
Well done you have completed the first lesson.

Go to HTML Tutorial #2

Hypergurl Hosting

IMPROVED PLANS
FREE Domain Name
Click for more info!

Home

Learning basic HTML to write a webpage.

<p align="center"><font size="5">Welcome to My Webpage</font></p>