PRACTICAL FILE OF “WEB PROGRAMMING LAB”
(13060213)
FACULTY OF ENGINEERING AND TECHNOLOGY
Submitted to: Submitted by:
Ms. Charvi Name: Yash Joshi
Assistant Professor Roll no.: 241306021
CSE, FEAT BCA AIML A 2nd Sem
INDEX
Name of the Experiment Date Signature
1
10
11
12
13
14
15
16
17
Experiment 7
AIM: Write an HTML code to illustrate the usage of the following: Ordered List,
Unordered List, Definition List.
Source Code:
<!DOCTYPE html>
<html lang ="en">
<head>
<title>Fruits</title>
</head>
<body>
<hr>
<p> <b> NAME : YASH JOSHI </b></p>
<p><B> ROLL NO. 241306021</B></p>
<hr>
<h4><b>My Nested List</b></h4>
<ol type="A">
<li><b> Apple </b></li>
<li><b> Mango</b></li>
<ul type="square">
<li><b> Green Mango</b></li>
<li><b> Green Mango</b></li>
</ul>
<li><b> Banana</b></li>
<ul type="disc">
<li><b> 1o Piece</b></li>
<ul type="circle">
<li><b> 60 Ruppes</b></li>
</ul>
</ul>
<ul type="disc">
<li><b> 6 Piece</b></li>
<ul type="circle">
<li><b> 30 Ruppes</b></li>
</ul>
</ul>
<li><b> Strawberry</b></li>
</ol>
<hr>
<h4><b>My Definition List<b></h4>
<dt>
<dl><b>HTML</b></dl>
<dd>- Hypertext Markup Language</dd>
<dl><b>CSS</b></dl>
<dd> - Cascading Style Sheets</dd>
</dt>
</body>
</html>
-Output :
Experiment 8
AIM: Write a html code to create a frameset having a header
navigation and content section
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="20%,*">
<!-- Header Frame -->
<frame src="header.html" name="headerFrame" title="Header">
<frameset cols="25%,*">
<!-- Navigation Frame -->
<frame src="navigation.html" name="navigationFrame"
title="Navigation">
<!-- Content Frame -->
<frame src="content.html" name="contentFrame" title="Content">
</frameset>
</frameset>
<noframes>
<body>
<p>Your browser does not support frames. Please upgrade to a modern
browser.</p>
</body>
</noframes>
</html>
OUTPUT:
Experiment-1
AIM: Write an HTML code to display education details in a tabular
format.
Source Code:
<!Doctype html>
<html>
<head>
<title>EDUCATION DETAILS</title>
</head>
<body>
<h3 align:"center"> YASH JOSHI </h3>
<h4 align:"center">241306021</h4>
<table border="1" cellspacing="1.5" cellpadding="3.5"><cap
on><strong>EDUCATIONAL DETAILS</strong></caption>
<tr bgcolor="light brown">
<th align="center">S.No.</th>
<th align="center">Name</th>
<th align="center">Registration no.</th>
<th align="center">Course</th>
<th align="center">12 markks</th>
<th align="center">Block Name</th>
<th align="center">specialisation</th>
</tr>
<tr bgcolor="pink">
<td align="center">1</td>
<td align="center">YUVRAJ SINGH SAINI </td>
<td align="center">241306017</td>
<td align="center">BCA</td>
<td align="center">78 %</td>
<td align="center">E BLOCK </td>
<td align="center"> AIML</td>
</tr>
<tr bgcolor="pink">
<td align="center">2</td>
<td align="center"> TULIKA </td>
<td align="center">241306030</td>
<td align="center">BCOM</td>
<td align="center">74%</td>
<td align="center">D BLOCK </td>
<td align="center"> MATHMATICS</td>
</tr>
<tr bgcolor="pink">
<td align="center">3</td>
<td align="center">SHIVAM </td>
<td align="center">241306045</td>
<td align="center">BED</td>
<td align="center">75 %</td>
<td align="center">D BLOCK </td>
<td align="center"> PHYSOCLOGY </td>
</tr>
<tr bgcolor="pink">
<td align="center">4</td>
<td align="center">NIKHIL</td>
<td align="center">241306056</td>
<td align="center">BCA</td>
<td align="center">87%</td>
<td align="center">E BLOCK </td>
<td align="center"> CLOUD COMPUTING </td>
</tr>
<tr bgcolor="pink">
<td align="center">5</td>
<td align="center">AKASH</td>
<td align="center">241306042</td>
<td align="center">BTECH</td>
<td align="center">80 %</td>
<td align="center">E BLOCK </td>
<td align="center"> CSE</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Experiment-2
AIM: Write an HTML code to display your CV on a web page.
Source Code:
<!doctype html>
<html>
<head>
<title>CV ON WEB</title>
</head>
<body>
<table border="0.5" align="center" width="60%">
<tr bgcolor="yellow">
<th>
<h1>YASH JOSHI</h1>
<h4>BCA(AIML) Student,Fresher</h4>
</th>
</tr>
<tr bgcolor="lightyellow">
<td align="le ">
<h2> Contact Details:</h2>
<ul>
<li><strong>Mobile No :</strong>8800163448 </li>
<li><strong>Email Address:</strong>[email protected]</li>
</ul>
<h2> Personal Details:</h2>
<ul>
<li><strong>Name:</strong>YASH JOSHI </li>
<li><strong>Date of Birth:</strong>16/05/2003</li>
<li><strong>Religion:</strong>Hinduism</li>
<li><strong>Residence:</strong>NEW PALAM
VIHAR ,GURUGRAM</li>
</ul>
<h2> Educa on:</h2>
<ul>
<li><strong>Senior Secondary Educa on</strong><br>LPU
PUBLIC SCHOOL<br>CBSE,(April
2023-24)</li>
<li><strong>Bachelor of Computer Application</strong><br>SGT
University, Gurugram <br>(August
2024-current)</li>
</ul>
<h2> Personal Certificates:</h2>
<ul>
<li>Internet of things in cloud (certied by great leraning)</li>
<li>AI for Beginners(certified by hp LIFE)</li>
<li>C programming </li>
</ul>
<h2> So Skills</h2>
<ul>
<li>Critical Thinking</li>
<li>Active Listening</li>
<li>Teamwork</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Experiment: 3
AIM: Write an HTML code to create a Home page having three
links: About Us, Our Services and Contact Us. Create separate web
pages for the three links.
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Home Page</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to an external CSS file -->
</head>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
padding: 20px;
margin: 20px 0;
border: 1px solid #ccc;
}
footer {
text-align: center;
padding: 10px 0;
background: #333;
color: #fff;
}
.hidden {
display: none;
}
</style>
<body>
<header>
<h1>Welcome to My Home Page</h1>
<nav>
<ul>
<li><a href="#" onclick="showSection('about')">About Us</a></li>
<li><a href="#" onclick="showSection('services')">Services</a></li>
<li><a href="#" onclick="showSection('contact')">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about" class="hidden">
<h2>About Us</h2>
<p>This is a detailed description about our website. We provide various
services to help you.</p>
<p>Our mission is to deliver high-quality services that meet the needs
of our clients.</p>
</section>
<section id="services" class="hidden">
<h2>Our Services</h2>
<p>We offer a range of services including web development, design,
and consulting.</p>
</section>
<section id="contact" class="hidden">
<h2>Contact Us</h2>
<p>If you have any questions, feel free to reach out to us via email at <a
href="mailto:
[email protected]">
[email protected]</a>.</p>
</section>
</main>
<footer>
<p>© 2023 My Website. All rights reserved.</p>
<p><a href="privacy-policy.html">Privacy Policy</a> | <a href="terms-
of-service.html">Terms of Service</a></p>
</footer>
<script>
function showSection(sectionId) {
// Hide all sections
const sections = document.querySelectorAll('main section');
sections.forEach(section => {
section.classList.add('hidden');
});
// Show the selected section
const selectedSection = document.getElementById(sectionId);
selectedSection.classList.remove('hidden');
}
</script>
</body>
</html>
Output
Experiment-6
AIM: Write an HTML code to create your Institute website, Department
Website and Tutorial website for specific subject.
INSTITUTE WEBSITE
<doctype.html>
<html>
<head>
<title>YASH JOSHI INSTITUTE</title>
</head>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background: #370ce3;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: #dcf219;
text-decoration: none;
}
section {
padding: 20px;
margin: 20px 0;
border: 1px solid #c18816;
}
footer {
text-align: center;
padding: 10px 0;
background: #110f0f;
color: #dbb41a;
}
.hidden {
display: none;
}
</style>
<body>
<header>
<h1>YASH JOSHI INSTITUTE</h1>
<nav>
<ul>
<li><a href="#" onclick="showSection('about')">About
Us</a></li>
<li><a href="#"
onclick="showSection('career')">Career</a></li>
<li><a href="#"
onclick="showSection('Experts')">Experts</a></li>
<li><a href="#"
onclick="showSection('contact')">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about" class="hidden">
<h2>About Us</h2>
<p> Yash joshi Institute is dedicated to providing quality education
and empowering students with the knowledge and skills they need to succeed.
Our mission is to inspire, educate, and transform lives through excellence in
learning.</p>
</section>
<section id="career" class="hidden">
<h2>Our Services</h2>
<p> Yash joshi Institute offers a wide range of educational services,
including expert coaching, skill development programs, and personalized
learning solutions to help students excel in their academic and professional
goals.</p>
</section>
<section id="Experts" class="hidden">
<h2>Contact Us</h2>
<p>- Dr. Yash joshi – Academic Mentor
- Prof. Tulika – Career Development Expert
- Mr. Nikhil – Technical Skills Trainer
- Ms. Janvi – Language and Communication Coach</p>
</section>
<section id="contact" class="hidden">
<h2>Contact Us</h2>
<p>If you have any questions, feel free to reach out to us via email
at <a href="mailto:
[email protected]">
[email protected]</a>.</p>
</section>
</main>
<footer>
<p>© 2025 registered Institue . All rights reserved.</p>
<p><a href="privacy-policy.html">Privacy Policy</a> | <a
href="terms-of-service.html">Terms of Service</a></p>
</footer>
<script>
function showSection(sectionId) {
// Hide all sections
const sections = document.querySelectorAll('main section');
sections.forEach(section => {
section.classList.add('hidden');
});
// Show the selected section
const selectedSection = document.getElementById(sectionId);
selectedSection.classList.remove('hidden');
}
</script>
</body>
</html>
Output:
DEPARTMENT WEBSITE
<doctype.html>
<html>
<head>
<title>YASH JOSHI INSTITUTE</title>
</head>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background: #370ce3;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: #c1d512;
text-decoration: none;
}
section {
padding: 20px;
margin: 20px 0;
border: 1px solid #c18816;
}
footer {
text-align: center;
padding: 10px 0;
background: #b28b8b;
color: #dbb41a;
}
.hidden {
display: none;
}
</style>
<body>
<header>
<h1>COMMERCE And MANGEMENT DEPARTMENT </h1>
<nav>
<ul>
<li><a href="#"
onclick="showSection('about')">FUCULTY</a></li>
<li><a href="#"
onclick="showSection('career')">LABS</a></li>
<li><a href="#"
onclick="showSection('Experts')">Experts</a></li>
<li><a href="#"
onclick="showSection('contact')">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about" class="hidden">
<h2>FUCULTY</h2>
<p> BCOM, BBA ,BCOM(HOURNS),BBA(HOURNS)</p>
</section>
<section id="career" class="hidden">
<h2>LABS</h2>
<p> MATLAB , CALCULATION LAB, MEETING LAB </p>
</section>
<section id="Experts" class="hidden">
<h2>Contact Us</h2>
<p>- Dr. Yuvraj Singh Saini – Academic Mentor
- Prof. Tulika – Career Development Expert
- Mr. Nikhil – Technical Skills Trainer
- Ms. Janvi – Language and Communication Coach</p>
</section>
<section id="contact" class="hidden">
<h2>Contact Us</h2>
<p>If you have any questions, feel free to reach out to us via email
at <a href="mailto:
[email protected]">
[email protected]</a>.</p>
</section>
</main>
<footer>
<p>© 2025 registered Institue . All rights reserved.</p>
<p><a href="privacy-policy.html">Privacy Policy</a> | <a
href="terms-of-service.html">Terms of Service</a></p>
</footer>
<script>
function showSection(sectionId) {
// Hide all sections
const sections = document.querySelectorAll('main section');
sections.forEach(section => {
section.classList.add('hidden');
});
// Show the selected section
const selectedSection = document.getElementById(sectionId);
selectedSection.classList.remove('hidden');
}
</script>
</body>
</html>
Output:
Tutorial website
<doctype.html>
<html>
<head>
<title>YASH JOSHI INSTITUTE</title>
</head>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background: #370ce3;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: #c1d512;
text-decoration: none;
}
section {
padding: 20px;
margin: 20px 0;
border: 1px solid #c18816;
}
footer {
text-align: center;
padding: 10px 0;
background: #b28b8b;
color: #dbb41a;
}
.hidden {
display: none;
}
</style>
<body>
<header>
<h1>Yash joshi INSTITUTE</h1>
<nav>
<ul>
<li><a href="#" onclick="showSection('about')">About
Us</a></li>
<li><a href="#"
onclick="showSection('Experts')">TUTORIAL</a></li>
<li><a href="#"
onclick="showSection('contact')">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about" class="hidden">
<h2>About Us</h2>
<p>Yash joshi Institute is dedicated to providing quality education
and empowering students with the knowledge and skills they need to succeed.
Our mission is to inspire, educate, and transform lives through excellence in
learning.</p>
</section>
<section id="Experts" class="hidden">
<h2>Contact Us</h2>
<nav>
<ul>
<li><a href="#" onclick="showSection('about')">
Dr. Yuvraj Singh Saini – Academic MentOR</a></li>
<li><a href="#" onclick="showSection('Experts')">
Prof. Tulika – Career Development Experts </a></li>
<li><a href="#" onclick="showSection('contact')">
Mr. Nikhil – Technical Skills Trainer </a></li>
</ul>
</nav>
</section>
<section id="contact" class="hidden">
<h2>Contact Us</h2>
<p>If you have any questions, feel free to reach out to us via email
at <a href="mailto:
[email protected]">
[email protected]</a>.</p>
</section>
</main>
<footer>
<p>© 2025 registered Institue . All rights reserved.</p>
<p><a href="privacy-policy.html">Privacy Policy</a> | <a
href="terms-of-service.html">Terms of Service</a></p>
</footer>
<script>
function showSection(sectionId) {
// Hide all sections
const sections = document.querySelectorAll('main section');
sections.forEach(section => {
section.classList.add('hidden');
});
// Show the selected section
const selectedSection = document.getElementById(sectionId);
selectedSection.classList.remove('hidden');
}
</script>
</body>
</html>
Output:
