Understanding Images in HTML

Before we dive into the world of HTML images, let's imagine a scenario. You're trying to explain to a friend about a beautiful painting you saw at a museum. You can say it was large, colorful, and abstract, but words alone won't do it justice. If you could show a picture of that painting to your friend, it would convey a much clearer understanding, right? This is exactly what images do to your HTML pages. They add the 'visual' element to your webpages, enriching the user experience.

The Image Element in HTML

In HTML, an image is not inserted as a text or document but through an HTML element called <img>. This is an empty element, meaning it doesn't have a closing tag like <p> (paragraph) or <h1> (heading 1).

A basic image tag in HTML looks like this:

<img src="URL">

The src attribute is the most important attribute of the <img> tag. It specifies the source of the image file that you want to display.

Finding the Source of the Image

The source specified in the src attribute can be a URL or a file path. Here is an example of an image tag where the source is a URL:

<img src="https://example.com/path/to/image.jpg">

In the above example, the image is hosted on a different website. The URL in the src attribute points to the location of the image file on the internet.

If the image is hosted on the same website, you can use a relative file path in the src attribute. Here's an example:

<img src="/images/image.jpg">

In this case, the image file image.jpg is located in the images folder in the root directory of the website.

Adding Alt Text to Images

An important attribute we should always include in the <img> tag is the alt attribute. This attribute provides alternative text for an image if it cannot be displayed. This could be due to a broken URL, the image file is not found, or the user is using a screen reader due to visual impairment.

Here's an example of using the alt attribute:

<img src="/images/image.jpg" alt="Description of Image">

Changing the Size of Images

To change the size of an image, we use the width and height attributes in the <img> tag. These attributes set the width and height of the image respectively and their values are specified in pixels.

Here's an example:

<img src="/images/image.jpg" alt="Description of Image" width="500" height="600">

In the above example, the image will be displayed with a width of 500 pixels and a height of 600 pixels.

Aligning Images on the Page

Sometimes, you might want to change the position of the image on your webpage. You can use CSS styles to align your image. For instance, to center an image, you can use the following code:

<img src="/images/image.jpg" alt="Description of Image" style="display: block; margin: auto;">

In the above example, display: block; makes the image behave like a block-level element (like a paragraph), and margin: auto; will automatically adjust the margins on each side of the image to center it.

Summary

Images are an important part of making your HTML pages visually appealing and informative. By using the <img> tag and its attributes like src, alt, width, height, and CSS styles, you can control where the image comes from, how it looks, and where it is positioned on your webpage.

Remember, every beautiful painting needs a canvas and in the world of HTML, your webpage is the canvas! Happy coding!