Scribd
Upload
33 views40 pages

Lab 4

The document is a lab file for a Web Technology course at Galgotias University, detailing various HTML and CSS experiments conducted by a student named Preeti Kumari. It includes code examples for creating web pages, implementing CSS, designing forms, and building a simple calculator, along with outputs for each experiment. The document serves as a practical guide for learning web development concepts and techniques.

Uploaded by

Jaggi Singh
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
33 views40 pages

Lab 4

The document is a lab file for a Web Technology course at Galgotias University, detailing various HTML and CSS experiments conducted by a student named Preeti Kumari. It includes code examples for creating web pages, implementing CSS, designing forms, and building a simple calculator, along with outputs for each experiment. The document serves as a practical guide for learning web development concepts and techniques.

Uploaded by

Jaggi Singh
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/ 40

BACHELOR OF COMPUTER SCIENCE

ENGINEERING &TECHNOLOGY

GALGOTIAS UNIVERSITY, GREATER NOIDA UTTAR PRADESH


Lab File

Web Technology
Course Code – R1UC626C

Name – Preeti Kumari

Admission No. – 22SCSE1012771

Semester – VI th

Section - 37

1|P a g e
Experiment :- 01

Write a simple HTML code to diplay data / content on a web page

Program :-
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a simple HTML page that displays some content.</p>

<h2>My Hobbies:</h2>
<ul>
<li>Reading</li>
<li>Traveling</li>
<li>Learning HTML</li>
</ul>

<p>Thank you for visiting!</p>


</body>
</html>

Output :-

4|P a g e
Experiment no :- 02
Write an HTML code to display your CV on a web page. Write an HTML code to implement the concept of frames
with 2 frames: one for hyperlinks and another for opening the content to that link.

