INTERNET PROGRAMMING LABORAOTORY PROGRAMS

 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:

1. Download a map image from internet and save the image with map.jpg
2. Create a webpage using html by embedding map image using <img> tag
3. Identify positions on the map using paint application for creating hotspots
4. Create hotspots on the map images using <map> tag
5. Create web pages for each hotspots
6. 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

---