HTML_with_Noraiz/images.html at main · NoraizRana/HTML_with_Noraiz · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Images in HTML</title>
</head>
<body>
    <!-- html can support jgp, img, gif and other formats -->
     <img src="/class/class/pics/animated.gif" alt="animated img" style="width: 250px; height: 200px; float:right">
     <br><br>

    <!-- image as a link -->
     <a href="https://www.midasbuy.com/midasbuy/pk" alt="mid as buy">
       <p><img src="/images/mid as uy.jpeg" alt="mid as buy">Click here to buy uc </p>
     </a>

    <!-- Image map--Different locations of the images have different associated links in an image map -->
     <h1>Image Map</h1>
     <img src="/class/class/pics/5.jpg" alt="laptop photo" usemap="#workmap" style="width:350px; height: 300px;">
     <map name="workmap">
     <area shape="rect" coords="33,273,236,30" href="/class/class/laptop.html" alt="laptop Info">
     <area shape="rect" coords="249,130,288,190" href="/class/class/diary.html" alt="phone">
    </map>

</body>
</html>