Inserting images into an HTML page
Hello, students! In this lesson, we will learn about how to insert images into an HTML page.
Images can be used to add visual information to web pages.
Topics
- What are HTML images?
- How to insert images into an HTML page?
- Code examples
What are HTML images?
HTML images are HTML elements used to insert images into web pages.
They are identified by the <img> tag.
How to insert images into an HTML page?
To insert an image into an HTML page, use the <img> tag.
The <img> tag has two required attributes: src and alt.
The src attribute specifies the URL of the image.
The alt attribute provides an alternative description of the image for screen readers.
Code examples
Here are some code examples to insert images into an HTML page:
<img src="image.jpg" alt="This is an image of a cat.">
This code will insert an image with the name image.jpg into the page.
The alternative description This is an image of a cat. will appear if the image cannot be loaded or if the user is using a screen reader.
You can also use other attributes to control the behavior of the image.
For example, the width attribute specifies the width of the image, and the height attribute specifies the height of the image.
Here is an example of how to use these attributes:
<img src="image.jpg" alt="This is an image of a cat." width="200" height="100">
This code will insert an image with the name image.jpg into the page.
The image will have a width of 200 pixels and a height of 100 pixels.
Exercises
- Create an HTML document with an image of your choice.
- Save the document and open it in a browser.
Observe how the browser displays the image.
Good luck!
Conclusion
Images can be used to add visual information to web pages.
Understanding how to insert them correctly is essential for creating effective web pages.
Ready to learn more?
In the next topic, we will learn about the src and alt image attributes.
Let’s do this!