Program:-
<!DOCTYPE html>
<html>
<head>
<title>Preeti Kumari - CV</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
.container {
width: 60%;
margin: 50px auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
h1, h2, h3 {
color: #333;
}
hr {
border: 0;
height: 1px;
background-color: #ccc;
}
.section {
margin-bottom: 20px;
}
.contact {
margin-top: 10px;
}
.skills ul {
list-style-type: square;
}
</style>
</head>
<body>

<div class="container">
<h1>Preeti</h1>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
<p>3rd Year B.Tech CSE Student | Galgotias University</p>

5|P a g e
<hr>

<div class="section">
<h2>Objective</h2>
<p>To secure a challenging internship that allows me to leverage my technical skills, enhance my
knowledge, and contribute to organizational goals.</p>
</div>

<div class="section">
<h2>Education</h2>
<p><strong>B.Tech in Computer Science & Engineering</strong><br>Galgotias University<br>CGPA:
8.9/10</p>
<p><strong>Senior Secondary Examination</strong><br>DAV<br>Percentage: 78.4%</p>
<p><strong>Secondary Examination</strong><br>DAV<br>Percentage: 74%</p>
</div>

<div class="section">
<h2>Technical Skills</h2>
<ul>
<li>Languages: C, C++, Java, Python, SQL, HTML</li>
<li>Frameworks: Jetpack Compose</li>
<li>Tools: Visual Studio Code, MySQL, Python IDE, MS Word, MS Excel</li>
</ul>
</div>

<div class="section">
<h2>Projects</h2>
<ul>
<li><strong>Spotify Clone:</strong> Developed a music streaming platform using HTML, CSS, and
JavaScript.</li>
<li><strong>Employee Management System:</strong> Created a Java-based system using Swing, AWT,
and JDBC.</li>
<li><strong>Image Manipulation:</strong> Implemented image processing tasks using Python and
OpenCV.</li>
</ul>
</div>

<div class="section">
<h2>Internships</h2>
<ul>
<li><strong>Oracle Academy Course:</strong> Java Fundamentals Internship</li>
<li><strong>AICTE-Eduskills:</strong> AWS - Data Engineering Virtual Internship</li>
<li><strong>AICTE-Eduskills:</strong> AI-ML Virtual Internship</li>
</ul>
</div>

<div class="section">
<h2>Hobbies</h2>
<p>Yoga, Cooking, Reading</p>
</div>

<div class="section contact">

6|P a g e
<h3>Contact</h3>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>

</body>
</html>
Output :-

7|P a g e
Experiment no:- 03
Implement CSS using all the ways of HTLM

Program
1. Inline CSS
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; font-size: 30px;">Hello, Inline CSS!</h1>
</body>
</html>

2. Internal CSS
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
h1 {
color: green;
font-size: 32px;
}
p{
color: gray;
}
</style>
</head>
<body>
<h1>Welcome to Internal CSS</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. External CSS
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to External CSS</h1>
<p>This is styled from an external file.</p>

8|P a g e
</body>
</html>
h1 {
color: red;
font-size: 36px;
}

p{
color: darkgray;
}
Output :-

9|P a g e
Experiment no:- 04
Design HTML form for keeping student record and validate it using Java script .

Program
<!DOCTYPE html>
<html>
<head>
<title>Student Record Form</title>
<style>
body {
font-family: Arial;
background-color: #f5f5f5;
padding: 20px;
}

.form-container {
background: white;
padding: 20px;
border-radius: 8px;
max-width: 400px;
margin: auto;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

label {
display: block;
margin-top: 10px;
}

input, select {
width: 100%;
padding: 8px;
margin-top: 4px;
}

button {
margin-top: 15px;
padding: 10px;
width: 100%;
background-color: #4CAF50;
color: white;
border: none;
font-size: 16px;
}
</style>

<script>
function validateForm() {
let name = document.forms["studentForm"]["name"].value.trim();
let roll = document.forms["studentForm"]["roll"].value.trim();

10 | P a g e
let email = document.forms["studentForm"]["email"].value.trim();
let age = document.forms["studentForm"]["age"].value.trim();
let course = document.forms["studentForm"]["course"].value;

// Name validation
if (name === "") {
alert("Name is required.");
return false;
}

// Roll number validation


if (roll === "" || isNaN(roll)) {
alert("Valid Roll Number is required.");
return false;
}

// Email validation
let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
alert("Please enter a valid email address.");
return false;
}

// Age validation
if (age === "" || isNaN(age) || age < 5 || age > 100) {
alert("Please enter a valid age between 5 and 100.");
return false;
}

// Course validation
if (course === "") {
alert("Please select a course.");
return false;
}

alert("Form submitted successfully!");


return true;
}
</script>
</head>

<body>
<div class="form-container">
<h2>Student Record Form</h2>
<form name="studentForm" onsubmit="return validateForm()">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name">

<label for="roll">Roll Number:</label>


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

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

11 | P a g e
<label for="age">Age:</label>
<input type="text" id="age" name="age">

<label for="course">Course:</label>
<select id="course" name="course">
<option value="">--Select Course--</option>
<option value="BCA">BCA</option>
<option value="B.Tech">B.Tech</option>
<option value="BSc">BSc</option>
<option value="MCA">MCA</option>
</select>

<button type="submit">Submit</button>
</form>
</div>
</body>
</html>

Output :-

12 | P a g e
Experiment no:- 05
Complete Web page with HTML and CSS using bootstrap

Program
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Web Page</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.hero {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('https://source.unsplash.com/1600x900/?nature');
background-size: cover;
color: white;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>

<!-- Hero Section -->


<div class="hero">
<div>
<h1>Welcome to My Website</h1>
<p>Your go-to place for amazing content</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>

13 | P a g e
</div>

<!-- Footer -->


<footer class="bg-dark text-white text-center py-3">
<p>&copy; 2025 My Website | All Rights Reserved</p>
</footer>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output :-

14 | P a g e
Experiment no:- 06
Write a JavaScript to design a simple calculator to perform the following operations:
sum, product, difference and quotient.

PROGRAM
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.calculator {
max-width: 300px;
margin: auto;
border: 1px solid #ccc;
padding: 20px;
border-radius: 10px;
}
input, button {
width: 100%;
margin: 10px 0;
padding: 10px;
font-size: 16px;
}
.result {
font-weight: bold;
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="calculator">
<h2>Simple Calculator</h2>
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">

<button onclick="calculate('sum')">Add</button>
<button onclick="calculate('difference')">Subtract</button>
<button onclick="calculate('product')">Multiply</button>
<button onclick="calculate('quotient')">Divide</button>

<div class="result" id="result"></div>

15 | P a g e
</div>

<script>
function calculate(operation) {
const num1 = parseFloat(document.getElementById("num1").value);
const num2 = parseFloat(document.getElementById("num2").value);
let result;

if (isNaN(num1) || isNaN(num2)) {
result = "Please enter valid numbers.";
} else {
switch(operation) {
case 'sum':
result = `Sum: ${num1 + num2}`;
break;
case 'difference':
result = `Difference: ${num1 - num2}`;
break;
case 'product':
result = `Product: ${num1 * num2}`;
break;
case 'quotient':
if (num2 === 0) {
result = "Cannot divide by zero!";
} else {
result = `Quotient: ${num1 / num2}`;
}
break;
default:
result = "Invalid operation.";
}
}

document.getElementById("result").innerText = result;
}
</script>
</body>
</html>

16 | P a g e
Output :-

17 | P a g e
Experiment no:- 07
Write a program to implement AJAX.

PROGRAM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced AJAX Example</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(to right, #dbe9f4, #e6f1f7);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

.container {
text-align: center;
}

.card {
background: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card h2 {
margin-bottom: 20px;
color: #333;
}

.card button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

.card button:hover {
background-color: #2980b9;
}

#message {

18 | P a g e
margin-top: 20px;
font-size: 16px;
color: #2c3e50;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h2>Advanced AJAX Example</h2>
<button onclick="loadMessage()">Load Server Message</button>
<div id="message"></div>
</div>
</div>

<script>
function loadMessage() {

document.getElementById("message").innerText = " Server message loaded successfully!";


}
</script>
</body>
</html>

Output :-

19 | P a g e
Experiment no:- 08
Implementation of JSP to generate server side response Write a JSP code to generate dynamic webpage using server
response. Write a code to create a navigation bar using Bootstrap and create a responsive website for your Institute.

PROGRAM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Galgotias University</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { background-color: #007BFF; color: white; }
.navbar { background-color: blue; }
.notice { background-color: skyblue; color: black; padding: 10px; font-weight: bold; }
.about { color: white; padding: 10px; }
.btn-explore { background-color: green; color: white; }
.btn-apply { background-color: yellow; color: black; }
.btn-brochure { background-color: skyblue; color: black; }
.screen-share { background-color: #f8f9fa; color: black; padding: 10px; margin-top: 10px; display:
flex; justify-content: space-between; align-items: center; }
.underline { text-decoration: underline; }
#content-area { margin: 30px auto; background-color: white; color: black; padding: 20px; border-
radius: 10px; width: 80%; min-height: 200px; }
</style>
</head>
<body>

<!-- Marquee -->


<div class="bg-warning text-dark py-2">
<marquee behavior="scroll" direction="left" scrollamount="6">
<strong>Welcome to Galgotias University ... Shaping Future Leaders!</strong>
</marquee>
</div>

<!-- Navbar -->


<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<a class="navbar-brand fw-bold" href="#">Galgotias</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">New Admissions</a></li>
<li class="nav-item"><a class="nav-link" href="#">Departments</a></li>

20 | P a g e
<li class="nav-item"><a class="nav-link" href="#">More</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>

<!-- Welcome -->


<div class="container text-center mt-5">
<h1><b>Welcome to Galgotias University</b></h1>
</div>

<!-- Notice -->


<div class="notice text-center mt-4">
Notice: Admissions are open for 2025! <span class="underline">Apply Now</span>
</div>

<!-- About -->


<div class="about text-center mt-3">
<p>About Us</p>
<p>Galgotias University is one of India's top private universities, committed to academic
excellence, industry connections, and holistic student development.</p>
<div class="d-grid gap-2 d-md-flex justify-content-center">
<button id="btnExplore" class="btn btn-explore me-2">Explore Courses</button>
<button id="btnApply" class="btn btn-apply me-2">Apply Online</button>
<button id="btnBrochure" class="btn btn-brochure">Download Brochure</button>
</div>
</div>

<!-- Dynamic Content -->


<div id="content-area" class="shadow"></div>

<!-- Screen Sharing -->


<div class="screen-share mt-4 mx-auto w-75 rounded shadow">
<span>share.lgcreateboard.com is sharing your screen and audio</span>
<div>
<button class="btn btn-primary me-2">Stop Sharing</button>
<button class="btn btn-secondary">Hide</button>
</div>
</div>

<!-- JavaScript -->


<script>
document.addEventListener("DOMContentLoaded", () => {
const contentArea = document.getElementById("content-area");

document.getElementById("btnExplore").addEventListener("click", () => {
contentArea.innerHTML = `

21 | P a g e
<h3>Courses Offered</h3>
<ul>
<li>B.Tech in Computer Science</li>
<li>BBA, MBA</li>
<li>B.A. LL.B, B.Com, B.Sc, BCA</li>
<li>PhD in multiple domains</li>
</ul>
`;
});

document.getElementById("btnApply").addEventListener("click", () => {
contentArea.innerHTML = `
<h3>Online Admission Form</h3>
<p>Please fill in your basic details below:</p>
<form>
<div class="mb-3">
<input type="text" class="form-control" placeholder="Full Name">
</div>
<div class="mb-3">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<div class="mb-3">
<input type="text" class="form-control" placeholder="Course Interested In">
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
`;
});

document.getElementById("btnBrochure").addEventListener("click", () => {
contentArea.innerHTML = `
<h3>Galgotias University Brochure</h3>
<p>Download the brochure to explore our university, programs, and facilities.</p>
<button class="btn btn-primary"> Download PDF</button>
`;
});
});
</script>
</body>
</html>

22 | P a g e
Output :-

23 | P a g e
Experiment no:- 09
Write a code to create a navigation bar using Bootstrap and create a responsive website for your Institute.

PROGRAM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Galgotias University</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
body {
background-color: #f4f9ff;
font-family: Arial, sans-serif;
}

.hero {
background-color: #003366;
color: white;
padding: 60px 20px;
text-align: center;
}

.btn-custom {
transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-success.btn-custom:hover {
background-color: #146c43 !important;
color: #fff !important;
}

.btn-warning.btn-custom:hover {
background-color: #d39e00 !important;
color: #000 !important;
}

.btn-info.btn-custom:hover {
background-color: #0dcaf0 !important;
color: #000 !important;
}

.course-img {
width: 100%;
max-width: 250px;
height: auto;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}

24 | P a g e
marquee {
font-size: 20px;
font-weight: bold;
color: #003366;
background-color: #e6f0ff;
padding: 10px 0;
}
</style>

<script>
function loadContent(section) {
let content = "";

switch (section) {
case "admissions":
content = `
<h3>Admissions 2025</h3>
<p>We offer UG, PG, and PhD programs across diverse fields.</p>
<ul>
<li>Application Deadline: 31st May 2025</li>
<li>Entrance: GU Aptitude Test</li>
<li><a href="#">Apply Now</a></li>
</ul>`;
break;

case "departments":
content = `
<h3>Departments</h3>
<ul>
<li>Engineering</li>
<li>Management</li>
<li>Law</li>
<li>Pharmacy</li>
<li>Design</li>
</ul>`;
break;

case "more":
content = `
<h3>Campus Life & More</h3>
<p>Experience vibrant campus life with events, sports, and career support.</p>
<ul>
<li>?? Hostels & Cafeteria</li>
<li>?? Tech & Cultural Fests</li>
<li>?? Career Services & Internships</li>
</ul>`;
break;

case "contact":
content = `
<h3>Contact Us</h3>
<p>Galgotias University, Greater Noida, UP</p>
<p>Email: [email protected]</p>

25 | P a g e
<p>Phone: +91-120-1234567</p>`;
break;

case "brochure":
content = `
<h3>Download Brochure</h3>
<p>Access course details, faculty, and campus facilities.</p>
<a class="btn btn-primary" href="#" download>Download PDF</a>`;
break;

case "explore":
content = `
<h3>Explore Our Courses</h3>
<div class="row">
${getCourseCard("Engineering", "https://via.placeholder.com/250x150?text=Engineering")}
${getCourseCard("Management", "https://via.placeholder.com/250x150?text=Management")}
${getCourseCard("Law", "https://via.placeholder.com/250x150?text=Law")}
${getCourseCard("Pharmacy", "https://via.placeholder.com/250x150?text=Pharmacy")}
${getCourseCard("Design", "https://via.placeholder.com/250x150?text=Design")}
</div>`;
break;

case "apply":
content = `
<h3>Apply Online</h3>
<p>Fill the online form and kickstart your academic journey with Galgotias.</p>
<ol>
<li>Register with your email</li>
<li>Fill personal & academic details</li>
<li>Upload documents</li>
<li>Pay application fee</li>
</ol>
<a href="#" class="btn btn-warning">Start Application</a>`;
break;

default:
content = `
<h2>About Us</h2>
<p>Galgotias University is a leading private university in India with a focus on academic
excellence and global standards.</p>`;
}

document.getElementById("dynamicContent").innerHTML = content;
}

function getCourseCard(title, imgUrl) {


return `
<div class="col-md-4 my-3 text-center">
<img src="${imgUrl}" alt="${title}" class="course-img mb-2">
<h5>${title}</h5>
<p>Learn more about our ${title} programs designed for future leaders.</p>
</div>`;
}

26 | P a g e
</script>
</head>
<body>

<marquee behavior="scroll" direction="right">Welcome to Galgotias University — Shaping Future


Leaders!</marquee>

<!-- Navbar -->


<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Galgotias</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#" onclick="loadContent('home')">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#"
onclick="loadContent('admissions')">Admissions</a></li>
<li class="nav-item"><a class="nav-link" href="#"
onclick="loadContent('departments')">Departments</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">More</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#" onclick="loadContent('more')">Campus Life</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#" onclick="loadContent('contact')">Contact</a></li>
</ul>
</div>
</div>
</nav>

<!-- Hero -->


<div class="hero">
<h1>Welcome to Galgotias University</h1>
</div>

<!-- Main Content -->


<div class="container mt-5">
<div class="alert alert-info alert-dismissible fade show" role="alert">
?? <strong>Notice:</strong> Admissions are open for 2025! <a href="#" class="alert-link">Apply Now</a>.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<div id="dynamicContent">
<h2>About Us</h2>
<p>Galgotias University is one of India's top private universities, committed to academic excellence, industry
connections, and holistic student development.</p>
</div>

27 | P a g e
<!-- Action Buttons -->
<div class="mt-4">
<button class="btn btn-success btn-custom" onclick="loadContent('explore')">Explore Courses</button>
<button class="btn btn-warning btn-custom" onclick="loadContent('apply')">Apply Online</button>
<button class="btn btn-info btn-custom" onclick="loadContent('brochure')">Download Brochure</button>
</div>

<!-- Badge Section -->


<div class="mt-5">
<h5>Popular Streams:</h5>
<span class="badge bg-primary">Engineering</span>
<span class="badge bg-secondary">Management</span>
<span class="badge bg-success">Law</span>
<span class="badge bg-danger">Pharmacy</span>
<span class="badge bg-dark">Design</span>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output :-

28 | P a g e
Experiment no:- 10
Write a program in jquery to click the button and display

PROGRAM
<!DOCTYPE html>
<html>
<head>
<title>Simple jQuery Example</title>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<h2>Click the Button to Change the Text</h2>

<p id="text">This is the original text.</p>

<button id="changeBtn">Change Text</button>

<script>
$(document).ready(function(){
$("#changeBtn").click(function(){
$("#text").text("The text has been changed using jQuery!");
});
});
</script>

</body>
</html>

Output :-

29 | P a g e
Experiment no:- 11
Design a Web Page using Jquery Selectors

PROGRAM
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors Example</title>
<style>
.highlight {
color: crimson;
font-weight: bold;
}
input {
margin: 5px;
}
</style>

<!-- ? jQuery library (must come BEFORE your script) -->


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
$("#apply").click(function() {

// Tag selector: highlight all paragraphs


$("p").css("background-color", "Blue");

// Class selector: add custom style to elements with class "special"


$(".special").addClass("highlight");

// ID selector: change the text of the element with ID "unique"


$("#unique").text("This paragraph's content has been updated!");

// Attribute selector: style the email input field


$("input[type='email']").css("border", "2px solid blue");
});
});
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "yellow");
});
$("input").blur(function(){
$(this).css("background-color", "Aqua");
});
});
</script>
</head>
<body>

