--------------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--it is used for meta tags-->
<title><!-- it is used for title of page-->
inserting map with circle
'map' means a part of image where we can have link or we can click
</title>
</head>
<body><!--it is a container-->
<img src="coffee.jpg" width="400px" height="400px" alt="building" usemap="#coffeeecen">
<!--img src is used to insert image-->
<!-- it has attributes width,height and alt-->
<!-- 'alt' is used if the picture could not be loaded/displayed-->
<!--we must make sure that the path(of image) is correct-->
<!--usemap attribute is used for picture's part we want to click-->
<!--we use hash tag for this-->
<map name="coffeeecen">
<area shape="default" alt="Computer" href="glass.html">
</map>
<!--we use mapname tag to connect specific area of picture-->
<!--we can use shape either rect or polygon or circle or default
-->
<!-- if we use default it would use entire region-->
<!--coords is for x and y value/coordinate-->
<!--values appear in pair(x and y)-->
<!--href is for that page which we want to be opened-->
</body>
</html>
------------------------------------------------------------------------
please read the comments section below the code.
