HTML - Images & Pictures

Images are a staple of any web designer, so it is very important that you understand how to use them properly. In order to place an image onto a website, one needs to know where the image file is located within the file tree of the web server -- the URL (Unified Resource Locator).

Use the <img /> tag to place an image on your webpage. Like the <br /> tag, <img /> tag does not require a formal ending tag. Instead, all we need to do to close this tag out with a slash (/) placed just inside the ending bracket (/>).

<img src="Img/html.png" width="100px" height="100px" />

HTML Image

So that you can follow along with us, we've provided a global URL of an image we have stored on Tizag's web server. If you have an active connection to the internet, you should be able to use the URL in the example to render this image on your own web page. If not, you will have to download (right click the image and Save As...on a PC, control-click and Save on a Mac). Once saved to your local computer, point the image src attribute to the recently downloaded image file. It might help to save the image file in the same folder as your web page.

HTML - Image src Attribute

The source attribute (src) is what makes an image tag display an image. An image source is a URL value and should point to the directory location of an image file. Let's take one more look at the code from our first HTML image example.

<img src="Img/html.png" />

An image source value is essentially the URL of a picture file and tells the web browser where the image is located so that it can then display the image correctly.

HTML - Source URLs

Image source URLs can be either local or global, meaning that the picture files you wish to display on your website can be either hosted locally on your machine (local) or hosted elsewhere on some other web site domain (global).

• Global: http://www.myitworld.info/img/htmlT/html.gif
• Local: Img/html.gif

Local URLs are relative to the file path of the web page itself. For example, if the picture file is placed inside the same directory as the web page, then the local URL for the image would simply be the name of the image, since it is residing in the same directory as the HTML page.

Local URLs Explained

Pictures must reside on the same web host as your .html file in order for you to use local URLs. A URL cannot contain drive letters such as C:\, since a src URL is a relational interpretation based on the location of the.html file and the location of the picture file. Something like src="C:\www\web\pics\" will not work.

Each URL format has its pros and cons. Using the URL of pictures on other sites poses a problem if the other site happens to change the physical location of the picture file. Copying the file directly to your web server solves this problem. However, as you continue to upload picture files to your system, you may eventually run short on hard drive space. Use your best judgment based upon your situation.

HTML - Image Height and Width Attributes

Height and width are HTML attributes that define an element's height and width properties. These values can either be percentage-based (%) or rely on pixel sizes.

<img src="sunset.gif" height="50" width="100" />

HTML - Alternative Attribute

The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find the image, or if a user has image files disabled in their web browser settings. Text-only browsers greatly depend on the alt attribute since they are not capable of displaying pictures.

<img src="http://myitworld.info/Img/abc.gif" alt="My IT World" />

The alt attribute is also an attribute that search engines may look for when displaying images. The text value contained within this attribute must reflect the substance of the image in order to receive "credit" from a search engine.