30 | P a g e
<h2>Working with jQuery Selectors</h2>

<!-- Paragraphs with different selectors -->


<p>This is a regular paragraph.</p>
<p class="special">This is a paragraph with a class.</p>
<p id="unique">This paragraph has a unique ID.</p>

<!-- Form fields -->


<input type="text" name="username" placeholder="Enter your username">
<input type="email" name="email" placeholder="Enter your email">

<!-- Button to trigger jQuery actions -->


<br><br>
<button id="apply">Apply jQuery Selectors</button>

</body>
</html>

Output :-

31 | P a g e
Experiment no:- 12
Design a web page to create a button for to change button color, show text, showimage, and Reset Button using Jquery

PROGRAM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Multiple Button Actions</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
button {
padding: 10px 20px;
font-size: 16px;
margin: 10px;
}

#output {
margin-top: 20px;
font-size: 18px;
}

#image {
margin-top: 15px;
display: none;
width: 200px;
}
</style>
</head>
<body>
<center>
<h2>Sample Action Buttons</h2></center><br>
<br><br><br>

<button id="btnColor">Change Button Color</button>


<button id="btnText">Show Text</button>
<button id="btnImage">Show Image</button>
<button id="btnReset">Reset</button>

<div id="output"></div>
<img id="image" src="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg" >

