HTML Images
- The HTML <img> tag is used to display the images in the screen.
- A <img> tag is an empty tag because it can not have the closing tag.
- The required src attribute specifies the path (URL) of the image.
Syntax:
<img src ="image URL"/>
Image Formats:
- Portable Network Graphics (PNG) => .png
- Joint Photographic Expert Group Image (JPEG) => .jpg, jpeg
- Scalable Vector Graphics (SVG) => .svg
- Graphics Interchange Format (GIF) => .gif
- Animated Portable Network Graphics (APNG) => .apng
Example:
<!DOCTYPE
html>
<html>
<body>
<h2>HTML
Image</h2>
<img
src ="htmlimage.png"/>
</body>
</html>
Output:
Image Size:
- The style attribute can specify the width and height of an image.
- We can modify the sizes for the image in the page.
Example:
<!DOCTYPE
html>
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<h1>Image width and
height</h1>
<img src = "/home/Downloads/bookimage.jpg" alt = "Book Image" width = "180" height = "200"/>
</body>
</html>
Output:
Image Border:
- It can used for border around the image you can specify the border thickness in terms of pixels using border the attribute.
- A thickness of 0 means, no border around the picture.
Example:
<!DOCTYPE
html>
<html>
<head>
<title>Image Border</title>
</head>
<body>
<h1>Image Border</h1>
<img
src = "/home/Downloads/cute-panda.png" alt = "Image" border = "3"/>
</body>
</html>
Output:
