Basic Tutorial Part 1

AlphaZone Computer Resource Center

HTML COMPLETE COURSE

Basic Tutorial Part 1: Text

Now comes the most important part - putting text on the page.
Let's start out by putting the title of your page on the screen.
Just put in "My First Page" like this:

<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
My First Page
</BODY>
</HTML>

Now if you preview this in your browser you will see that this is not exactly compelling stuff. So, let's jazz it up a bit. First let's make it larger. Do this you will need to use the <H1-6> command. There are 6 different sizes to choose from, 1 being the largest to six being the smallest. How about we try a size one? So, add the <H1> command before your text. Don't forget to close this command off after your text or all of the text below it will be that size as well.
Now your code should look like this:

<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<H1>My First Page</H1>
</BODY>
</HTML>

Now if you take a look at it you will see that the text you wrote looks quite a bit bigger. However, it is just sitting there, on the left side of your screen. How about if we center it?

In order to do this we must first use a combination of commands. First is the command. This is commonly referred to as the 'paragraph' command. It detonates a new paragraph or section of text. Along with this command you will use 'ALIGN'. This goes in the bracket with the command. You will tell the ALIGN command that you want the text to go to the center by typing simply 'CENTER'. The whole command looks like this: . This will center your text. Now your code should look like this:

<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<H1>
My First Page
</H1>
</BODY>
</HTML>

Note that there is not a command closing off the command. That is because the command is one of the few that do not need to be shut off. In order to change the alignment again just put the command in again and tell it where you want it to go. Or just typing in the command by itself will reset the text to it's original position. To get the text where you want it is quite simple. For aligning the text to the left put 'LEFT', for centering put 'CENTER' and for placing the text on the right put 'RIGHT'. It is that simple. Also note that the <H1> command comes before the ALIGN command. This is because the <H> command overrides the ALIGN command if <H> is placed after ALIGN. This causes the text to stay on the left. This leads to another option for centering text, or placing it on the right or left. This command looks like this: <CENTER>. This is used before all other text commands. This must be closed off at the end of whatever text it is that you want centered. This difference between the commands? The <CENTER> command is for large amounts of text that want centered. For example, if you have more then one paragraph that you want centered then use that command. However, if it is just one paragraph that you want aligned differently, then the is the command for you. For the purposes of this tutorial we will just use the command.

Now you can add tags to emphasize words. You can make the text italic by adding the command. Or you can add bold text by adding the command. Remember, after whatever text you want to modify to close off the command with the backslash.

Now though, it is time to add some color to our text. There are two ways of doing this. First there are the simpler colors. Those can be added simply by typing in the name of the color. For example, let's make the text red. After the ALIGN command bracket put in this:
 Then put in your text. After you are done putting in the text at whatever color you have chosen be sure to close off the command by putting in .
Go ahead and try this now. You code should now look like this:

<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<H1>
My First Page
</H1>
</BODY>
</HTML>

Now it is starting to look better right? However, putting in the name of the color will limit the number of colors you can do. In order to get the full 216 web safe color range you will need to use Color Hexes. Click here for the full color chart. How about we put in one of those colors now? Try this color as an example. I would tell you what color it is, but I have no idea what is it called. :-) Go ahead and replace the RED with CC3366. Now your code should look like this:

<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<H1>
My First Page
</H1>
</BODY>
</HTML>

The page is looking better, but it isn't very descriptive. Now we are just going to insert a couple of paragraphs of text so that people can learn a little more about this page. To do this we are going to use the command. This will separate your paragraphs. Also, note that after the title text there will be another new command. The command. This puts breaks in the lines. The more you use, the more lines separating your text. Note that neither the or the needs to be closed off.

<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<H1>
My First Page 
</H1>

This page was created so that I could learn HTML. By the end of this tutorial I should have the basics of HTML down so that I can begin creating nice looking web pages.

Right now I am trying out a new command that creates paragraphs. This keeps my sentences from running together and looking confusing to the reader. This new command, along with the ALIGN command, can help me position the text wherever I want it.
</BODY>
</HTML>

Alright! Now you have the power to put that text wherever you want!

But now let's go learn to do a little more with that text. Time to make lists with bullets or numbers.

Basic Tutorial Part 2: Lists

