0% found this document useful (0 votes)
14 views22 pages

HTML Program and Output

HTML PROGRAM AND OUTPUT

Uploaded by

subanth
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
14 views22 pages

HTML Program and Output

HTML PROGRAM AND OUTPUT

Uploaded by

subanth
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

1.

WEBSITE
<html>
<head>
<title>Noorul islam college of arts & science</title>
</head>
<body>
<body background="C:\Users\SYSTEM1\Pictures\college img\college.jpg" text="blue">
<h1><b><center><i><font color="black">NOORUL ISLAM COLLEGE OF ARTS &
SCIENCE</h1></b></center></i></font color="black">
<A HREF="home.html">
<h2>HOME</h2></A>
<A HREF="about us.html">
<h2>ABOUT US</h2></A>
<A HREF="contact us.html">
<h2>CONTACT US</h2></A>
</body>
</html>

Home.html

<html>
<head>
<title>Noorul islam college of arts & science</title>
</head>
<body>
<body bgcolor="light blue"text="black">
<h1><b><center><i><font color="green">NOORUL ISLAM COLLEGE OF ARTS &
SCIENCE</h1></b></center></i></font color="green">
<br><font color="black"><h3>The College is located in the rural back drop of serene Veli hills to
cater the needy students of the locality and the neighbouring state of Kerala.</br><br> The main
objective of this institution affiliated to Manonmaniam Sundaranar University, Tirunelveli to enale
students to acquire industrial and employable skills and to develop human resources with right
competencies...</font color="black"></h3></br>
<HOME</A>
</body>
</html>
About us.html

<html>
<head>
<title>Noorul islam college of arts & science</title>
</head>
<body>
<body bgcolor="pink"text="yellow">
<h1><b><center><i><font color="green">NOORUL ISLAM COLLEGE OF ARTS &
SCIENCE</h1></b></center></i></font color="green">
<A HREF="staffs.html"><h2>STAFFS</h2></A>
<A HREF="academics.html"><h2>ACADEMICS</h2></A>
<A HREF="contact us.html">
<ABOUT US</A>
</body>
</html>

Staffs.html

<html>
<head>
<title>Noorul islam college of arts & science</title>
</head>
<body>
<body bgcolor="green">
<h1><b><center><b><font color="white">NOORUL ISLAM COLLEGE OF ARTS &
SCIENCE</h1></b></center></b></font color="white">
<A HREF="STAFFS.html">
<A HREF="teaching staffs.html">
<font color="orange"><i><h1>TEACHING STAFFS</font color="orange"></i></h1></A>
<A HREF="non teaching staffs.html">
<font color="orange"><i><h1>NON TEACHING STAFFS</font color="orange"></i></h1></A>
<STAFFS</A>
</body>
</html>
OUTPUT
2. CALANDAR
<html>
<head> </head>
<body bgcolor="pink">
<body><center> <H1><font color="green">CALENDER FOR JANUARY MONTH</font
color="green"></H1></center> </body>
<table width ="100%" cell spacing ="6" cell padding="6" border="6">
<tr>
<th><font color="red">SUNDAY</font color="red"></th>
<th><font color="blue">MONDAY</font color="blue"></th>
<th><font color="blue">TUESDAY</font color="blue"></th>
<th><font color="blue">WEDNESDAY</font color="blue"></th>
<th><font color="blue">THURSDAY</font color="blue"></th>
<th><font color="blue">FRIDAY</font color="blue"></th>
<th><font color="blue">SATURDAY</font color="blue"></th>
</tr>
<tr>
<td> </td>
<td> </td>
<td>1</td>
<td>2</td>
<td><font color="red">3</font color="red"></td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td><font color="red">6</font color="red"></td>
<td>7</td>
<td><font color="red">8</font color="red"></td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td><font color="red">13</font color="red"></td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td><font color="red">19</font color="red"></td>
</tr>
<tr>
<td><font color="red">20</font color="red"></td>
<td>21</td>
<td>22</td>
<td>23</td>
<td><font color="red">24</font color="red"></td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td><font color="red">27</font color="red"></td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>
</body>
</html>
OUTPUT
3. LIST OF FLOWERS

