asp is fun


HTML Tips and Techniques
Using IMG SRC and Images



The old adage "a picture is worth a thousand words" is certainly true. If someone is reading a recipe, they love to see what the final dish would look like. A description of a chickadee is all fine and dandy, but a photo of one really gets across what the bird looks like. Pictures, if done well, enhance any article and bring life to any description.

So how do you add pictures to a webpage?

First, the simple mechanics. Get a picture or photo you enjoy, either from a clip art source or from your own scanner or camera. Save this file as a JPG or GIF format file - other formats cannot be seen by most browsers.

When you save the file, try to save it in the size you are actually going to use. If you save a picture that is 10000 pixels by 10000 pixels, it will have to download that entire file to the end user even if they only see a small 50 pixel by 50 pixel version of it. Most graphic/paint programs have a "resize" option so you can say exactly what size you want the picture to be.

Now, the picture needs to live on the web. Nobody will be able to see it if it only lives on your hard drive! There are many sites on the web which let you store images, including the one where you are planning on building yoru webpage. Use the tools you are given to move your graphic files onto your web account. So far so good. Your picture is on the web, and waiting to be used.

Now, when youīre writing your page, you need to put in a code to tell where your image is going to go. The syntax for that code is:

<IMG SRC="picturename.jpg">

To align with text: <IMG SRC="picturename.jpg" align="left"> will align your picture in and at the left of your text. Insert the image tags immediately before the beginning of the text you would like to align the image with.

For example, to achieve this result-

TurkeyItīs hard to imagine that a mere 100 years ago, the Wild Turkey in the US was in danger. Overzealous hunting had driven the native bird, once considered by Benjamin Franklin to be the ideal national bird, into dangerously low numbers. However, conservation in the past century has helped the Wild Turkey regain a steady footing across the continent.

This is the what the code looks like: <IMG SRC="https://lisashea.com/birding/encyc/turkey/turk1.jpg" ALT="Turkey" ALIGN="left">Itīs hard to imagine that a mere 100 years ago, the Wild Turkey in the US was in danger. Overzealous hunting had driven the native bird, once considered by Benjamin Franklin to be the ideal national bird, into dangerously low numbers. However, conservation in the past century has helped the Wild Turkey regain a steady footing across the continent.

To align an image to the right of text, simply insert "right" in place of "left" and follow the example above. You would, of course, replace the image URL with your own, and the width and height size as well. (Size dimensions are not required, but will help browsers to know exactly how much space to alot for an image as it loads the page. As well, by using alt="?" and inserting a title or description of the image you are providing added information for search engine spiders - again, itīs not required.)

For stand alone images: To center the image in the middle of the article, place the image URL between
and
tags. Also, itīs best to place the image within a table so you can be sure it will not overlap any text, as sometimes happens when pages are viewed in some browsers. To do that you would insert the following tags in your article where you would like the image to sit:

<center>
<table>
<tr><td>
<IMG SRC="http://yourimage.url" ALT="title of image" HEIGHT="-" WIDTH="-"></td>
</tr>
</table></center><br>
Itīs hard to imagine that a mere 100 years ago, the Wild Turkey in the US was in danger.

The result looks like this:
Turkey
Itīs hard to imagine that a mere 100 years ago, the Wild Turkey in the US was in danger.

Thatīs it! Just say where the picture actually is, decide how you want to display it, and now the picture will appear in that spot in your article. Try to use pictures sparingly - even small ones take some time to download, and many of our users have extremely slow connections. Iīm sure youīll find that they liven up any page, though!

Lisa's HTML Tips and Techniques Homepage

Other Sites by Lisa
ASP Code & Help Java Code & Help Gaming Walkthroughs