Welcome to the Tutorial of HTML images! In this tutorial, we’ll break down everything you need to know about working with images in HTML, making it simple and student-friendly.
Why Use Images?
Images can greatly enhance the visual appeal of your web pages and help convey information more effectively.
Basic Image Tag
We use the <img>
tag to display an image in HTML. This tag is self-closing, meaning it doesn’t need a closing tag. Here’s a basic example:
<img src="url_of_image" alt="description">
src
(source): This attribute specifies the path to the image you want to display. It can be a URL or a file path.alt
(alternative text): This provides a text description of the image, which is important for accessibility and SEO.
Example
Let’s say you have an image of a cute puppy saved in the same directory as your HTML file. Here’s how you can display it:
<img src="puppy.jpg" alt="A cute puppy">
Image Size
You can control the size of your images using the width
and height
attributes. Here’s an example:
<img src="puppy.jpg" alt="A cute puppy" width="300" height="200">
This will display the image with a width of 300 pixels and a height of 200 pixels.
Responsive Images
To ensure your images look good on all devices, you can use the width
attribute set to 100%, making the image scale with the size of its container:
<img src="puppy.jpg" alt="A cute puppy" style="width:100%">
Image Alignment
You can align images using the float
property in CSS. Here’s an example of aligning an image to the left:
<img src="puppy.jpg" alt="A cute puppy" style="float:left; margin-right:10px;">
<p>This is some text that will wrap around the image.</p>
float:left;
: This will float the image to the left.margin-right:10px;
: This adds some space between the image and the text.
By mastering the <img>
tag and its attributes, you can add visual interest to your web pages and make them more engaging. Practice using different images and attributes to see what works best for your needs.