Web Design Course – Part 8 – Using Images In HTML

We’ve covered the following HTML & CSS topics,

  1. HTML Text Elements
  2. List Items
  3. Anchor Tags or Hyper Links

Today, we’ll cover the most important HTML tag i.e; Image tag. Image tag is defined as <img> in HTML.

It is a famous saying that a picture says thousand words. Same goes for the websites. Website can be differentiate by the quality of images it is using. Attractive images make an average-looking site engaging one. One must think of image as the reflection of thousand words described in a single piece of artifact. Most of the time, Web Developers use images to define things clearly with using less effort in writing long paragraph. Images work well in such kind of situations as they describe great many things in an easy way.

Now, we all know the importance of using images, same way we understood why images help Web Developers in creating their sites. Let’s now move to the actual usage of images in HTML by writing few code snippets.

SYNTAX FOR IMAGE TAG:

<img src="imagepath" alt="image alter text" title="any kind of title for image" height="image height in numbers" width="image width in numbers" />

ABOUT IMAGE TAG:

<img> tag adds image to your web page and it is called the standalone-tag as it ends without any ending tag. Sometimes it is also called Empty Tag which also means that there is no closing tag. Image tag has many attributes but the following are the most common ones.

HTML Code:

<img src="Website-Designing-OnlineITGeek-8.png" alt="Website Desiging OnlineITGeek" title="Using Images In HTML - Website Designing OnlineITGeek" height="250" width="500" />

RESULT:

 

1. SRC

This attribute contains the value of the image path where the image is being stored. It can be a relative URL of image on your own site or absolute URL pointing some external URL on server other than ours.

2. ALT

This attribute defines the text for image that is relevant to image and helps when the image is not properly loading or loaded.

 

3. TITLE

This attribute displays the additional image of the image when mouse is hovered over it. Mostly when you hover the mouse over the image, it will show a small tooltip containing detail of image.

4. HEIGHT

This attribute defines the height of the image in pixels

5. WIDTH

This attribute defines the width of the image in pixels

Note: Height and Width attributes are now being used very less and instead Web Developers are giving height and width to images in CSS.

EXTRA IMPORTANT NOTES:

  1. If you are developing website from scratch, it is recommended that you always put images in a separate folder. Folder names could be “img”, “images”, “image” or so on.
  2. In case of extremely big website project you are dealing, you should make subfolders inside images folder to separate logos, sliders, icons and general images etc.
  3. Images should be very fit to the color theme you are using on your website.
  4. Images should deliver or shows the relevant information.
  5. Images should be clear and easily understandable. Blur and low quality images always lead to the bad user-experience.
  6. Remember three rules for images before using on your website,
    1. The format of images should be right one
    2. The size of images should be according to the section of website where you want to put image
    3. Last but not the least, resolution of image should be defined carefully.

CONCLUSION:

Images play a very vital role in website designing. It helps web designers to explain things in an efficient way. It is recommended that you try all the techniques described in this tutorial and ask any query related to web development and web designing.

