Question 1: Write an HTML code to create a webpage that divides the browser window into two vertical sections.
The left section should be divided into two equal parts with the color purple. The text "NIELIT" should be displayed in this section in the center. The right section should be divided into two equal parts with the color green. The text "Practical Examination" should be displayed in this section and should blink.
<!DOCTYPE html>
<html>
<head>
<title>Vertical Sections with Frameset</title>
<style>
/* Add blinking text effect */
@keyframes blink {
50% {
opacity: 0;
}
}
.blink {
animation: blink 1s infinite;
}
</style>
</head>
<frameset cols="50%, 50%">
<!-- Left section -->
<frameset rows="50%, 50%">
<frame src="left-top.html" name="left-top">
<frame src="left-bottom.html" name="left-bottom">
</frameset>
<!-- Right section -->
<frameset rows="50%, 50%">
<frame src="right-top.html" name="right-top">
<frame src="right-bottom.html" name="right-bottom">
</frameset>
</frameset>
<!-- Left Top Frame Content -->
<!-- Save this as left-top.html -->
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
background-color: purple;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
}
</style>
</head>
<body>
NIELIT
</body>
</html>
<!-- Left Bottom Frame Content -->
<!-- Save this as left-bottom.html -->
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
background-color: purple;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
}
</style>
</head>
<body>
NIELIT
</body>
</html>
<!-- Right Top Frame Content -->
<!-- Save this as right-top.html -->
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
}
</style>
</head>
<body>
<span class="blink">Practical Examination</span>
</body>
</html>
<!-- Right Bottom Frame Content -->
<!-- Save this as right-bottom.html -->
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
}
</style>
</head>
<body>
<span class="blink">Practical Examination</span>
</body>
</html>
Question: 2 -Write HTML code to showcase the following uses of the `` (anchor) tag:
Create a link that opens in a new tab or window.
Create a link that opens in the current tab or window.
Link to an image using a hyperlink.
Use an image as a clickable link to display another image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anchor Tag Examples</title>
</head>
<body>
<h1>Examples of Using the Anchor Tag</h1>
<!-- 1. Link that opens in a new tab or window -->
<p><a href="https://www.example.com" target="_blank">Open Example in a New Tab</a></p>
<!-- 2. Link that opens in the current tab or window -->
<p><a href="https://www.example.com" target="_self">Open Example in the Same Tab</a></p>
<!-- 3. Link to an image -->
<p><a href="https://www.example.com/image.jpg">View Image</a></p>
<!-- 4. Use an image as a link to display another image -->
<p>
<a href="https://www.example.com/image2.jpg">
<img src="https://www.example.com/image1.jpg" alt="Clickable Image" style="width: 200px; height: auto;">
</a>
</p>
</body>
</html>
Question 3 - Write an HTML code that creates a table with 9 columns and "n" rows based on user input. The "n" represents the number of students, and the 9 columns should contain the following attributes for each student:
Sr. No
Student Name
Roll No
Date of Birth (DOB)
Address
Father's Name
Mother's Name
Class
Courses Enrolled
The number of students ("n") should be entered through a prompt box. The table should be created automatically based on this input.
<script>
function createTable() {
let n = prompt("Enter the number of students:");
n = parseInt(n);
if (isNaN(n) || n <= 0) {
alert("Please enter a valid number of students.");
return;
}
for (let i = 0; i < n; i++) {
let studentName = prompt(`Enter name for student ${i + 1}:`);
let rollNo = prompt(`Enter roll number for student ${i + 1}:`);
let dob = prompt(`Enter DOB for student ${i + 1} (format: DD/MM/YYYY):`);
let address = prompt(`Enter address for student ${i + 1}:`);
let fatherName = prompt(`Enter father's name for student ${i + 1}:`);
let motherName = prompt(`Enter mother's name for student ${i + 1}:`);
let studentClass = prompt(`Enter class for student ${i + 1}:`);
let courses = prompt(`Enter courses enrolled for student ${i + 1}:`);