HTML Images
Images can improve the design and the appearance of a web page.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="pic_image.jpg" alt="Trulli" width="500" height="333">
</body>
</html>
Output:
HTML Images Syntax
In HTML, images are defined with the
<img> tag.
The
<img> tag is empty, it contains attributes only, and does not have a closing tag.
The
src attribute specifies the URL (web address) of the image:
<img src="url">
The alt Attribute
The
alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The value of the
alt attribute should describe the image:
<!DOCTYPE html>
<html>
<body>
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>
<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">
</body>
</html>
Output:
Alternative text
The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:
Note: The
alt attribute is required. A web page will not validate correctly without it.
Image Size - Width and Height
You can use the
style attribute to specify the width and height of an image.
<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<p>Use the style attribute to specify the width and height of an image:</p>
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
</body>
</html>
Output:
Image Size
Use the style attribute to specify the width and height of an image:
Alternatively, you can use the
width and height attributes:
<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<p>In this example, we specify the width and height of an image with the width and height attributes:</p>
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
</body>
</html>
Output:
Image Size
In this example, we specify the width and height of an image with the width and height attributes:
The
width and height attributes always defines the width and height of the image in pixels.
Note: Always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.
No comments