Web Designing Lab
(Course Code: CSC - 210)
SUBMITTED TO: SUBMITTED BY:
Dr. BS BHATI Name: Kunal Sharma
(Asst. Professor) Roll No: 12311056
Branch: CSE – A
Batch: 2023-2027
Department of computer science
INDIAN INSTITUTE OF INFORMATION TECHNOLOGY SONEPAT
(Institute of National Importance)
1
INDEX
Sr no. Experiment Date of Sign.
Experiment
2
Experiment – 4:
Create a college registration form to obtain a users first name, last
name, telephone number and email address. In addition, include an
optional survey question that has the users qualification. Place the
optional survey question in a details elements so that the user can
expand the details element to see the question.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <title>College Registration Form</title> <style>
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="email"],
input[type="tel"] { width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
details {
margin-bottom: 15px;
}
summary {
cursor: pointer;
font-weight: bold;
}
</style>
</head>
<body>
<h2>College Registration Form</h2>
<form action="#" method="post">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" required>
<label for="telephone">Telephone Number:</label>
<input type="tel" id="telephone" name="telephone" required>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>
<details>
<summary>Survey Question: Qualification (Optional)</summary>
3
<label for="qualification">What is your highest
qualification?</label> <input type="text" id="qualification"
name="qualification"> </details>
<button type="submit">Submit</button>
</form>
</body>
</html>
Output:
4
Experiment – 5:
Make a navigation button using a div with a link inside it. Give it a border,
background and text color, and make them change with the user hovers
the mouse over the button. Use an external stylesheet. Make sure your
style sheetvalidates at http://jijsaw.w3.org/css-validator/. Note that some
warnings may be unavoidable, but your css should have no errors.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <title>Navigation Button</title>
<link rel="stylesheet" href="Exp-5.css">
</head>
<body>
<div class="navigation-button">
<a href="https://jigsaw.w3.org/css-
validator/">Navigate 1</a> </div>
<div class="navigation-button">
<a href="https://jigsaw.w3.org/css-
validator/">Navigate 2</a> </div>
<div class="navigation-button">
<a href="https://jigsaw.w3.org/css-
validator/">Navigate 3</a> </div>
</body>
</html>
<!-- CSS FILE -->
.navigation-button {
display: inline-block;
padding: 10px 20px;
border: 2px solid #007bff;
background-color: #007bff;
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
}
.navigation-button:hover {
background-color: #e410d9;
border-color: #e410d9;
}
.navigation-button a {
color: inherit;
5
text-decoration: none;
}
Output:
6
Experiment – 6:
Write a CSS rule that makes all text 3 times larger than the base
font of the system and colours the text green
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <title>Text Enlargement Program</title> <link
rel="stylesheet" href="Exp-6.css">
</head>
<body>
<h1>Text Enlargement</h1>
<p>MY name is Sankalp - 12311001</p>
</body>
</html>
<!-- CSS FILE -->
body {
font-size: 300%;
color: green;
}
Output:
7
Experiment – 7:
Write a script that displays the letter A to D on the same line, with
each pair of adjacent letters separated by 2 spaces. Write the
script using the following methods : a. Using one document. write
statement. b. Using two document. write statement.
!-- Method 1: -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <title>Display Letters A to D</title>
</head>
<body>
<script>
document.write("A  B  C 
D "); </script>
</body>
</html>
<br>
<!-- Method 2: -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <title>Display Letters A to D</title>
</head>
<body>
<script>
document.write("A  ");
document.write("B  ");
document.write("C  ");
document.write("D  ");
</script>
</body>
</html>
Output:
8
Experiment – 8:
Write a script that asks a user to enter two numbers, obtains the
two numbers from the user and outputs the text that displays the
sum, product, difference and quotient of the two numbers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <title>Number Operations</title>
</head>
<body>
<script>
var num1 = parseFloat(prompt("Enter the first number:"));
var num2 = parseFloat(prompt("Enter the second number:"));
var sum = num1 + num2;
var diff = num1 - num2;
var product = num1 * num2;
var quotient = num1 / num2;
document.write("<h2>Answers:</h2>");
document.write("<p>Sum: " + sum + "</p>");
document.write("<p>Product: " + product + "</p>");
document.write("<p>Difference: " + diff + "</p>");
document.write("<p>Quotient: " + quotient + "</p>");
</script>
</body>
</html>
Output:
9
Experiment – 9:
Write a script that contains a button and a counter in a div. The button should
decrement the counter each time it’s clicked with a default initial value of 100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter</title>
<style>
#counter {
font-size: 24px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="counter">100</div>
<button onclick="decrementCounter()">Decrement</button>
<script>
function decrementCounter() {
var counterElement = document.getElementById('counter');
var currentCount = parseInt(counterElement.textContent); if
(currentCount > 0) {
counterElement.textContent = currentCount - 1;
}
}
</script>
</body>
</html>
Output:
10