What if you have a list of points you would like to make? Or a numbered list of items? Well, HTML can help! Now let's take what we have done so far and put in a list of points. In front of the list, we want some bullets. in order to do this, we will be using the <UL> command along with the <LI> command. The <UL> command is the bullet command. The <LI> command is what places the bullets where you want them, and typically goes before the text you want bulleted. So, let's make a three item list and put it in your HTML file. Now, your code should look like this:

<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<H1>
My First Page 
</H1>

This page was created so that I could learn HTML. By the end of this tutorial I should have the basics of HTML down so that I can begin creating nice looking web pages.

Right now I am trying out a new command that creates paragraphs. This keeps my sentences from running together and looking confusing to the reader. This new command, along with the ALIGN command, can help me position the text wherever I want it.

Now I am going to make a list of three things that I have learned so far:

<UL>
<LI>How to make text different color.
<LI>How to align text any way you want.
<LI>How to make text different sizes
</UL>
</BODY>
</HTML>

There you go! Note that while the <LI> command does not need to be closed off, the <UL> command does. Now, let's make another list that is a numbered list. You will still use the <LI> command in the same way, however to generate the numbers you will use the <OL> command. Let's make a numbered list of some of the things you are going to learn during the rest of this tutorial.

There you are! Now you can make some nice looking lists. Now it is time to move on to linking multiple pages together!

Links

In this section we will learn all about linking pages together within your site, linking to other sites, and linking to a specific point on a web page. This will use a couple of new commands known as the Anchor command and the Hyperlink Reference. These two commands go together to allow you to create the links you need to connect all of the parts of your site. Let's say that you have another page and need to link this one that you are working on now. We will say that this other page is called NEWPAGE.HTML

So to create a link with text telling the person the link is there you need to type: <A HREF="NEWPAGE.HTML">Go to my other page</a>

Notice the </a>. That is VERY important. That is what ends the link, so that any later text that you may put in isn�t also part of that link. So, now let's put that into our ever growing HTML file! Now your code should look like:

There you go! Now, if you had a page called NEWPAGE.HTML you would have gone there. Of course if you tried to go to that non-existent page then you would have seen a 404 Page not found or some such. Now it is time to move on to the next step, linking to another web page and linking to your e-mail.

Now let's setup some links to another web site. You will use the <A HREF> command, just like when you linked your pages together. In this case though, you need to put in the entire URL. So, let's say you want to link to some really great site that everyone should know about. WARNING: I am about to do a shameless plug.
So the code you would put in would look like this: <A HREF="http://www.geocities.com/dalpha2">Come to AlphaZone for all of your software needs!</A>
There you go!
Now your code should look like:

Now you would like to get some e-mail from all of the people looking at your new page right? So, now it is time to setup a link to your e-mail account. Again we will use the <A HREF> command. The code should look something like this: <A HREF="mailto:yourname@yourplace.com">E-Mail Me!</a>
And there you go!
So, the new code looks like:

Alright, now you are all set with links to your favorite site and your e-mail is set-up. Now you may want to be able to send people to a particular spot on a page. In order to do this you need to use the <A NAME> command. First you must give a spot on the page an <A NAME>, then, using the <A HREF> command you can send someone there. So, first decide to make something a spot to send people to. First lets create the spot with some new text and a link to a web site. This new paragraph is what will get the <A NAME>. First take a look at the code, then we will go over the functions.

<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<H1>
My First Page 
</H1>

This page was created so that I could learn HTML. By the end of this tutorial I should have the basics of HTML down so that I can begin creating nice looking web pages.

Right now I am trying out a new command that creates paragraphs. This keeps my sentences from running together and looking confusing to the reader. This new command, along with the ALIGN command, can help me position the text wherever I want it.

Now I am going to make a list of three things that I have learned so far:

<UL>
<LI>How to make text different color.
<LI>How to align text any way you want.
<LI>How to make text different sizes
</UL>

Now here is a list of some of the other things I am going to learn during this tutorial:
<OL>
<LI>How to create links to other web sites.
<LI>How to set up a background.
<LI>How to link pages together.
</OL>

<A HREF="NEWPAGE.HTML">Go to my other page!</A>

<A HREF="http://www.geocities.com/dalpha2">Come to AlphaZone for all of your software needs!</A>

<A HREF="mailto:yourname@yourplace.com">E-Mail Me!</A>