<script>
// Button 1: Change background color
$("#btnColor").click(function() {
$(this).css("background-color", "Red");
$(this).css("color", "white");
$(this).text("Color Changed!");
});

// Button 2: Show text in output div


$("#btnText").click(function() {

32 | P a g e
$("#output").text("Hello! I am Deepak Sonker.");
});

// Button 3: Show image


$("#btnImage").click(function() {
$("#image").fadeIn();
});

// Button 4: Reset everything


$("#btnReset").click(function() {
$("button").css({ "background-color": "", "color": "" }).text(function(index, text) {
const defaultTexts = ["Change Background Color", "Show Text", "Show Image", "Reset"];
return defaultTexts[index];
});
$("#output").text("");
$("#image").fadeOut();
});
</script>

</body>
</html>

Output :-

33 | P a g e
Experiment no:- 13
Write a program using SERVLET/ JSP and HTML to create a form and display the details entered by the user.

PROGRAM
<%@ page import="java.util.*, javax.mail.*, javax.mail.internet.*" %>
<%!
String host = "smtp.example.com";
String from = "[email protected]";
String password = "your_password";
%>
<%
String to = request.getParameter("to");
String subject = request.getParameter("subject");
String messageText = request.getParameter("message");

Properties properties = System.getProperties();


properties.put("mail.smtp.auth", "true");
properties.put("mail.smtp.starttls.enable", "true");
properties.put("mail.smtp.host", host);
properties.put("mail.smtp.port", "587");

