HTML Images

In HTML we use <img> tag to denote an image. The img tag does not have a closing tag. And it take src attribute whose value is the URL of the image.

Example of an img tag is given below. It will denote the dyclassroom logo.

<img src="/image/dyclassroom-logo-black-311x48.png">

alt attribute

The alt attribute is used to specify an alternative name for the image if it fails to get displayed. Example is given below.

<img class="img-responsive" src="/image/dyclassroom-logo-black-311x48.png" alt="DYclassroom Logo">

The width and height of the image

We use the width and height attribute inside the img tag to define the image width and height. The value of width and height attribute can be in pixels or percentage. Following is an example of image width and height in pixels.

<img class="img-responsive" src="/image/dyclassroom-logo-black-311x48.png" alt="DYclassroom Logo" width="311" height="48">

Animated Image

We can use GIF file in the img tag to have an animated image.

<img class="img-responsive" src="/image/topic/photoshop/animate-banner/Animate-Banner.gif">

Image link

We can create image link by enclosing the img tag inside the anchor tag a. Following image link when clicked will redirect to the HTML Introduction page.

<a href="/html/html-introduction"><img src="/image/dyclassroom-logo-black-311x48.png"></a>

Image Border

We can add border to the image by adding the border attribute to the img tag. The value of the border attribute is in pixels.

<img src="/image/dyclassroom-logo-black-311x48.png" border="5">