1.
INTERNAL LINKING
<html>
<body bgcolor=pink>
<h1 align="center">My Favourite Flowers</h1>
<p>My favourite flowers contain the following characters</p><br>
<ahref="#chap1">1.Hibiscus</a></br>
<ahref="#chap2">2.Jasmine</a></br>
<ahref="#chap3">3.Marigold</a></br>
<ahref="#chap4">4.Rose</a></br>
<ahref="#chap5">5.Lily</a></br></br>
</br></br></br>
<a name="chap1"></a>
<h2 align="center">Hibiscus</h2>
<p>Hibiscus is a beautiful flower</p>
<p>Hibiscus has many color</p>
<p>It is medicinal flower</p>
<p>It has many health benifits to human beings</p>
<imgsrc="D:\PERIANAYAGI\hibiscus.jpeg"height=100width=100>
<a name="chap2"></a>
<h2 align="center">Jasmine</h2>
<p>Jasmine is white in color</p>
<p>It looks very nice</p>
<p>It is very popular flower</p>
<p>Flowering is in spring season</p>
<imgsrc="D:\PERIANAYAGI\jasmine.jpeg"height=100width=100>
<a name="chap3"></a>
<h2 align="center">Marigold</h2>
<p>Marigold is in red,orange,maroon and yellow color</p>
<p>It is popular in flower gardens</p>
<p>It is consist of large number of petals</p>
<p>Dyes extract from this flower</p>
<imgsrc="D:\PERIANAYAGI\marigold.jpeg"hight=100width=100>
<a name="chap4"></a>
<h2 align="center">Rose</h2>
<p>Rose is a very delicate and beautiful flower</p>
<p>It has many colors</p>
<p>It's name comes from the latin word 'rosa'</p>
<p>It's fragrance keeping the surrounding fresh</p>
<p>It is queen of flowers</p>
<imgsrc="D:\PERIANAYAGI\rose.jpeg"height=100width=100>
<a name="chap5"></a>
<h3 align="center">Lily</h3>
<p>Lily is the beautiful flower</p>
<p>Lily has many colors</p>
<p>It has a mesmorising fragrance</p>
<p>It normally blossom in summer season</p>
<imgsrc="D:\PERIANAYAGI\lily.jpeg"height=100width=100>
</body>
</html>
OUTPUT:
2. CALENDAR
<html>
<head>
<title>CALENDAR</title>
</br></br></br></br>
<body bgcolor=skyblue><h1 align=center>CALENDAR</h1>
<table>
<tr>
<table border=2 align=center>
<td colspan=7 align=center><fontface=algerian size=24color=yellow><strong><h3 align
center>JULY2019</h3></strong></font>
</tr>
</tr>
</tr>
<th>sun</th><th>mon</th><th>tue</th><th>wed</th><th>thu</th><th>fri</th><th>sat</
th>
</tr>
<tr>
<td><font color=red></font></td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td><font color=red>7</font></td>
<td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td>
</tr>
<tr>
<td><font color=red>14</font></td>
<td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td><font color=red>21</font></td>
<td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td>
</tr>
<tr>
<td><font color=red>28</font></td>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>
</table>
</body>
</html>
OUTPUT:
3. LINKING
<!DOCTYPE html>
<html>
<head>
<title>Flowers</title>
</head>
<body bgcolor="orange">
<h1 align="center">FLOWERS</h1><br><br>
<p align="center"><a href="rose.html">rose:</a><a href="rose.html"><img
src="rose.jpeg" height="180" width="200"></a></p>
<p align="center"><a href="lotus.html">lotus:</a><a href="lotus.html"><img
src="lotus.jpeg" height="180" width="200"></a></p>
<p align="center"><a href="marigold.html">marigold:</a><a
href="marigold.html"><img src="marigold.jpeg" height="180"
width="200"></a></p>
<p align="center"><a href="jasmine.html">jasmine:</a><a
href="jasmine.html"><img src="jasmine.jpeg" height="180" width="200"></a></p>
<p align="center"><a href="lily.html">lily:</a><a href="lily.html"><img
src="lily.jpeg" height="180" width="200"></a></p>
</body>
</html>
“rose.html”
<html>
<h1 align=”center”>ROSE</h1>
<body>
<center><img src="D:\PERIANAYAGI\rose.jpeg"height=100width=100></center>
<p>1.Rose is the beautiful flower</p>
<p>2.It has many colors</p>
<p>3.It is very delicate flower</p>
</body>
</html>
“lotus.html”
<html>
<h1 align=”center”>LOTUS</h1>
<body>
<center><img src="D:\PERIANAYAGI\lotus.jpeg"height=100width=100></center>
<p>1.Lotus is very beautiful flower</p>
<p>2.It is our national flower</p>
<p>3.It hasmany colors</p>
</body>
</html>
“marigold.html”
<html>
<h1 align=”center”>MARIGOLD</h1>
<body>
<center><img src="D:\PERIANAYAGI\marigold.jpeg"height=100width=100></center>
<p>1.Marigold is in red,orange,maroon and yellow color</p>
<p>2.It ispopular in flower gardens</p>
<p>3.It is consist of large number of petals</p>
</body>
</html>
“jasmine.html”
<html>
<h1 align=”center”>JASMINE</h1>
<body>
<center><img src="D:\PERIANAYAGI\jasmine.jpeg"height=100width=100></center>
<p>1.Jasmine is white in color</p>
<p>2.It looks very nice</p>
<p>3.It is very popular flower</p>
<p>4.Flowering is in spring season</p>
</body>
</html>
“lily.html”
<html>
<h1 align=”center”>LILY</h1>
<body>
<center><img src="D:\PERIANAYAGI\lily.jpeg"height=100width=100></center>
<p>1.Lily is the beautiful flower</p>
<p>2.Lily has many colors</p>
<p>3.It has a mesmorising fragrance</p>
<p>4.It normally blossom in summer season</p>
</body>
</html>
OUTPUT:
4. DISPLAY CARS IN A FRAME
<html>
<frameset cols="40%,60%">
<frame name="leftframe"src="Contents.html" marginwidth=30 marginheight=20 scrolling="Yes">
<frame name="rtframe"src="Starting.html" marginwidth=30 marginheight=20 scrolling="Yes">
</frameset>
</html>
<html>
<head>
<title>Contents</title>
</head>
<body>
<h1>CONTENTS</h1>
<ul>
<li><a href="AUDI.html"target="rtframe">AUDI CAR</a>
<li><a href="BMW.html"target="rtframe">BMW CAR</a>
<li><a href="HONDA.html"target="rtframe">HONDA CAR</a>
<li><a href="MARUTI.html"target="rtframe">MARUTI CAR</a>
<li><a href="TOYOTA.html"target="rtframe">TOYOTA CAR</a>
</ul>
</body>
</html>
<html>
<head>
<title>WELCOME</title>
</head>
<body>
<h1>WELCOME</h1>
Select any of the item shown in the left and you will find the details
</body>
</html>
“AUDI.html”
<html>
<head>
</head>
<body>
<center><img src="D:\PERIANAYAGI\audi car.jpeg"height=300width=240></center>
<p>*Audi car is very beautiful car</p>
<p>*Audi car looks like very much</p>
<p>*The audiA4 is a line of compact executive car produced since late 1994 by the human
car manufacture Audi a subsidiary of the volts way on</p>
</body>
</html>
“BMW.html”
<html>
<head>
</head>
<body>
<center><img src="D:\PERIANAYAGI\BMW.jpeg"height=280width=240></center>
<p>*BMW car is very expansive</p>
<p>*BMW car looks like very much</p>
<p>*BMW is an entry level luxury can manufactured by the German automobiles since
1975</p>
</body>
</html>
“HONDA.html”
<html>
<head>
</head>
<body>
<center><img src="D:\PERIANAYAGI\honda.jpeg"height=300width=240></center>
<p>*Honda is a beautiful car</p>
<p>*Honda car looks like very much</p>
<p>*It is an Indian brand and manufactured by the automobiles since April 1984</p>
</body>
</html>
“MARUTI.html”
<html>
<head>
</head>
<body>
<center><img src="D:\PERIANAYAGI\maruti.jpeg"height=280width=240></center>
<p>*Maruti is a beautiful car</p>
<p>*Maruti is a corporation limited company</p>
<p>*Larger more powerful and heavier than sports car, their vehicles have a FR layout
seating for four</p>
</body>
</html>
“TOYOTA.html”
<html>
<head>
</head>
<body>
<center><img src="D:\PERIANAYAGI\toyato.jpeg"height=280width=240></center>
<p>*Toyota is a beautiful car</p>
<p>*Toyota car has many colors</p>
<p>*The Toyota is a mid engine sport car designed and develop in Germany</p>
</body>
</html>
OUTPUT:
5. HTML FORM COVERING MAJOR ELEMENTS
<html>
<head>
<title>biodata</title>
<form action="biodata.html">
</head>
<body>
<h1 align=center>BIODATA</h1>
<form method="post" name="f" onsubmit="display()">
NAME:
<input type="text" name="textname" size=15><br><br>
FATHER NAME:
<input type="text" name="fname" size=15><br><br>
DATE OF BIRTH:
Date<select><option>1<option>2<option>3<option>4<option>5<option>6<option>7
<option>8<option>9<option>10<option>11<option>12<option>13<option>14<option>15<o
ption>16<option>17<option>18<option>19<option>20<option>21<option>22<option>23<o
ption>24<option>25<option>26<option>27<option>28<option>29<option>30<option>31<b
r><br>
</select>
Month<select><option>JAN<option>FEB<option>MAR<option>APR<option>MAY
<option>JUN<option>JUL<option>AUG<option>SEP<option>OCT<option>NOV<option>
DEC
<br><br></select>
Year<select><option>1999<option>2000<option>2001<option>2002<option>2003<
option>2004<option>2005<option>2006<br><br></select><br><br>
NATIONALITY:
<input type="text" name="" size=15><br><br>
GENDER:
<input type="radio" name ="gender" value="male">Male
<input type="radio" name ="gender" value="female">Female <br><br>
ADDRESS:
<textarea id="address" name="address" cols="30" rows="5"></textarea>
<br><br>
MOBILE NUMBER: <input type="text" name="" size=10><br><br>
EMAIL ADDRESS: <input type="text" name="" size=15><br><br>
LANGUAGES KNOWN: <input type="checkbox" name="checkbox" value="">Tamil
<input type="checkbox" name="checkbox" value=" " >English
<input type="checkbox" name="checkbox" value=" ">Malayalam
<input type="checkbox" name="checkbox" value=" ">Hindi ; 
Other languages known: <input type="text" name="" size=15><br><br>
<input type="Submit" value="Submit">
<input type="Reset" value="Reset">
</form>
</body>
</html>
<html>
<head>
<title>form submission </title>
</head>
<body>
Your Form is Submitted
</body>
</html>
OUTPUT:
6. EMBED AUDIO AND VIDEO IN HTML PAGE
<!DOCTYPE html>
<html>
<header>
<h1 align="center">Welcome to Our Audio and Video Embedded Page</h1>
</br>
</header>
<body>
<div align="center">
<audio controls>
<source src="audio/1.ogg" type="audio/ogg">
<source src="au.mp3" type="audio/mpeg">
</audio>
</div>
</br>
<div align="center">
<video width="620" height="540" controls>
<source src="video/1.mp4" type="video/mp4">
<source src="HappyBirthday.mp4" type="video/mp4">
</video>
</body>
</html>
OUTPUT:
7. ROTATE AN ELEMENT USING CSS
<DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
img
{
height:500px;
width:500px;
border_radius:500px;
border:solid red;
transform:rotate(30deg);
transition:3s;
}
img:hover
{
transform:rotate(90deg);
)
</style>
<body>
</br></br></br></br></br>
<imgsrc="rot4.jpg"/>
</body>
</html>
OUTPUT:
8. BUILD A SIMPLE QUIZ
<html>
<head>
<title>Quiz</title>
</head>
<body>
<h1><center>QUIZ</center></h1>
<form name="myform">
Q1.What is the capital of India?<br>
<input type="radio" name="q1" value="a">Delhi</br>
<input type="radio" name="q1" value="b">Mumbai</br>
<input type="radio" name="q1" value="c">Calcutta</br>
<input type="radio" name="q1" value="d">Chennai</br></br>
Q2.HTML Stands for?<br>
<input type="radio" name="q2" value="a">HyperText Markup Language</br>
<input type="radio" name="q2" value="b">HyperTension Markup Language</br>
<input type="radio" name="q2" value="c">DataDefinition Language</br>
<input type="radio" name="q2" value="d">DataManipulation Language</br>
Q3.The term Computer is derived from ?<br>
<input type="radio" name="q3" value="a">Latin</br>
<input type="radio" name="q3" value="b">German</br>
<input type="radio" name="q3" value="c">French</br>
<input type="radio" name="q3" value="d">Arabic</br>
Q4.The first computer were programmed using?<br>
<input type="radio" name="q4" value="a">Assembly language</br>
<input type="radio" name="q4" value="b">Machine language</br>
<input type="radio" name="q4" value="c">Source Code</br>
<input type="radio" name="q4" value="d">Object code</br>
Q5.Which device is required for the Internet connection?<br>
<input type="radio" name="q5" value="a">Joystick</br>
<input type="radio" name="q5" value="b">Modem</br>
<input type="radio" name="q5" value="c">CD Drive</br>
<input type="radio" name="q5" value="d">NIC Card</br>
<input type="button" value="Submit" onclick="check()">
</form>
<script>
function check()
{
var q1=document.myform.q1.value;
var q2=document.myform.q2.value;
var q3=document.myform.q3.value;
var q4=document.myform.q4.value;
var q5=document.myform.q5.value;
var count=0;
if(q1=="a")
{
count++;
}
if (q2=="a")
{
count++;
}
if(q3=="a")
{
count++;
}
if(q4=="b")
{
count++;
}
if(q5=="b")
{
count++;
}
alert("You get " + count + " marks");
}
</script>
</body>
</html>
OUTPUT:
