# Adding Images in HTML
## 1. Introduction
In this tutorial, we will learn how to add images to your HTML documents using the `<img>` tag. Images are an essential part of any website as they make the webpage more visually appealing and can convey information more effectively than text alone.
By the end of this tutorial, you will learn:
- How to use the `<img>` tag to insert images into your HTML documents.
- How to adjust the images' size and alignment.
- Best practices when working with images in HTML.
Prerequisites:
- Basic understanding of HTML tags and attributes.
- A text editor (like Sublime Text, Atom, or Notepad++) and a browser to run and view your HTML code.
## 2. Step-by-Step Guide
An image can be added to an HTML document using the `<img>` tag. The source of the image, its dimensions, and other attributes can be specified using various attributes of the `<img>` tag.
Here's how you can add an image:
```html
<img src="image.jpg" alt="A description of the image">
src: This attribute is used to specify the source of the image. It can be a local path or a URL.alt: This attribute provides alternative text that is displayed in case the image cannot be loaded. It also helps with accessibility for visually impaired users.The size of the image can be adjusted using the width and height attributes of the <img> tag.
<img src="image.jpg" alt="A description of the image" width="500" height="600">
width: Specifies the width of the image.height: Specifies the height of the image.Tip: Always maintain the aspect ratio of your image to prevent distortion.
<!DOCTYPE html>
<html>
<body>
<h2>Adding an Image</h2>
<img src="image.jpg" alt="Beautiful landscape">
</body>
</html>
In this example, an image with the filename image.jpg is added to the HTML document. The alt attribute provides a description of the image.
<!DOCTYPE html>
<html>
<body>
<h2>Adjusting the size of an Image</h2>
<img src="image.jpg" alt="Beautiful landscape" width="500" height="300">
</body>
</html>
In this example, the size of the image is adjusted to 500 pixels wide and 300 pixels tall.
In this tutorial, we learned how to add images to an HTML document using the <img> tag and its various attributes such as src, alt, width, and height. The next step would be to learn how to position and align these images using CSS.
Additional resources:
- MDN Web Docs: HTML Images
- W3Schools: HTML Images
Create an HTML document and add an image of your choice. Give it an appropriate alt description.
Adjust the size of the image you added in Exercise 1 to a width of 300 pixels and a height of 200 pixels.
Add a second image to the document. Make the second image half the size of the first image.
Solutions and explanations will vary based on the images used and the personal adjustments made to the image sizes.
```