Home / Articles / Programming languages / Markup languages / HTML & CSS / Inserting images in HTML

Inserting images in HTML

Inserting images in HTML
 
Inserting images in HTML
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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.

sample

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.

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.

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.


 

Read also

Graphics formats in HTML

Graphics formats in HTML

Image size in HTML

Image size in HTML

Aligning images in HTML

Aligning images in HTML

Image map in HTML

Image map in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation