Adding an image to your web page can enhance user engagement and break up blocks of text. w3schools, a popular coding learning platform, provides clear instructions on how to add images in HTML. Let's dive in and learn how to achieve this.
Before we get started, ensure you have the image file you want to add. It could be a .jpg, .png, or .gif file. For this guide, we'll use a .jpg image.
Adding an Image via URL
If your image is hosted online, you can embed it directly into your HTML using its URL. This is known as an inline image. w3schools recommends using the <img> tag for this.
Here's how you can do it:
Step 1: Write the <img> Tag
The <img> tag is used to embed an image in an HTML page. The tag has two required attributes: src (source) and alt (alternative text).
```html
```
Step 2: Insert the URL and Description
Replace "URL" with the actual URL of your image, and "description" with a brief, descriptive text that explains what the image is about. The 'alt' text is essential for accessibility, as it's read by screen readers for visually impaired users.
```html
```
Adding an Image Saved on Your Computer
If your image is saved on your computer, you'll need to upload it to a web server. However, for simplicity, we'll use a local file path in this example.
Step 1: Specify the Image Location
In the <img> tag's 'src' attribute, replace the URL with the file path of your image. For local files, use the following format:
```html src="file:///C:/Users/User/filename.jpg" ```
Note: Using local file paths is not recommended for real-world websites, as users won't have access to your computer's file system. Always upload images to a web server.
Step 2: Add the Image to Your HTML
Add the modified <img> tag to your HTML where you want the image to appear. Here's an example:
```html
```
The final touch is to open your HTML file in a web browser to view the image.