GURU GOBIND SINGH INDRAPRASTHA UNIVERSITY
New Delhi
MAHARAJA SURAJMAL INSTITUTE
C-4, Janakpuri, New
Delhi E-commerce Lab
Subject Code-BBA- 108
SUBMITTED BY
STUDENT NAME-Vipul Sharma SUBMITTE
ENROLLMENT NO.-00121201823 D TO- DR. ITTI
BBA (B&I) HOODA
PRACTICAL-1
CREATE A HTML FILE FOR DISPLAYING A WEB PAGE WITH
FOLLOWING TAGS.THE FILE SHOULD CONTAIN A BRIEF
DESCRIPTION ABOUT ALL THESE TAGS Tags- br, b, I, u, pre, p,
div, strike, marquee, font tag.
INPUT:
<!html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tags Overview</title>
</head>
<body>
<h1>HTML Tags Overview</h1>
<h2><br> - Line Break</h2>
<p>The <br> tag is used to insert a line break in the text. It doesn't require a closing
tag.</p>
<h2><b> - Bold</h2>
<p>The <b> tag is used to make text bold.</p>
<h2><i> - Italic</h2>
<p>The <i> tag is used to make text italicized.</p>
<h2><u> - Underline</h2>
<p>The <u> tag is used to underline text.</p>
<h2><pre> - Preformatted Text</h2>
<p>The <pre> tag is used to preserve whitespace and line breaks in text, displaying it
exactly as written in the HTML code.</p>
<h2><p> - Paragraph</h2>
<p>The <p> tag is used to define a paragraph of text.</p>
<h2><div> - Division</h2>
<p>The <div> tag is used to define a division or section in an HTML document. It's often
used for styling purposes or to group elements together.</p>
<h2><strike> - Strikethrough</h2>
<p>The <strike> tag is used to draw a horizontal line through text, indicating that it's no
longer accurate or relevant.</p>
<h2><marquee> - Marquee</h2>
<p>The <marquee> tag is used to create a scrolling or moving text or image.</p>
<h2><font> - Font</h2>
<p>The <font> tag is used to specify the font, size, color, and other text properties.</p>
</body>
</html>
OUTPUT:
PRACTICAL-2
WRITE A QUADRATIC EQUATION 𝑎𝑥 2 + 𝑏𝑥 + 𝑐 and H2O formula using Sub, Sup html tag.
INPUT:
<!html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quadratic Equation and H₂O Formula</title>
</head>
<body>
<h1>Quadratic Equation and H₂O Formula</h1>
<h2>Quadratic Equation</h2>
<p>A quadratic equation is typically written in the form:</p>
<p>𝑎𝑥<sup>2</sup> + 𝑏𝑥 + 𝑐</p>
<p>Where:</p>
<ul>
<li>𝑎, 𝑏, and 𝑐 are coefficients,</li>
<li>𝑥 is the variable, and</li>
<li><sup>2</sup> represents the exponent indicating the squared
term.</li>
</ul>
<h2>H<sub>2</sub>O Formula</h2>
<p>The chemical formula for water (H<sub>2</sub>O) consists of:</p>
<ul>
<li>Two atoms of Hydrogen (H), and</li>
<li>One atom of Oxygen (O).</li>
</ul>
<p>Thus, the formula for water is written as H<sub>2</sub>O.</p>
</body>
</html>
OUTPUT:
PRACTICAL-3
DESIGN A WEB PAGE OF YOUR CV WITH HEADINGS AS
OBJECTIVES, EDUCATIONAL QUALIFICATIONS,
ACHIEVEMENTS, STRENGHTS, HOBBIES AND PERSONAL
DETAILS.
INPUT:
<! html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My CV</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1, h2 {
color: #333;
}
section {
padding: 20px;
background-color: #fff;
margin: 20px;
border-radius: 5px;
}
ul {
list-style-type: disc;
margin-left: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Vipul Sharma</h1>
<p>Curriculum vitae</p>
</header>
<section>
<h2>Educational Qualifications</h2>
<ul>
<li>Bachelor of Business Admiration(B&I) -ipu University (2026)</li>
<li>High School Diploma - Suraj bhan D.A.V public school (2023)</li>
</ul>
</section>
<section>
<h2>Strengths</h2>
<ul>
<li>Strong problem-solving skills.</li>
<li>Excellent communication and teamwork abilities.</li>
</ul>
</section>
<section>
<h2>Hobbies</h2>
<p>Reading, hiking, playing guitar.</p>
</section>
<section>
<h2>Personal Details</h2>
<ul>
<li>Date of Birth: January 21, 2005</li>
<li>Address: 29/d b-2 royal complex,royal enclave-1 desu road
mehrauli</li>
<li>Email: [email protected]</li>
<li>Phone: +917011276986</li>
</ul>
</section>
<footer>
<p>© 2024 vipul sharma | All rights reserved</p>
</footer>
</body>
</html>
OUTPUT:
PRACTICAL-4
CREATE A WEB PAGE THAT USES VARIOUS ATTRIBUTES OF
FONT TAG
INPUT:
<! html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Tag Attributes</title>
</head>
<body>
<!-- Using the font tag with various attributes -->
<!-- Changing font size -->
<font size="6">This text is in size 6 font.</font><br>
<!-- Changing font color -->
<font color="red">This text is in red color.</font><br>
<!-- Changing font face -->
<font face="Arial">This text is in Arial font.</font><br>
<!-- Combining attributes -->
<font size="4" color="blue" face="Verdana">This text is size 4, blue color, and
in Verdana font.</font><br>
<!-- Using the deprecated align attribute -->
<font size="4" color="green" face="Courier" align="center">This text is size 4,
green color, in Courier font, and centered.</font><br>
</body>
</html>
OUTPUT:
PRACTICAL-5
DESIGN A WEB SITE WITH THE NAME AS HTML TUTORIAL
WITH FOLLOWING SPECIFICATIONS: Make following hyperlinks (i.e., 5 different web pages):
1. Formatting Styles and Headings: Include Bold, italics, Underline, Strike, Subscript,
superscript and all six types of headings
2. Font Styles and Images: Font and Base font tag, Image tag
3. Anchor: Internal (linking within page) and External (linking with other documents)
links
4. Marquee: Move text, image and hyperlink
5. Other tags: br, hr, pre, p
INPUT:
<! html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tutorial</title>
</head>
<body>
<!-- Page 1: Formatting Styles and Headings -->
<h1>Formatting Styles and Headings</h1>
<p>This page demonstrates various formatting styles and headings.</p>
<p><strong>Bold Text</strong></p>
<p><em>Italic Text</em></p>
<p><u>Underlined Text</u></p>
<p><strike>Strikethrough Text</strike></p>
<p><sub>Subscript Text</sub></p>
<p><sup>Superscript Text</sup></p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<hr>
<!-- Page 2: Font Styles and Images -->
<h1>Font Styles and Images</h1>
<p>This page demonstrates font styles and image insertion.</p>
<font size="4">This text is in size 4 font.</font><br>
<font face="Arial">This text is in Arial font.</font><br>
<img src="image.jpg" alt="Example Image">
<!-- Page 3: Anchor -->
<h1>Anchor</h1>
<p>This page demonstrates internal and external links.</p>
<a href="#page1">Go to Page 1</a><br>
<a href="https://www.example.com">External Link</a>
<!-- Page 4: Marquee -->
<h1>Marquee</h1>
<p>This page demonstrates moving text, images, and hyperlinks.</p>
<marquee behavior="scroll" direction="left">This text moves from right to
left.</marquee><br>
<marquee behavior="alternate"><img src="image.gif" alt="Moving
Image"></marquee><br>
<marquee behavior="scroll" direction="up"><a href="#page2">Go to Page
2</a></marquee>
<!-- Page 5: Other Tags -->
<h1>Other Tags</h1>
<p>This page demonstrates the br, hr, pre, and p tags.</p>
<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph.</p>
<pre>
This text is displayed in a preformatted style.
It preserves both spaces and line breaks.
</pre>
<br>
<a href="#page3">Go to Page 3</a>
</body>
</html>
OUTPUT:
PRACTICAL-6
CREATE A PROGRAM USING ORDERED AND UNORDERED
LISTS With the hyperlinks- Fruits, Vegetables, Newspaper and Magazines and create ordered and
unordered lists with price and image
of each list item.
INPUT:
<!html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping List</title>
</head>
<body>
<h1>Shopping List</h1>
<!-- Fruits -->
<h2>Fruits</h2>
<ul>
<li>
<strong>Apple</strong>
<ul>
<li>Price: 50rupees</li>
<li><img src="apple.jpg" alt="Apple"></li>
</ul>
</li>
<li>
<strong>Banana</strong>
<ul>
<li>Price:40rupees</li>
<li><img src="banana.jpg" alt="Banana"></li>
</ul>
</li>
<li>
<strong>Orange</strong>
<ul>
<li>Price:80 rupees</li>
<li><img src="orange.jpg" alt="Orange"></li>
</ul>
</li>
</ul>
<!-- Vegetables -->
<h2>Vegetables</h2>
<ol>
<li>
<strong>Carrot</strong>
<ul>
<li>Price:60 rupees</li>
<li><img src="carrot.jpg" alt="Carrot"></li>
</ul>
</li>
<li>
<strong>Broccoli</strong>
<ul>
<li>Price: 30 rupees</li>
<li><img src="broccoli.jpg" alt="Broccoli"></li>
</ul>
</li>
<li>
<strong>Tomato</strong>
<ul>
<li>Price:80rupees</li>
<li><img src="tomato.jpg" alt="Tomato"></li>
</ul>
</li>
</ol>
<!-- Newspaper and Magazines -->
<h2>Newspapers and Magazines</h2>
<ul>
<li>
<strong>New York Times</strong>
<ul>
<li>Price:30 rupees</li>
<li><img src="nytimes.jpg" alt="New York Times"></li>
</ul>
</li>
<li>
<strong>National Geographic</strong>
<ul>
<li>Price:40 rupees</li>
<li><img src="natgeo.jpg" alt="National Geographic"></li>
</ul>
</li>
<li>
<strong>Time Magazine</strong>
<ul>
<li>Price:30 rupees</li>
<li><img src="time.jpg" alt="Time Magazine"></li>
</ul>
</li>
</ul>
</body>
</html>
PRACTICAL-7
CREATE A TABLE – Seminar Schedule
INPUT:
<html>
<head> <title> <b> Seminar Schedule </b> </title> </head>
<body> <table border="1">
<caption> Seminar Schedule </caption>
<tr> <th rowspan ="3" bgcolor ="silver"> Day </th>
<th colspan = "3", bgcolor ="RED"> Seminar </th> </tr>
<tr> <th colspan = "2", bgcolor ="silver" > Schedule </th>
<th rowspan ="2", bgcolor ="silver" > Topic </th>
</tr>
<tr> <td align="center"> Begin </td>
<td align ="center"> End </td> </tr>
<tr> <th rowspan ="2", bgcolor="RED"> Monday </th>
<td> 8:00 am </td>
<td> 11:00 am </td>
<th> OS </th> </tr>
<tr> <td> 11:30 am </td>
<td> 1:00 pm </td>
<th> Digital Marketing </th> </tr>
<tr> <th rowspan ="2" bgcolor="RED"> Tuesday </th>
<td> 8:00 am </td>
<td> 11:00 am </td>
<th> python </td> </tr>
<tr> <td> 11:30 am </td>
<td> 1:00 pm </td>
<th> cyber security </th> </tr>
<tr> <th colspan ="4"> Lunch Break </th></tr>
<tr> <th bgcolor="RED"> Tuesday </th>
<td> 2:00 pm </td>
<td> 4:00 pm </td>
<th> Data communications </th> </tr>
<tr> <th rowspan="2" bgcolor="RED"> Wednesday </th>
<td> 9:00 am </td>
<td> 11:00 am </td>
<th> AI/ML </th> </tr>
<tr> <th colspan = "3"> 11:00- onwards Valedictory Session </th> </tr>
</table>
</html>
OUTPUT:
PRACTICAL-8
CREATE CLASS TIME TABLE
INPUT:
<!html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Timetable</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Class Timetable</h2>
<table>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<td>12:00 - 1:00</td>
<td>Bm</td>
<td>Bm</td>
<td>Bm</td>
<td>Bm</td>
<td>Be</td>
</tr>
<tr>
<td>1:00 - 2:00</td>
<td>CA</td>
<td>Be</td>
<td>Ec</td>
<td>BE</td>
<td>POI</td>
</tr>
<tr>
<td>2:00 - 2:30</td>
<td>LUNCH</td>
<td>LUCH</td>
<td>LUNCH</td>
<td>LUNCH</td>
<td>LUCH</td>
</tr>
<tr>
<td>2:30 - 3:30</td>
<td>POI</td>
<td>EC</td>
<td>BE</td>
<td>POI</td>
<td>CA</td>
</tr>
<tr>
<td>3:30 - 4:30</td>
<td></td>
<td>CA</td>
<td>CA</td>
<td>ECOM(LAB)</td>
<td>EC</td>
</tr>
</table>
</body>
</html>
OUTPUT:
PRACTICAL-9
WRITE AN HTML CODE TO DISPLAY SYLLABUS OF BBA. CLICKING ON EACH LINK
SHOULD OPEN THE DESCRIPTION
OF THE SUBJECT.
INPUT:
<!html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BBA Syllabus</title>
</head>
<body>
<h2>BBA Syllabus</h2>
<!-- Subject Links -->
<ul>
<li><a href="#subject1">Business mathamatics</a></li>
<li><a href="#subject2">Cost accounting</a></li>
<li><a href="#subject3">Business Enviourment</a></li>
<li><a href="#subject4">Principles of insurance</a></li>
<li><a href="#subject5">E-commerce</a></li>
</ul>
<!-- Subject Descriptions -->
<div id="subject1">
<h3>Business mathamatics</h3>
<p>This course covers the principles and practices of marketing
management, including market analysis, consumer behavior, product
development, pricing strategies, distribution channels, and promotion.</p>
</div>
<div id="subject2">
<h3>Cost Accounting</h3>
<p>This course introduces students to the fundamentals of cost accounting,
including recording transactions, preparing financial statements, analyzing
financial data, and interpreting financial results.</p>
</div>
<div id="subject3">
<h3>Business Enviourment</h3>
<p>This course focuses on developing Economics skills in a business
context, including written communication, oral communication, presentation
skills, and interpersonal communication.</p>
</div>
<div id="subject4">
<h3>Principles of insurance</h3>
<p>This course examines the role of principle of insurance .</p>
</div>
<div id="subject5">
<h3>E-commerce</h3>
<p>This course covers the knowledge of e-commerce platform.</p>
</div>
</body>
</html>
OUTPUT:
PRACTICAL-10
CREATE AN HTML DOCUMENT USING BASE TAG, ALL ATTRIBUTES OF TARGET TAG
AND INSERT AN IMAGE LINK
IN THE SAME.
INPUT:
<!html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Document with Base Tag</title>
<base href="https://example.com/" target="_blank" />
</head>
<body>
<h1>HTML Document with Base Tag</h1>
<!-- Image Link -->
<a href="hello-world-vector-16780393.Jpg" target="_self">
<img src="C:\Users\bhavy\Downloads\hello-world-vector-16780393"
alt="Example Image" width="300" height="200" border="1" />
</a>
</body>
</html>
OUTPUT:
PRACTICAL-11
Create a HTML webpage using Nested Tables which display the
following list.
INPUT:
<!html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Tables Example</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
}
</style>
</head>
<body>
<h2>Nested Tables Example</h2>
<table>
<tr>
<th>Main Category</th>
<th>Sub Category</th>
<th>Description</th>
</tr>
<tr>
<td rowspan="3">Category 1</td>
<td>Subcategory 1.1</td>
<td>Description for Subcategory 1.1</td>
</tr>
<tr>
<td>Subcategory 1.2</td>
<td>Description for Subcategory 1.2</td>
</tr>
<tr>
<td>Subcategory 1.3</td>
<td>Description for Subcategory 1.3</td>
</tr>
<tr>
<td rowspan="2">Category 2</td>
<td>Subcategory 2.1</td>
<td>Description for Subcategory 2.1</td>
</tr>
<tr>
<td>Subcategory 2.2</td>
<td>Description for Subcategory 2.2</td>
</tr>
</table>
</body>
</html>
OUTPUT:
PRACTICAL-12
CREATE TARGET ATTRIBUTE (Self, Blank, Top & Parent) Using Hyperlink
INPUT:
<!html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Target Attribute Example</title>
</head>
<body>
<h2>Target Attribute Example</h2>
<!-- Self (Opens in the same window) -->
<a href="https://www.example.com" target="_self">Open in Same Window
(Self)</a><br>
<!-- Blank (Opens in a new blank window or tab) -->
<a href="https://www.example.com" target="_blank">Open in New Window or
Tab (Blank)</a><br>
<!-- Top (Opens in the linked document in the full body of the window) -->
<a href="https://www.example.com" target="_top">Open in Full Window
(Top)</a><br>
<!-- Parent (Opens in the linked document in the parent frame) -->
<a href="https://www.example.com" target="_parent">Open in Parent Frame
(Parent)</a><br>
</body>
</html>
OUTPUT:
PRACTICAL-13
Create a descriptive list of Mobile Store named- HP World
1. Create descriptive list of mobile phones with price and specifications including image
2. Create descriptive list of pen drive, hard disk with price and image
INPUT:
<!html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HP World - Mobile Store</title>
</head>
<body>
<h1>HP World - Mobile Store</h1>
<!-- Descriptive List of Mobile Phones -->
<h2>Mobile Phones</h2>
<dl>
<dt>iPhone 12</dt>
<dd>
<img src="iphone12.jpg" alt="iPhone 12" width="200"><br>
Price: 150000<br>
Specifications: 6.1-inch Super Retina XDR display, A14 Bionic chip,
Dual-camera system, 5G capable.
</dd>
<dt>Samsung Galaxy S21</dt>
<dd>
<img src="galaxys21.jpg" alt="Samsung Galaxy S21" width="200"><br>
Price: 100000<br>
Specifications: 6.2-inch Dynamic AMOLED 2X display, Exynos
2100/Snapdragon 888 chip, Triple-camera system, 5G capable.
</dd>
</dl>
<!-- Descriptive List of Pen Drives and Hard Disks -->
<h2>Pen Drives and Hard Disks</h2>
<dl>
<dt>Sandisk 128GB USB 3.0 Pen Drive</dt>
<dd>
<img src="pen_drive.jpg" alt="Sandisk Pen Drive" width="200"><br>
Price: 500<br>
USB 3.0 compatible, 128GB storage capacity.
</dd>
<dt>Seagate 1TB Portable External Hard Drive</dt>
<dd>
<img src="external_hdd.jpg" alt="Seagate External Hard Drive"
width="200"><br>
Price: 6000<br>
USB 3.0 interface, 1TB storage capacity, compact design.
</dd>
</dl>
</body>
</html>
OUTPUT:
PRACTICAL-14
Create a document using I frame tag in HTML.
INPUT:
<!html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IFrame Example</title>
</head>
<body>
<h1>IFrame Example</h1>
<p>Here is an embedded webpage:</p>
<iframe src="https://www.example.com" width="800" height="600"
frameborder="0"></iframe>
<p>This is an embedded webpage from example.com using the iframe tag.</p>
</body>
</html>
OUTPUT:
PRACTICAL-15
Create a frame showing three sections
Section 1- Any Website link
Section 2- Any Image link
Section 3- Any Video using link
INPUT:
<!html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frame Example</title>
</head>
<body>
<h1>Frame Example</h1>
<!-- Section 1: Website Link -->
<iframe src="https://www.example.com" width="400" height="300"
frameborder="0"></iframe>
<!-- Section 2: Image Link -->
<iframe src="https://www.example.com/image.jpg" width="400" height="300"
frameborder="0"></iframe>
<!-- Section 3: Video Link -->
<iframe src="https://www.example.com/video.mp4" width="400" height="300"
frameborder="0"></iframe>
</body>
</html>
OUTPUT:
PRACTICAL-16
Create a student registration form in HTML
INPUT:
<!html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
</head>
<body>
<h2>Student Registration Form</h2>
<form action="#" method="post">
<label for="fullname">Full Name:</label><br>
<input type="text" id="fullname" name="fullname" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="phone">Phone:</label><br>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}"
required><br><br>
<label for="dob">Date of Birth:</label><br>
<input type="date" id="dob" name="dob" required><br><br>
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other" required>
<label for="other">Other</label><br><br>
<label for="address">Address:</label><br>
<textarea id="address" name="address" rows="4" cols="50"
required></textarea><br><br>
<label for="course">Select Course:</label><br>
<select id="course" name="course" required>
<option value="">Select...</option>
<option value="Computer Science">Computer Science</option>
<option value="Engineering">Engineering</option>
<option value="Mathematics">Mathematics</option>
<option value="Biology">Biology</option>
<option value="Business">Business</option>
</select><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
OUTPUT:
