Basics Of HTML














Here is the first example that we'll do, a very basic little page, but it will give you an idea how a basic webpage would operate. I'll explain all the tags once you've viewed this lesson.

Example 1:
<html>
<head>
<title>My webpage, this is easy</title>
</head>
<body>
<p>This is my first attempt at a webpage
<p>It's a start
</body>
</html>

Now, let's take a look at all the tags. First off is the <html> tag. Now this is included in every webpage. It is the first thing you write on the page and also the last tag you write on the page. This basically tells a web browser that you are using html and that it should read it as a scripting language. So, you always want to start with the html tag, because it informs the browser what type of document this is going to be.

Second part of this is the <head> tag. Now just think of a web page as a letter you might write to someone. In school they always told you to divide a letter into parts, a heading, body, and closing. Well, it is very similar when writing a web page. The <head> of the web page will contain certain information and the information should only be present here and no other place. So, what exactly is contained in the <head>of a webpage? The title tag and the meta tags. I'll not be getting into meta tags in this tutorial, but it is used by the search engines to find your page. Now, let's continue with what I will cover, the title tag. In the example aboe you see that I have, <title>My webpage, this is easy</title> written out. The title tag does just what it sounds like, it gives your web page a title. When looking at your browser you will see the title of the page at the top left of the screen in the frame of the window. So, for this example the title of the page would be, "My webpage, this is easy" this would appear in the top part of the browser.

Now, once you are done closing the title tag, you go and close the head tag. Once that is done you start on the body of the web page. Now this tag is also just what it sounds like, remember back to the letter writing analogy...first the heading, then comes the body. Now for this example we are just using a simple body tag, but in the body tag you could also set the color for the background of the page, text color, link color, visited link color, and color when you click on a link. So the body tag has a number of different aspects, let me show you them here:

<body bgcolor="white">
Now this is very simple to understand, bgcolor, is background color, you say ="insert color" Now when inserting color you can either just say the color like, white, blue, etc. or you can put the hex color value in, for the color white you would use the hex value of #FFFFF. If you need the color values, just go to the color section of this page, it will have a small table of the different color values.
<body link="blue">
Now this will make the color of all your links blue. Same as bgcolor, you can insert the name or hex value for the color.
<body vlink="red">
Once a person visits a link on your page and if they go back to the original page, the link color that was on that page would become red.
<body alink="yellow">
This sets the active link color to yellow, as someone clicks on the link, that link would become yellow for that second or two.
Now, you don't have to write a separate tag for changing each of these values, all you do is this:
<body bgcolor="white" link="blue" alink="yellow">
Now you have all the tags in one set of <> and this will set the color scheme for the page.
The next item you see listed is a <p> This stands for paragraph. This is used to create a new paragraph. Now you notice that I don't close off the tag, the paragraph closing tag of </p> is rarely used by webpage designers. You can add this tag, but it just isn't necessary. Finally you notice that I've finished the body of the webpage up by closing the body tag, and then closing the html tag. Now you can just cut and copy the example above and see what it creates. Remember, when saving a html file, you must use the extension on the end of .htm or .html. So, open notepad, paste the above example, and then save it as, test.htm
Now, on to page two, more tags and examples.
Click Here for Page 2 of Basics