Image Size-Width and Height
You can use the style attribute to specify the width and height of an image.
You can use the style attribute to specify the width and height of an image.
Example
<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<p>Here we use the style attribute to specify the width and height of an image:</p>
<img src="images/chapati.jpeg" alt="chapati" style="width:500px; height:300px;">
</body>
</html>A new webpage opens with image that we have selected with the specified height and width
Alternatively, you can use the width and height attributes:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<p>Here we specify the width and height of an image with the width and height attributes:</p>
<img src="images/Icecream.jpg" alt="Ice Cream" width="500" height="600">
</body>
</html>A new webpage opens with image that we have selected with the specified height and width attributes:
Images in Another Folder
If you have your images in a sub-folder, you must include the folder name in the src attribute:
Example
<!DOCTYPE html>
<html>
<head>
<title>Image</title>
</head>
<body>
<img src="images/nature.jpeg" alt="nature" width="200" height="200">
</body>
</html>A new webpage opens with image which is located in the sub folder
Animated Images
HTML allows animated GIFs:
Example
<!DOCTYPE html>
<html>
<head>
<title>
Dog
</title>
</head>
<body>
<p>The alt attribute should reflect the image content, so users who cannot see the image get an understanding of what the image contains:</p>
<img src="images/cutedog.gif"
alt="cute dog" width="200">
</body>
</html>A new webpage opens with animated image :
As it is screenshot you can not see that the image is moving but you can see it once you use the above code
Image Floating
Use the CSS float property to let the image float to the right or to the left of a text:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p>
<p>
<img src="images/dog.jfif" alt="cute dog" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
<p><strong>Float the image to the left:</strong></p>
<p>
<img src="images/dog.jfif" alt="cute dog" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
</body>
</html>
No comments:
Post a Comment