<A NAME="Freethemes">Desktop Themes</A>
Where can you go for all of your desktop theme needs? There may be many choices available for you to choose from, but one site stands out above the rest. This site will fill any possible need you may have in customizing your desktop. This site is Freethemes. I suggest that you go there now and get your favorite desktop theme now. So, head to <A HREF="http://www.freethemes.com">Freethemes!</A> 
</BODY>
</HTML>
Okay, now you have a spot ready to send someone to. Now you need to have a link leading to the <A NAME>. So, now add a line up toward the top of the page, and use this new line as the link. So, add the new stuff to your code:
<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<H1>
My First Page 
</H1>

This page was created so that I could learn HTML. By the end of this tutorial I should have the basics of HTML down so that I can begin creating nice looking web pages.

Right now I am trying out a new command that creates paragraphs. This keeps my sentences from running together and looking confusing to the reader. This new command, along with the ALIGN command, can help me position the text wherever I want it.


Just a quick note. If you are looking for a place that has cool desktop themes then <A HREF="#freethemes">go here!</A>

Now I am going to make a list of three things that I have learned so far:

<UL>
<LI>How to make text different color.
<LI>How to align text any way you want.
<LI>How to make text different sizes
</UL>

Now here is a list of some of the other things I am going to learn during this tutorial:
<OL>
<LI>How to create links to other web sites.
<LI>How to set up a background.
<LI>How to link pages together.
</OL>

<A HREF="NEWPAGE.HTML">Go to my other page!</A>

<A HREF="http://www.geocities.com/dalpha2">Come toAlphaZone for all of your software needs!</A>

<A HREF="mailto:yourname@yourplace.com">E-Mail Me!</A>
<A NAME="Freethemes">Desktop Themes</A>
Where can you go for all of your desktop theme needs? There may be many choices available for you to choose from, but one site stands out above the rest. This site will fill any possible need you may have in customizing your desktop. This site is Freethemes. I suggest that you go there now and get your favorite desktop theme now. So, head to <A HREF="http://www.freethemes.com">Freethemes!</A> 
</BODY>
</HTML>

Alright, now you can get e-mail, send people to other sites, or put them on a different part of your page. Now let's really spruce up the page with images, then backgrounds.

Putting Images on your page

Now you need to insert an image. If you want, download the image at the top of this page with the cows and use it for our example (just right click and choose save as. Save it in the same directory as your HTML file). Now you will use a new command. the <IMG SRC> command. Image types that you can use in an HTML file are GIF, TIFF, and JPEG. If you have an image you would really like to use but it is not in one of those formats don�t despair. Just head to our Image Converters file section and any number of programs there can help you.

Let's put the image on the top of the page. So, add this line before your first line of text: <IMG SRC="htmlsmall.gif">
Now your code should look like this:

<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>

<IMG SRC="htmlsmall.gif">
<H1>
My First Page 
</H1>

This page was created so that I could learn HTML. By the end of this tutorial I should have the basics of HTML down so that I can begin creating nice looking web pages.

Right now I am trying out a new command that creates paragraphs. This keeps my sentences from running together and looking confusing to the reader. This new command, along with the ALIGN command, can help me position the text wherever I want it.

Just a quick note. If you are looking for a place that has cool desktop themes then <A HREF="#freethemes">go here!</A>

Now I am going to make a list of three things that I have learned so far:

<UL>
<LI>How to make text different color.
<LI>How to align text any way you want.
<LI>How to make text different sizes
</UL>

Now here is a list of some of the other things I am going to learn during this tutorial:
<OL>
<LI>How to create links to other web sites.
<LI>How to set up a background.
<LI>How to link pages together.
</OL>

<A HREF="NEWPAGE.HTML">Go to my other page!</A>

<A HREF="http://www.geocities.com/dalpha2">Come to AlphaZone for all of your software needs!</A>

<A HREF="mailto:yourname@yourplace.com">E-Mail Me!</A>
<A NAME="Freethemes">Desktop Themes</A>
Where can you go for all of your desktop theme needs? There may be many choices available for you to choose from, but one site stands out above the rest. This site will fill any possible need you may have in customizing your desktop. This site is Freethemes. I suggest that you go there now and get your favorite desktop theme now. So, head to <A HREF="http://www.freethemes.com">Freethemes!</A> 
</BODY>
</HTML>

