Program 1 :
Design web page for your college containing college name and logo, department list using
href, list tags
<html>
<head>
<title>College Website</title>
</head>
<style>
body {
font-size:20px;
margin: 0;
padding: 0;
background-color:skyblue;
}
header {
background-color:grey;
color: White;
padding: 10px;
text-align: center;
}
</style>
<body>
<header>
<h1>GOVT FIRST GRADE COLLEGE FOR WOMEN'S JAMAKHANDI
</h1>
<img src="C:\Users\Admin\Desktop\[Link]"
width="200" height="200">
</header>
<h3><a href="[Link]">Departments</a></h3>
<h3>Provided Facilites</h3>
<ul>
<li>Hostel</li>
<li>Library</li>
<li>Transport Facility</li>
</ul>
<h3>contact details</h3>
Reach us at:<a href="Email">[Link]@[Link]</a><br>
Contact number:<a href="contact number">9100365659</a>
</body>
</html>
Save [Link]
<html>
<body>
<header><h2>Departments<h2></header>
BA<br>BCom<br>BSc<br>BCA<br>
BBA
</body>
</html>
program 2: create a class timetable using table tag.
<html>
<head>
<title>time table</title>
</head>
<body bgcolor="skyblue">
<H1><CENTER>COLLEGE TIME TABLE</H1>
<table border="2" cellspacing="3" align="center">
<tr>
<td align="center">
<td>8:30-9:30
<td>9:30-10:30
<td>10:30-11:30
<td>11:30-12:30
<td>12:30-2:00
<td>2:00-3:00
<td>3:00-4:00
</tr>
<tr>
<td align="center">MONDAY
<td align="center">English
<td align="center">Lab
<td align="center">Maths
<td rowspan="6"align="center">L<br>U<br>N<br>C<br>H
<td align="center">Physics
<td align="center">CS
<td align="center">---
</tr>
<tr>
<td align="center">TUESDAY
<td align="center">Physics
<td align="center">Maths
<td align="center">English
<td align="center">---
<td align="center">Kannada
<td align="center">CS
</tr>
<tr>
<td align="center">WEDNESDAY
<td align="center">CS
<td align="center">Maths
<td align="center">Kannada
<td align="center">English
<td align="center">Physics
<td align="center">Sports
</tr>
<tr>
<td align="center">THURSDAY
<td align="center">Lab
<td align="center">CS
<td align="center">Maths
<td align="center">English
<td align="center">Lab
<td align="center">Library
<tr>
<td align="center">FRIDAY
<td align="center">English
<td align="center">kannada
<td align="center">CS
<td align="center">Lab
<td align="center">Maths
<td align="center">Sports
</tr>
<tr>
<td align="center">SATURDAY
<td colspan="4" align="center">Seminar
<td align="center">-----
<td align="center">----
</tr>
</body>
</html>
program 3:
Write a HTML code to design Student registrations form for your college Admission
<html>
<head>
<title>Student Registration Form</title>
<head>
<body style="background-color:skyblue">
<h3>STUDENT REGISTRATION FORM</h3>
<form>
<div>
First name:<input type="text"name="first name"required
size="15"/><br><br>
Last name:<input type="text"name="last name"reuired
size="15"/><br><br>
Gender:
<input type="radio"name="gender"value="Male"required/>Male
<input type="radio"name="gender"value="Female"required/>Female
<br><br>
Address:
<br>
<textarea rows="4"cols="30"name="comment"required>
</textarea>
<br><br>
Select Course:
<select name="Course"required>
<option value=" ">None</option>
<option value="BCA">BCA</option>
<option value="BCom">BCom</option>
<option value="BSc">BSc</option>
</select>
<br><br>
<button type="reset">RESET</button>
<button type="submit">SUBMIT</button>
</form>
</body>
</html>
Program 4:
Design Web page with includes Multi-media data (Image, Audio, Video, GIFs etc)
<html>
<head>
<title> Display Multimedia </title>
</head>
<body>
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
</video>
<br> <br>
<audio controls>
<source src=”audio.mp3" type="audio/mp3">
</audio>
<br> <br>
<image control>
<img src="C:\Users\Admin\Desktop\[Link]"
width="300" height="300">
</image control>
</body>
</html>
Program5: Create web page using frame.
<html>
<head>
</title></title>
<style>
body{
background-color:pink;
</style>
</head>
<body>
<h1>FRAME</h1>
</body>
</html>
Program 6:
Write code in HTML to develop a webpage having two frames that divide the webpage
into two equal rows and then divide the row into equal columns fill each frame with a
different background colour.
<html>
<head>
<title>Two Frames Web Page</title>
</head>
<frameset rows="50%, 50%">
<frame src="[Link]" name="frame1" scrolling="no">
<frame src="[Link]" name="frame2" scrolling="no">
</frameset>
</html>
Save [Link]
<html>
<head>
<title>Frame 1</title>
</head>
<body>
<div style="width: 50%; height: 100%; float: left; background-color: lightblue;">
<h1>Frame 1 Column 1</h1>
</div>
<div style="width: 50%; height: 100%; float: left; background-color: lightgreen;">
<h1>Frame 1 Column 2</h1>
</div>
</body>
</html>
Save [Link]
<html>
<head>
<title>Frame 2</title>
</head>
<body>
<div style="width: 50%; height: 100%; float: left; background-color: lightcoral;">
<h1>Frame 2 Column 1</h1>
</div>
<div style="width: 50%; height: 100%; float: left; background-color: lightsalmon;">
<h1>Frame 2 Column 2</h1>
</div>
</body>
</html>
Program 7. Write CSS code to use inline CSS to format your ID card.
<html>
<head>
<title>ID Card</title>
</head>
<body>
<div id="idCard" style="width: 300px; border: 1px solid #f; padding: 20px; textalign:
center;">
<img src="C:\Users\Admin\Desktop\download (3).jfif" style="width: 100px; height: 100px;
border-radius: 50%;">
<h2 style="margin: 10px 0;">Bhagya Divate</h2>
<p style="font-size: 16px; color: black ;">Course: BSC</p>
<ul style="list-style: none; padding : 0;">
<li style="margin-bottom: 5px;">Address: Mysur</li>
<li style="margin-bottom: 5px;">Phone: 98xxxxxx23</li>
<li>Email: [Link]@[Link]</li>
</ul>
</div>
</body>
</html>
OUTPUT:
Program 8:Using HTML, CSS create display a text called -Hello India! on top of an image of
India Map using an overlay.
<!DOCTYPE html>
<html>
<head>
<title>Hello India</title>
<style>
.container {
position: relative;
text-align: center;
}
.overlay {
position: absolute;
top: 45%;
left: 45%;
transform: translate(-50%, -50%);
font-size: 30px;
color: white;
font-weight: bold;
text-shadow: 2px 2px 4px #000000; }
</style>
</head>
<body>
<div class="container">
<img src="C:\Users\Admin\Desktop\download (1).png" alt="India Map" width="600"
height="600">
<div class="overlay">Hello India !</div>
</div>
</body>
</html>
PART-B
[Link] a JavaScript Program to perform Basic Arithmetic operation.
<html>
<head>
<title>Arithmetic operators in Javascript</title></head> <body>
<script type="text/javascript">
var a=parseInt(prompt("enter first number"));
var b=parseInt(prompt("enter second number"));
var sum;
var difference;
var product;
var quotient;
sum=a+b;
difference=a-b;
product=a*b;
quotient=a/b;
[Link]("Sum= ");
[Link](sum);
[Link]("<br>");
[Link]("Difference =");
[Link](difference);
[Link]("<br>");
[Link]("Product=");
[Link](product);
[Link]("<br>");
[Link]("Quotient=");
[Link](quotient);
</script>
</body>
</html>
OUTPUT:
2. JavaScript Program to Check Prime Number
<!DOCTYPE html>
<html>
<body>
<script>
function checkPrime() {
var num = prompt("Enter a number:");
if (num < 2) {
alert("Not a Prime Number");
return;
}
for (var i = 2; i < num; i++) {
if (num % i == 0) {
alert(num + " is Not a Prime Number");
return;
}
}
alert(num + " is a Prime Number");
}
</script>
<button onclick="checkPrime()">Check Prime</button>
</body>
</html>
OUTPUT:
3. JavaScript Program to implement JavaScript Object Concept.
</body>
</html>
<html>
<body>
<script>
[Link]("DOMContentLoaded", function (){
var person = {
firstName: "John",
lastName: "Doe",
age: 30,
greet: function () {
return "Hello, I'm " + [Link] + " " + [Link] + ".";
}};
var outputElement = [Link]("output");
[Link] = "<p>First Name: " + [Link] + "</p>" +
"<p>Last Name: " + [Link] + "</p>" +
"<p>Age: " + [Link] + "</p>" +
"<p>Greeting: " + [Link]() + "</p>";
});
</script>
<div id="output"></div>
</body>
</html>
OUTPUT:
4. JavaScript Program to Create Array and inserting Data into Array
<html >
<body>
<script>
var myArray = [];
[Link]("apple");
[Link]("grapes");
[Link]("cherry");
[Link]("guava");
[Link]("mango");
[Link]("<p>Array Contents: " + [Link](', ') + "</p>");
</script>
</body>
</html>
OUTPUT:
[Link] Program to Validate an Email Address
<html>
<body>
<script>
function validateEmail() {
var emailInput = [Link]("email");
var resultElement = [Link]("validationResult");
if ([Link]()) {
[Link] = "Email is valid!";
[Link] = "green";
}
else
{
[Link] = "Invalid email address";
[Link] = "red";
}
}
</script>
Enter your email: <input type="email" id="email" placeholder="Enter your email"
oninput="validateEmail()" required>
<div id="validationResult"></div>
</body>
</html>
OUTPUT: