Getting Started

Think of HTML (Hyper Text Markup Language) as the skeleton of a web page. It provides the basic structure, which can then be enhanced and modified by CSS (Cascading Style Sheets) and JavaScript. One of the key features of HTML is the ability to embed images. In this blog post, we will explore how to add an image in HTML from a folder.

Understanding HTML Images

In HTML, images are defined with the <img> tag. The source file (src), alternative text (alt), width, and height are the most common attributes of this tag.

For example, to display an image named "myImage.jpg" that's in the same directory as your HTML file, you would use the following code:

<img src="myImage.jpg" alt="My Test Image" width="500" height="600">

In this line of code, src stands for "source", and it points to the location of the image file. The alt attribute provides alternative text for the image if it cannot be displayed. The width and height attributes define the size of the image.

Adding Images from a Folder

Now, let's say you have an image in a different folder. The process remains the same, but you need to specify the path to the directory where your image is stored in the src attribute.

Imagine your project folder looks something like this:

my_website
│   index.html   
│
└───images
    │   myImage.jpg

To add the image "myImage.jpg" that's inside the "images" folder to your HTML file, your src attribute would need to include the path to the "images" folder, like this:

<img src="images/myImage.jpg" alt="My Test Image" width="500" height="600">

Understanding Relative Paths

In our previous example, "images/myImage.jpg" is what's called a relative path. A relative path, as the name suggests, is the path relative to the current directory (in this case, where your HTML file is).

Think of it like directions from one place to another. If you were to tell someone how to get to your favorite coffee shop from your house, you'd give them directions based on where your house is (e.g., "turn right out of my driveway, then take the first left"). That's what a relative path is like.

There are two main types of relative paths:

1. Same directory: When the HTML file and the image are located in the same directory, you only need to specify the image file name (e.g., myImage.jpg).
2. Child directory: When the image is located in a directory inside the current directory, you need to specify the directory name followed by a slash, and then the image file name (e.g., images/myImage.jpg).

Understanding Absolute Paths

On the other hand, an absolute path refers to the complete details needed to locate a file or a folder, regardless of the current directory. To continue the analogy, it's like giving the full address of your coffee shop, including the city, state, and zip code.

If the image is located on another website, you would use its URL for the src attribute. Here's an example:

<img src="https://example.com/images/myImage.jpg" alt="My Test Image" width="500" height="600">

The Importance of Alt Attribute

The alt attribute is used to provide a descriptive text for the image if for any reason the image is not displayed. This could be due to slow internet connection, an error in the src attribute, or if the user is using a screen reader. The value of the alt attribute should describe the image in a simple way. For example, alt="A dog playing in a park".

Resizing Images Using HTML

While it's generally recommended to resize your images before using them in your HTML code, sometimes you may need to resize an image directly in your HTML. You can do this by using the width and height attributes in the <img> tag.

For example, the following code will display your image with a width of 500 pixels and a height of 600 pixels:

<img src="images/myImage.jpg" alt="My Test Image" width="500" height="600">

It's important to note that when you set the width and height of an image, it can sometimes distort the image if it's not in proportion.

Wrapping Up

Adding images to your HTML from a folder can seem daunting at first, but once you understand the concept of relative and absolute paths, it becomes a lot easier. Always remember to include an alt attribute for accessibility reasons, and try to resize your images before adding them to your HTML to avoid distortion. Happy coding!