comment Add Comment
Posted on Last updated

HTML Images

Hello, and welcome to this unit of our HTML course series. In this unit, we are going to learn how to insert images and link them appropriately in HTML and it is titled HTML Images. The HTML <img> tag is used to put an image in an HTML document. The contents of this unit are:

  1. Using The <img> Tag,
  2. Using The alt Attribute, and
  3. Setting The Height and Width 

References:

HTML img Tag – Tutorialspoint

So, let’s begin the lesson on HTML images:

Syntax for Adding HTML Images

The <img> tag is used to define images in HTML. This is how it is written;

<img src=”file:///C:Desktop/image.jpg” alt=”image_keyword” width=”100″ height=”80″>
    Explanation of The Code
  • From the table above, the src attribute placed after the <img> tag refers to as the source of the image.
  • The text between the quotation marks specifies the path / address of the image you want to include in your site.
  • The alt attribute is used to add a description to the image. This is very important for search engines to use for indexing your website.
  • The width and height attributes are used to specify the width and height of your image for better positioning and display on your website.
  • Removal of the alt attribute and heights and widths will still display your image though it is important to include for search engine optimization. This helps your site to get traffic from search engines when people search for keywords relating to your alt attributes.
  • It is very good to use images on your site but please make sure the size is not too big to help speed the loading of your site.

Please note that when linking to images, you should use the exact source of the image else your image wouldn’t show. 

This brings us to the end of HTML Images. See you in the next lesson.


Leave a Reply

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