Pages - Menu

Pages

Saturday, October 10, 2009

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 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 if you want it to be in italics, you tell it to be , 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 therefore we open a new tag and close the 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 and end the page by closing the tag.

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

So to begin with, our page looks like this:

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 comes the 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 is placed between both tags




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 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 :

(Explanation of html code)
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 byadding 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.)

Start of new paragraph.
align="center" Your text will be aligned in the center of your monitor screen.
Your welcome message.
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.)

is for new paragraph.
align= places the text, can be "left" "center" or "right" and is enclosed in the

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.

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

(Explanation of html code.)

new paragraph.
align="center"> place the image in the center of your monitor screen.
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.
close the body.

Our finished page in html would now look like this:





Type in text here, blah blah blah



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

0 komentar: