Web Development

Add Images on HTML

Add Images on HTML is the section 8 of Beginner’s Guide to HTML.

To make your content more colorful and attractive, it is necessary to add one or more images in your content. It is one way of catching readers on to your content. So in this section we’ll try to add images on a HTML document. So here comes the tag who is going to support us to do that.

is an empty element. Which means it doesn’t come as a pair of opening and closing tags. Using attributes we can define what image need to display and how it need to display.

src Attribute

To display an image on a HTML page, you need to use the src attribute. It stands for “source”. The value of the src attribute is the URL of the image you want to display.

[code language=”html”] ""

The URL points to the location where the image is stored. If you see, file name of my image is HTML-image_superman-logo-300×225.png  and it is stored in the http://www.letsdnd.com domain and directory of  wp-content/uploads/2014/08. So my URL is http://www.letsdnd.com/wp-content/uploads/2014/08/HTML-image_superman-logo-300×225.png

If you can remember the base tag we discussed in the previous section HTML Head, we can define our base tag as

[code language=”html”] alt Attribute

This attribute comes in handy when the image cannot be displayed. Due to low bandwidth sometimes images are not displayed. Also it can be happened when the images are moved from the stored location and URL been not updated according to it. Even when the user read it from a screen reader, where the images are not displayed. This attribute means alternate text. It is a required attribute in the image tag. You can put a any text as the attribute value.

[code language=”html”] Height and Width Attributes

Your image file have a specific width and height. But using height and width attributes you can change how it would display in the web browser whatever the height and width the file have. If you see my superman logo image size is 300*225.  So here I’m going to change that. I’m setting width as 100 pixels and height as 75 pixels. See how the same image file become so smaller.

[code language=”html”] "Superman Superman Logo

So let’s try to do some workout with images.

Let’s Tryout Images

How to put images within text paragraphs.

[code language=”html”] Superman Logoa fictional character that appears in comic books published by DC Comics, and is considered an American cultural icon.

You need to learn little bit of CSS to make this perfect. As we cover CSS in another tutorial we keep this here.

Different image formats and sources

[code language=”html”] "Superman Superman Animate

So here I put a image format called gif. It’s an animated image format. You can display any kind of image formats in the image tag. And also check the src attribute. It’s not our domain name. I had getting the image from a another source. But be careful when you do something like this on your web page. If the source has moved into another place, your image becomes a broken link. So always put your images on your server rather than referring other servers.

Using Maps

Now we’re going to do a interesting thing. For this we need other two elements.
and empty element

See what happens. Following is a one image. Left part of it has Batman and right part of it has Superman.  If you move your mouse over to the image, your cursor becomes a hand. Which means now the image becomes a link. But here is the trick. When you click at the batman it will take you to the Batman website and right part will take you to the Superman. Nice work! isn’t it?

Superman And Batman

Batman Superman

Let’s look how it was done.

[code language=”html”] "SupermanIn the image tag, we had a attribute called usemap. The value of it is the name of
element with a # character. We map this image into two areas of links. One area is for Batman and other is for Superman. Both the area shape is rectangle and it defines as a attribute of area tag. shape=”rect”. It can be a circle, polygon or the entire image shape. From the coords attribute we define the coordinates of the area shape. Other attributes, I guess you already know.

In this section we learned how to add images on your content to make the content more fabulous. We learned few tricks of mapping an image to several links. So in the next section we are going to learn how to present datasets nicely.


Present datasets with HTML Tables.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.