Understanding HTML Images

When you are learning programming, one of the first things you will encounter is how to add images to your websites. This is done through HTML, the backbone language of the web. In this blog post, we'll go through how to add images in HTML.

The Basics of Images in HTML

To add an image to a webpage, we use the <img> tag in HTML. Tag is just a term used in HTML to describe a piece of code that performs a specific function. Think of HTML tags like verbs in a sentence - they tell the browser what action to perform.

Here's an example of the <img> tag:

<img src="image.jpg">

In this case, src (which stands for source) is an attribute that tells the browser where to find the image file. The value of the src attribute is the URL (Uniform Resource Locator - just a fancy term for web address) of the image you want to display.

Using a Local Image

When the image file is stored on your own computer, it's called a local image. To use a local image, you need to give the src attribute the file path (the location of the file on your computer) instead of a URL. Here's an example:

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

In this case, the file path is images/my-image.jpg. This means that the image file named my-image.jpg is stored in a folder named images in the same directory as your HTML file.

Using an Image from the Web

When the image file is stored somewhere on the internet, you need to provide the src attribute with the full URL of the image. Here's an example:

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

In this case, the URL https://example.com/image.jpg is the location of the image on the web.

Adding Alternative Text

The alt attribute is used to provide alternative text for an image. This text will be displayed if the image can't be loaded, and it's also used by screen readers for visually impaired users. Here's an example:

<img src="image.jpg" alt="A beautiful sunset">

In this case, "A beautiful sunset" is the alternative text for the image.

Resizing Images

HTML also allows you to control the size of an image using the width and height attributes. These values are specified in pixels. Here's an example:

<img src="image.jpg" alt="A beautiful sunset" width="500" height="300">

In this case, the image will be displayed with a width of 500 pixels and a height of 300 pixels.

Conclusion

Adding images to your webpage can make it more visually appealing and dynamic. HTML makes it easy to do this with the <img> tag and a few attributes. By practicing with different images and attributes, you'll soon be a pro at adding images to your HTML webpages.

Remember, the key to learning programming is practice. Don't be afraid to experiment with different tags and attributes and see what they do. Happy coding!