You can center the image by using either the command or the <CENTER> command. Now, a trick to remember is, if you know the size of the image it helps the browser to load it that much faster. In that case the line might read <IMG SRC="htmlsmall.gif" WIDTH=470 HEIGHT=117>

Background

Now it is time to put in a background. You can either make the background a certain color, or make it an image that you would like to see back there. Back near the top of your code there is the <BODY> command. Now you will modify it using the <BODY BGCOLOR> command. This allows you to set the background color to any of the 216 colors found in this chart. You can also use the english name of these color to make matters more simple for you. For this example we will make the background color chartreuse. So add this line: <BODY BGCOLOR=CHARTREUSE>
Here is the new code:

<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY BGCOLOR=CHARTREUSE>
<IMG SRC="coolnew.gif">
<H1>
My First Page 
</H1>

This page was created so that I could learn HTML. By the end of this tutorial I should have the basics of HTML down so that I can begin creating nice looking web pages.

Right now I am trying out a new command that creates paragraphs. This keeps my sentences from running together and looking confusing to the reader. This new command, along with the ALIGN command, can help me position the text wherever I want it.

Just a quick note. If you are looking for a place that has cool desktop themes then <A HREF="#freethemes">go here!</A>

Now I am going to make a list of three things that I have learned so far:

<UL>
<LI>How to make text different color.
<LI>How to align text any way you want.
<LI>How to make text different sizes
</UL>

Now here is a list of some of the other things I am going to learn during this tutorial:
<OL>
<LI>How to create links to other web sites.
<LI>How to set up a background.
<LI>How to link pages together.
</OL>

<A HREF="NEWPAGE.HTML">Go to my other page!</A>

<A HREF="http://www.geocities.com/dalpha2">Come to AlphaZone for all of your software needs!</A>

<A HREF="mailto:yourname@yourplace.com">E-Mail Me!</A>
<A NAME="Freethemes">Desktop Themes</A>
Where can you go for all of your desktop theme needs? There may be many choices available for you to choose from, but one site stands out above the rest. This site will fill any possible need you may have in customizing your desktop. This site is Freethemes. I suggest that you go there now and get your favorite desktop theme now. So, head to <A HREF="http://www.freethemes.com">Freethemes!</A> 
</BODY>
</HTML>

What if you have a really cool image you would like to use as a background? No problem! Instead of using the <BODY BGCOLOR> command, you would use the <BODY BACKGROUND> command. If you wish, use this image here for your background. The line you would insert in your code should look like:

<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY BACKGROUND="blue6.gif">
<IMG SRC="coolnew.gif">
<H1>
My First Page 
</H1>

This page was created so that I could learn HTML. By the end of this tutorial I should have the basics of HTML down so that I can begin creating nice looking web pages.

Right now I am trying out a new command that creates paragraphs. This keeps my sentences from running together and looking confusing to the reader. This new command, along with the ALIGN command, can help me position the text wherever I want it.

Just a quick note. If you are looking for a place that has cool desktop themes then <A HREF="#freethemes">go here!</A>

Now I am going to make a list of three things that I have learned so far:

<UL>
<LI>How to make text different color.
<LI>How to align text any way you want.
<LI>How to make text different sizes
</UL>

Now here is a list of some of the other things I am going to learn during this tutorial:
<OL>
<LI>How to create links to other web sites.
<LI>How to set up a background.
<LI>How to link pages together.
</OL>

<A HREF="NEWPAGE.HTML">Go to my other page!</A>

<A HREF="http://www.geocities.com/dalpha2">Come to AlphaZone for all of your software needs!</A>

<A HREF="mailto:yourname@yourplace.com">E-Mail Me!</A>
<A NAME="Freethemes">Desktop Themes</A>
Where can you go for all of your desktop theme needs? There may be many choices available for you to choose from, but one site stands out above the rest. This site will fill any possible need you may have in customizing your desktop. This site is Freethemes. I suggest that you go there now and get your favorite desktop theme now. So, head to <A HREF="http://www.freethemes.com">Freethemes!</A> 
</BODY>
</HTML>

There you go! Now you can put whatever background in that you please!

That is all for this tutorial. You are now ready to go out into the world and create web pages! Enjoy yourself! Have fun! Remember, though, this is just a basic tutorial, try our other courses on other aspects of HTML, follow the links below for more information.