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.

WHAT’S NEXT?

Present datasets with HTML Tables.

Join Our Newsletter Today

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

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.

Leave a Reply

12 Comments on "Add Images on HTML"

Notify of
avatar
Sort by:   newest | oldest | most voted
Ruby skalski
Guest

What’s up to all, it’s genuinely a pleasant for me to pay a visit this web site,
it consists of helpful Information.

Jonna
Guest

This site certainly has all of the information and facts I needed about this subject and didn’t know who to ask.

Ebony Crommelin
Guest

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!

Kristin Dolling
Guest

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!

Erica Vincent
Guest

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

Martha Nevarez
Guest

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!

Raleigh
Guest

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!

Becky McBride
Guest

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

Ethan
Guest

These are genuinely great ideas in on the topic of blogging.
You have touched some nice things here. Any way keep up wrinting.

Young Lennon
Guest

Appreciate the recommendation. Let me try it out.

Nilda
Guest

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!

Karen
Guest

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.

wpDiscuz
DON’T MISS OUT!
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.
Subscribe
SUBSCRIBE NOW