0% found this document useful (0 votes)
8 views34 pages

Manav Final Ecommerce Copy Copy

This document is a practical file for an E-Commerce lab course submitted by Manav Katyal. It includes various HTML coding exercises such as creating basic HTML structures, lists, forms, and themed webpages, along with step-by-step instructions for each task. The document also outlines additional projects like newsletters, infographics, and reports, emphasizing the use of tools like Canva for design.

Uploaded by

aqvaskin
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
0% found this document useful (0 votes)
8 views34 pages

Manav Final Ecommerce Copy Copy

This document is a practical file for an E-Commerce lab course submitted by Manav Katyal. It includes various HTML coding exercises such as creating basic HTML structures, lists, forms, and themed webpages, along with step-by-step instructions for each task. The document also outlines additional projects like newsletters, infographics, and reports, emphasizing the use of tools like Canva for design.

Uploaded by

aqvaskin
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/ 34

1

Practical file on

E-Commerce - LAB

BBA 114

Submitted To: MS RUCHITA Submitted By: MANAV KATYAL

Asst. Professor,RDIAS Class: BBA (EA)


Roll No.: 03980301724

RUKMINI DEVI INSTITUTE OF ADVANCED STUDIES


An ISO 9001:2015 Certified Institute
NAAC Accredited: A Grade (3 rd Cycle), Category A+ Institution (by SFRC, Govt
of NCT of Delhi)
(Approved by AICTE, HRD Ministry, Govt. of India)
Affiliated to Guru Gobind Singh Indraprastha University, Delhi
2A & 2B, Madhuban Chowk, Outer Ring Road, Phase-1, Delhi-110085

E COMMERCE | 03980301724
2

BBA-114

E-COMMERCE LAB

QUESTION 1.

Name the essential tags required to create the basic structure of an HTML document? Explain with a
sample HTML code.

STEPS:

1. Declare HTML Version:

• Start with <!DOCTYPE html>

2. Open the HTML Tag:

• Use <html> to wrap all content.

3. Add a Head Section:

• Use <head> for metadata like <title>.

4. Set the Page Title:

• Use <title> inside <head> to define the page title.

5. Open the Body Section:

• Use <body> to hold visible content.

6. Add Content:

• Use <h1> for headings, <p> for paragraphs.

7. Close Tags Properly:

• Ensure all tags have closing counterparts (</html>, </body>, etc.).

CODING:

E COMMERCE | 03980301724
3

OUTCOME:

QUESTION 2.

Illustrate an HTML page that includes both ordered and unordered lists. Add at least three items to
each list.

STEPS:

1. Open Notepad

Press Windows + R, type notepad, and hit Enter, OR search for Notepad in the Start menu.

2.Write the HTML code

3. Save the File

• Click File > Save As

• Set File name as lists.html

• Choose All Files in Save as type

• Click Save

4. Open in a Browser

• Locate lists.html

• Double-click to open in Chrome or Edge

5.webpage will display an unordered list (bullet points) and an ordered list (numbers).

CODING:

E COMMERCE | 03980301724
4

E COMMERCE | 03980301724
5

OUTCOME:

QUESTION 3

Build a HTML code for the nested list.

STEPS:

1.Open Notepad

Press Windows + R, type notepad, and hit Enter, OR search for Notepad in the Start menu.

2.Write the HTML code:

3. Save the File

• Click File > Save As

• Set File name as nested_list.html

• Choose All Files in Save as type

• Click Save

4.Open in a Browser

• Locate nested_list.html

• Double-click to open in Chrome or Edge

5.webpage will display a nested list, where each main item (Perfume brands, Cloth brands, Shoe
brands) contains sub-items (Gucci, Zara, etc.)

E COMMERCE | 03980301724
6

CODING:

E COMMERCE | 03980301724
7

OUTCOME:

E COMMERCE | 03980301724
8

QUESTION 4

Build a webpage in HTML on the topic "Space Exploration" using

hyperlinks. Apply the specifications given below:

● Create a web page named "Space.html" with the background

colour Black and the text colour White. Include the heading

"Space Exploration: Unlocking the Universe" at the top of the

page.

● Insert relevant data and at least two images about space

exploration, such as rockets, planets, or astronauts.

● Add hyperlinks to at least three reputable websites (e.g., ISRO,

NASA, ESA, or SpaceX) for further reading.

● Use various font styles, sizes, and colors to make the page

visually appealing.

STEPS:

1. Create an HTML File

Open a text editor (Notepad, VS Code, Sublime Text, etc.).

Save the file as space_exploration.html.

2. Write the Basic HTML Structure.

3. Create Additional Pages

4. To make the links work, create separate HTML files like history.html, missions.html,
technology.html, and future.html.

5. Save and Open in a Browser

E COMMERCE | 03980301724
9

CODING:

OUTCOME:

E COMMERCE | 03980301724
10

QUESTION 5

Create a form on Theme - “Pet Adoption Application” that asks for

the applicant's name, email, and preferred type of pet (using a

dropdown menu with options like Dog, Cat, Rabbit). Add a

checkbox for agreeing to the adoption terms. Also specify a table

which shows available pets.

STEPS:

1. Create the Basic HTML Structure.

2. Form Creation: Used <form> with method "POST" and an action (submit_form.php) to handle the
submission.

3. Personal Information: Included fields like name, email, phone, and address.

4. Pet Selection: Used <select> dropdowns and <input> fields to specify the pet preference.

5. Home Environment Questions: Used <select>, <radio>, and <textarea> to gather home details.

6. Agreement Checkbox: Ensures the user agrees to provide proper care.