Session session = Session.getInstance(properties, new javax.mail.Authenticator() {


protected PasswordAuthentication getPasswordAuthentication() {
return new PasswordAuthentication(from, password);
}
});

try {
MimeMessage message = new MimeMessage(session);
message.setFrom(new InternetAddress(from));
message.addRecipient(Message.RecipientType.TO, new InternetAddress(to));
message.setSubject(subject);
message.setText(messageText);
Transport.send(message);
out.println("Email sent successfully!");
} catch (MessagingException mex) {
mex.printStackTrace();
out.println("Error: " + mex.getMessage());
}
%>

34 | P a g e
Java code
<html>
<head>
<title>Send Email</title>
</head>
<body>
<form method="post" action="send_email.jsp">
To: <input type="text" name="to"><br>
Subject: <input type="text" name="subject"><br>
Message: <textarea name="message"></textarea><br>
<input type="submit" value="Send Email">
</form>
</body>
</html>

Output :-

35 | P a g e
INDEX

S.no Experiment Name Date Signature


1 Write a simple HTML code to Display Data/content on a web page 18 – 03 – 2025

2 Write an HTML code to display your CV on a Web page 18 – 03 – 2025

3 Write an HTML code to implement the concept of frames with 2 frames: 25 – 03 – 2025
one for hyperlinks and another for opening the content to that link.

