1.
HTML document that demonstrate common HTML Tags
[Link]
<HTML><HEAD><TITLE>SAVE ENVIRONMENT</TITLE></HEAD>
<BODY BGCOLOR=#66FF33 TEXT=#CC3399>
<h1><FONT COLOR ="red"><CENTER> THE ENDANGERED
TIGER</CENTER></FONT></h1>
<P ALIGN="justify">Tigers are native to much of Asia, from some of the coldest
regions to the steamy rainforests of the Indonesian Islands.
They are the top predator in every ecosystem they inhabit. Until the 20th Century there
were nine tiger subspecies that probably numbered over 100,000 animals.
extinct—200-pound (90 kilo)Balinese .</P>
<BR>Depending on whether there are any remaining <BR>South China tigers—nobody
has seen one in years—there are <BR>either 5 or 6 tiger subspecies remaining in
existence;
<BR> all are endangered. All tiger subspecies put togethercurrently <BR> amount to
fewer than 3,000 endangered tigers remaining in the wild.
<HR WIDTH=100% SIZE=5 COLOR="yellow">
</BODY>
</HTML>
2. Design a simple and attractive webpage for Kerala tourism. It should contain
features like background colour /image, heading, text formatting, image and font
tags etc
<HTML>
<HEAD>
<TITLE>Kerala Tourism</TITLE>
</HEAD>
<BODY bgcolor=”YELLOW”>
<CENTER><IMG src="[Link]" Border =2 height=250 width=800></CENTER>
<FONT face="Dyuthi" color="blue">
<H1 align ="center">Kerala God's Own Country </H1>
</FONT>
<P align ="center">
<FONT face="Caladea" size = 5 color="Red"> A long shoreline with serene
beaches<BR> Tranquil stretches of emerald backwaters<BR> Lush hill stations <BR>
Exotic wildlife<BR>
</FONT>
</P>
<H2><U><I>Tourist Locations</I></U></H2>
<IMG src="[Link]" height =200 width = 200 Border =2>
<IMG src="[Link]" height =200 width = 200 Border =2>
<IMG src="[Link]" height =200 width = 200 Border =2>
<IMG src="[Link]" height =200 width = 200 Border =2>
</BODY>
</HTML>
3. Design a simple webpage about your school. Create another webpage
named [Link] containing the school address. Give links to
school page to [Link]
<HTML>
<HEAD>
<TITLE>MY SCHOOL</TITLE>
</HEAD>
<BODY background="[Link]">
<CENTER>
<H1>KOPPAM GVHSS</H1>
<FONT face="Caladea" size = 5 color="Red">
[Link] Higher Secondary School <BR>is situated in Koppam, [Link]
</FONT>
<BR>
<FONT size = 5 color="WHITE">Click for </FONT><A
href="[Link]">Address</A>
</CENTER>
</BODY>
</HTML>
[Link]
<HTML>
<HEAD>
<TITLE>ADDRESS</TITLE>
</HEAD>
<BODY bgcolor="silver">
<H1> MY SCHOOL ADDRESS</H1>
<HR>
<BR>
<FONT face="Caladea" size = 5 color="Red"> GVHSS KOPPAM<BR>
KOPPAM<BR>
PULASSERI P O<BR> PALAKKAD<BR> Kerala - 679307
</FONT>
</BODY>
</HTML>
4. HTML document that demonstrates List tags-Nested list
<html>
<head>
<title> Nested List </title>
</head>
<body>
<h2>Nested ordered List</h2>
<OL>
<LI>Programming Languages
<UL Type=”circle”>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
</UL>
</LI>
<LI>Data Structure
<UL Type=”circle”>
<li>Array</li>
<li>stack</li>
<li>Queue</li>
<li>Trees</li>
</UL>
</LI>
<LI>Web Technologies
<UL type="disc">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</UL>
</LI>
</OL>
</body>
</html>
5. Display the following Nested list in html
Various Diseases
• Viral Diseases
1. Sinusitis
2. Influenza
3. Pneumonia
• Bacterial Diseases
1. Cholera
2. Tuberculosis
3. Syphilis
• Fungal Diseases
<html>
<head>
<title> Nested List </title>
</head>
<body>
<h2>Various Diseases</h2>
<UL>
<LI>Viral Diseases
<OL Type=”1”>
<li>Sinusitis</li>
<li> Influenza</li>
<li>Pneumonia</li>
</OL>
</LI>
<LI> Bacterial Diseases
<OL Type=”1”>
<li>Cholera</li>
<li> Tuberculosis</li>
<li>Syphilis</li>
</OL>
</LI>
<LI>Fungal Diseases</LI>
</UL>
</body>
</html>
6. HTML document that demonstrate Table Tags
<html>
<head>
<title>Table Example</title>
</head>
<body>
<TABLE border="2" bgcolor="PINK" width="50%" height="50%">
<CAPTION>YEAR WISE PARTICIPANTS</CAPTION
<TR>
<TH rowspan="2">YEAR</TH>
<TH colspan="3">Number of Participants</TH>
</TR>
<TR>
<TH>Athletics</TH>
<TH>Football</TH>
<TH>Cricket</TH>
</TR>
<TR>
<TD>2020</TD>
<TD>55</TD>
<TD>45</TD>
<TD>40</TD>
</TR>
<TR>
<TD>2021</TD>
<TD>56</TD>
<TD>50</TD>
<TD>50</TD>
</TR>
<TR>
<TD>2022</TD>
<TD>45</TD>
<TD>55</TD>
<TD>35</TD>
</TR>
</TABLE>
</BODY>
</HTML>
7. Create a Login Form in HTML
<html>
<body>
<h1>Login Form</h1>
<TABLE border="3" bgcolor="PINK">
<TD>
<form">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</TD>
</TABLE>
</body>
</html>
8. Create a registration form in html
<html>
<body>
<table border="2">
<tr>
<td>
<form>
<div>
<h3>Employee Details</h3>
<label for="firstName">First name:</label>
<input type="text" id="firstName" name="firstName"> <br><br>
<label for="lastName">Last name:</label>
<input type="text" id="lastName" name="lastName"><br><br>
</div>
Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female <br><br>
<div>
<label for="employeeId">Employee ID:</label>
<input type="text" id="employeeId" name="employeeId"> <br><br>
<label for="designation">Designation:</label>
<input type="text" id="designation" name="designation"> <br><br>
<label for="phoneNumber">Phone Number:</label>
<input type="number" id="phoneNumber" name="phoneNumber"> <br><br>
</div>
<button type="submit">Submit</button>
</form>
</td>
</tr>
</table>
</body>
</html>
CASCADING STYLE SHEETS(CSS)
1. Draw a rectangle/square and apply animation using @keyframes in CSS
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 10s infinite;
}
@keyframes mymove
{
0% {left: 0px;}
25% {left: 50Px;}
75% {left: 500px;}
100% {left: 0px;}
}
</style>
</head>
<body>
<h1>The @keyframes Rule</h1>
<div></div>
</body>
</html>
2. Apply animation to background of webpage and to a rectangle using @keyframes
in CSS
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove1 5s infinite;
}
body {
animation: mymove2 5s infinite;
}
@keyframes mymove1
{
from {top: 0px;}
to {top: 200px;}
}
@keyframes mymove2
{
0% {background:BLUE;}
25% {background:BLUE;}
75% {background:YELLOW;}
100% {background:PINK;}
}
</style>
</head>
<body>
<h1>The @keyframes Rule</h1>
<div></div>
</body>
</html>
3. Write an external css to apply border ,float properties to html page
[Link]
<html>
<head>
<link rel='stylesheet' type='text/css' media='screen' href='[Link]'>
</head>
<body>
<div class="outer">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
</div>
</body>
</html>
[Link]
.outer{
width:100%;
height: 600px;
background-color:cyan;
padding: 10px; }
.box1{
width:40%;
height: 30%;
background-color:blue;
float: left;
margin: 10px; }
.box2{
width:40%;
height: 30%;
background-color:blueviolet;
float: left;
margin: 10px; }
.box3{
width:40%;
height: 30%;
background-color:brown;
float: left;
margin: 10px; }
.box4{
width:40%;
height: 30%;
background-color:gold;
float: left;
margin: 10px; }
4. A CSS Login Form
[Link]
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h2>Login Page</h2><br>
<div class="login">
<form id="login" method="get" action="[Link]">
<label><b>User Name
</b>
</label>
<input type="text" name="Uname" id="Uname" placeholder="Username">
<br><br>
<label><b>Password
</b>
</label>
<input type="Password" name="Pass" id="Pass" placeholder="Password">
<br><br>
<input type="button" name="log" id="log" value="Log In Here">
<br><br>
<input type="checkbox" id="check">
<span>Remember me</span>
<br><br>
<a href="#"> ForgotPassword</a>
</form>
</div>
</body>
</html>
[Link]
body{
margin: 0;
padding: 0;
background-color:PINK;
font-family: 'Arial';
}
.login{
width: 382px;
overflow: hidden;
margin: auto;
margin: 20 0 0 450px;
padding: 80px;
background: #23464f;
border-radius:55px ;
}
h2{
text-align: center;
color: #277582;
padding: 20px;
}
label{
color: #08ffd1;
font-size: 17px;
}
#Uname{
width: 300px;
height: 30px;
border: none;
border-radius: 3px;
padding-left: 8px;
}
#Pass{
width: 300px;
height: 30px;
border: none;
border-radius: 3px;
padding-left: 8px;
}
#log{
width: 300px;
height: 30px;
border: none;
border-radius: 17px;
padding-left: 7px;
color: blue;
}
span{
color: white;
font-size: 17px;
}
a{
float: right;
background-color: white;
}
5. Create a web page with
• A heading (say “Welcome to Our School”)
• A paragraph with some text(say ‘about my school’)
Apply CSS to
• Change the background colour of the web page to light blue
• Style the heading to have a text colour of blue and font size of 40px.
• Style the paragraph with a font size of 25px and make the text colour red
• When Mouse is hovered on the heading, it should be underlined.
<html >
<head>
<title>Welcome Page</title>
<style>
body
{
background-color: lightblue;
}
h1
{
color: blue; font-size: 40px;
}
p
{
font-size: 25px;
color: red;
}
h1:hover
{
Text-decoration:underlined;
}
</style>
</head>
<body>
<h1>Welcome to My School</h1>
<p>
This is a simple webpage created to practice HTML and CSS.
I hope you enjoy exploring my website! My school details will be
updated soon in this site ..
</p>
</body>
</html>
6. Using CSS , invert the behaviour of <h1> to <h6> tags
<html>
<head>
<style>
h1
{
font-size: 12px;
}
h2
{
font-size: 14px;
}
h3
{
font-size: 18px;
}
h4
{
font-size: 24px;
}
h5
{
font-size: 32px;
}
h6
{
font-size: 36px;
}
</style>
</head>
<body>
<h1>This is H1</h1>
<h2>This is H2</h2>
<h3>This is H3</h3>
<h4>This is H4</h4>
<h5>This is H5</h5>
<h6>This is H6</h6>
</body>
</html>
JAVASCRIPT
1. Receive a number as input and find the square of the number using javascript.
Show the square in another textbox.
<html>
<body>
<script>
function sqrForm()
{
var num=[Link];
[Link]=num*num;
}
</script>
<form name="myForm" method="POST">
<label>Enter Num: </label>
<input type="number" name="txtnum"><br>
<label> Square </label> :
<input type="number" name="txtsqrt">
<input type="button" value="Calculate" onclick="sqrForm()">
</form>
</body>
</html>
2. Develop a HTML file that includes javascript for the following
• Input a number obtained using prompt
• Find natural numbers up to the above number
<html>
<body>
<script>
n=prompt("Enter an number(Limit)")
for(i=1;i<=n;i++)
{
[Link](i);
[Link]("<br>");
}
</script>
</body>
</html>
3. Using prompt receive a lowercase string and develop javascript program to
convert the string to uppercase and show the result in alert box.
<html>
<body>
<script>
lstring=prompt("Enter a lower case string");
ustring=[Link]();
alert(ustring);
</script>
</body>
</html>
4. Receive two numbers in textboxes and use javascript to show their sum in an alert
box when a button is clicked.
<html>
<body>
<script>
function sumForm()
{
var num1=Number([Link]);
var num2=Number([Link]);
s=num1+num2;
alert("Sum is"+s);
}
</script>
<form name="myForm" method="POST">
Enter Num1: <input type="number" name="txtnum1"><br>
Enter Num2: <input type="number" name="txtnum2"><br>
<input type="button" value="sum" onclick="sumForm()">
</form>
</body>
</html>
5. Form validation using javascript-
• Create minimum one text box and on submit, ensure the textbox contains a text.
<html>
<head>
<script>
function validateForm()
{
let x = [Link]["myForm"]["fname"].value;
if (x == "")
{
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
<form name="myForm" action="/action_page.php" onsubmit="return
validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
6. Using function in javascript find the factorial of a number . Receive the number
through an html form.
<html>
<body>
<script>
function fact()
{
var n=Number([Link]);
f=1;
for(i=1;i<=n;i++)
f=f*i;
alert("factorial is "+f);
}
</script>
<form name="myForm" >
Enter Number <input type="number" name="txtnum1"><br>
<input type="button" value="find factorial" onclick="fact()">
</form>
</body>
</html>
7. Receive a number through a text box in a form. Write Java script program to check the
whether the number is odd or even.
<html>
<body>
<script>
function oddeven()
{
var n=Number([Link]);
if(n%2==0)
alert(n +"is Even");
else
alert(n +"is Odd");
}
</script>
<form name="myForm" >
Enter Number <input type="number" name="txtnum1"><br>
<input type="button" value="Check" onclick="oddeven()">
</form>
</body>
</html>
8. Receive a number through a text box in a form. Write Java script program to check the
whether the number is Positive ,Negative or Zero.
<html>
<body>
<script>
function checknum()
{
var n=Number([Link]);
if(n>0)
alert(n +"is Positive");
else if(n<0)
alert(n +"is Negatice");
else
alert("You Entered Zero");
}
</script>
<form name="myForm" >
Enter Number <input type="number" name="txtnum1"><br>
<input type="button" value="Check" onclick="checknum()">
</form>
</body>
</html>
9. Receive two numbers in textboxes and use javascript to print the larger number.
<html>
<body>
<script>
function larger()
{
var num1=Number([Link]);
var num2=Number([Link]);
if(num1>num2)
[Link]("Larger="+num1);
else
[Link]("Larger="+num2);
}
</script>
<form name="myForm">
Enter Num1: <input type="text" name="txtnum1"><br>
Enter Num2: <input type="text" name="txtnum2"><br>
<input type="button" value="show" onclick="larger()">
</form>
</body>
</html>
10. Develop a HTML file that includes javascript for the following
• Input a number obtained using prompt
• Find sum of natural numbers up to the above number
<html>
<body>
<script>
n=prompt("Enter an number(Limit)")
s=0;
for(i=1;i<=n;i++)
{
s=s+i;
}
[Link](“Sum of natural numbers up to ”+n+”is”+s);
</script>
</body>
</html>