<html>
<head>
<title> list of flowers </title>
</head>
<body bgcolor="orange">
<body >
<b><h1><center><font color="green">FLOWERS</font color="green"></h1></b></center>
<A HREF="LOTUS.html">
<h2>LOTUS</h2></A>
<A HREF="ROSE.html">
<h2>ROSE</h2></A>
<A HREF="LILLY.html">
<h2>LILLY</h2></A>
<A HREF="TULIP.html">
<h2>TULIP</h2></A>
<A HREF="SUNFLOWER.html">
<h2>SUNFLOWER</h2></A>
</body>
</html>

LILLY
<html>
<head>
<title> list of flowers </title>
</head>
<body>
<b><h1><center><font color="blue">LILLY</h1></b></center></font>
<font color="pink" size=26>The lily is a genus of flowering plant. <BR>There are many species of
lilies, like trumpet lilies and tiger lilies.
</font><br><br>
<IMG SRC="C:\Users\SYSTEM1\Pictures\Saved Pictures\LILLY.jpg""
</body>
</html>

LOTUS
<html>
<head>
<title> list of flowers </title>
</head>
<body>
<b><h1><center><font color="blue">LOTUS</h1></b></center></font>
<font color="pink">Lotus is the national flower of India.The flower petals open in the morning
and close at night.
</font><br><br>
<IMG SRC="C:\Users\SYSTEM1\Pictures\Saved Pictures\LOTUS.jpg""
</body>
</html>
ROSE

<html>
<head>
<title> list of flowers </title>
</head>
<body>
<b><h1><center><font color="red">ROSE</h1></b></center></font>
<font color="pink">ROSE is a beautiful flower.
We can see rose in different colors. Mostly rose are seen in all around the world.</font><br><br>
<IMG SRC="C:\Users\SYSTEM1\Pictures\Saved Pictures\rose.jpg""
</body>
</html>

SUNFLOWER

<html>
<head>
<title> list of flowers </title>
</head>
<body>
<b><h1><center><font color="blue">SUNFLOWER</h1></b></center></font>
<font color="red" size=8> Sunflowers are useful plants with large flower heads, or blooms.<BR>
They are named for the way they turn their blooms from east to west to follow the Sun.
<BR>Sunflowers were first grown in North and South America. <BR>Today they are also grown in
other parts of the world, including Europe and Asia.
</font><br><br>
<IMG SRC="C:\Users\SYSTEM1\Pictures\Saved Pictures\SUNFLOWER.jpg""
</body>
</html>

TULIP
<html>
<head>
<title> list of flowers </title>
</head>
<body>
<b><h1><center><font color="blue">TULIP</h1></b></center></font>
<font color="red" size=8> The tulip is a member of the lily family. <BR>The name "tulip" is
thought to be derived from a Persian word for turban, which it may have been thought to
resemble by those who discovered it.
</font><br><br>
<IMG SRC="C:\Users\SYSTEM1\Pictures\Saved Pictures\TULIP.jpg""
</body>
</html>
OUTPUT
4. LIST OF FIVE CARS

<html>
<head>
<title> WORKING WITH FRAME </title>
</head>
<frameset cols="25% , 75%">
<frame src ="Main part.html" >
<frame src="RGB.html" Name= "second frame">
</frameset>
</html>

Main part

<html>
<head>
</head>
<title> Main part </title>
<body bgcolor="pink">
<H3> Menu </H3>
<ul>
<li><A HREF="audi.html" target="second frame">Audi</A>
<li> <A HREF="benz.html" target="second frame"> Benz</A>
<li> <A HREF="bmw.html" target="second frame"> Bmw</A>
<li><A HREF="maruthi.html" target="second frame">Maruthi</A>
<li> <A HREF="scorpio.html"target="second frame"> Scorpio</A>
</body>
</html>

RGB

<html>
<head>
</head>
<title> Right pane </title>
<body bgcolor="pink">
<H3> click on the car of your choice</H3>
</body>
</html>
Audi

<html>
<head>
<title> main part </title>
</head>
<body bgcolor="grey">
<b><h1><center><font color="blue">AUDI</font color="blue"></h1></b></center>
<IMG SRC="C:\Users\SYSTEM1\Pictures\Saved Pictures\audi.jpg ">
<h2>AUDI is a popular car.Its a stylish car too...</h2>
</body>
</html>

Benz

<html>
<head>
<title> main part </title>
</head>
<body bgcolor="grey">
<b><h1><center><font color="blue">benz</font color="blue"></h1></b></center>
<IMG SRC="C:\Users\SYSTEM1\Pictures\Saved Pictures\audi.jpg ">
<h2>benz is a popular car.Its a stylish car too...</h2>
</body>
</html>

