Images and Links

Background Images

In this lesson we will discuss images and how you align them, and how you can add a background image to your web page.  First, lets learn how to add a background image to your web page, instead of a background color.  Here is a background tile that you can upload in your file manager now.  Right click, save to your hard drive, and upload it. 
Now, in your body tag, we will put the background image, and when the page is loaded, you will see this background tiled all over your page.  This is what you will put in your body tag:

<body background=”bkg110.jpg” bgcolor=”#C0FFC0″>

Now save your page, upload it in your file manager, and view the page.  You should see the background image on your page.


Images

The internet is a very visual medium, and images are, as they say, “worth a thousand words.”  Say you have an awesome picture that you want to use to illustrate your page.  How do you insert it?  And how do you align it and put it where you want it to go on your page?

First of all you will need an image.  You can download this picture of my Mom and Dad’s house, or use on of your own from your computer.  If you use this one, right click on the picture, and choose “save picture as” and save it to a folder on your computer.  I have the right click function enabled on this page.  Why do I have the right click disabled on some of my pages?  It would be easier for you to just copy and paste the code, wouldn’t it?  Yes, but I want you to learn how to actually write your own code…  But go ahead and copy this picture, but try to remember the name of the image. You can save it as it is, image6.jpg or give it it’s own name.  For now, save it as image6.jpg :

Now, open your file manager on your web server.  Find the file that you just saved, and upload it.  Open your sample.html page in your Notepad.  This is what you should have:


<html>
<head>
<title>SAMPLE WEB PAGE</title>
</head>
<body bgcolor=”#C0FFC0″>
<center>
<font face=”Comic Sans MS” size=”+2″ color=”#0000FF”>
This is my first web page.</font>
</center>
</body>
</html> 


Every thing that is loaded into your file manager, whether it is a page, or an image or a sound file has either an absolute address, or a relative address.  An absolute address is the complete url, such as for this page, you would type in http://www.heartcrygraphics.org/tut3.html.  If you type that url into the address bar or search box, the page would come up in your browser on your computer.  Once those files are on your web server, and those files are inside your web site, you can just type in the relative address, which is the file name.  If I wanted to access this page from one of my other pages, I could link it to “tut3.html”.  If I have an image in my server, do I have to put http://www.heartcrygraphics.org/image6.jpg in my link?  The answer is NO… Just put in “image.jpg” in your link and it will show up on your page.

So, under the body tag on your html document, we are going to add the image file that we have uploaded.  An image tag always starts with <img src=” … “ with the name of your image file in the place of ” … “.  Then we also need the height and width of the image.  This defines the image, and helps the image to load faster.  The next item that you will always see is the border attribute.  You can put a border around your image, and define how big that border will be.  And you need an “alt” attribute in the image tag.  The alt tag gives the browser a text description of the picture if the browser fails to pull it up, or if the browser that the visitor to your page does not allow images.  There are some browsers that are text only, and then they will read an “alternative text” for the picture.  We need to put all of these values in your “img tag.”

<img src=”Image6.jpg” width=”267″ height=”200″ border=”0″ alt=”house”>

Load your page in your file manager, and view your changes.  Change the border to 2, save it, upload the new version in your file manager, and see how it changes again.  Now you will have a border around your house picture.

Move your mouse over the image, and you should see a text box with the words “house”, the same words that you put in the alt tag.

Now let’s center out picture.  Do you remember the <center> and </center> tags that we centered our text with?  Put a <center> tag in front of the “img” tag, and the closing </center> after the “img” tag, to close it out.  Whenever you use a <center> tag, you have to use the matching </center> tag.  This is what you should have in your sample.html Notepad:


<html>
<head>
<title>SAMPLE WEB PAGE</title>
</head>
<body bgcolor=”#C0FFC0″>
<center>
<img src=”Image6.jpg” width=”267″ height=”200″ border=”2″ alt=”house”>
</center>
<center>
<font face=”Comic Sans MS” size=”+2″ color=”#0000FF”>
This is my first web page.</font>
</center>
</body>
</html>

Now your image should be centered on your page.  If you want it to the right, change “center” to “right”.

Add a Comment

Your email address will not be published. Required fields are marked *