46 thoughts on “Web Design Course – Part 8 – Using Images In HTML

  • February 25, 2019 at 9:00 pm
    Permalink

    you are in reality a excellent webmaster. The site loading speed is incredible.
    It kind of feels that you’re doing any unique trick.
    Furthermore, The contents are masterwork. you’ve performed a wonderful job
    in this topic!

    Reply
  • February 26, 2019 at 12:31 pm
    Permalink

    Excellent way of describing, and nice post to get data on the topic of my presentation subject, which i am going
    to deliver in university.

    Reply
  • March 10, 2019 at 1:02 pm
    Permalink

    Hi my friend! I want to say that this article is awesome, great written and include almost all significant infos.

    I would like to look more posts like this
    .

    Reply
  • March 16, 2019 at 8:43 pm
    Permalink

    I truly love your site.. Excellent colors & theme. Did you build this site yourself?
    Please reply back as I’m planning to create my own personal website and would love to learn where you got
    this from or what the theme is named. Cheers!

    Reply
  • March 22, 2019 at 10:38 pm
    Permalink

    This website was… how do you say it? Relevant!!

    Finally I’ve found something that helped me.
    Cheers!

    Reply
  • March 28, 2019 at 9:24 am
    Permalink

    I like the valuable info you provide in your articles.
    I will bookmark your weblog and check again here frequently.
    I am quite sure I’ll learn a lot of new stuff right here!

    Best of luck for the next!

    Reply
  • March 29, 2019 at 2:22 pm
    Permalink

    Hello! Do you know if they make any plugins to safeguard against hackers?
    I’m kinda paranoid about losing everything I’ve worked hard on. Any recommendations?

    Reply
  • April 4, 2019 at 5:27 am
    Permalink

    If you want to get a great deal from this article then you have to apply such strategies to
    your won weblog.

    Reply
  • April 6, 2019 at 11:12 am
    Permalink

    Hello there! This article could not be written any
    better! Looking through this post reminds me of my previous roommate!
    He always kept talking about this. I most certainly will
    forward this post to him. Pretty sure he’s going to have a great read.
    Many thanks for sharing!

    Reply
  • April 8, 2019 at 5:40 am
    Permalink

    Great blog here! Additionally your web site quite a bit up very fast!
    What web host are you the use of? Can I get your associate link in your host?
    I want my website loaded up as fast as yours lol

    Reply
  • April 8, 2019 at 8:58 am
    Permalink

    Everything is very open with a very clear description of the
    issues. It was really informative. Your site is very useful.
    Thank you for sharing!

    Reply
  • July 3, 2019 at 1:56 am
    Permalink

    I?¦ve read a few good stuff here. Definitely price bookmarking for revisiting. I surprise how much attempt you place to create the sort of magnificent informative web site.

    Reply
  • August 25, 2019 at 7:57 pm
    Permalink

    Normally I don’t learn article on blogs, however I would like to say that this write-up very compelled me to take a look at and do so! Your writing style has been surprised me. Thanks, very great article.

    Reply
  • August 29, 2019 at 10:41 am
    Permalink

    Good day very cool site!! Guy .. Excellent .. Wonderful .. I’ll bookmark your website and take the feeds also…I am happy to seek out numerous useful info right here within the post, we want develop extra strategies on this regard, thank you for sharing.

    Reply
  • August 29, 2019 at 3:11 pm
    Permalink

    I really like your writing style, great information, regards for posting :D. “Let every man mind his own business.” by Miguel de Cervantes.

    Reply
  • November 16, 2019 at 10:45 am
    Permalink

    I am sure this piece of writing has touched all the internet
    viewers, its really really good article on building
    up new web site.

    Reply
  • November 16, 2019 at 3:29 pm
    Permalink

    Hey There. I found your blog the usage of msn. This
    is a very well written article. I’ll make sure to
    bookmark it and come back to read more of your helpful information. Thank
    you for the post. I will definitely return.

    Reply
  • November 25, 2019 at 8:15 pm
    Permalink

    I am really impressed with your writing skills and also with the layout on your weblog.
    Is this a paid theme or did you customize it yourself?
    Either way keep up the excellent quality writing, it is rare to see a
    great blog like this one today.

    Reply
  • December 7, 2019 at 3:06 pm
    Permalink

    Great post. I will be dealing with a few of these issues as well..

    Reply
  • December 16, 2019 at 6:48 am
    Permalink

    I enjoy what you guys are usually up too.
    This kind of clever work and coverage! Keep up the great works guys
    I’ve included you guys to my personal blogroll.

    Reply
  • December 20, 2019 at 4:17 am
    Permalink

    I do not even know how I ended up here, but I thought this post was good.
    I don’t know who you are but definitely you are going to a famous blogger if you are not already
    😉 Cheers!

    Reply
  • December 22, 2019 at 11:57 am
    Permalink

    Hello i am kavin, its my first occasion to commenting anyplace, when i read this piece of writing i thought i could also create comment
    due to this good post.

    Reply
  • January 14, 2020 at 10:00 pm
    Permalink

    Howdy! Do you know if they make any plugins to safeguard against hackers?
    I’m kinda paranoid about losing everything I’ve worked hard on. Any recommendations?

    Reply
  • February 15, 2020 at 7:07 am
    Permalink

    Hi there, i read your blog occasionally and i own a similar one and i was just curious if
    you get a lot of spam feedback? If so how do you protect against
    it, any plugin or anything you can recommend?

    I get so much lately it’s driving me mad so any assistance is very much appreciated.

    Reply
  • February 15, 2020 at 6:15 pm
    Permalink

    magnificent points altogether, you simply received
    a logo new reader. What could you recommend in regards to your put up that you made a few days ago?
    Any positive?

    Reply
  • February 25, 2020 at 7:48 am
    Permalink

    This is very interesting, You’re a very skilled blogger. I have
    joined your feed and look forward to seeking more of your magnificent post.

    Also, I have shared your web site in my social networks!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *