Introduction:
Adding images to an HTML document is a fundamental skill for web developers, enhancing the visual appeal and interactivity of a webpage. This comprehensive guide walks you through each step, from opening a text editor to embedding images with attributes. Follow the steps below to seamlessly insert images into your HTML documents.
Step 1: Open the HTML File in a Text Editor
Start by opening your HTML file in a text editor. If you don't have one, create a new HTML file or use an existing one.
```html
<!DOCTYPE html>
<html>
<head>
<title>Insert an Image</title>
</head>
<body>
Hello Friends <br>
<!-- Image tag will be inserted here -->
Hello User! <br>
How are You?
</body>
</html>
```
Step 2: Insert the Image Tag
Move the cursor to the desired location in the HTML file where you want to insert the image. Add an empty `<img>` tag at that point.
```html
<img>
```
Step 3: Add the "src" Attribute
Within the `<img>` tag, add the "src" attribute. This attribute specifies the path of the image. If the image is in the same directory, simply type the filename and extension.
```html
<img src="tiger.jpeg">
```
Step 4: Set the Image Path
Specify the correct path of the image if it's stored in a different directory. If the image is on the internet, you can use a URL.
```html
<img src="/home/mondal/Desktop/images/tiger.jpeg">
<img src="https://www.google.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062">
```
Step 5: Adjust Width and Height
Customize the width and height of the image using the "width" and "height" attributes.
```html
<img src="tiger.jpeg" width="400" height="200">
```
Step 6: Save the HTML File
Save the HTML file in your text editor. Your completed code should look like the following:
```html
<!DOCTYPE html>
<html>
<head>
<title>Insert an Image</title>
</head>
<body>
Hello Friends How are You! <br>
<img src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" width="400" height="200"> <br>
Hello User! <br>
How are You?
</body>
</html>
```
Conclusion:
Congratulations! You've mastered the art of inserting images into HTML documents. By following these steps, you can seamlessly integrate visuals into your web pages, creating a more engaging and dynamic user experience. Experiment with different image attributes and paths to enhance your HTML skills further.