3.
Create a form by using various attributes of the input tags (text box, multiline
textbox, option button, check box)
<!DOCTYPE html>
<html>
<head>
<title>
Registration form
</title>
</head>
<body>
<body bgcolor="yellow" >
<H2> Creating a Registration form: </H2>
<br>
<form>
<label> Firstname: </label>
<input type="text" name="firstname" size="15"> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"> <br> <br>
<label>
Course :
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Com">B.Com</option>
<option value="B.Sc">B.Sc</option>
<option value="B.A">B.A</option>
</select>
<br>
<br>
<label>
Gender :
</label><br>
<input type="radio" name="gender"> Male <br>
<input type="radio" name="gender"> Female <br>
<br>
<label>
Hobbies:
</label>
<br>
<input type="checkbox" name="Programming"> Programming <br>
<input type="checkbox" name="Sports"> Sports <br>
<input type="checkbox" name="Singing"> Singing <br>
<input type="checkbox" name="Reading"> Reading <br>
<br>
<br>
<label>
Address :
<br>
<textarea cols="80" rows="5" value="address">
</textarea>
</label>
<br> <br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
4. Create a simple HTML page by using some of the basic tags (hyperlink, marquee,image)
<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left">
<img src="../Images/Nature.jpg" width="120" height="80" alt="Natural" />
</marquee>
<a href="http:\\www.google.com"> GOOGLE</a>
</body>
</html>
5. Create Time-Table using table tag.
<!DOCTYPE html>
<html>
<body>
<h1>TIME TABLE</h1>
<h2>CLASS: IV SEM BCA 'B'</h2>
<body bgcolor="pink" >
<table border="5" cellspacing="0" align="center">
<caption> <font size="25"> Timetable </font> </caption>
<tr>
<td align="center" height="50"width="100"><br>
<b>Day/Period</b></br>
</td>
<td align="center" height="50"width="100">
<b>I<br>8.15-9.15</b>
</td>
<td align="center" height="50"width="100">
<b>II<br>9.15-10.15</b>
</td>
<td align="center" height="50"width="100">
<b>III<br>10.15-11.15</b>
</td>
<td align="center" height="50"width="100">
<b>11.15-12.00</b>
</td>
<td align="center" height="50"width="100">
<b>IV<br>12:00-1:00</b>
</td>
<td align="center" height="50"width="100">
<b>V<br>1:00-2:00</b>
</td>
<td align="center" height="50"width="100">
<b>VI<br>2:00-3:00</b>
</td>
</tr>
<tr>
<td align="center" height="50">
<b>Monday</b></td>
<td align="center" height="50">IC</td>
<td align="center" height="50">IT</td>
<td align="center" height="50">ADA</td>
<td rowspan="6" align="center" height="50">
<h2>L<br>U<br>N<br>C<br>H</h2>
</td>
<td align="center" height="50">SE</td>
<td align="center" height="50">K/H/S</td>
<td align="center" height="50">ENG</td>
</tr>
<tr>
<td align="center" height="50">
<b>Tuesday</b>
</td>
<td align="center" height="50">IT</td>
<td align="center" height="50">K/H/S</td>
<td align="center" height="50">ENG</td>
<td align="center" height="50">PED</td>
<td align="center" height="50">IC</td>
<td align="center" height="50">SE</td>
</tr>
<tr>
<td align="center" height="50">
<b>Wednesday</b>
</td>
<td align="center" height="50">FAI</td>
<td align="center" height="50">IT</td>
<td align="center" height="50">K/H/S</td>
<td align="center" height="50">ENG</td>
<td align="center" height="50">RR</td>
<td align="center" height="50">ADA</td>
</tr>
<tr>
<td align="center" height="50">
<b>Thursday</b>
</td>
<td align="center" height="50">IT Lab</td>
<td align="center" height="50">ADA Lab</td>
<td align="center" height="50">SE</td>
<td align="center" height="50">K/H/S</td>
<td align="center" height="50">FAI</td>
<td align="center" height="50">IC</td>
</tr>
<tr>
<td align="center" height="50">
<b>Friday</b>
</td>
<td align="center" height="50">ENG</td>
<td align="center" height="50">ADA</td>
<td align="center" height="50">ADA Lab</td>
<td align="center" height="50">FAI</td>
<td align="center" height="50">IT Lab</td>
<td align="center" height="50"> </td>
</tr>
<tr>
<td align="center" height="50">
<b>Saturday</b>
</td>
<td align="center" height="50">IC</td>
<td align="center" height="50">IT Lab</td>
<td align="center" height="50">K/H/S</td>
<td align="center" height="50">ADA</td>
<td align="center" height="50">SE</td>
<td align="center" height="50"> </td>
</tr>
</table>
</body>
</html>
6. Creation of Frames in browser window using HTML.
Frame 1 Creation
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: #C4B0FF;
height:600px;
}
</style>
</head>
<body>
<div>
<h2>This is first frame</h2>
</div>
</body>
</html>
Frame 2 Creation
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: #F2BED1;
height: 600px;
}
</style>
</head>
<body>
<div>
<h2>This is Second frame</h2>
</div>
</body>
</html>
Frame 3 Creation
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: #E55807;
height: 600px;
}
</style>
</head>
<body>
<div>
<h2>This is Third frame</h2>
</div>
</body>
</html>
Main Frame
<!DOCTYPE html>
<html>
<head>
<title> FRAME TAG </title>
</head>
<frameset cols="30%,40%,30%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>
7. Create a web page with multiple types of style sheet used in a single page
Style
.red {
color: red;
}
.thick {
font-size:30px;
}
.blue {
color:blue;
}
Main Program
<!DOCTYPE html>
<html>
<head>
<title> CSS </title>
<style>
body
{
background-color:magenta;
}
p
{
color:yellow;
text-align:center;
}
</style>
<link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body>
<h1 style="color:cyan; text-align:center;">This is Inline CSS</h1>
<h2 style="background-color:grey">
<p> This is Internal Style Sheet - CSS </p>
</h2>
<h2> The External style sheet is applied on the following </h2>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "blue">This is blue</p>
<p class = "thick blue">This is thick and blue</p>
</body>
</html>
8. Write a java script program to create dialogue boxes using alert, confirm and
prompt methods.
<!DOCTYPE html>
<html>
<head>
<title> Customer Feedback </title>
</head>
<body>
<h1> Customer Feedback </h1>
<p> Thank You for choosing our products! We would like to hear your feedback
so that we can continue to improve our services.</p>
<button onclick="showFeedbackForm()"> Leave Feedback </button>
<script>
function showFeedbackForm() {
let name = prompt("Enter your Name :");
let email = prompt("Enter your mail-id :");
let rating = prompt("Rate your experience from 1 to 5 :");
let comment = prompt("Leave your comments:");
if(name && email && rating && comment) {
let result=confirm("Thank You for your Feedback! Do you want to submit your
feedback?");
if(result){
alert("Your feedback has been submitted. Thank You for your valuable input !");
}
}else{
alert("Please fill in all fields to submit your feedback ");
}
}
</script>
</body>
</html>
9. Write a java script program on Form Validations.
<html>
<head>
<meta charset="utf-8">
/* most commonly used character encoding */
/* <meta http-equiv="Content-Type" content="text/html; charset=windows-
1252"> */
/* older technique that is used for indicating the character encoding of a web
page */
<title> Validate Text Boxes </title>
<script>
function validate()
{
var myArray = new Array();
for(var i=0;i<myForm.length;i++)
{
if(myForm.elements[i].value.length==0)
{
myArray.push(myForm.elements[i].name);
}
}
if(myArray.length!=0 )
{
alert("The Following Text Boxes are Empty:\n" +myArray);
}
}
</script>
</head>
<body bgcolor="linen">
<form name="myForm">
<br><br><br>
Name:<input type="text" name="Name">
<br><br><br>
Class:<input type="text" name="Class">
<br><br><br>
Age:<input type="text" name="Age">
<br><br><br>
<input type="button" value="check" onclick="validate()">
</form>
</body>
</html>
10. Write a java script program to perform four arithmetic operations: Addition,
Subtraction, Multiplication and Division on two numbers.
<!DOCTYPE html>
<html>
<body>
<script>
function addition(){
a=Number(my_cal.first.value);
b=Number(my_cal. second.value);
c=a+b;
my_cal.total.value=c;
}
function subtraction(){
a=Number(my_cal.first.value);
b=Number(my_cal.second.value);
c=a-b;
my_cal.total.value=c;
}
function multiply(){
a=Number(my_cal.first.value);
b=Number(my_cal.second.value);
c=a*b;
my_cal.total.value=c;
}
function division(){
a=Number(my_cal.first.value);
b=Number(my_cal.second.value);
c=a/b;
my_cal.total.value=c;
}
</script>
<body bgcolor="blue">
<form name="my_cal">
<br> <br> <br>
Number 1: <input type="text" name="first">
<br> <br> <br>
Number 2: <input type="text" name="second">
<br> <br> <br>
<input type="button" value="ADD" onclick="addition();">
<input type="button" value="SUB" onclick="subtraction();">
<input type="button" value="MUL" onclick="multiply();">
<input type="button" value="DIV" onclick="division();">
<br><br><br>
Result: <input type="text" name="total">
</body>
</html>
11. Write a program to create a website of our college.
<!DOCTYPE html>
<html>
<head>
<title> About Sindhi College </title>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body bgcolor="pink" text="black">
<h1> <center> SINDHI COLLEGE </center> </h1>
<h2> <center> Kempapura, Hebbal,
Bengaluru - 560024.
</center> </h2>
<h2> <center> Permanently Affiliated to Bengaluru City University
</center> </h2>
<h3> <center> NAAC Re-accredited </center> </h3>
<h3><center>An ISO 9001:2015 Certified Institution </center></h3>
<img src="logo.png" style="width:10%;">
<h1> COURSES OFFERED </h1>
<ol>
<h2> <b> UG COURSES </b> </h2>
<ol>
<b> <li> B.Com </li> </b>
<b> <li> B.Com (LSCM) </li> </b>
<b> <li> BBA </li> </b>
<b> <li> BBA (Aviation) </li> </b>
<b> <li> BCA </li> </b>
<b> <li> B.Sc </li> </b>
<b> <li> BA </li> </b>
</ol>
<h2> <b> PG COURSES </b> </h2>
<ol>
<b> <li> M.Com </li> </b>
<b> <li> M.Com (FA) </li> </b>
</ol>
</body>
</html>
