These very basic tutorials are for those who have never written HTML before. In
this section it will teach you the absolute basics of the HTML language. After
completing this tutorial you should have an fairly good understanding of the
core html needed to produce any structured webpage by writing your own html. In
this area you will learn the most used tags in html which are what tells the
browser how to interpret the information on your html page. By the time you get
through this section you should be able to create a web page using titles,
headers, text, links, and images.
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
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
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
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. 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 webpage’s 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
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
There are many different kinds of tag. 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:
And here is a closing tag:
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 is another example:
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 similar 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
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 browsers may
not like this and may produce results that you were not intending.
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 browser right now you
will notice that it says "Learn 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 browser right now.
The next tag, the <body> tag is where the meat of your website will go.
Everything that you see in the browser itself will be placed between the two
<body> tags. The <body> tags should always come after the <head> tags and
should always remain somewhere in-between 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 earlier 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.
That’s 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 let’s create some text that will show up on your
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:
<p>This is some sample text. Type whatever you would like here.</p>
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):
You should a blank window with the text you wrote above in it.
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:
<p>This document will discuss the various types of food groups and some
information about each</p>
<p>Fruits are healthy and should be eaten daily. There are many different kinds
of fruits and ...</p>
<p>An apple a day keeps the doctor away. Apples are usually found...</p>
<p>Oranges have a sweetish, acidic juice and are usually found...</p>
<p>Vegetables are also healthy and should be eaten daily. There are many
different kinds of vegetables and ...</p>
As you can see in the above example the main heading is using the h1 tag 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.
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. Here is an
example of how to load an image:
<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">
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 separate 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 distort 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".