Tailgunner404

Basic Images Tutorial

Okay here is how to put an image on your page. Starting with your basic page:

<html>
<head>
<title> (Type a title for your page here) </title>
</head>
<body>
</body>
</html>

Now let's add an image. An image requires an "image" tag
<img src="xxxyy.gif">

All you have to do is insert the path of the image file and it will load on your page. Here is an example:

This tells your computer where to look for the file and which file to get. Lets try it...using the example above we get the following image.

So now what? How about we move it to the center of the page.

All I did here was enclose the image tag with a center tag...notice that I enclosed the "image" tag with an <center> (opening tag) and a </center> (closing tag). Remember to close all of your tags! The page will look so much better.

The "image" tag can have several attributes besides "src". Here are the others:

height
width

The "height" and "width" attributes should always be used so that the browser will know how much of the screen to reserve for the image. This allows the text portion of the page to load quickly even if the graphic is large. So include the size for faster loading.

alt

The "alt" allows for "alternate" text incase someone it surfing with images turned off or is handicaped and using a text reading browser. This allows them to know what was in the large blank space on the screen.

title

The "title" tag allows you to place text with your image that will display when you palce the cursor over the image. This and the "alt" let you place more keywords on your and let users learn more about your page.

Here is the "image" tag used in the picture below:

Place the cursor over the image. See how the "alt" attribute works.

Okay that's enough for now.

Click Here for next tutorial.

Return to Top

Click Here to contact Tailgunner404

Disclaimer