Scribd
Upload
24 views30 pages

Web Design

The document outlines a series of web development experiments, including creating simple web pages using HTML, designing a registration form, sorting arrays with JavaScript, and implementing form validation. It provides code examples for each experiment, showcasing various HTML, CSS, and JavaScript functionalities. The experiments cover topics such as dynamic web pages, event handling, and ASP for creating a product catalog.

Uploaded by

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

Web Design

The document outlines a series of web development experiments, including creating simple web pages using HTML, designing a registration form, sorting arrays with JavaScript, and implementing form validation. It provides code examples for each experiment, showcasing various HTML, CSS, and JavaScript functionalities. The experiments cover topics such as dynamic web pages, event handling, and ASP for creating a product catalog.

Uploaded by

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

INDEX

Sr.No. Programs Signature


1 Create a simple webpage using HTML.

2 Designing of registration form with table


and use of hyperlink.

3 Use user defined function to get array of


values and sort them in ascending order
on webpage

4 Design a dynamic web page with


validation of form field using Java Script.

5 Design a catalogue in ASP

6 Event Handling Validation of registration


form.

7 Open a Window from the current


window on Mouse Over event.
Experiment 1- Create a simple webpage using HTML.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>My First Webpage</title>

<style> body { background-

color: #f0f8ff; font-family:

Arial, sans-serif; text-align:

center; padding: 50px;

h1 {

color: #333399;

p{

font-size: 18px;

color: #555555;

a{

color: #007acc; text-

decoration: none;

}
</style>

</head>
<body>

<h1>Welcome to My Webpage!</h1>

<p>This is a simple HTML page created with love .</p>

<p>Check out <a href="https://www.w3schools.com" target="_blank">W3Schools</a> to


learn more!</p>

</body>

</html>
Output:

Welcome to My Webpage!

This is a simple HTML page created with love 💻.

Check out W3Schools to learn more!


Experiment 2- Designing of registration form with table and use of hyperlink.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Registration Form</title>

<style> body { font-family:

Arial, sans-serif; background-

color: #eef2f3; padding: 40px;

table { margin: auto; background-color:

#ffffff; padding: 20px; border-radius:

10px; box-shadow: 0px 0px 10px

rgba(0,0,0,0.1);

td {

padding: 10px;

input[type="text"], input[type="email"], input[type="password"] { width:

100%;
padding: 8px; border-

radius: 5px; border: 1px

solid #ccc;

input[type="submit"] {

background-color: #4CAF50;

color: white; border: none;

padding: 10px 20px; border-

radius: 5px; cursor: pointer;

a{

text-decoration: none;

color: #007BFF;

</style>

</head>

<body>

<h2 style="text-align:center;">User Registration Form</h2>

<form action="submit.html" method="post">

<table>

<tr>

<td>Full Name:</td>
<td><input type="text" name="fullname" required></td>

</tr>

<tr>

<td>Email:</td>

<td><input type="email" name="email" required></td>

</tr>

<tr>

<td>Password:</td>

<td><input type="password" name="password" required></td>

</tr>

<tr>

<td>Confirm Password:</td>

<td><input type="password" name="confirm_password" required></td>

</tr>

<tr>

<td colspan="2" style="text-align:center;">

<input type="submit
Output:

User Registration Form

Full Name:

Email:

Password:

Confirm Password:
Experiment 3- Use user defined function to get array of values and sort them in
ascending order on webpage.
<!DOCTYPE html>

<html>

<head>

<title>Sort Array</title>

<style>

body {

font-family: Arial, sans-serif;

padding: 20px; background-

color: #f4f4f4;

input, button {

padding: 8px;

margin: 5px;

#output { margin-

top: 20px; font-

weight: bold; color:

#333399;

</style>

</head>
<body>

<h2>Enter Numbers to Sort</h2>

<input type="text" id="inputValues" placeholder="e.g. 5, 3, 8, 1">

<button onclick="sortArray()">Sort</button>

<div id="output"></div>

<script>

// User-defined function to get array and sort function sortArray() {

let input = document.getElementById("inputValues").value; let array =

input.split(",").map(Number); // convert to number array

if (array.some(isNaN)) { document.getElementById("output").innerHTML =
"Please enter valid numbers separated by commas.";

return;

array.sort(function(a, b) { return a - b; }); // sort in ascending order


document.getElementById("output").innerHTML =

"Sorted Array (Ascending): " + array.join(", ");

</script>

</body>

</html>
Output:

Enter Numbers to Sort

Sort

e.g; 3,6,1,5,2,9
Experiment 4- Design a dynamic web page with validation of form field using
Java Script.
<!DOCTYPE html>

<html>

<head>

<title>Registration Form with Validation</title>

<style> body { font-family:

Arial, sans-serif; background:

#f0f4f8; padding: 20px;

.form-container {

background-color: white;

width: 400px; margin: auto;

padding: 25px; border-

radius: 10px; box-shadow:

0 0 10px rgba(0,0,0,0.1);

h2 { text-align:

center;

input[type="text"], input[type="email"], input[type="password"], input[type="number"] {

width: 100%; padding: 10px; margin: 10px 0; border-radius: 5px; border: 1px solid

#ccc;

}
input[type="submit"] {

background-color: #28a745;

color: white; padding: 10px;

width: 100%; border: none;

border-radius: 5px; cursor:

pointer;

.error { color:

red; font-size:

14px;

}
</style>

</head>

<body>

<div class="form-container">

<h2>User Registration</h2>

<form onsubmit="return validateForm()">

<label for="name">Name:</label>

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

<div class="error" id="nameError"></div>

<label for="email">Email:</label>

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

<div class="error" id="emailError"></div>


<label for="password">Password:</label>

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

<div class="error" id="passwordError"></div>

<label for="age">Age:</label>

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

<div class="error" id="ageError"></div>

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

</form>

</div>

<script> function validateForm() { // Clear previous errors

document.getElementById("nameError").innerHTML = "";

document.getElementById("emailError").innerHTML = "";

document.getElementById("passwordError").innerHTML = "";

document.getElementById("ageError").innerHTML = "";

// Get input values let name =

document.getElementById("name").value.trim(); let email =

document.getElementById("email").value.trim(); let password =

document.getElementById("password").value.trim(); let age =

document.getElementById("age").value.trim();
let valid = true;

// Validate Name

if (name === "") {

document.getElementById("nameError").innerHTML = "Name is required"; valid

= false;

// Validate Email

if (email === "") {

document.getElementById("emailError").innerHTML = "Email is required"; valid = false;

} else if (!/^\S+@\S+\.\S+$/.test(email)) {

document.getElementById("emailError").innerHTML = "Enter a valid email address"; valid

= false;

// Validate Password if (password.length < 6) {

document.getElementById("passwordError").innerHTML = "Password must be at least

6 characters";

valid = false;

// Validate Age
if (age === "" || isNaN(age) || age < 18) {

document.getElementById("ageError").innerHTML = "Age must be 18 or above"; valid

= false;

return valid;

</script>

</body>

</html>
Output-

User Registration

Name:

Email:

Password:

Age:
Experiment 5- Design a catalogue in ASP.
<%@ Language="VBScript" %>

<!DOCTYPE html>

<html>

<head>

<title>Product Catalogue</title>

<style> body { font-family:

Arial, sans-serif; background:

#f2f2f2; padding: 20px;

table { width: 80%;

margin: auto; border-

collapse: collapse;

background-color: #fff;

th, td {

padding: 12px;

border: 1px solid #ccc;

text-align: center;

th {

background-color: #333;

color: white;
}

h2 { text-align:

center;

</style>

</head>

<body>

<h2>Product Catalogue</h2>

<table>
<tr>

<th>Product ID</th>

<th>Name</th>

<th>Description</th>

<th>Price ($)</th>

</tr>

<%

' Create a sample array of products Dim products(3,3) products(0,0) = "101" : products(0,1) =

"Laptop" : products(0,2) = "Intel i5, 8GB RAM" : products(0,3) = "600" products(1,0) =

"102" : products(1,1) = "Smartphone" : products(1,2) = "6.5'' Display,

64GB" : products(1,3) = "300"

products(2,0) = "103" : products(2,1) = "Headphones" : products(2,2) = "Wireless, NoiseCancel":


products(2,3) = "120"
products(3,0) = "104" : products(3,1) = "Keyboard" : products(3,2) = "Mechanical RGB" :
products(3,3) = "80"

' Display the array in a table

Dim i

For i = 0 To 3

Response.Write "<tr>"

Response.Write "<td>" & products(i,0) & "</td>"

Response.Write "<td>" & products(i,1) & "</td>"

Response.Write "<td>" & products(i,2) & "</td>"

Response.Write "<td>" & products(i,3) & "</td>"


Response.Write "</tr>"

Next

%>

</table>

</body>

</html>
Output:

Product Catalogue

<%' Create a sample array of productsDim products(3,3)products(0,0) = "101" : products(0,1) = "Laptop"


: products(0,2) = "Intel i5, 8GB RAM" : products(0,3) = "600"products(1,0) = "102" : products(1,1) =
"Smartphone" : products(1,2) = "6.5'' Display, 64GB" : products(1,3) = "300"products(2,0) = "103" :
products(2,1) = "Headphones" : products(2,2) = "Wireless, NoiseCancel": products(2,3) =
"120"products(3,0) = "104" : products(3,1) = "Keyboard" : products(3,2) = "Mechanical RGB" :
products(3,3) = "80"' Display the array in a tableDim iFor i = 0 To
3Response.Write ""Response.Write ""Response.Write ""Response.Write ""Response.Write
""Response.Write ""Next%>

Product ID Name Description Price ($)


"&
" & products(i,0) & " " & products(i,1) & " " & products(i,2) & " products(i,3) &
"
Experiment 6- Event Handling Validation of registration form.
<!DOCTYPE html>

<html>

<head>

<title>Registration Form with Event Handling</title>

<style>
body {

font-family: Arial, sans-serif;

padding: 30px; background-

color: #f2f2f2;

.form-container { background: #fff;

padding: 25px; width: 400px;

margin: auto; border-radius: 10px;

box-shadow: 0 0 10px rgba(0,0,0,0.1);

input { width: 100%;

padding: 10px; margin-

top: 8px; margin-

bottom: 15px; border:

1px solid #ccc; border-

radius: 5px;

}
.error { color: red;

font-size: 14px; margin-

bottom: 10px;

}
input[type="submit"] {

background-color: #4CAF50;

color: white; border: none;

cursor: pointer;

input[type="submit"]:hover { background-

color: #45a049;

</style>

</head>

<body>

<div class="form-container">

<h2>Registration Form</h2>

<form id="regForm" onsubmit="return validateForm()">

<label>Name:</label>

<input type="text" id="name" onblur="validateName()">

<div class="error" id="nameError"></div>

<label>Email:</label>
<input type="email" id="email" oninput="validateEmail()">

<div class="error" id="emailError"></div>

<label>Password:</label>
<input type="password" id="password" onblur="validatePassword()">

<div class="error" id="passwordError"></div>

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

</form>

</div>

<script> function validateName() { let name =

document.getElementById("name").value; let nameError =

document.getElementById("nameError"); if (name.trim() ===

"") { nameError.textContent = "Name is required"; return

false;

} else {

nameError.textContent = "";

return true;

function validateEmail() { let email =

document.getElementById("email").value; let emailError =

document.getElementById("emailError"); let regex =


/^\S+@\S+\.\S+$/; if (!regex.test(email)) {

emailError.textContent = "Enter a valid email";

return false;

} else {

emailError.textContent = "";

return true;

function validatePassword() { let password =

document.getElementById("password").value; let passwordError =

document.getElementById("passwordError"); if (password.length < 6) {

passwordError.textContent = "Password must be at least 6 characters";

return false;

} else {

passwordError.textContent = "";

return true;

function validateForm() { let validName =

validateName(); let validEmail = validateEmail(); let

validPassword = validatePassword(); return

validName && validEmail && validPassword;


}

</script>

</body>

</html>
Output-

Registration Form

Name:

Email:

Password:

Register
Experiment 7- Open a Window from the current window on Mouse Over event.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Open Window on Mouse Over</title>

<style> body { font-family:

Arial, sans-serif; padding: 20px;

.hover-link {

color: blue;

text-decoration: underline;

cursor: pointer;

.hover-link:hover {

color: darkblue;

</style>

</head>

<body>

<h2>Hover Over the Link to Open a New Window</h2>


<p>
Hover over the link below to open a new window:

</p>

<p>

<span class="hover-link" onmouseover="openNewWindow()">Click here to open a new


window</span>

</p>

<script> function openNewWindow() { // Open a new window

window.open("https://www.example.com", "newWindow", "width=600,height=400");

</script>

</body>

</html>
Output-

Hover Over the Link to Open a New Window

Hover over the link below to open a new window:

Click here to open a new window

You might also like