Inserting images in HTML

To insert an image into a document use the img tag, that has a required parameter src, which defines the address of a file with picture and alt that defines the alternative text.

The general syntax for inserting an image, as follows.

<img src="URL" alt="alternative text">

Closing tag is not required. URL (Universal Resource Locator) is the path that points to the graphic file. To specify this path you can use absolute or relative address.

Let us take a look at a couple of ways to specify path to an image on your web page. For example, an image shown below, is called pic.gif and is stored in the folder images in root of the site.

If before the address there is slash (/), it means that the beginning is in the root of the site. For example, in address - http://example.com, by specifying the path to the image /images/pic.gif, we tell the server to show file http://example.com/images/pic.gif. Note that these links with slashes work only in the web server, on your local computer this doesn't apply.

If before the address there is protocol http (http://), this indicates absolute link. The image will always be loaded from the specified address in the Internet, even if you save the web page to your computer.

Two periods with a slash (../) before the address indicate that the image and the web page are in different folders, which are on the same level. Figure 1 shows the file index.php, where you need to insert image pic.gif. Then the relative path to the image from index.php will be ../images/pic.gif. When storing files this way, it may happen that the process of addressing one another takes form of sequences of two periods and slashes, for example: ../../../images/pic.gif.

Fig. 1. File storing sample.

The name of the folder in the beginning of the path, without slashes and two periods, indicates that the current file and the folder with an image are on the same level. As shown in figure 2, the relative path to the image pic.gif from the file index.php is images/pic.gif.

Fig. 2. File storing sample.

Example 1 shows several ways to add a picture to a web page.

Example 1. Inserting image into a document.

<img src="http://example.com/images/pic.gif" alt="This is absolute address of an image">
<img src="/images/pic.gif" alt="This is image address relative to the root of the site">
<img src="images/pic.gif" alt="This is image address relative to the current HTML document">

Typically, the graphics file formats are GIF and JPEG.