4 Implement CSS using all the ways of HTML. 25 – 03 – 2025

5 Design HTML form for keeping student record and validate it using 01 – 04 – 2025
JavaScript.

6 Complete Web page with HTML and CSS using Boot strap 01 – 04 – 2025
7 Write a program to implement AJAX. 08 – 04 – 2025

8 Write a program to implement jQuery 08 – 04 – 2025

9 Write a JSP code to generate dynamic web page using server response. 15 – 04 – 2025

10 Write a program using Servlet and HTML to create a form and display the 15 – 04 – 2025
details entered by the user

11 Write a program in Servlet/JSP to display content on a web page. 20 – 04 – 2025

12 Create a Servlet/JSP page for the login system using session 20 – 04 – 2025

13 Write a Servlet/JSP program for sending e-mail.

14 Write a simple SERVLET/JSP program to set cookies and read it.

15 Create a SERVLET/JSP/JSP page for login System using session.

36 | P a g e
Experiment no:- 14

Write a simple SERVLET/JSP program to set cookies and read it.

PROGRAM :-
setCookies.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Setting Cookies</title>
</head>
<body>
<h1>Setting Cookies</h1>
<form action="main.jsp" method="GET">
First Name: <input type="text" name="first_name"> <br /><br/> Last
Name: <input type="text" name="last_name" /><br/><br/> <input type="submit" value="Submit" />
</form>
</body>
</html>

