Getting Started with Images in HTML

Welcome to the world of coding! Today, we're going to take a step into the realm of HTML, a language that allows us to create and structure parts of a webpage. Specifically, we're going to focus on how to insert images into our HTML files. Don't worry if you're a beginner in programming, we're here to break it down in the simplest ways possible!

HTML and Images: What's the Connection?

Before we dive into the code, let's understand what we're dealing with. HTML, or HyperText Markup Language, is the skeleton of a webpage. It gives structure and meaning to the content. Images, on the other hand, bring life to this structure. They add the visual aspect, making the content more engaging and pleasing to the viewer.

Imagine you're creating a digital scrapbook. HTML would be the cardboards and papers you're using, while the images are the photos and stickers you're pasting onto them.

The Image Element

To display an image on a webpage, we use an HTML element called 'img'. An element is just a piece of code that performs a certain function. In our case, the 'img' element's function is to display an image.

Here's what it looks like:

<img src="url" alt="text">

Let's break this down:

• 'img': This is the HTML tag that tells the browser we want to insert an image.
• 'src': This is an attribute that specifies the source of the image, i.e., where the image file is located. This can be a local path on your computer or a URL if the image is hosted online.
• 'alt': This is another attribute that provides alternative text for the image if it cannot be displayed. This is important for accessibility as screen readers for the visually impaired read out this text.

Adding an Image from Your Computer

Let's say you have an image named 'sunset.jpg' in the same folder as your HTML file. Here's how you would display it:

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

The browser will look for the image in the same location (folder) as the HTML file and display it on the webpage. If it can't find or display the image, it will show the alternative text 'A beautiful sunset'.

Adding an Image from the Web

To display an image from the web, you'll need the direct URL of the image. This is not the URL of the webpage where the image is displayed, but the URL that ends with the image file extension (like .jpg, .png, .gif).

Here's an example:

<img src="https://example.com/images/sunset.jpg" alt="A beautiful sunset">

The 'src' has the URL of the image, and the browser will fetch and display it. If the image cannot be displayed due to network issues or if the image is removed from the server, the alternative text 'A beautiful sunset' will be displayed.

Adjusting Image Size

The 'img' element also allows us to adjust the size of the image. We can use the 'width' and 'height' attributes to specify the size in pixels.

Here's how you can set the width and height of the image:

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

This sets the image width to 500 pixels and height to 300 pixels.

Wrapping Up

So there you have it! You now know how to insert images into your HTML files from both your computer and the web, and even how to adjust their sizes.

Remember, learning to code is like learning a new language. It may seem daunting at first, but with practice, you'll be fluent before you know it. Keep practicing and don't be afraid to experiment with your code. The great thing about coding is that you can always undo your changes if something doesn't work out.

Happy coding!