HTML Images Tutorial with Stone River eLearning

When we are talking about web pages, one of the first things that come to our mind is all the images we see on the internet. Be it a sports star, a Hollywood celebrity or a big politician, pictures of them circulate day in and day out in the social media and across online news portals. Have you ever wondered how these images are posted on the internet? How are images actually uploaded on a webpage or an HTML document?

Uploading images on a webpage requires a very simple command, however; the important thing is to arrange and adjust that image on the webpage such that it appears beautiful and relevant.  The <img> is used to put up an image in the HTML document. However; just like it was in the case of the anchor tag discussed in the blog post on the links between HTML documents, the “<img>” tag holds little significance without the “src” attribute used alongside.

While we have already discussed the “img” element, the “src” element is used to specify the url of the image. Before we go ahead, let us look at a simple example of an image being displayed on an HTML page.

Eg:

<!DOCTYPE html>

<html>

<head>

<meta charset =”UTF-8”>

<title> Image Display </title>

</head>

<body>

<img src = “abcd.jpg” > 

</body>

</html>

 

Note:

The name of the image can be directly specified if it is present in the same folder as the HTML document. However; in case the image lies in a different folder, we must specify the complete location of the file. The complete location is available in the properties of the image, from where it can be copied to the HTML document.

That’s it? We just have to use the “<img src>” tag and we can put any image on the HTML webpage in whatever way we want? Well, the answer is yes and no. Yes, we can put any image on the HTML document and subsequently on the web browser by using the “<img src>” tag, however; it might not be in the way we want it to look like. To ensure that the image looks exactly of the size we want, we can use some other attributes along with the “<img src>” element.

Eg:

<!DOCTYPE html>

<html>

<head>

<meta charset =”UTF-8”>

<title> Image Display </title>

</head>

<body>

<img src = “abcd.jpg” height =”300” width=”300” alt=”The picture of a Lion” > 

</body>

</html>

 

Note:

  1. In the above example, the width and the height attributes are used to specify the width and height of the image to be displayed.
  2. It is important to note that the width and height attribute are used inside the “<img src>” element and the input given to these two attributes are in pixels.
  3. You can also give the input to the width and the height attribute in terms of percentage. Giving the input in terms of percentage, commands the web browser to multiply the size of the image to that percent and then display it on the screen. Thus you can both decrease and increase the size of the image by this function.
  4. The “alt” attribute used in the end is of great utility as sometimes the web browsers fail to load the image from the HTML document.
  5. The “alt” attribute, or the alternate text, displays the text mentioned in it in place of the image, in case the image fails to load on the browser. If the image loads successfully on the browser, the alternate text is not displayed. Therefore, using alt text is a good practice as it keeps your web page prepared for any adverse situations.
  6. Since the alternate text gets displayed when the image is not loaded, it is important to keep the text short, but more importantly highly relevant and explanatory.

 

Download the source code here:http://bit.ly/1LWBFFt

GET YOUR FREE HTML EBOOK!

(Visited 72 times, 1 visits today)