Practical Lab File
of
E-Commerce Lab (BBA-114)
Submitted in partial fulfilment for the award of BBA degree of GGSIPU, New Delhi
Submitted by
Name: Aadi Jain
Roll No:06515601724
Semester: 2nd
Batch: 2024-28
Under the guidance of Mr. Faheem Ahmed, Assistant professor
DEPARTMENT OF MANAGEMENT
DR AKHILESH DAS GUPTA INSTITUTE OF PROFESSIONAL STUDIES
(Affiliated to GGSIPU)
FC-26, Shastri Park, Delhi-110053
INDEX
S.NO NAME OF EXPERIMENTS Signature
1 Design a web page by using html to implement the
different forma ng tags
2 Design a web page by using html to show the descrip on
of a book which includes its tle, author's name, publisher
name and year of publica on
3 Design a web page by using html to implement the
ordered list and unordered list
4 Design a web page by using html to implement the table
that contains record for 10
5 Design a web document by using html to implement the
different colours as background colour and text colours
6 Design a web page by using html to implement inser on
of image in web page and perform different forma ng on
it
7 Design a web document by using html to implement the
use of different types of icons
8 Design a web document by using html to implement
hyperlinks and its naviga on to different web pages
9 Design a web document by using html to implement
working with frames
10 Design a web document by using html to implement
working with frames
11 Prepare a resume in html with objec ves, educa on,
hobbies and extracurricular ac vi es
12 Design a web document to implement the use of
mul media components in web
Q1.Design a web page by using html to implement the different forma ng tags
<html>
<head>< tle>Forma ng Tags</ tle></head>
<body>
<h1><u>Welcome to BBA Web Class</u></h1>
<p><b>Bold Text</b>, <i>Italic Text</i>, <u>Underlined Text</u></p>
<p><strike>Strikethrough Text</strike> and <sup>Superscript</sup> and
<sub>Subscript</sub></p>
</body>
</html>
Q2 Design a web page by using html to show the descrip on of a book which
includes its tle, author's name, publisher name and year of publica on
<html>
<head>< tle>Book Descrip on</ tle></head>
<body>
<h2>Book Informa on</h2>
<p><b>Title:</b> Too Good to Be True</p>
<p><b>Author:</b> Prajakta Koli</p>
<p><b>Publisher:</b> HarperCollins India</p>
<p><b>Year:</b>January 13, 2025</p>
</body>
</html>
Q3 Design a web page by using html to implement the ordered list and
unordered list
<html>
<head>< tle>List Example</ tle></head>
<body>
<h2>Ordered List</h2>
<ol>
<li>Laptops </li>
<li>Hardisk</li>
<li>Pendrive</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Keyboard </li>
<li>Table </li>
<li>Calculator</li>
</ul>
</body>
</html>
Q4 Design a web page by using html to implement the table that contains
record for 10
<html>
<head>< tle>Student Table</ tle></head>
<body>
<h2>Student Records</h2>
<table border="1">
<tr><th>Roll No</th><th>Name</th><th>Marks</th></tr>
<tr><td>1</td><td>Vidhi</td><td>85</td></tr>
<tr><td>2</td><td>Sagar </td><td>90</td></tr>
<tr><td>3</td><td>Mayank</td><td>80</td></tr>
<tr><td>4</td><td>Ansh</td><td>95</td></tr>
<tr><td>5</td><td>piyush</td><td>93</td></tr>
<tr><td>6</td><td>s=Kar k</td><td>75</td></tr>
<tr><td>7</td><td>anil</td><td>67</td></tr>
<tr><td>8</td><td>vinod</td><td>78</td></tr>
<tr><td>9</td><td>Neha</td><td>60</td></tr>
<tr><td>10</td><td>rohit</td><td>70</td></tr>
</table>
</body>
</html>
Q5Design a web document by using html to implement the different colours as
background colour and text colours
<html>
<head>< tle>Colours</ tle></head>
<body bgcolor="Red" text="black">
<h1>Welcome to Colourful Web Page</h1>
</body>
</html>
Q6 Design a web page by using html to implement inser on of image in web
page and perform different forma ng on it
<html>
<head>< tle>Image Example</ tle></head>
<body>
<h2>Our College Building</h2>
<img src="adgitm.jpg" alt="College Image" width="400" style="border: 2px
solid black;">
</body>
</html>
Q7Design a web document by using html to implement the use of different
types of icons
<html>
<head>< tle>Icons</ tle></head>
<body>
<h2>Social Media Icons</h2>
<img src="facebook-icon.png" alt="Facebook" width="40">
<img src="twi er-icon.png" alt="Twi er" width="40">
</body>
</html>
Q8 Design a web document by using html to implement hyperlinks and its naviga on to different
web pages
<html>
<head>< tle>Hyperlinks</ tle></head>
<body>
<a href="h ps://www.google.com">Visit Google</a><br>
<a href="about.html">About Us</a>
</body>
</html>
Q9 Design a web document by u*sing html to implement working with frames
1. Main HTML Page (index.html)
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< tle>Modern Framed Layout</ tle>
<style>
body, html {
margin: 0;
height: 100%;
font-family: Arial, sans-serif;
header {
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
font-size: 24px;
.container {
display: flex;
height: calc(100% - 60px);
nav {
width: 200px;
background-color: #f0f0f0;
padding: 15px;
box-sizing: border-box;
nav a {
display: block;
margin: 10px 0;
color: #333;
text-decora on: none;
nav a:hover {
color: #4CAF50;
iframe {
flex-grow: 1;
border: none;
</style>
</head>
<body>
<header>
Welcome to My Modern Website
</header>
<div class="container">
<nav>
<a href="home.html" target="contentFrame">Home</a>
<a href="about.html" target="contentFrame">About</a>
<a href="contact.html" target="contentFrame">Contact</a>
</nav>
<iframe src="home.html" name="contentFrame"></iframe>
</div>
</body>
</html>
2 Home Page (home.html)
html
CopyEdit
<!DOCTYPE html>
<html>
<head>< tle>Home</ tle></head>
<body>
<h2>Home Page</h2>
<p>Welcome to the home page content.</p>
</body>
</html>
3 About Page (about.html)
html
CopyEdit
<!DOCTYPE html>
<html>
<head>< tle>About</ tle></head>
<body>
<h2>About Us</h2>
<p>We are a company dedicated to web development tutorials.</p>
</body>
</html>
4 Contact Page (contact.html)
html
CopyEdit
<!DOCTYPE html>
<html>
<head>< tle>Contact</ tle></head>
<body>
<h2>Contact Us</h2>
</body>
</html>
Q10 Design a web document by using html to implement forms and controls
<html>
<head>< tle>Form Example</ tle></head>
<body>
<form>
Name: <input type="text" name="name"><br>
Gender: <input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female<br>
Course:
<select name="course">
<op on value="bba">BBA</op on>
<op on value="bca">BCA</op on>
</select><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Q11 Prepare a resume in html with objec ves, educa on, hobbies and extracurricular ac vi es
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, ini al-scale=1.0"/>
< tle>Resume -Aadi Jain</ tle>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 40px;
background-color: #f5f7fa;
color: #333;
.container {
max-width: 900px;
margin: auto;
background: white;
padding: 40px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
posi on: rela ve;
h1, h2 {
border-bo om: 2px solid #007BFF;
padding-bo om: 5px;
color: #007BFF;
ul {
list-style-type: square;
margin-le : 20px;
sec on {
margin-bo om: 30px;
.header {
display: flex;
jus fy-content: space-between;
align-items: center;
margin-bo om: 40px;
.header-text {
flex: 1;
.header h1 {
margin: 0;
font-size: 36px;
.header p {
font-size: 18px;
color: #666;
.profile-img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #007BFF;
.print-bu on {
posi on: absolute;
top: 20px;
right: 20px;
background: #007BFF;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 6px;
font-size: 14px;
.print-bu on:hover {
background-color: #0056b3;
@media print {
.print-bu on {
display: none;
</style>
</head>
<body>
<div class="container">
<bu on class="print-bu on" onclick="window.print()">Download PDF</bu on>
<div class="header">
<div class="header-text">
<h1>Aadi Jain</h1>
<p>Email: [email protected]<br>
Phone: +91-9773710365<br>
Loca on: Delhi,India </p>
</div>
<img class="profile-img" src="aadijain.jpg" alt="Profile Photo" />
</div>
<sec on>
<h2>Objec ve</h2>
<p>
To leverage my enthusiasm, dedica on, and communica on skills to grow personally and
professionally
while contribu ng meaningfully to a dynamic and progressive organiza on.
</p>
</sec on>
<sec on>
<h2>Educa on</h2>
<ul>
<li><strong>Dr. Akhilesh Das Gupta Ins tute of Professional Studies</strong> – BBA, Pursuing,
2024–2027</li>
<li><strong>Senior Secondary</strong> – CBSE Board, 2023 (Commerce Stream)</li>
<li><strong>Secondary</strong> – CBSE Board, 2020</li>
</ul>
</sec on>
<sec on>
<h2>Hobbies</h2>
<ul>
<li>playing Volleyball </li>
<li>Updated about Cars </li>
<li>Watching Vlogs </li>
</ul>
</sec on>
<sec on>
<h2>Extracurricular Ac vi es</h2>
<ul>
<li>Ac ve par cipant in debates and public speaking sessions</li>
<li>Ac ve par cipant college events </li>
<li>Regular contributor to web development program </li>
</ul>
</sec on>
</div>
</body>
</html>
Q12 Design a web document to implement the use of mul media components in web page
<html>
<head>< tle>Mul media</ tle></head>
<body>
<h2>Video Example</h2>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<h2>Audio Example</h2>
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</body>
</html>
