top left
The HTML Source Logo

Top Right
 Getting StartedHow Do I...TroubleShootingPromotionContact Us
advanced search

Getting Started
HTML Cheat Sheet
Webmaster Tools
HTML Help Forum
Color Codes
Link to us

How do I add images to my web page?

Who doesn't like looking at a web page with nice graphics? With out graphics, there would be just text, and that would be down right boring...

How to do it

The first step is getting your image (obviously). Remember it should be either a .gif or .jpg image, and fairly small. If you choose large, great quality graphics, they will take long to load, and visitors to your site may leave.

The next step is to upload your image, onto your web site's server. Most web servers such as Angelfire or Tripod have a File Upload feature built into there site. This is where you go to get your image onto your web site's server. Since each web server is different, if your having trouble uploading your images, you may want to contact your server provider.

O.K. so you have your image uploaded onto your server, now it's time to do some coding.

To add an image to your web page, place the following code where you would like the image to appear on your web page:

<img src="yourimagehere.gif">

Just replace yourimagehere.gif with the actual name of the image you want to appear.

This will create a basic image, like so:


Now this is all well and fine, but there are a few other things you SHOULD add to your image tag. The reason I say should, is because you don't have to add them, but it does help:

<img src="yourimagehere.gif" width="000" height="000" alt="describe the image here">

Now just replace 000 for the width and height with the actual dimensions of your image. To find the dimensions of your image, just right click on the image, in the pop up menu that comes up choose properties. In the Properties dialog box, look down the list for dimensions, it should give a number like 123 x 213 pixels, or whatever the dimension's of your image are. The first number will be the width of the image, and the second the height.

Go ahead, try doing this on the clown above.

Next replace the describe the image here with what you want the image to say when you place your mouse over the image, for example place your mouse of the clown and leave it there for a second, a message will come up.

How does this help you ask? Good question.

The height and width attributes help your page load faster. When you go to a web page, the browser has to find out what the dimensions are of your images. So if you place this information in the image tag it self, the browser wont have to go find the dimension's, and load your web page faster.

The alt attribute helps out the user's who use TEXT ONLY BROWSERS. TEXT ONLY BROWSERS are exactly what you think, they only display text, no images, so when a user goes to your page with one of these browsers, instead of seeing nothing, they'll see the info thatís in your alt tag.

The alt attribute also helps you score higher in search engines.


Company   |   Careers   |   Partners   |   Advertising   |   Help
Privacy Policy   |   Trademark Notices   |   User Agreement
© 2001, INC. All Rights Reserved.

Site hosted by Build your free website today!