Code
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>India States Map</title>
</head>
<body bgcolor="#87CEEB">
<h2 style="text-align:center;">Image Map of India</h2>
<img src="indiamap.jpeg" usemap="#indiamap" alt="Map of India">
<map name="indiamap">
<area shape="circle" coords="500,1092,15" href="tamilnadu.html" alt="Tamil Nadu">
<area shape="rect" coords="376,1076,406,1100" href="karnataka.html" alt="Karnataka">
</map>
<
/body>
</html>
tamilnadu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tamil Nadu - India</title>
</head>
<body bgcolor="palegreen">
<h1 style="text-align: center;">Tamil Nadu</h1>
<h3>Tamil Nadu is one of the southern states of India with Chennai as its capital.</h3>
<ul>
<li>Districts: <i>33</i></li>
<li>Capital City: <i>Chennai</i></li>
<li>Largest City: <i>Chennai</i></li>
<li>Governor: <i>Banwarilal Purohit</i></li>
<li>Chief Minister: <i>Edappadi K. Palaniswami</i></li>
<li>Population: <i>72,147,030</i></li>
<li>Tourist Spots: <i>Mamallapuram, Ooty, Kodaikanal, Marina Beach, Madurai Temple</i></li>
</ul>
<a href="main.html">Back</
a>
</body>
</html>
karnataka.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Karnataka - India</title>
</head>
<body bgcolor="wheat">
<h1 style="text-align: center;">Karnataka</h1>
<ul>
<li>Districts: <i>30</i></li>
<li>Capital City: <i>Bangalore</i></li>
<li>Largest City: <i>Bangalore</i></li>
<li>Governor: <i>Vajubhai Vala</i></li>
<li>Chief Minister: <i>H. D. Kumaraswamy</i></li>
<li>Population: <i>61,130,704</i></li>
<li>Tourist Spots: <i>Gol Gumbaz, Mysore Palace, Keshava Temple, Hampi</i></li>
</ul>
<a href="main.html">Back</a
>
</body>
</html>
Program 2
Style.html
<!DOCTYPE html>
<html>
<head>
<title>FLOWERS</title>
<!-- External CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Internal CSS -->
<style>
p {
background-color: lightgrey;
text-align: justify;
margin: 2em 7em;
}
</style>
</head>
<body id="body">
<h1>FLOWERS</h1>
<p>
<span style="font-size:200%; font-family: fantasy;">Flower</span>
is a reproductive structure found in flowering plants.
They add beauty to nature. In India, we see flowers like:
</p>
<!-- Inline CSS Example -->
<table style="margin: 0 auto; text-align: center; padding: 3px;">
<tr>
<td>
<ul style="list-style-position: inside; padding: 0; margin: 0;">
<li><a href="">Lily</a></li>
<li><a href="">Lotus</a></li>
<li><a href="">Rose</a></li>
<li><a href="">Jasmine</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
style.css
h1, h2 {
text-decoration: underline;
font-style: italic;
text-align: center;
}
#body {
background-color: tan;
border: 2px dotted red;
text-align: center;
}
* {
letter-spacing: 1px;
}
a:link { color: black; }
a:visited { color: yellow; }
a:hover { color: green; }
a:active { color: blue; }
ul li {
font-size: small;
}
Comments