main.jsp
<%
// Create cookies for first and last names.
Cookie firstName = new Cookie("first_name", request.getParameter("first_name"));
Cookie lastName = new Cookie("last_name", request.getParameter("last_name"));

// Set expiry date after one hour for both the cookies.
firstName.setMaxAge(60 * 60);
lastName.setMaxAge(60 * 60);

// Add both the cookies in the response header.


response.addCookie(firstName);
response.addCookie(lastName);
%>
<html>
<body>
<h1>Setting Cookies</h1>
<ul>
<b>First Name:</b><%=request.getParameter("first_name")%><br /><br/>
<b>Last Name:</b><%=request.getParameter("last_name")%>
</body>
</html>

37 | P a g e
OUTPUT:-

Once you click on the Submit button, you will get the following output

38 | P a g e
JSP Cookies Read Example

ReadCookies.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Read Cookies</title>
</head>
<body>
<h1>Read Cookies </h1>
<%
Cookie cookie = null;
Cookie[] cookies = null;
cookies = request.getCookies();
if (cookies != null) {
for (int i = 0; i < cookies.length; i++) {
cookie = cookies[i];
out.print("Name : " + cookie.getName() + ", ");
out.print("Value: " + cookie.getValue() + " <br/>");
}
} else {
out.println("<h2>No cookies founds</h2>");
}
%>
</body>
</html>

OUTPUT:-

39 | P a g e
Experiment no:- 15
Create a SERVLET/JSP/JSP page for login System using session.

Program:-

Index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form action="login.jsp" method="post">
User name :<input type="text" name="usr" /><br><br> password :<input
type="password" name="password" /><br> <br><input type="submit" />
</form>
<p>
New user. <a href="register.html">Login Here</a>
</body>
</html>

login.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"


pageEncoding="ISO-8859-1"%>
<%@page import="java.sql.*,java.util.*"%>
<%
String userid = request.getParameter("userid");
session.putValue("userid", userid);
String password = request.getParameter("password");
Class.forName("com.mysql.jdbc.Driver");
java.sql.Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/students", "root", "root");
Statement st = con.createStatement();
ResultSet rs = st.executeQuery("select * from users where userid='" + userid + "' and password='" + password +
"'");
try {
rs.next();
if (rs.getString("password").equals(password) && rs.getString("userid").equals(userid)) {
out.println("<h2>Welcome " + fname "</h2>");
} else {
out.println("Invalid password or username.");
}
} catch (Exception e) {
e.printStackTrace();
}
%>

40 | P a g e
Register.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form action="registrationProcess.jsp" method="post">
First name :<input type="text" name="fname" /> <br><br>Last name :<input
type="text" name="lname" /> <br><br>Email ID :<input type="text"
name="email" /><br><br> User name :<input type="text" name="userid" /><br><br>
password :<input type="password" name="password" /> <br><br><input
type="submit" />
</form>
</body>
</html>

registrationProcess.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"


pageEncoding="ISO-8859-1"%>
<%@page import="java.sql.*,java.util.*"%>
<%
String fname = request.getParameter("fname");
String lname = request.getParameter("lname");
String email = request.getParameter("email");
String userid = request.getParameter("userid");
String password = request.getParameter("password");
try {
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/students", "root", "root");
Statement st = conn.createStatement();
int i = st.executeUpdate("insert into users(fname,lname,email,userid,password)values('" + fname + "','" + lname
+ "','" + email + "','" + userid + "','" + password + "')");
out.println("Thank you for register ! Please <a href='index.html'>Login</a> to continue.");
} catch (Exception e) {
System.out.print(e);
e.printStackTrace();
}
%>

41 | P a g e
OUTPUT

if you are a new user click on the “Login Here” link, you will get the following page where you have to enter the
details and click on the “Submit” button.

After clicking on the “Submit” button, you will get the following output. Now to log in click on the “Login” link.

42 | P a g e

You might also like