Adding Images

Any image you are going to use on a Web page must be located on an Internet accessible server (host). Although your computer accesses the Internet, for the most part it is not accessible from the Internet. If you want images to appear on your page, you will need to upload your images to a server/host and insert them with HTML. Images can be placed on your page for decoration, or even used as backgrounds!

Always crop or resize your images before uploading them to your host. You can use HTML to resize your images but this can cause blurry or distorted graphics. We recommend downloading Irfanview. It is very easy to use and works well for a freeware program.

The <img> Tag

To begin coding an image you will start with the <img> tag. There is no end tag for the image tag. Inside the tag you will want to place attributes of the <img> tag. The first attribute is src="x". You have to state the location (this is the same as the URL or address) of the image file in relation to your Web page. Take a look at the following examples.

Image located on a server different than the HTML document using an absolute URL.

<img src="http://www.kdwebpagedesign.com/img/sample.gif">

Image and HTML document on the same server using an absolute URL.

<img src="img/sample.gif">

When adding images to your auction templates, store pages, "me" page, or forum posts you must use the absolute URL since your HTML is on eBays server, and your images are on your server.

Other attributes for the <img> tag include width="x", height="x" and alt="x". It is not necessary to use the width="x" and height="x" attributes as they are meant to be a "placeholder" while the image loads. The alt="xx" attribute is used to add a short description of what the image is. This attribute is required according to WC3 standards and is becoming more important with search engines.

Although it is usually not recommended (unless you are using a transparent image as a spacer) you can resize your images by changing the values. Be sure to make the changes proportional.

    

<img src="img/image_resize.gif" alt="Sample Image">

<img src="img/image_resize.gif" width="100" alt="Sample Image">

<img src="img/image_resize.gif" width="100" height="50" alt="SampleImage">

Aligning Images with Text

If you want to align your image with some text, you will use the align="x" attribute with "left or right". You can separate your image from your text with the horizontal space attribute hspace="x".

<p><img src="img/image_resize.gif" alt="Sample Image" align="left" hspace="6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Borders and Images

To place a border around your image you use the border="x" attribute. If you are using the image as a link and do not want a border around your image, you would make the attribute value 0. You can not change the border color using HTML. If you wish to change the color of the border you must use CSS.

<img src="img/image_resize.gif" border="2" alt="Sample Image">

TIP: Where do you find images for your page? They are literally everywhere. Try doing a Yahoo or Google search for "free graphics" or "free backgrounds". There are hundreds of sites that offer free images. If you see something on someone's personal page that you really like, please ask permission first. It may be copyrighted, and just is bad "Netiquette". In no time you'll have tons of images to use on your page! KD Web Page Design offers many different free background tiles to choose from. Check out our Mix-and-Match Backgrounds

IMPORTANT: Do not EVER EVER EVER direct link an image from someone else's server unless you have that persons permission. This is considered image and bandwidth theft. And always remember to get permission to use the image. Just because an image is on the Internet does not mean it is public domain.

 TO TOP