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.

WHAT’S NEXT?

Present datasets with HTML Tables.

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.

12 Comments

Leave a Reply
  1. Woah! I’m really digging the template/theme of this site.
    It’s simple, yet effective. A lot of times it’s tough to get that “perfect balance” between user
    friendliness and visual appearance. I must say you’ve done a excellent job with this.
    Also, the blog loads super fast for me on Internet explorer.
    Excellent Blog!

  2. Have you ever thought about adding a little bit more than just your
    articles? I mean, what you say is fundamental
    and all. But imagine if you added some great graphics or video clips to give your posts
    more, “pop”! Your content is excellent but with pics and video
    clips, this site could undeniably be one of the very best in its field.
    Fantastic blog!

  3. That is really interesting, You’re an excessively skilled blogger.
    І hаve joined yoսr feed and look ahead to in quest of extгa of your magnificent
    post. Also, I’ve shared your website in my social networks

  4. It is the best time to make some plans for the future and
    it is time to be happy. I have read this post and if I could I desire to suggest you some interesting things or suggestions.
    Maybe you could write next articles referring to this article.
    I want to read more things about it!

  5. I like the valuable info you provide in your articles.
    I will bookmark your weblog and check again here regularly.
    I’m quite certain I’ll learn many new stuff right here!
    Good luck for the next!

  6. Nice blog! Is your theme custom made or did you download it from somewhere?
    A design like yours with a few simple tweeks would really make my blog shine.
    Please let me know where you got your theme. With thanks

  7. Wow, superb blog layout! How long have you been blogging for?
    you made blogging look easy. The overall look of your web site is magnificent,
    let alone the content!

  8. This is very fascinating; you’re an exellent professional blog owner.
    I have acxtually joined yor feed and look onward to looking for more of your superb posts.
    Likewise, I have actually discussed your internet site in my social networks.

Comment Below