EX.01 EMBEDDING MAP
Aim:
Create
a web page with the following using HTML
a.
To embed a map in a web page
b.
To fix the hot spots in that map
c.
Show all the related information when
the hot spots are clicked.
Procedure:
- Download a map
image from internet and save the image with map.jpg
- Create a
webpage using html by embedding map image using <img> tag
- Identify positions
on the map using paint application for creating hotspots
- Create
hotspots on the map images using <map> tag
- Create web
pages for each hotspots
- Run the
application
Coding:
map.html
<!DOCTYPE html>
<html>
<head>
<title>INDIA MAP</title>
</head>
<body>
<img src="india.jpg" alt="India-map" usemap="#indiamap">
<map name="indiamap">
<area coords="336,987,50" shape="circle" href="tn.html">
<area coords="261,975,50" shape="circle" href="kr.html">
<area coords="362,792,50" shape="circle" href="an.html">
<area coords="247,644,50" shape="circle" href="ma.html">
</map>
</body>
</html>
kl.html
<!DOCTYPE html>
<html>
<head>
<title>KERALA MAP</title>
</head>
<body>
``<h1> WELCOME TO KERALA MAP</h1>
<img src="kl.jpg" >
</body>
</html>
tn.html
<!DOCTYPE html>
<html>
<head>
<title>TAMIL NADU MAP</title>
</head>
<body>
``<h1> WELCOME TO TAMILNADU MAP</h1>
<img src="tnmap.jpg" >
</body>
</html>
Output:
IMPLEMENTATION OF CSS TYPES
Aim:
Create a web page
with the following.
a)
Cascading style sheets.
b)
Embedded style sheets.
c)
Inline style sheets. Use our college
information for the web pages.
Procedure:
- Create a webpage using html
from displaying college information
- Create external css file for
styling few tags
- Link the external css using
<link> tag
- Embed a style sheet in a web
page using <style> tag
- Add inline css using style
attribute
- Run the application
Program:
home.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Types</title>
<style type="text/css">
<!--2.Internal Stylesheet -->
h3
{
font-family:arial;
color:blue;
}
h5
{
text-align:center;
}
p
{
font-sise:14pt;
font-family:verdana
}
</style>
<!--3.External Stylesheet -->
<link rel="stylesheet" href="ext.css">
</head>
<body>
<h1>
ABC Institute of Technology
</h1>
<h5>
Approved by AICTE, Affiliated to Anna University
</h5>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Department</a></li>
<li><a href="#">Facilities</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<hr>
<h2>About Institution:</h2>
<p>
ABC Institue of Technology was established in the 1995 with five undergraduate
engineering courses.
</p>
<!--1. INLINE STYLE SHEET -->
<h2 style="color:blue;">Course Offered: </h2>
<p>
<ul>
<li>B.E.-CSE</li>
<li>B.E.-ECE</li>
<li>B.E.-EEE</li>
<li>B.E.-MECH</li>
<li>B.E.-CIVIL</li>
</ul>
</p>
<h2>Contact:</h2>
<p>mailtoabc@abc.ac.in</p>
</body>
</html>
ext.css
body
{
background-color: #f0e68c;
}
h1
{
font-family:arial;
color:green;
text-align:center;
}
h2
{
font-family:arial;
color:red;
left:20px
}
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.menu li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: yellow;
color:blue;
}
Output
