1)
IMAGE MAPPING USING HTML
AIM:
Create a web page with the following using
HTML
- To embed an image map in a web page
- To fix the hot spots
- Show all the related information when the hot spots are clicked.
STEPS:
- Insert an image in the web page by using <img> element.
- Define an image map by using <map> element and use the name attribute to identify the image map.
- Define the hotspots (certain areas of an image) by using <area> element with the following attributes:
- href – specifies the target of the link.
- shape – specifies the shape of the hotspots.
- coords – specifies the coordinate values of the hotspots
- Use an image map with an <img> element by using the usemap attribute.
- Display the web page and click the hotspots to display the related information.
PROGRAM:
india.html
india.html
<html>
<head>
<title>Image
Mapping....</title>
</head>
<body>
<h1
align="center"><font
face="Forte"color="violet">INDIA</font></h1>
<hr>
<p>
<font
size="3" face="Comic Sans MS"color="darkblue">
<ul>
<li>The
name India is derived from Indus, which is derived from the Old Persian word
Hindu, from Sanskrit</li>
<li>India
is the seventh-largest country by geographical area</li>
<li>The
second-most populous country with over 1.2 billion people</li>
<li>The
most populous democracy in the world</li>
<li>Consisting
of 28 states and seven union territories</li>
<li>The
name India is derived from Indus, which is derived from the Old Persian word
Hindu, from Sanskrit</li>
</ul>
<p>
<font
size="4" face="Calibri"color="red">
Click
On The Hotspots To View More Information About That Particular Places...
</font>
</p>
<map
name="indiamap">
<area
shape="rect" coords="105,202,112,207"
href="chennai.html" alt="Click here to get more
details">
<area
shape="rect" coords="84,84,91,89"
href="delhi.html" alt="Click here to get more details">
<area
shape="rect" coords="57,157,63,162"
href="mumbai.html" alt="Click here to get more details">
<area
shape="rect" coords="179,126,185,131"
href="kolkatta.html" alt="Click here to get more
details">
</map>
<img
src="india.jpg" border=0 usemap="#indiamap">
</body>
</html>
chennai.html
<html>
<Title>Chennai....</title>
<body>
<p><font
face="Cambria" color="blue" size="3">Chennai,
formerly known as Madras or Madarasapatinam,
is
the capital city of the Indian state of Tamil Nadu...</font></p>
<table>
<tr>
<td><img
src="Parrys.jpg"><br>
<font
face="Cambria" color="blue" size="3">Parry's
Corner</td>
<td>
<font
face="Cambria" color="blue" size="2">
<ul>
<li>Chennai
being the fourth most populous metropolitan area and the fifth most populous
city in India</li>
<li>It
is also the world's 36th largest metropolitan area</li>
<li>Chennai's
economy has a broad industrial base in the automobile, computer, technology,
hardware manufacturing, and healthcare industries</li>
<li>The
city is India's second largest exporter of software, information technology
(IT) and information-technology-enabled services (ITES)</li>
<li>Chennai
is a major centre for music, art and culture in India</li>
<li>The
city is known for its classical dance shows and Hindu temples</li>
<li>Cricket
is the most popular sport in Chennai</li>
<li>Chennai
is the base for the large Tamil movie industry, known as Kollywood, home to
most of the movie studios</li>
</ul>
</td>
</tr>
</table>
<font
face="Cambria" color="blue" size="2">
<a
href="india.html">Home</a>
</font>
</body>
</html>
mumbai.html
<html>
<Title>Mumbai....</title>
<body>
<p><font
face="Cambria" color="blue" size="3">It is the
most populous city in India, and the second most populous city in the world,
with
a population of approximately 14 million...</font></p>
<table>
<tr>
<td><img
src="Gateway.jpg"><br>
<font
face="Cambria" color="blue" size="3">Gateway
Of India</td>
<td>
<font
face="Cambria" color="blue" size="2">
<ul>
<li>Mumbai,
formerly known as Bombay </li>
<li>Mumbai
is the capital of the Indian state of Maharashtra</li>
<li>Mumbai
is the commercial and entertainment capital of India</li>
<li>The
average annual temperature is 27.2 °C (81.0 °F)</li>
</ul>
</td>
</tr>
</table>
<font
face="Cambria" color="blue" size="2">
<a
href="india.html">Home</a>
</font>
</body>
</html>
delhi.html
<html>
<Title>Delhi....</title>
<body>
<p><font
face="Cambria" color="blue" size="3">Delhi is
the eighth largest
metropolis
in the world by population with more than 12.25 million
people...</font></p>
<table>
<tr>
<td><img
src="LotusTemple.jpg"><br>
<font
face="Cambria" color="blue" size="3">Lotus
Temple</td>
<td>
<font
face="Cambria" color="blue" size="2">
<ul>
<li>Which
also includes Noida, Greater Noida, Ghaziabad, Gurgaon and Faridabad along with
other smaller nearby towns</li>
<li>Delhi
has a maximum length of 51.9 km (32 mi) and the maximum width of 48.48 km (30
mi)</li>
<li>The
annual mean temperature is 25 °C (77 °F)</li>
<li>The
average annual rainfall is approximately 714 mm (28.1 inches)</li>
</ul>
</td>
</tr>
</table>
<font
face="Cambria" color="blue" size="2">
<a
href="india.html">Home</a>
</font>
</body>
</html>
kolkatta.html
<html>
<Title>Kolkata....</title>
<body>
<p><font
face="Cambria" color="blue" size="3">Kolkata
is the cultural capital of India
and
the commercial capital of Eastern India...</font></p>
<table>
<tr>
<td><img
src="VictoriaMemorial.jpg"><br>
<font
face="Cambria" color="blue" size="3">Victoria
Memorial</td>
<td>
<font
face="Cambria" color="blue" size="2">
<ul>
<li>Kolkata,
formerly known as Calcutta, is the capital of the Indian state of West
Bengal</li>
<li>Before
1690 Kolkata, under direct rule of the Nawab of Bengal
Siraj-Ud-Daulah</li>
<li>Kolkata
is located in the eastern part India</li>
<li>The
annual mean temperature is 26.8 °C (80.2 °F)</li>
</ul>
</td>
</tr>
</table>
<font
face="Cambria" color="blue" size="2">
<a
href="india.html">Home</a>
</font>
</body>
</html>
2)WEB PAGE USING CASCADING STYLE SHEETS(CSS)
AIM:
To create a web page with the
following Cascading style sheets (CSS)
- Inline style
- Embedded style
- External style
STEPS:
- Declare an individual element’s style by using ‘style’ attribute (Inline style).
- Embed
the entire style rules in an HTML document’s head section (Embedded style) by
using <style> element as follows.
<style type="text/css"> - Create the separate document that contain only CSS rules (External style) and save it as ‘extStyle.css’.
- Create
the link between the external style rules (extStyle.css) and HTML document by using
<link> element as follows. <link rel="stylesheet" type="text/css" href="extStyle.css"/>
PROGRAM:
CSSDemo.html
<html>
<head>
<title>Sachin
Tendulkar</title>
<style
type="text/css">
#tid1{background-color:gray;width:800;height:200}
#tid2{background-color:gray;width:800;height:300}
img{width:794;height:200}
</style>
<link
rel="stylesheet" type="text/css"
href="extStyle.css"/>
</head>
<body>
<h1
style="text-align:center;font-family:Courier
New;color:blue">Sachin Ramesh Tendulkar</h1>
<hr/>
<table
id="tid1" align="Center">
<tr>
<td><img
src="sachin.jpg"></td>
</tr>
</table>
<table
id="tid2" align="Center">
<tr>
<td
class="cls1" valign="top">
<h3
style="font-family:Lucida Sans
Unicode;color:blue">Profile</h3>
<p>
Sachin
Ramesh Tendulkar was born on 24 April 1973 in Mumbai. Sachin Tendulkar is an
Indian cricketer. He has been the most complete batsman of his time. He holds
several batting records, including the most Test centuries and the most one-day
international centuries, and was rated in 2002 by Wisden as the second greatest
Test batsman ever, after Sir Don Bradman. He received the Rajiv Gandhi Khel
Ratna, India’s highest sporting honour, for 1997-1998, and the civilian award
Padma Shri in 1999. Tendulkar was a Wisden Cricketer of the Year in 1997.
</p>
</td>
<td
class="cls1" valign="top">
<h3
style="font-family:Lucida Sans Unicode;color:blue">Highlights of
Tendulkar’s Career</h3>
<div
style="font-size:10pt;color:gold;font-family:Lucida Sans
Unicode;text-align:justify">
<ul
type="square">
<li>Highest
number of Test centuries (51)</li>
<li>Highest
number of ODI centuries (49)</li>
<li>First
cricketer to cross 10,000 runs in both ODIs and Test</li>
<li>Highest
batting average among batsmen with over 10,000 ODI runs</li>
<li>In
1998 he hit 9 ODI centuries, the highest by any player in an year</li>
<li>673
runs in 2003 World Cup, highest by any one in a single Cricket World
Cup</li>
<li>First
ceicketer to reach double century in ODI</li>
<li>Played
in the highest number of Cricket Grounds</li>
<li>Rated
as the second best batsman of all time (next to Don Bradman) by
Wisden.</li>
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>
extStyle.css
body{background-color:black}
.cls1{width:325;height:300}
p{font-family:Lucida
Sans Unicode;color:silver;font-size:12pt;text-align:justify}
