Images in HTML

Images in HTML: Images can be used in HTML documents. HTML code for displaying images is: <img src=”path/to/” alt=”Image Name”>

Links are very useful way in HTML to display graphical images and pictures. Today, most websites use images from header to footer in various ways and manners to add colour and appeal to their websites themes.

With HTML <img src> we can link to images and use them in place of text. The use of images can also be extended by using them in place of anchor text e.g. what we see on You tube and similar websites are image anchors that are linked to the actual videos.

HTML code  for displaying images from same folder:

HTML Image upload code

HTML Image upload code

Output of the HTML code above:

HTML 5 Logo

HTML 5 Logo



pigeon

pigeon


Understanding the Link Images Code of HTML :

Let us now break the code into pieces to understand what it does.

  1. ‘ <img>’ tells HTML that it is going to call an image file.
  2. ‘Src=’ gives the path or address where that image file is kept.
  3. The link is the key thing because it will always vary depending upon where the image file is kept; however,  if the image is in the same folder then you need to mention the name of file and its extension only. But if the image is found elsewhere then you need to write complete address leading to that folder where the file is lying.
  4. ‘Alt’ tells the browser to describe the text alternative for the image if it is not loaded due to any reasons. So the ‘alt’ text is basically the alternative text in place of the image. This text will print on the user browser window if the browser fails to load the image.

HTML code <img src> for displaying images from different folder within the same directory:

Let us assume that the image we are referring to is lying in some other folder named “images”; what we need to add is the trailing slash preceded by the folder name. The below code has the addition of “images/” to tell the browser to look for the images file in the folder named “images”. Additional dots and trailing slashes would explain the location of folder from the level of execution of the webpage.

<img src=”images/HTML5-Logo.PNG” alt=”HTML 5 Logo”>

HTML Image <img src> controlling Width and Height:

We can control what size an image should appear regardless of an image’s actual dimensions. The below image has dimensions of 200×200 pixels but we shall display it as image of 100×100 pixels.

HTML Code for controlling and changing the width and height of an image:

<img src=”HTML5-Logo.PNG” alt=”HTML 5 Logo” width=”100px” height=”100px”>

Result of the above code:

HTML code <img src> for displaying images URL or another website:

This is possible to link to images on other websites; provided, those websites allow it, hotlink is not enabled, and you have the permission to use them. The below HTML code may be used in this regard:

<img src=”https://studybee.net/images/HTML5-Logo.PNG” alt=”HTML 5 Logo” width=”100px” height=”100px”>

We have to provide complete URL defining each path to the images i.e.

  1. Website address e.g. “ www.studybee.net”
  2. Parent and subdirectory where the image file is lying e.g. “ /images/”
  3. The image name and its extension “HTML5-Logo.PNG”.

————————————————————————————————————————————————

Like the way we teach? Recommend us on social media and promote this tutorial.

Leave a Reply