Support This Site

WELCOME!!

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

 

In this lesson, we will learn how to add little touches to our code to make our pages load a bit faster, get rid of unsightly borders, and all the little "whatnot" thingies we did not learn before in our look at basic HTML. Most of them will have to do with the image tag or IMG.

For example, in our image link to my web site, our code looks like this:

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

on our web page it shows like this:

Kind of ugly the line around the image is, isn't it? Well, that just won't do, so we just have to add a little something to our code to make it go away. Sooo, into your IMG tag, add:

border="0"

The IMG tag will now look like this:

<IMG src="ameributton.jpg" border="0">

All gone the border uglies!

If, however, you want a border around your image, just add a number (between 1 and 5 is best) into where the 0 is above.

Now, if you add height and width specifications to your IMG tag, your image appears to load faster. Does it really load faster? No, but your visitors will think it does. Moreoever, it has become standard practice, so, if you are trying to get a job doing someone else's web page, and if they have been given a list of things to look for in web design code, you better know how to do this.

The code to add to the IMG tag is simple, but you have to know the dimensions of your image. How can I find that out, you ask? For that you will need to open your Paint Shop Pro program.

In versions 6 and below, open the image you want to add to your page. Then go to "View", then "Image Information".

In version 7, go to "Image", then "Image Information".

Both ways will open a pop-up window for you. Make sure you are on the tab that says "Image Information". I added the red circle to the screen shot below. The area inside the circle is where you will find the height and width measurements to add to your IMG tag. In the illustration below, the image is 106 x 106. The WIDTH is the FIRST measurement, the HEIGHT is the SECOND.

The ameriyank.jpg image is 88 pixels wide, and 31 pixels high. Sooooo, your width and height codes in your IMG tage will be:

width="88" height="31"

when added to the IMG tag, your new code will look like this:

<IMG src="ameributton.jpg" border="0" width="88" height="31">

Now, a very long time ago, when using images on the web was a brand-new thing, not all browsers could see the images. So, it became common place to add what is called "alt" comments to the IMG tag. These comments will show in place of an image until it shows. Now, most people can see the images in their browsers--unless they have a very old one, and if their browser is that old, they probably need a new computer, too. So, the use of ALT comments for that purpose is pretty much outdated. HOWEVER, for some reason search engines pick up on them. And that can get you a higher ranking in a search engine, if you are doing a business page. It's also good practice to get into.

To add an "ALT" comment to your code, simply write alt="now some discriptive words", in the case of the image we are using to link to my site, we will use the words "AmeriYank's logo". So, your new IMG tag will look like this:

<IMG src="ameributton.jpg" border="0" width="88" height="31" alt="AmeriYank's logo">

Your ALT comments can be as long as you want. But it is best to keep it to two or three good, descriptive words.

Now your page code 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="exampleth.jpg" target="new"><IMG src="example.jpg"></a><br>
Click on above picture to see it actual size.<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>

<IMG src="ameributton.jpg" border="0" width="88" height="31" alt="AmeriYank's logo">

<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>

 

The next cool thing you might want to consider adding to your code are comments. "What are comments?", you ask, well, comments inbetween your tags will help you figure out months later just what is what.

When you create a web page, it is just a bunch of code you type. Now, suppose you went away on a long vacation. And months later you want to take out one part of the page and add another in it's place. If you have a lot of code, it can take HOURS to find just the place you were looking for. So, we can add comments to our page to remind us what in the *&%(^$ we were doing originally.

Comment tags look like this:

<!--these are my comments-->

You can place any words you like where I wrote "these are my comments". Just remember to use the part in yellow EXACTLY as it appears above, so your comments do not appear on your web page, just in your code. You will know if you have done it incorrectly because you will be able to see some, or all, of your comments on your web page.

So, let's say you want to find the link and image to my web site on your page in a hurry. Your code might look like this:

<!--AMERIYANK'S WEB SITE LINK-->

And you would put it above or below the IMG tag we have been working on this lesson. It's really entirely your call. YOU have the POWER!! (smile)

Soooo, your new page would look 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="exampleth.jpg" target="new"><IMG src="example.jpg"></a><br>
Click on above picture to see it actual size.<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>

<!--AMERIYANK'S WEB SITE LINK-->

<IMG src="ameributton.jpg" border="0" width="88" height="31" alt="AmeriYank's logo">

<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>

 

OK, now, one last little trick before we call this lesson done. It's called the
&nbsp;
use is EXACTLY as it appears above to make spaces between words and images. If you want one space the code is:

&nbsp:

Two spaces would be:

&nbsp;&nbsp;

and so on, for as many spaces as you like. For example, say you have two text links that you want to appear side by side, but not run into each other. For example, you want the links to my site next to your email link. Your code would look something like this:

<a href="http://www.ameriyank.com">Visit AmeriYank's Site</a>&nbsp;&nbsp;<a href=:"mailto:me@aol.com">Email Me</a>

If you used image links, your code, including comments, would be much longer, and would look like this:

<!--Code for AmeriYank and email-->

<a href="http://www.ameriyank.com"><IMG src="ameributton.jpg" border="0" width="88" height="31" alt="AmeriYank's logo"></a>&nbsp;&nbsp;<a href="mailto:me@aol.com"><IMG src="cross2mail.jpg" width="100" height="50" border="0" alt="email image"></a>

Let's add them both to our page near the bottom, just so we can see what it looks like.

<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="exampleth.jpg" target="new"><IMG src="example.jpg"></a><br>
Click on above picture to see it actual size.<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>

<!--AMERIYANK'S WEB SITE LINK-->

<IMG src="ameributton.jpg" border="0" width="88" height="31" alt="AmeriYank's logo">

<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>

<a href="http://www.ameriyank.com">Visit AmeriYank's Site</a>&nbsp;&nbsp;<a href="mailto:me@aol.com">Email Me</a>

<br><br>

<!--Code for AmeriYank's and email-->

<a href="http://www.ameriyank.com"><IMG src="ameributton.jpg" border="0" width="88" height="31" alt="AmeriYank's logo"></a>&nbsp;&nbsp;<a href="mailto:me@aol.com"><IMG src="cross2mail.jpg" width="100" height="50" border="0" alt="email image"></a>

</FONT>
</P>

</BODY>

</HTML>

 

To see what your new page looks like, click here.

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

Back to Lesson Five   On to Lesson Seven

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