Scribd
Upload
19 views17 pages

Weblab

Uploaded by

hike.praji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
19 views17 pages

Weblab

Uploaded by

hike.praji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

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))

You might also like