Introduction
This introduction may not be for everyone. We are going into extreme detail on the very basics and are assuming the user has hardly any experience with making web pages.
HTML stands for Hyper Text Markup Language. It is the universal language amongst every web page on the internet and the World Wide Web (or WWW). To write a document in HTML you need some kind of text editor such as notepad in Windows. It is a basic program which allows you to type text. There are a variety of text editors out there, but I personally use notepad. Here is notepad below:
Above is an example of a text editor that you could use to type your HTML documents. This editor is called notepad which can be found by going to Windows and clicking on the start menu. On top of the start menu click on programs and then accessories. Then click on the notepad icon to start the program. If you happen to use a MAC I am not sure what programs are available to type text.
Once in the program you can start typing text immediately. With this program you can use it for many things, as it does not have to be used for HTML. You can type notes, stories, letters or whatever, but it is a great program to use to type HTML documents.
Many people also use websites like Geocities or Tripod which have editors built right into the browser so that you can edit pages of your site. This is an ok way of doing HTML, but I strongly recommend using Notepad if you really want to learn the language. There is less hassle and you can save your site to your hard drive too. It is always best because it is possible that the servers will crash and your entire site will be lost. Doing it this way you can save all the hard work you put into your site.
When in this program play around with it a little bit. Type a little paragraph or note and then try and save it on your hard drive. Make a folder called "websites" and then within that folder make another folder called "demo-site". In the folder called "demo-site" save the document you just wrote as mynote.txt which is just a regular text file. Now close notepad and then try and reopen mynote.txt. It is essential that you know how to find your saved documents on your hard drive.
You will be using this directory later to create many webpages and it is good practice to stay organized. That is why I had you create a separate folder for your pages. If you just throw your pages all over the place it will be hard to do anything. You are now ready to move on to the next lesson, Basic Markup Tags.
Basic Markup Tags
In HTML we use markup tags to give the document structure. A markup tag is always inside these special characters < >, the less than sign and the greater than sign. They are located on your keyboard above the space bar to the right of the m. You need to press shift to use them. If you do not press shift they will be a comma and a period. Once we make a HTML document that has good structure, that is when we will move on to using CSS (Cascading Style Sheets) to make the web page look pleasing for your audience. That will be covered in another tutorial.
There are many different kind of tags. We will begin by covering the <HTML>, <head>, <body>, and <p> tags. In many tags we will have an opening tag and a closing tag. The closing tag will have a backslash, the beginning tag will not. For example here is an opening tag:
<body>
And here is a closing tag:
</body>
The HTML document begins with <HTML> and ends with </html>. When you first see <HTML> it is declaring that a HTML document has begun. You place </html> at the end of the HTML document so that it declares that the HTML code is over. If you do not place these tags some browsers will still read and display your HTML correctly, but some older browsers may not. Here ia another example:
<html>
<head>
</head>
</html>
Immediately following the <HTML> tag is the <head> tag. The <head> tag will also have a closing tag. This tag will contain the title and other important things like meta tags for keywords. There are many other items that can be placed in the head tag as well which we will not cover at this time. Notice how the head tags are inside the HTML tags; this is called nesting. The nesting tags should be closed before any of the outer tags that it resides in are closed. It is very similiar to grammar and the rules with using single quotes within double quotes. An example:
"He turned off his computer, sat down on his bed and said 'I just don't understand HTML.'"
Notice how the single quotes are inside the double quotes. HTML works on the same principle. Tags will be inside other tags which will be inside even more tags. It can become quite confusing sometimes.
It is extremely important that if you start a tag that you end the tag or close it in the right spots. On this example if you were to open with <HTML> then <head> then close </html> without ever closing the head tag many browswers may not like this and may produce results that you were not intending because the HTML is incorrect.
The next tags I am going to introduce are the <title> tags and the <body> tags. The <title> tag must always be placed between the <head> tags as shown below. What you enter between the <title> tag will be displayed on top of the browser. For example. If you look at the very, very top of your browswer right now you will notice that it says "TUTORIAL: Basic HTML". If I placed "My Homepage" between the <title> tags like I have shown in the example then this is what would be displayed at the top of your browswer right now.
<html>
<head>
<title>My Homepage</title>
</head>
<body>
</body>
</html>
The next tag, the <body> tag is where the meat of your website will go. Everything that you see in the browswer itself will be placed between the two <body> tags. The <body> tags should always come after the <head> tags and should always remain somewhere inbetween the <HTML> tags.
Now I want you to open up notepad and type in everything as I have shown in the last example. Once you are finished click on file and then save as.. and then save it "index.html" under the directories we created ealier in this site. You should have a folder named "websites" and then in that folder another which says "demo-site", and it is in that folder that I want you to save what you had just written as "index.html". Hopefully you will not have many problems doing this as you probably are already familiar with your computer.
Thats it! This is the first thing I always do before I create a webpage. I get all the required tags in my file and save it. In every HTML page you create you should have all these tags in a similar order. This is the basic setup of every webpage. Again the HTML tags are to declare that this is a webpage. The head tags are what contain the title tag. And what you type between the title tag is what appears at the top of your browser. After the title and head tags comes the body tag for which you will place all your other markup tags, text, and images for your website. Now lets create some text that will show up on your page!
Basic Text
This lesson should not be too hard. To get text to show up on your site simply start typing text between the paragraph tags <p></p> which should be between the body tags. Once you are done then save your file again. It should still be called index.html - The source should look something like this:
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>This is some sample text. Type whatever you would like here.</p>
</body>
</html>
If you would like to preview your site you can load your page off of your hard drive. Open another browser window and type the following for your address (or if you address to your page is different type that):
C:\websites\demo-site\index.html
You should see a blank window with the text you wrote above in it.
Headings
Headings are like titles to sections in your document. Remember it is important to keep your document so that it is structured well. Usually a good way to do this is to have different areas in your document marked with headings. There are different levels of heading tags from <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The h1 tag would be the most important title and often the title of the entire document. Under that you can break down into smaller areas using the h2 tag. Within those sections you might break down other areas into smaller subsections using the h3 tag. Here is an example of what a HTML document might look like with headings and paragraphs:
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Food Groups</h1>
<p>This document will discuss the various types of food groups and some information about each</p>
<h2>Fruits</h2>
<p>Fruits are healthy and should be eaten daily. There are many different kinds of fruits and ...</p>
<h3>Apples</h3>
<p>An apple a day keeps the doctor away. Apples are usually found...</p>
<h3>Oranges</h3>
<p>Oranges have a sweetish, acidic juice and are usually found...</p>
<h2>Vegetables</h2>
<p>Vegetables are also healthy and should be eaten daily. There are many different kinds of vegetables and ...</p>
...
</body>
</html>
As you can see in the above example the main heading is using the h1 tags which tells that the document is about Food Groups. From there you have subheadings of different levels. After each heading There are paragraphs using the <p> tag which describe a little bit about what the heading is about. Of course a document doesn't have to have this exact structure, but this is a good example of how you can organize and structure your document using headings.
Images
With the image tag you can place images on your site. Whether you want small images, large images, colorful images, or even animated images, you would use the image tag to place it on your site. Making images or finding images will not be explained in this lesson. This lesson will simply explain how to place the images on your site.
The image tag is <img> and it does not have any closing tags with regular HTML (XHTML does have closing tags, but you do not need to worry about this right now). Here is an example of how to load an image:
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>This is some sample text. Type whatever you would like here.</p>
<img src="images/someimage.jpg" width="100" height="50" alt="Some Image">
</body>
</html>
Basic markup tags such as the image tag can have what are known as attributes. In the above example the attributes are src, width, height, and alt. The src attribute lets you define the source of the image. In this instance the source or location of the image is images/someimage.jpg, which is simply a jpeg image located in the images directory (I usually make a seperate directory such as images to keep things organized). The width attribute defines the image width, and the height attribute defines the images height. This should match precisely what the true width and heights of the image are. Anything other than the true widths or heights will disort the image by either stretching or shrinking the image. This is not recommended as it will make the image look poor in quality. Finally the last is the alt attribute which lets you specify a title or name of the image, and in this case we called the image "Some Image".
Conclusion
That is it for this tutorial. This tutorial only covered some of the basic tags and should be enough for you to make a complete webpage. Until you learn CSS, the page will be very boring -- but I think it is very important to have a good understanding of structure so that you can put content on your website in and organized fashion. Styling should go on top of your structure to make it look good. Have fun!
This page was published on It was last revised on
