Support This Site

WELCOME!!

This is Lesson Five Part 1 of "AmeriYank's HTML Tutorial".

 

We now have a simple web page that is pretty much complete. Web sites, however, are a series of linked web pages. So, how do we do that?

Last week, you were instructed to create two additional web pages, very simple ones with different colored backgrounds and some text. You were instructed to create two folders in your computer, in the same folder where you now have your web page. Name the first folder "folder1" and the second folder "folder2". Then name one of your new web pages "page1f.html" and place it into folder1. Name the second web page "page2f.html" and place it into folder2. Please do not add spaces. It should be "folder1", not "folder 1", and "folder2", not "folder 2". And use all lower case letters.

What difference does that make? HTML needs to be very exact when it comes to things like folders and page names. Using lower case at all times when you name a graphics image, page or folder will make you LESS likely to make a typo and mess up your site. Also, NEVER, EVER name ANYTHING you are going to put on a web site with spaces between it.

Why? Well, remember last week when I told you to put in a _ between each word you want in your email subject line, because if you do not, the computer will make your "Send Me Email" look like "Send20%Me20%Email". With folder and file names it is even worse if you leave spaces. As I said, links need to match EXACTLY. If your file name is "file.html" and you link to it with "File.html", your link will not go where you want. In fact, you will probably get an error message.

If you were to name folder1, "folder 1", and then, create a link to it that said "folder 1", the computer will save your page link as "folder20%1", and the link will not work. Confused? I don't blame you. Simple way is to just name your folders, pages and graphics in lower case with no spaces. You will thank me later for this advice.

Now, let's get to work!

Your completed page from the last lesson should look something like this:

<HTML>

<HEAD>

<TITLE>My First Webpage</TITLE>

</HEAD>

<BODY bgcolor="#CB4503" background="orangetex.jpg">

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

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

</font>

<br><br>

<img src="nameofimage.gif">

<br><br>

<a href="http://www.ameriyank.com">Visit AmeriYank's Website</a>

<br><br>

<a href="http://www.ameriyank.com">AmeriYank's Site</a>

<br><br>

<a href="http://www.ameriyank.com"><IMG src="ameributton.jpg"</a>

<br><br>

<a href="mailto:myemail@address.com">Send me email</a>

<br><br>

<a href="mailto:myemail@address.com?subject=Send_Me_Email"><IMG src="cross2mail.jpg"></a>

</BODY>

</HTML>

 

Now, we are going to add links from your main page to the page in folder1 and the page in folder2. Please open the HTML page in Notepad that you were hav been working on.

We are going to take a tiny bit of time here to learn a new code, the paragraph code, or <P>. It allows you to add a new paragraph by adding a <P> instead of <BR><BR>. And, unlike the <BR> tag, it allows you to specify how you want your page aligned. You must close it with a </P>.

If you want your page aligned to the left, you do not need to do anything. Just write in:
<P>
Then your text, then:
</P>

If you want your text centered, you can do it like this:

<P align="center">
Then you text, then:
</P>

If you want your text aligned to the right, you would write your code like this:
<P align="right">
Then your text, then:
</P>

OK--so we have decided that we want to add a new paragraph and center it for our links to the other pages. AND, we want to haev a new font face. So, at the bottom of your main page, after all the email links and everything from last week, but BEFORE the </BODY> tag, write:

<P align="center">
<FONT face="Lucida Blackletter" size="2">

<a href="./folder1/page1f.html">to folder1 page1</a>
<br>
<a href="./folder1/folder2/page2f.html">to folder2 page2</a>

</FONT>
</P>

It will show up on the web like this:

to folder1 page1
to folder2 page2

IMPORTANT NOTE: there is a . in the code above. It tells the computer to look into folders for links. It goes IMMEDIATELY AFTER the a href=" it is difficult to see on this page, but it is VERY imporant to your code.

So, now, your completed page looks like this:

<HEAD>

<TITLE>My First Webpage</TITLE>

</HEAD>

<BODY bgcolor="#CB4503" background="orangetex.jpg">

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

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

</font>

<br><br>

<img src="nameofimage.gif">

