1. Write a skeleton of an HTML document.
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<title>skeleton of html</title>
</head>
<body>
<h1>Structure of HTML</h1>
<p>Welcome everyone</p>
</body>
</html>
Output:
2. Write HTML code to make a set of menus with links to multiple page.
Solution:
<html lang="en">
<head>
<title>links to multiple pages</title>
</head>
<body>
<h1>links</h1>
<a href="question1.html">HTML</a>
<a href="abouthtml.html">About IT</a>
<a href="use.html">uses</a>
</body>
</html>
Output:
3. Prepare the following table in HTML.
Swastik Table
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table</title>
</head>
<body>
<table align="center" border="1px" width="600px"
height="200px"cellspacing="0">
<caption><b>SwastikTable</b></caption>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td rowspan="2"></td>
<td></td>
<td></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Output:
4. Prepare a login form with username and password.
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login form</title>
<style>
h1{
color:white;
font-size:22px;
background-color:green;
text-align:center;
}
</style>
</head>
<body>
<h1>HTML FORM</h1>
<form action="" method="POST">
Username:<input type="text" name="user"><br><br>
Password:<input type="password" name="pass"><br><br>
<input type="submit" value="login">
<input type="reset" value="reset">
</form>
</body>
</html>
Output:
5. Show the use of imagemaps in an image.
Solution:
<html>
<head>
<title>Use of Imagemaps</title> </head>
<body>
<h2>Image Maps</h2>
<img src="https://cdn.pixabay.com/photo/2017/05/11/11/15/workplace-
2303851_960_720.jpg" alt="Desk" usemap="#deskmap" width="500" height="380">
<map name="deskmap">
<area shape="rect" coords="175,242,420,358" alt="Keyboard" target="_blank"
href="https://en.wikipedia.org/wiki/ Computer_keyboard">
<area shape="rect" coords="444,251,481,357" alt="Mouse" target="_blank"
href="https://en.wikipedia.org/wiki/Computer_mouse">
<area shape="rect" coords="375,14,481,357" alt="Diary" target="_blank"
href="https://en.wikipedia.org/wiki/Book">
</map>
</body>
</html>
Output:
When you click on Diary:
6. Prepare HTML form to upload a file and gender and radio button.
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Html form</title>
</head>
<body>
<h1>Form example</h1>
<form action="" method="POST">
Gender:<input type="radio" name="gender" value="Male"> male
<input type="radio" name="gender" value="Female">female
<input type="radio" name="gender" value="others">others<br><br>
<input type="file" name="filename"><br><br>
<input type="submit" value="submit">
</form>
</body>
</html>
Output:
7. Divide page horizontally by frames (frameset and frames tags) into
<frameset rows="50%,50%"> <frame src="header.html" name="headerFrame"
scrolling="no"> <frame src="content.html" name="contentFrame"> </frameset>
<noframes>
<p>This page requires frames. Please enable frames in your browser settings.</p>
</noframes>
8. Prepare a login form with username and password and validate it using client
side script.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Login Form</title>
</head>
<body>
<form id="loginForm" onsubmit="return
validateForm()">
<h2>Login Form</h2>
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username"
required>
<span id="usernameError"></span>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password"
name="password" required>
<span id="passwordError"></span>
</div>
<br>
<input type="submit" value="Login">
</form>
<script>
function validateForm() {
let username =
document.getElementById('username').value;
let password =
document.getElementById('password').value;
let usernameError =
document.getElementById('usernameError');
let passwordError =
document.getElementById('passwordError');
usernameError.innerText = "";
passwordError.innerText = "";
// Basic validation checks
if (username === "") {
usernameError.innerText = "Username cannot be
empty";
return false;
}
if (password === "") {
passwordError.innerText = "Password cannot be empty";
return false;
}
return true; // If all checks pass, allow form submission
}
</script>
</body>
</html>
9. Write a css to make a box background color red.
.red-box {
background-color: red;
width: 200px;
height: 100px;
padding: 10px;
}
10. Write a css to remove the underline of the links.
a{
text-decoration: none;
}
11. Make a box with box shadow.
.shadow-box {
box-shadow: 5px 10px 8px rgba(0, 0, 0, 0.2);
width: 300px;
height: 200px;
}
12. Show three different ways to write/insert CSS into the HTML document.
Inline Styles
<div style="background-color: red; width: 200px; height: 100px;">This is a red
box.</div>
Internal Stylesheet
<html>
<head>
<title>My Page</title>
<style>
.red-box {
background-color: red;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div class="red-box">This is a red box.</div>
</body>
</html>
External Stylesheet
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="styles.css"> </head>
<body>
<div class="red-box">This is a red box.</div>
</body>
</html>
styles.css
.red-box {
background-color: red;
width: 200px;
height: 100px;
}
13. Prepare a XML document to list students with their; name, grade, rollno and
address.
<?xml version="1.0" encoding="UTF-8"?>
<students>
<student rollno="101">
<name>Ram</name>
<grade>8</grade>
<address>
<state>Kathmandu</state>
</address>
</student>
<student rollno="102">
<name>Shyam</name>
<grade>9</grade>
<address>
<state>Bhaktapur</state>
</address>
</student>
</students>
14. Write javascript and HTML to validate a form with field first name and last
name.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
</head>
<body>
<h2>Sample Form</h2>
<form id="sampleForm" onsubmit="return validateForm()">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName"><br><br>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName"><br><br>
<input type="submit" value="Submit">
</form>
<p id="errorMessage" style="color:red;"></p>
<script>
document.addEventListener("DOMContentLoaded", function() {
const form = document.getElementById('sampleForm');
form.addEventListener('submit', function(event) {
if (!validateForm()) {
event.preventDefault(); // Prevent form submission
}
});
});
function validateForm() {
// Get the form elements
const firstName = document.getElementById('firstName').value.trim();
const lastName = document.getElementById('lastName').value.trim();
const errorMessage = document.getElementById('errorMessage');
// Clear previous error message
errorMessage.textContent = '';
// Validate first name
if (firstName === '') {
errorMessage.textContent = 'First Name is required.';
return false;
}
// Validate last name
if (lastName === '') {
errorMessage.textContent = 'Last Name is required.';
return false;
}
// If validation passed
return true;
}
</script>
</body>
</html>
15. Prepare an HTML form to upload a file and write server (PHP) side script to upload it to a
folder named “uploads”.
16. Write an HTML document along with necessary CSS to design a circle.
17. Prepare a XML document to store a restaurant menu with the element names;
item_name and price.
18. Write a server side code to read content from a hello.txt file.
19. Prepare a contact form with Name, Email, Phone, Country and Message fields and
validate all the fields with server side script (PHP).
20. Write a server side script to store and read the cookie.
21. Prepare a login form with username and password, then check entered username and
password against following database information:
Database: admin
Table name; login_user
Fields: user_name, password
22. Create a database table with id (int) and name (varchar(255))
