This section of the html guide shows you how to add a picture or image to a web page.

Images/pictures must be uploaded to your web hosting account before they can be used on your web site.

1. Basics

The below html example is all you need.

<IMG SRC="image.gif">

The IMG html tag is used to add an image to a page.

The SRC attribute defines the source of the image. Replace image.gif with the your image's filename.

For example, our logo was added to this web page :

2. Additional attributes

2.1 Border

A border can be added to an image using the BORDER html attribute.

<IMG SRC="image.gif" BORDER="2">

This adds a border two pixels wide around the image :

2.1 Size

Images can also be resized, or you can specify their actual size (which is good practice) in your html.

<IMG SRC="image.gif" WIDTH="175" HEIGHT="20">

This will display the logo image as being 175 pixels wide and 20 pixels high, using the WIDTH and HEIGHT html attributes. Here, it shows the logo at half size.

2.1 Alt Tag

This html tag specifies text to be shown instead of an image for those who can not view images. Some browsers can not display images and this may help the visually impaired to better understand your web page.

<IMG SRC="image.gif" ALT="Our Picture">

The ALT html attribute will substitute our logo with the text 'Our Picture' for those who can not view it.

3. Advanced usage

Images can be used in html in other ways and one could add more attributes. This html tutorial/guide is intended to help beginners who need a place to start.