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.

29 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
  • 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

Leave a Reply

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