HTML Images

❮ Prev Next ❯

Images are a big part of any Web page. It helps to drive your point across and helps to get your site visitor's attention. How do you insert images into your page?

You need to use this code: 

<img src="imagefile.jpg"/>

Take a note that you should use the full URL of the image if it is not hosted on the same directory as your HTML document.For example: 

<img src="http://www.whereisyourimage.net/imagefile.jpg"/>

The "src" and "alt" Attribute

The <img /> tag introduces an image, the attribute "src" or source allows you to point to your image file as we saw in the above example. The "alt" attribute stands for alternative text. This is what shows up when the image cannot be shown for some reason (slow Internet connection or server is not responding). 

<img src="http://www.whereisyourimage.net/imagefile.jpg"  alt="Image Description here"/>

It is very important that you should fill in the "alt" attribute. At the very least, it would give people an idea what the image is all about, even if they are not able to see it.

However, the alt attribute, which is most often mistakenly called the alt tag, also serves other purposes.

  • A blind person accessing your Web site via a screen reader will hear the alt attribute, allowing him or her to "see" the image you have included in your page.
  • Text­based browsers and search engine spiders will be able to read the alt attribute.

Speaking of search engines, the "alt" attribute can also help to make your page or at least your image rank higher in search engine results pages. There is even speculation among SEO professionals that putting your keywords in the "alt" text actually has more weight than putting your keywords in the title or header tags. Also, image search services, such as Google Images, Yahoo Image Search and Bing Images, use the "alt" attribute.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <h1>Images Tag</h1>
      <img src="../../images/tutorial-banners/html-banner.png"  alt="HTML Language Image"/>
    </body>
</html>

The width and height attributes

When inserting an image, it would be a good practice to specify the width and height of the image. This way, the browser will know just how much space to leave for your image. This means that even though your image does not load right away, the page will still be properly laid out as if the image has already completely loaded

It is also important to use the right proportions so that your image does not look distorted. For example, if you have an image that is 200 pixels wide and 200 pixels high, specifying a width and height of 200 pixels and 100 pixels respectively will result in the page showing a deformed image.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <h1>Images Tag</h1>
      <img src="../../images/tutorial-banners/java-banner.png"  alt="Java Programming Image"  width="200px"  height="200px"/>
    </body>
</html>

In this example, we're setting the width of the image to 200 pixels and the height to 100 pixels.

Align your images

It is also important to align your images. For example, you can have an image displayed at the center of the paragraph, or you could have it flushed to the right.

You could do this using the align attribute.

  • To align your images to the left, use<img align="left">
  • To align your images to the right, use<img align="right">
  • To align your images to the middle, use<img align="middle">
  • To align your images to the top, use<img align="top">
  • To align your images to the botton, use<img align="botton">

You could still, however, use CSS to align your images by using the following syntax:<img style="float: right"> in order to align your image to the right.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <h1>Images Tag</h1>
      <img src="../../images/tutorial-banners/cpp-banner.png"  alt="C++ Programming Image"  width="200px"  height="200px"  style="float: left;"/>
      <img src="../../images/tutorial-banners/java-banner.png"  alt="Java Programming Image"  width="200px"  height="200px"  style="float: right;"/>
      <img src="../../images/tutorial-banners/python-banner.png"  alt="Python Programming Image"  width="200px"  height="200px"  style="float: middle;"/>
      <img src="../../images/tutorial-banners/javascript-banner.png"  alt="JavaScript Programming Image"  width="200px"  height="200px"  style="float: top;"/>
      <img src="../../images/tutorial-banners/php-banner.png"  alt="PHP Programming Image"  width="200px"  height="200px"  style="float: botton;"/>
    </body>
</html>

There are several attributes that can be used with the image tag to specify various aspects of the image, such as its size, position, and source. Here are some commonly used attributes:

  • title: Provides additional information about the image when the user hovers over it.
  • style: Allows you to add CSS styles to the image, such as setting its width, height, or float.
  • class: Specifies a class name to apply to the image for styling purposes.
  • id: Specifies a unique identifier for the image, which can be used to target it with CSS or JavaScript.

Absolute or Relative Path of Image

The "src" attribute can be set to an absolute or relative URL. An absolute URL includes the full path to the destination of image, including the protocol (http or https). A relative URL specifies the path to the destination of image relative to the current document.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <h1>Images Tag</h1>
      <img src="https://www.example.com/image.jpg"  alt="Java Programming Image"  width="200px"  height="200px" />
      <img src="../../images/tutorial-banners/java-banner.png"  alt="Java Programming Image"  width="200px"  height="200px" />
    </body>
</html>

In the first example, we're using an absolute URL to specify the image source, which is located on a server or website.

In the second example, we're using a relative URL to specify the image source, which is located in a folder named "images" in the same directory as the HTML file.

the image tag in HTML is a powerful and versatile tool for displaying images on a web page. By using its various attributes, you can specify the source, size, position, and other properties of the image to achieve the desired effect.

Picture tag:

The picture tag in HTML is a newer element that allows you to provide different image sources for different display scenarios, such as different screen sizes or device types. Here's an example of how to use it:

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <h1>Images Tag</h1>
    <picture>
      <source media="(min-width: 768px)"  srcset="../../images/random-images/dog.jpg" />
      <source media="(min-width: 480px)"  srcset="../../images/random-images/dog.jpg" />
      <img src="../../images/random-images/dog.jpg"  alt="Small Dog Image" />
    </picture>
    </body>
</html>

In this example, we're using the "picture" tag to provide three different image sources. The "source" elements specify the image source and the media query that should be used to determine when to use it. The "img" element provides a fallback image source that will be used if none of the "source" elements match the display scenario.

The "srcset" attribute is used to specify multiple image sources at different resolutions or sizes, allowing the browser to choose the best one to use based on the display scenario.

Using the picture tag can help improve the performance and user experience of your website by providing the most appropriate image for each display scenario.

both the background-image property and the picture tag are useful tools for working with images in HTML and CSS. The background-image property is used to set an image as the background of an element, while the picture tag allows you to provide different image sources for different display scenarios.

Working with Image is one of the essenstial for someone who is learning to design web site, I have put almost everything you need to work with image, now lets see what is Favicons in the next chapter.

❮ Prev Next ❯