Images in HTML
Images in HTML:
Images are just like adding sugar to tea that makes the Tea complete. With the help of images, you get more about Topic rather than simply ready the stuff. It creates more creativity using images in HTML.
To use an image there is also a tag called <img> tag.
Example:
<img src="http://dreamzdevelopers.com/wp-content/uploads/2020/09/rLOGO.png" alt="Logo">The image tag has mainly two attributes
- src – It is the physical location of the picture
- alt – This defines the alternative text if the image is not visible for any reason.
Note: If the image is not visible then the text inside the alt attribute will be visible.
Width and height of the image:
Using the style attribute you can alter the size of the image.
Example 1:
<!DOCTYPE html>
<html>
<body>
<h1>Image Size</h1>
<p>This is one way to set size of image</p>
<img src="http://dreamzdevelopers.com/wp-content/uploads/2020/09/rLOGO.png" alt="logo" style="width:500px;height:600px;">
</body>
</html>
Example 2:
<!DOCTYPE html>
<html>
<body>
<h1>Image Size</h1>
<p>This is second way to set size of image</p>
<img src="http://dreamzdevelopers.com/wp-content/uploads/2020/09/rLOGO.png" alt="logo" width="500" height="600">
</body>
</html>
Example 3:
<!---- This is the third way to alter image-------------------->
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 50%;
}
</style>
</head>
<body>
<img src="http://dreamzdevelopers.com/wp-content/uploads/2020/09/rLOGO.png" alt="HTML5 Icon" width="12" height="18">
</body>
</html>Example 4:
<!DOCTYPE html>
<html>
<body>
<h1>Image Size</h1>
<p>This is fourth way to set size of image</p>
<img src="/images/3423.gif" alt="demo image" style="width:128px;height:128px;">
</body>
</html>