Below is an HTML document demonstrating how to include regular images, image maps, and background images.
Regular Image:
- The <img> tag is used to display an image. It includes src for the image source and alt for alternative text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Image Example</title>
</head>
<body>
<div class="container">
<h2>Regular Image</h2>
<img src="example.jpg" alt="Example Image">
</div>
</body>
</html>
Image Map:
- An image map allows parts of an image to be clickable links.
- The <img> tag with the usemap attribute references the map.
- The <map> element contains the clickable areas defined by the <area> elements.
- Each <area> defines a shape (rect, circle, poly), coordinates, and a link (href).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Image Map Example</title>
</head>
<body>
<div class="container">
<h2>Image Map</h2>
<img src="map.jpg" alt="Map" usemap="#example-map">
<map name="example-map">
<area shape="rect" coords="34,44,270,350" href="https://www.example.com" alt="Example Link">
<area shape="circle" coords="477,300,75" href="https://www.another-example.com" alt="Another Example Link">
<area shape="poly" coords="130,200,200,200,160,400" href="https://www.third-example.com" alt="Third Example Link">
</map>
</div>
</body>
</html>
Background Image:
- The body element's background image is set using CSS. background-image: url('background.jpg'); sets the background image, and background-size: cover; ensures it covers the entire background.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Background Image Example</title>
<style>
body {
background-image: url('background.jpg');
background-size: cover;
}
.container {
max-width: 800px;
margin: 50px auto;
text-align: center;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>Background Image</h2>
<p>This is an example of a background image.</p>
</div>
</body>
</html>
No comments:
Post a Comment