7. Submit Button: Sends the form data.

E COMMERCE | 03980301724
11

CODING:

E COMMERCE | 03980301724
12

OUTCOME:

E COMMERCE | 03980301724
E-COMMERCE LAB FILE
Annexure-2

NAME-Manav Katyal
SEC -BBA(EA)
ENROLLMENT N0 - 03980301724
Web Development
Q1: Illustrate an HTML Webpage displaying a personal portfolio as a sample is
provided below. Add your social media links in it.

Ans-The following is an HTML code snippet for a personal portfolio


webpage.
Q2: Illustrate an interactive quiz webpage with the given specifications.

ANS-
Q3 a.) Develop an Event Registration Form for a 'Coding Competition'
using HTML.

Answer:
Q3 b.) Design a Personal Portfolio Page using HTML where you divide it
into following sections:
A navigation bar with hyperlinks to three sections: 'About Me,' 'My
Work,' 'Social Links' and 'Contact.'Each section is displayed in a separate
frame (using <iframe>), with each link loading a different webpage into
the frame.

Answer:
Q4 a.) Create a webpage using an ordered and unordered list to present a
menu of a restaurant.

Answer:

Q4 b.) Develop a webpage using HTML and CSS to style different sections
with colors and font styles.
Answer:

Q5 a.) Design of a 'Virtual Art Gallery' webpage with videos, audio, GIFs,
and a feedback form.

Answer:
Q5 b.) Design of 'Around the World in a Click' travel adventure webpage
with audio, GIFs, and a trip planner.

Answer:
E-COMMERCE(LAB)
(114) 1|Page

PRACTICAL FILE ON
E-Commerce – LAB(BBA(H) 114)

SUBMITTED TO: SUBMITTED BY:


Ms. Ruchita Shukla
Manav
Professor, RDIAS Katyal
BBA E - A
03980301724

RUKMINI DEVI INSTITUTE OF ADVANCED STUDIES


An ISO 9001:2015 Certified Institute
NAAC Accredited: A Grade (3rd Cycle), Category A+ Institution(by SFRC,
Govt of NCT of Delhi)
(Approved by AICTE, HRD Ministry, Govt. of India) Affiliated to Guru Gobind
Singh Indraprastha University, Delhi 2A & 2B, Madhuban Chowk, Outer Ring
Road, Phase-1, Delhi-110085

Manav Katyal
E-COMMERCE(LAB)
(114) 4|Page

INDEX

S. NO PARTICULARS PAGE NO. TEACHER’S SIGN.


1 Q1 Q2 Q3 Q4 5 -5
2 Q5 6-7
3 7-8
4 8-9
5 9-10

Manav Katyal
E-COMMERCE(LAB)
(114) 6|Page

QUESTION: - 2
Q-2 Develop a newsletter showcasing the highlights of a recent college eve
such as a workshop, seminar, or cultural festival. Include a summary of the
event, key moments, photos, and quotes from participants or organizers.
Add a section for upcoming related events or activities to keep the readers
engaged. Use Canva templates to ensure the newsletter is visually appealin
and well -organized.
ANSWER: -2
Steps to Create a Newsletter in Canva
1: Log In to Canva
2: Search for a Newsletter Template
3: Choose a Template
4: Add a Title & Header Section
5: Fill In the Sections
6: Customize Design
7: Final Touches
8: Download or Share
E-COMMERCE(LAB)
(114) 7|Page

QUESTION: - 3 (a)
Q-3 (a) Build an infographic showcasing the key milestones of your
academic journey. Include dates, brief descriptions, and relevant icons or
images to make it visually appealing. Use Canva’s timeline templates to
structure the information effectively.
ANSWER: - 3 (a)

Steps to Create “ milestones Academic Journey” Timeline in Canva


1: Log in to Canva
2: Search for a Timeline Templat
3: Add Title
4: Add These Milestones
5: Add Icons and Visuals
6: Style Your Timeline
7: Download or Share
E-COMMERCE(LAB)
(114) 8|Page

QUESTION: - 4 (a)
Q-4 (a) Design a report on 'The Impact of Plastic Pollution on Marine
Life”,' categorizing the content into clear sections such as an overview of th
problem, relevant statistics, real -life examples, and potential solutions. Use
Canva to structure the layout, incorporating visuals like charts,
infographics, and images to make the report visually engaging and
informative. Aim to analyze the severity of the issue and provide actionable
insights, all while ensuring the design is accessible and easy to follow.

ANSWER: - 4 (a)
Step-by-Step Guide in Canva
1: Log in to Canva
2: Create a New Project
3: Choose a Report Template
4: Add a Title Page
5: Add Section Pages
E-COMMERCE(LAB)
(114) 9|Page

6: Add Visuals
7: Review and Download

QUESTION: - 5 (a)
Q-5 (a) Create a digital poster to promote a 'Blood Donation Drive.' Use
Canva to design a compelling poster that includes key information such as
the date, time, location, and the importance of blood donation. Analyze
striking visuals and call -to -action phrases to encourage participation.

ANSWER: - 5 (a)
Blood Donation Drive Poster: Step -by - Step Canva Guide
1: Open Canva
2: Choose a Template
3: Add Key Information
4: Add Visuals
5: Use Colors and Fonts That Stand Out
6: Final Touches
7: Download and Share
E-COMMERCE(LAB)
(114) 10 | P a g e
E-COMMERCE(LAB)
(114) 11 | P a g e

THANK YOU
~ YOUR SUPPORT HAS BEEN INVALUABLE.

You might also like