Make your own free website on Tripod.com
 
 
 
 

TG 404 Home | Html Home | Color Wheel | Color Chart | Basic Images
Basic Text | Basic Body | Basic Links | Basic Tables | View Source

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:

<img src="1874INCobv1.jpg">

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.



<center><img src="1874INCobv1.jpg"></center>

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:

    <img src="1874INCobv1.jpg" height="45" width="44" alt="Image of the obverse of an 1874 Indian Cent">

    Image of the obverse of an 1874 Indian Cent

    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

    TG 404 Home | Html Home | Color Wheel | Color Chart | Basic Images
    Basic Text | Basic Body | Basic Links | Basic Tables | View Source


    Site Copyright 2001 by Tailgunner404 All rights reserved
    Page posted June 1, 2001

    Disclaimer
  •