<br><br>

<a href="http://www.ameriyank.com">Visit AmeriYank's Website</a>

<br><br>

<a href="http://www.ameriyank.com">AmeriYank's Site</a>

<br><br>

<a href="http://www.ameriyank.com"><IMG src="ameributton.jpg"</a>

<br><br>

<a href="mailto:myemail@address.com">Send me email</a>

<br><br>

<a href="mailto:myemail@address.com?subject=Send_Me_Email"><IMG src="cross2mail.jpg"></a>

<P align="center">
<FONT face="Lucida Blackletter" size="2">

<a href="./folder1/page1f.html">to folder1 page1</a>
<br>
<a href="./folder1/folder2/page2f.html">to folder2 page2</a>

</FONT>
</P>

</BODY>

</HTML>

Please save your page. When it you view it, it will have three different fonts. One for the text you wrote in originally, and then closed. New Times Roman should be the default for the link to my website and the email links we did last lesson (we closed the font tag on the text, so the computer will place the default font here, which is usually New Times Roman). The third font will be whatever you chose for this week's lesson, in my case above, it is Lucida Blackletter.

Now, open page1f.html in Notepad. You will have already chosen your own background color and text color. You may have chosen a font as well. Whatever you created is fine. We just want to have something to link to that is different from the page we have been working on the past few lessons. My page1f.html looks like this:

<html>

<head>
<title>Page1f</title>

</head>

<body bgcolor="#800000" text="#ffff80" link="#0000ff" vlink="#400040" alink="#c0c0c0">

This is the page inside folder1.

</body>

</html>


I now want to add links to mydoggie5.html and the page in folder2. So, I will add before the </BODY> tag:

<br><br>
<a href="./folder2/page2f.html">folder2 page2</a>
<br>
<a href="../mydoggie5.html">My doggie</a>

NOTE WELL: there are TWO . in the link which leads to mydoggie5.html. It's the proper way to tell the computer to look for a link OUTSIDE of the folder you are linking from. One . will tell the computer to look INSIDE.

Your new page2f.html will look something like this:

<html>

<head>
<title>Page1f</title>

</head>

<body bgcolor="#800000" text="#ffff80" link="#0000ff" vlink="#400040" alink="#c0c0c0">

This is the page inside folder1.

<br>
<a href="./folder2/page2f.html">folder2 page2</a>
<br>
<a href="../mydoggie5.html">My doggie</a>


</body>

</html>

Please save your page and make sure it is in folder1.

Now, open page2f.html in Notepad. Again, it doesn't matter what is on the page, just that it is different from page1f.html and from your main page. My page2f.html looks like this:

 

<html>

<head>
<title>Page2f</title>

</head>

<body bgcolor="#ffff80" text="#800000" link="#0000ff" vlink="#400040" alink="#c0c0c0">

This is the page inside folder2.

</body>

</html>

 

We want to link to two files OUTSIDE of this folder, so our code will look like this:

.<br>
<a href="../page1f.html">folder1 page1</a>
<br>
<a href="../../mydoggie5.html">My doggie</a>

NOTE WELL, AGAIN: there are 2 sets of ../ leading to mydoggie5.html. This tells the computer to look OUTSIDE the existing folder, and OUTSIDE the next level folder and into the main web space.

You new page2f.html will now look like this:

<html>

<head>
<title>Page2f</title>

</head>

<body bgcolor="#ffff80" text="#800000" link="#0000ff" vlink="#400040" alink="#c0c0c0">

This is the page inside folder2.

<br>
<a href="../page1f.html">folder1 page1</a>
<br>
<a href="../../mydoggie5.html">My doggie</a>


</body>

</html>

 

You now have a three page web site.

To see what the main page we have created looks like, go here.

This is the end of Part 1 of Lesson 5. Part 2 will show you how to add folders to your web site and load the pages to the right folders. This requires me to use very large graphics to illustrate the procedure. The next page will take a long time to load because of it. So, please bear with me.

Lesson 5 Part 2

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    Back to Lesson Two

Back to Lesson Three    Back to Lesson Four

On to Lesson Six   On to Lesson Seven

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