Support This Site

WELCOME!!

This is Lesson Two of "AmeriYank's HTML Tutorial".

 

Last time, we made a simple web page with a text line and an image. In this lesson, we will add a background color and give our page a title. We will also learn how to create break lines, choose a font, and add color to our text.

Now, let's get to work!

Your completed page from last week should look something like this:

<HTML>

<BODY>

This is my first lesson in creating a web page. Please be patient with me.

<img src="nameofimage.gif">

</BODY>

</HTML>

 

Open up your saved page from last week, or one similar if you do not have the same one.

Now, you want to give your page a title. That means we need to add a <HEAD> and a <TITLE> tag to our work. New tags will appear in blue and in bold. The <HEAD> section of a web page has many tags you can put in. But, for now, we are just adding a title to our page. Between the <TITLE> and the </TITLE>, name your page anything you like. But try to keep it under 10 words.

So, the code you need to add to your page goes directly underneath the <HTML> tag and looks like this:

<HEAD>

<TITLE>My First Webpage</TITLE>

</HEAD>

Your new web page code, now looks like this:

<HTML>

<HEAD>

<TITLE>My First Webpage</TITLE>

</HEAD>

<BODY>

This is my first lesson in creating a web page. Please be patient with me.

<img src="nameofimage.gif">

</BODY>

</HTML>

 

OK, so now you have a title, some text and an image. But what about a little color in the background? If you use Paint Shop Pro, you can easily get the codes for millions of colors by opening the color pallette and looking for the HTML code number. For example, white is #FFFFFF, black is #000000. It always has the # in front of the number. Some browers understand English and will take "white", "black", "yellow" and a few others. But to get a full range of colors, you will want to learn some code.

Let's say you want to have a orange-brown background color, you would add this code to the body tag:

bgcolor="#CB4503"

So, now your web page code looks like this:

<HTML>

<HEAD>

<TITLE>My First Webpage</TITLE>

</HEAD>

<BODY bgcolor="#CB4503">

This is my first lesson in creating a web page. Please be patient with me.

<img src="nameofimage.gif">

</BODY>

</HTML>

 

Unless you "tell" the computer to show a different font, the text defaults to "New Times Roman", unless the owner of the computer viewing the web page has told his/her computer to show something else.

Also, whoever is viewing your web page needs to have the font you are telling the computer to display in their computer, or the default will be the one shown. In other words, if you code your web page to show a font called "Great Gatsby" and the person viewing your page does not have that font, then the computer will show the default font.

In addition, you can change the color and size of the text in the same tag. So, we will make our page show "Arial" as the font (most computers have it), in the color white, in size 2 type. Our code goes directly in front of the text. It looks like this:

<font face="arial" size="2" color="#FFFFFF">

Font tags need to be closed. We close is AFTER the text like this:

</font>

Added to our page it looks like this:

<HTML>

<HEAD>

<TITLE>My First Webpage</TITLE>

</HEAD>

<BODY bgcolor="#CB4503">

<font face="arial" size="2" color="#FFFFFF">

This is my first lesson in creating a web page. Please be patient with me.

</font>

<img src="nameofimage.gif">

</BODY>

</HTML>

 

That done, you want to make a break in the text. To do that, you add a break tag. Break tags do not need to be closed. You just write

<br>

where ever you want the break to be. If you put in <br><br>, you page will look like double-spaced type. In other words, you will get a new line for every <br> you put in. We are going to put a break in our text and two break between the last text line and the image.

Our new page looks like this:

<HTML>

<HEAD>

<TITLE>My First Webpage</TITLE>

</HEAD>

<BODY bgcolor="#CB4503">

<font face="arial" size="2" color="#FFFFFF">

This is my first lesson in creating a web page.<br>
Please be patient with me.

</font>

<br><br>

<img src="nameofimage.gif">

</BODY>

</HTML>

 

Now, save your page, just like you did last week. To see what the page we have created looks like, go here.

Remember to download and install the WS_FTP LE 5.08 program, so we can learn how to use FTP in class. Go to:

http://tucows.igs.net/preview/424.html

and download WS_FTP LE 5.08

Then install the program in your computer.

End of Lesson Two.

HAPPY CREATING!

 

HOME

Mary, Madonna and Blessed Virgin Mother and Jesus
Designs for Tsunami Relief.

Design and Sell Merchandise Online for Free

 

Back to Lesson One   On to Lesson Three

On to Lesson Four   On to Lesson Five

On to Lesson Six   On to Lesson Seven

On to Lesson Eight   On to Lesson Nine   On to Lesson Ten