HTML Assignment

Student Register Number: ….……………………………………..
Student Name:…………………………………………………….
Course:…………………...Subject : ………………………………
Class & Section: …………………………………………………..
Certificate
Thisis to certify that

smt/sri…………………………………has
satisfactorily completed the course of
assignment/seminar/presentation/case
studies prescribed by the Presidency College
(Autonomous) for the semester
…………………… degree course in the year
20 -20
MARKS
MAX OBTAINED
Signature of the Student Signature of the Staff Member
1. Create an HTML form that collects the following information
from users:
 Full Name (text input)

 Email (email input)
 Password (password input)
 Gender (radio buttons)
 Hobbies (checkboxes)
 A drop-down menu to select a country
 A text area for additional comments
 A submit button
ANS: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Information Form</title>
</head>
<body>
<h2>User Information Form</h2>
<form action="#" method="post">

<label for="fullName">Full Name:</label>
<input type="text" id="fullName" name="fullName" required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password"

required><br><br>

<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="Other">
<label for="other">Other</label><br><br>

<label for="hobbies">Hobbies:</label><br>
<input type="checkbox" id="hobby1" name="hobbies" value="Reading">
<label for="hobby1">Reading</label><br>
<input type="checkbox" id="hobby2" name="hobbies" value="Traveling">
<label for="hobby2">Traveling</label><br>
<input type="checkbox" id="hobby3" name="hobbies" value="Sports">
<label for="hobby3">Sports</label><br><br>

<label for="country">Country:</label>
<select id="country" name="country" required>
<option value="">Select your country</option>
<option value="USA">United States</option>
<option value="UK">United Kingdom</option>
<option value="Canada">Canada</option>
<option value="Australia">Australia</option>
<option value="India">India</option>
</select><br><br>

<label for="comments">Additional Comments:</label><br>
<textarea id="comments" name="comments" rows="4"

cols="50"></textarea><br><br>

<input type="submit" value="Submit">
</form>
</body>
</html>
2. Design a simple website with two HTML pages:
Page 1: Home Page
 A heading that says "Home Page".

 A link that navigates to the "About Me" page.
Page 2: About Me Page
 A heading that says "About Me".

 A link to navigate back to the Home Page.
ANS: 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home Page</title>
</head>
<body>
<h1>Home Page</h1>
<p>Welcome to my website!</p>
<a href="about.html">Go to About Me</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>About Me</title>
</head>
<body>
<h1>About Me</h1>
<p>This page contains information about me.</p>
<a href="index.html">Back to Home Page</a>
</body>
</html>
3. Build an application using HTML, Java script to do the
following tasks.
When the form runs in the Browser fill the textboxes with data.
Write JavaScript code that verifies that all textboxes has been
filled. If a textboxes has been left empty, popup an alert
indicating which textbox has been left empty.
<html lang="en">
<head>
<title>Form Validation</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
.form-container {
max-width: 400px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
.form-container label {
display: block;
margin-bottom: 5px;
.form-container input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
.form-container button {
padding: 10px 15px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
.form-container button:hover {
background-color: #0056b3;
</style>
</head>
<body>
<div class="form-container">
<h2>Form Validation</h2>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="age">Age:</label>
<input type="number" id="age" name="age">
<button type="button" onclick="validateForm()">Submit</button>
</form>
</div>
<script>
function validateForm() {
const form = document.getElementById('myForm');
const inputs = form.querySelectorAll('input');
let allFilled = true;
let alertMessage = '';

inputs.forEach(input => {
if (!input.value.trim()) {
allFilled = false;
alertMessage += `${input.previousElementSibling.innerText} is
required.\n`;
});
if (!allFilled) {
alert(alertMessage);
} else {
alert('Form submitted successfully!');
</script>
</body>
</html>
4. Create an HTML table to display a schedule with days of the
week and time slots. Include features like table headers,
rowspan, colspan, and table borders.
<html lang="en">
<head>
<title>Schedule Table</title>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
text-align: center;
th, td {
border: 1px solid #000;
padding: 10px;
th {
background-color: #f2f2f2;
</style>
</head>
<body>
<h2 style="text-align: center;">Weekly Schedule</h2>
<table>
<thead>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">9:00 AM - 10:00 AM</td>
<td colspan="2">Math Class</td>
<td>Science</td>
<td rowspan="2">History</td>
<td>Physical Education</td>
</tr>
<tr>
<td>Art</td>
<td>Music</td>
<td>English</td>
</tr>
<tr>
<td>10:00 AM - 11:00 AM</td>
<td>Free Period</td>
<td colspan="3">Group Activities</td>
<td>Library</td>
</tr>
<tr>
<td>11:00 AM - 12:00 PM</td>
<td>Physics</td>
<td>Computer Lab</td>
<td>Geography</td>
<td>Biology</td>
<td>Chemistry</td>
</tr>
</tbody>
</table>
</body>
</html>

HTML Assignment

Uploaded by

Copyright:

Available Formats

HTML Assignment

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Assignment

Uploaded by

Copyright:

Available Formats

Student Register Number: ….……………………………………..

Thisis to certify that

 Full Name (text input)

ANS: <!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>User Information Form</title>

<h2>User Information Form</h2>

<form action="#" method="post">

<label for="fullName">Full Name:</label>

<input type="text" id="fullName" name="fullName" required><br><br>

<input type="password" id="password" name="password"

<input type="radio" id="male" name="gender" value="Male">

<input type="radio" id="female" name="gender" value="Female">

<input type="radio" id="other" name="gender" value="Other">

<input type="checkbox" id="hobby1" name="hobbies" value="Reading">

<input type="checkbox" id="hobby2" name="hobbies" value="Traveling">

<input type="checkbox" id="hobby3" name="hobbies" value="Sports">

<select id="country" name="country" required>

<option value="">Select your country</option>

<option value="USA">United States</option>

<option value="UK">United Kingdom</option>

<label for="comments">Additional Comments:</label><br>

<textarea id="comments" name="comments" rows="4"

<input type="submit" value="Submit">

Page 1: Home Page

 A heading that says "Home Page".

Page 2: About Me Page

 A heading that says "About Me".

ANS:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<a href="about.html">Go to About Me</a>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<p>This page contains information about me.</p>

<a href="index.html">Back to Home Page</a>

ANS: <!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

font-family: Arial, sans-serif;

border: 1px solid #ccc;

border: 1px solid #ccc;

padding: 10px 15px;

<input type="text" id="name" name="name">

<input type="email" id="email" name="email">

<input type="number" id="age" name="age">

<button type="button" onclick="validateForm()">Submit</button>

const form = document.getElementById('myForm');

const inputs = form.querySelectorAll('input');

let allFilled = true;

let alertMessage = '';

alert('Form submitted successfully!');

ANS: <!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

margin: 20px auto;