HTML Tutorials

Adding Images!

HTML Tutorials
By Jeffrey J. Walters

       So you want to add some images to your web page. Bold colorful images are sweeping the web. Lines, buttons, balls, pictures, banners; they are everywhere you surf. Amazingly enough adding them to your web page is the easy part. Creating unique, personal, quality images for you web page is usually the hard part. Luckily, there are plenty of sources on the Web which can provide you with free images.


Adding Images:

       The HTML code for adding the image is a simple one liner; the <IMG> command. There are over a dozen attributes or options which may be added to this command, but to keep things simple I'll only go over a couple. Suppose we want to add an image named "image.gif" to our page.

The code looks like this.

<img src="image.gif" alt="" border="1">

Notice that the SRC option specifies the name or location or the image file. It can be a relative or exact URL address. In the case above, the image file would need to be place in the same directory as the HTML page file. Remember, you will need to FTP transfer (or HTTP if your hosting / dedicated server provides it) both your image file and your HTML file to your web page directory.


The ALT Attribute:

       An attribute that you might not think does much is the ALT option. Believe it or not, there is a small percentage of web surfers who can not view images. By adding the ALT attribute you will be able to describe in text what they are missing. It's courtesy for people who's browser does not support images. Most browsers also display this information while the image is loading. Here's what the above example code would look like with an ALT attribute.

<img src="image.gif" alt="My Masterpiece!">

The WIDTH and HEIGHT Attributes:

       You can also specify the image's WIDTH and HEIGHT. If the width and/or height are not the actual image dimensions then the image will be scaled to fit. For example, let us take our masterpiece and stretch it across the screen a little.

This is the code that made it.

<img src="image.gif" width="500" height="50" alt="">

       Pretty strange looking now, isn't it? The actual WIDTH and HEIGHT are 100 pixels by 100 pixels. This doesn't look very good for this image, but using the WIDTH attribute on an image of a line can be very useful.

       One more comment on image WIDTH and HEIGHT. By using WIDTH and HEIGHT with every image, it will make your page seem to load faster. It will allow the viewer's browser to format the page quickly, without having to load each image. People will be able to read the text on your page as your image files load. Don't make people wait to view the content of your page! Always use the WIDTH and HEIGHT options.


Link to this Tutorial!

Did you find this tutorial helpful? If so, please help me to share it with others by linking to it. Just place the HTML code below onto your own Web page to create a link to this tutorial.


Bookmark this Tutorial!

Bookmark this tutorial page on your favorite Social Bookmarking site.





[ Page Created December 12, 1997 ] [ Last Updated May 24, 2008 ]
Copyright ©1997-2017 Jeffrey J. Walters. All rights reserved.