To insert a custom image into an HTML document, you can use the <img> tag. Here’s a step-by-step guide:
Method 1: Using a Local Image File
1. Save the image file: Place the image file (e.g., myimage.jpg, myimage.png, etc.) in the same directory as your HTML file or in a subdirectory.
2. Use the <img> tag: In your HTML file, add the <img> tag with the src attribute pointing to the image file.
<img src=”myimage.jpg” alt=”My Custom Image”>
If the image is in a subdirectory, include the directory path in the src attribute:
<img src=”images/myimage.jpg” alt=”My Custom Image”>
Method 2: Using an Online Image URL
1. Get the image URL: Find the URL of the image you want to use online.
2. Use the <img> tag: In your HTML file, add the <img> tag with the src attribute pointing to the online image URL.
<img src=”https://example.com/myimage.jpg” alt=”My Custom Image”>
Additional Attributes
-alt attribute: Specifies alternative text for the image, displayed if the image cannot be loaded.
– width and height attributes: Specify the image dimensions.
– title attribute: Specifies a tooltip text for the image.
<img src=”myimage.jpg” alt=”My Custom Image” width=”300″ height=”200″ title=”My Image”>
By following these steps, you can easily insert a custom image into your HTML document.