WELCOME!!

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

We now have a simple web page with a text, an image, a background color and image, title, break lines, a font of our choosing and colored and bold text. In this lesson, we will learn how to make links. We will also learn how to create a folder.

Now, let's get to work!

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

We will start our lesson with linking. Links are what enables you to "travel" online from one web page to the next. It also enables you to post an email address on your web page. We will learn about linking to sites not on your website, first.

All links begin with an anchor tag. That tells the PC what to do and where to do it. If you wanted to link to my domain site, your tag would look like this:

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

The part inside the quotation marks after, a href=, is what changes should you want to put in another link. For example, if you wanted to link to my web space on Freeservers, the code would look like this:

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

That is what your code will look like, on your webpage, it will look like this:
Visit AmeriYank's Website

You can change the words to anything you like, for example, if you didn't want to say, "Visit AmeriYank's Website", you could say, "AmeriYank's Site", or anything else you want that you wouldn't be embarrassed to have on the net.

Your code might look like this:

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

On your webpage, it will look like this:
AmeriYank's Site

You can also use images to link to other places. Your image should not be 600 pixels, wide, however. Suppose you wanted to use this image as your link:

Your code would look like this:

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

and on your page it will look like this:

click on it to visit my site, if you like.

You can place links anywhere you like on your web page. If you added the links above at the bottom of your existing practice page, your code page would look like this:

Now, please, save your page.

Next we will learn how to create email links with and without a pre-made subject line. This is so easy it's pathetic!!

To create a link to an email address, just write your code like this:

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

The code on your page will not be in yellow. INstead of "Send me email" you can have whatever words you like.

Now, suppose you have a lot of pages and you want to put an automatic subject line into the email.

Your code would look like this:

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

Make SURE you add the _ after each word in the subject line. If you type Send Me Email and NOT Send_Me_Email, when the person actually sends you mail, your subject line in the actual email will appear like this:
Send20%Me20%Email

And THAT gets hard to read after a while.

If you wanted to use this image, your code might look like this:

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

it would appear on your page like:

If you added a subject line, it would still appear like the above on your page, but your code would look like this:

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

Of course, when you place the code on your page, you will change the part that says myemail@address.com to the email address you want the email to go to, for example, name@aol.com or name@yahoo.com or whatever the address actually is.

So, now, under our links to other websites, we will add email links, one text without a subject line, and one image with a subject line. Your new page code will look something like this:

Please save your page. Also, place the graphic image you are using for your email graphic into the same folder as your page. You should now have 3 graphic images in the same folder as your page code. Those images are: the background image, an image just for show, and the email image.

Load your page code and the 3 graphic images to your web space.

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

Next week we will learn about linking to things within your web space. To do that, you will need to create some folders and some new pages. Soooooooooooo...

Step 1 is to rename the page above to index.html
To do this, open Notepad and find the page. Then go to "File", "save as" and name it index.html.

Step 2 is to create a folder WITHIN the folder you have all your page stuff for this class.
Name that folder "folder1". Now, create a simple web page--one without any images--but put in anything you like. Name it, page1f.html

Step 3 is to create a folder WITHIN folder1. Name that folder "folder2". Next create another simple web page (make it slightly different from the one above) and name it , page2f.html.

When you are done, your folders should look like this:

(my main folder for this class is called HTML Tut, yours will be whatever you named it.)

The inside of your folder1 should look like this, you will NOT have the red lines around your folders. I put them there so you could easily see the folders and what should be in them. Do not worry about the names on the other folders you see here--it's just stuff that is in my PC:

The inside of your folder2 should look like this, again, I added the red box to make it easier for you to see what should be in your PC.

Next week we will link our pages together within our web space. We will also create folders on our web space, using our WS FTP program.

End of Lesson Four.

HAPPY CREATING!

HOME

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

Back to Lesson One    Back to Lesson Two

Back to Lesson Three    On to Lesson 5

On to Lesson Six   On to Lesson Seven

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