Scribd
Upload
5 views

HTML PROGRAM AND OUTPUT

HTML PROGRAM AND OUTPUT

Uploaded by

subanth
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

HTML PROGRAM AND OUTPUT

HTML PROGRAM AND OUTPUT

Uploaded by

subanth
Copyright
© © All Rights Reserved
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