BMW

<html>
<head>
<title> main part </title>
</head>
<body bgcolor="grey">
<b><h1><center><font color="blue">BMW</font color="blue"></h1></b></center>
<IMG SRC="C:\Users\SYSTEM1\Pictures\Saved Pictures\audi.jpg ">
<h2>BMW is a popular car.Its a stylish car too...</h2>
</body>
</html>
Maruthi

<html>
<head>
<title> main part </title>
</head>
<body bgcolor="grey">
<b><h1><center><font color="blue">Maruti</font color="blue"></h1></b></center>
<IMG SRC="C:\Users\SYSTEM1\Pictures\Saved Pictures\audi.jpg ">
<h2>Maruti is a popular car.Its a stylish car too...</h2>
</body>
</html>

Scorpio

<html>
<head>
<title> main part </title>
</head>
<body bgcolor="grey">
<b><h1><center><font color="blue">SCORPIO</font color="blue"></h1></b></center>
<IMG SRC="C:\Users\SYSTEM1\Pictures\Saved Pictures\audi.jpg ">
<h2>SCORPIO is a popular car.Its a stylish car too...</h2>
</body>
</html>
OUTPUT
5. FORM ELEMENTS

<html>
<head>
<title>first document</title>
</head><center>
<body bgcolor="brown"text="white">
<form name="user_info" onsubmit="alert('The form is submitted')" action = "post" method =
"get">
<h1 align=center>ENTER DETAILS</h1>
<br><br><br>
login name:
<input type="text" name="login" size=20>
<br><br><br>
Password:
<input type="Password" name="pass" size=25>
<br><br><br>
Birthday:
<input type="month">
<br><br><br>
Sex:F
<input type="radio"name="Sex" value="F">
Sex:M
<input type="radio"name="Sex" value"M">
<br>
<br>
<p>place the order
shirt size
<select name="size"
<option>small</option>
<option>medium</option>
<option>large</option>
<option>xtra large</option>
</select>
<br><br><br>
Comments
<textarea name="comments" row=10 cols=20>
</textarea>
<br><br>
<input type="Submit" value="submit" onClick="Submit()">
<input type="reset" value="clear" onClick="clear()">
</form>
</body>
</html>
OUTPUT
6. AUDIO AND VIDEO

<html>
<head>
<title>audio and video</title>
</head>
<body>
<h1><center>audio</h1>
<center><audio controls>
<source src="song.mp3" type="audio/mp3">
</audio></center>
<br>
<br>
<h1><center>video</h1>
<center><video width="400" height="250" controls>
<source src="movie.mp4" type="video/mp4">
</video></center>
</body>
</html>
OUTPUT
7. ROTATE AN ELEMENT

<html>
<head>
<style>
div
{
width:80px;
height:80px;
background-color:yellow;
}
.rotated
{
transform:rotate(45deg);
background-color:pink;
}
</style>
</head>
<body>
<div>Normal</div>
<div class="rotated">Rotated</div>
</body>
</html>
OUTPUT
8. SIMPLE QUIZ

<html>
<head>
<title> Quiz </title>
</head>
<font color="RED">
<h1 align="center"> A Simple Quiz</h1></font>
<style>
.pad {
background: Lightblue;
color: Blue;
padding: 14px 56px;
}
</style>
<body>
<form name="myform">
<p class="pad">

a1. Who is the father of computer?<br>


<input type="radio" name="a1" value="a">
Charless Babage <br>
<input type="radio" name="a1" value="b"> Darwin <br><br>

a2.HTML stands for?<br>


<input type="radio" name="a2" value="a">
Hyper Text Markup Language <br>
<input type="radio" name="a2" value="b">
Hyper Test Markup Language<br><br>

a3.Example of Artificial Intelligence?<br>


<input type="radio" name="a3" value="a">
Human <br>
<input type="radio" name="a3" value="b">
Robot<br><br>
<input type="button" value="Submit" onclick="check()">
</p>
</form>
<script>

function check()
{
var a1=document.myform.a1.value;
var a2=document.myform.a2.value;
var a3=document.myform.a3.value;
var count=0;
if (a1=="a"){
count++;
}
if (a2=="a"){
count++;
}
if (a3=="b"){
count++;
}
alert("You scored "+count+" Marks")
}
</script>
</body>
</html>
OUTPUT

You might also like