GURU GOBIND SINGH INDRAPRASTHA UNIVERSITY

MAHARAJA SURAJMAL INSTITUTE

E-commerce Lab

Subject Code-BBA-108

SUBMITTED BY SUBMITTED TO
Prince Mahajan Ms. Ajay Phogat
Enrollment No:06121201718
BBA (B&I) V EVE
 E-COMMERCE LAB
INDEX

S.NO PROGRAM PAGE DATE SIGN

NO.

1. Create a HTML file for displaying a webpage with following Tags. The
file should contain a brief description about all these tags:

a. Bold

b. Italics

c. Underline

d. Alignment

e. Paragraph

f. Text color

g. Headings

h. HR

i. Background Color

j. Line break

k. Pre

2. Design a Web Page of your CV with headings as Objective, educational

qualification, achievements, strengths, hobbies and personal details.

Apply following specifications:

Insert a horizontal line after every above mentioned heading (Eg. Insert
horizontal line once objectives are complete)

Set any light color as page background.

Bold and underline every heading

Insert your image on left side of web page

Use heading tag to specify the headings

After every heading is over put a horizontal line

Use pre tag for Educational Qualification

 Use Base font tag for all the text

3. Design a Web Site with the name as HTML tutorial with following
specifications:

Make following hyperlinks (i.e. 5 different web pages):

Formatting Styles and Headings: Include Bold, italics, Underline, Strike,

Subscript, superscript and all six type of headings

Font Styles and Images: Font and Basefont tag, Image tag

Anchor: Internal (linking within page) and External (linking with other
documents) links

Marquee: Move text, image and hyperlink

Other tags: br, hr, pre, p

Include following specifications:

In all these web pages only mention about use, attributes apply them.

Insert a background image on home page

Make all the topics as hyperlinks and go to some other page for
description

Insert a marquee showing HTML Tutorial as moving text.

Use different font style for different topics

On every page, make a hyperlink for going back to home page.

4.
Write a HTML code to print the following lines in same manners:

In Mathematics, a quadratic equation is a polynomial equation of

the second degree. The general form is
ax2+bx+c=0
Where != 0 (For if a=0, the equation becomes a linear equation)

"CHEMICAL EQUATION"

4H3PO3 = 3H3PO4+PH3
and other expression as
Pnew= Pold + X2-Yacosx
5. Create a nested list as follows:

Computer System

1. Input Devices

i. Keyboard

ii. Mouse

iii. Joystic

iv. Scanner

a. Flat Bed Scanner

b. Hand held Scanner

2. Output Devices

i. Monitor

a. LCD

b. CRT

ii. Printer

a. Impact Printer

b. Non Impact Printer

Apply following parts:

Insert an image of computer on top right corner of web page

Display a marquee displaying “Input and Output Devices”

Use different font styles and colors for Input and Output Devices

Insert horizontal line after Input Devices are over

Use bold, italics and underline in headings

6. Create a HTML webpage which display the following list.

FRUITS & VEGETABLES

A. Vegetables

• Onion

• Tomato

• Radish

• Potato

• Carrot

B. Fruits

• Apple

• Banana

• Water-Melon

• Mango

• Grapes

Newspaper & Magazine

o Newspaper

5. The Times of India

6. Hindustan Times

7. Navbharat Times

8. Punjab Kesari

9. Dainik Jagran

o Magazine

i. Business Times

ii. The Week

iii. India Today

iv. Harvard Business Review

 v. Computer World

Apply following parts:

Put horizontal line after newspaper and magazine

Apply heading tag for newspaper and magazine

Apply a background color

Insert marquee tag displaying “Newspapers and Magazines”

7. Design tables as follows:

Roll Name Course Marks

no
1 Ajay BBA 78
Kumar
2 Kavita BCA 62
Sharma
3 Rohit Garg BBA CAM 87
4 Pooja BBA 67
Kapoor
5 Mohit BBA CAM 72
Gupta

8.

Create following table:

Roll Marks
Name Course
No Internal External Total
123 abc BBA 20 60 80
789 xyz BCA 15 65 80
9. Design tables as follows:

IP University Courses
Graduate Post Graduate
BBA BCA B. Tech MBA MCA M. Tech

240 120 100 200 100 80

10. Design following frame:

MAIN MENU Explanation

-----------
Lists -----------
Tables View Example
Frames Example

11. Design following HTML form:

12. Design a Student registration form in HTML

 EXPERIMENT - 1

Q. Create a HTML file for displaying a webpage with following Tags. The file should contain a brief
description about all these tags:
a. Bold
b. Italics
c. Underline
d. Alignment
e. Paragraph
f. Text color
g. Headings
h. HR
i. Background Color
j. Line break
k. Pre

CODING:
<html>
<head>
<title>EXPERIMENT-1</title>
</head>
<body bgcolor =" pink">
<h1>This is Heading</h1><hr>
<b>This is Bold</b><br>
<i>This is Italics</i><br>
<u>This is Underline</u><br>
<p align ="center"><font color ="red">This is center aligned, red color text</font></p>
<pre>
S.no Name Subject
1 Prince E-Commerce
</pre>
</body>
</html>

OUTPUT:
 EXPERIMENT – 2

Q. Design a Web Page of your CV with headings as Objective, educational qualification, achievements,
strengths, hobbies and personal details.
Apply following specifications:

Insert a horizontal line after every above mentioned heading (Eg. Insert horizontal line once objectives are
complete)
Set any light color as page background.
Bold and underline every heading
Insert your image on left side of web page
Use heading tag to specify the headings
After every heading is over put a horizontal line
Use pre tag for Educational Qualification
Use Base font tag for all the text

CODING:

<HTML>
<HEAD><TITLE>CV</TITLE></HEAD>
<BODY BGCOLOR ="YELLOW">
<H1><B><I><CENTER>PRINCE MAHAJAN</CENTER></I></B></H1>
<IMG SRC ="C:\Users\prince mahajan\Desktop\me.jpg" width ="150px"
height ="150px"><BR><HR>
<H2><B><I><CENTER>OBJECTIVES</CENTER></I></B></H2>
<P><CENTER>I am a student of MSI and I am trying to seek a good opportunity and
gain experience<br/> I am pursuing BBA General and I'm planning to pursue MBA after
that</CENTER></P><HR>
<H2><B><I><CENTER>EDUCATION QUALIFICATIONS</CENTER></I></B></H2>
<CENTER><PRE>
S.no Qualification Institute
1 12th Passed GD GOENKA PUBLIC SCHOOL, VASANT KUNJ
2 BBA (G) Maharaja Surajmal of Institute
</PRE><CENTER><HR>
<H2><B><I><CENTER>ACHIEVEMENTS</CENTER></I></B></H2>
<P><CENTER>1. Won prize in Non-Fire Cooking in Genesis</CENTER></P><HR>
<H2><B><I><CENTER>STRENGTHS</CENTER></I></B></H2>
<CENTER><P>1.HARD WORKING<BR>2.PUNCTUAL
</P></CENTER><HR>
<H2><B><I><CENTER>HOBBIES AND PERSONAL DETAILS</CENTER></I></B></H2>
<P><CENTER>I am very much interested in Crafts and also I do a lot of social work.
I participated in Food Donation Camp organized in my college.</CENTER></P>
</BODY>
<HTML>
OUTPUT:
 EXPERIMENT 3
Q. Design a Web Site with the name as HTML tutorial with following specifications:

Make following hyperlinks (i.e. 5 different web pages):

Formatting Styles and Headings: Include Bold, italics, Underline, Strike, Subscript, superscript and all six
type of headings
Font Styles and Images: Font and Basefont tag, Image tag
Anchor: Internal (linking within page) and External (linking with other documents) links
Marquee: Move text, image and hyperlink
Other tags: br, hr, pre, p
Include following specifications:
In all these web pages only mention about use, attributes apply them.
Insert a background image on home page
Make all the topics as hyperlinks and go to some other page for description
Insert a marquee showing HTML Tutorial as moving text.
Use different font style for different topics
On every page, make a hyperlink for going back to home page.

CODING:

<html>
<head>
<title>html tutorial</title>
</head>
<body bgcolor="lightblue">
<h1 align="center">html tags</h1><hr/>
<br><br><br><br>
<Marquee><h3><a href="https://gmail.com">formatting tag</a></h3>
</marquee><hr/>
<br><br><br><br>
<Marquee><h3><a href="www.google.com">anchor tag</a></h3>
</marquee><hr/>
<br><br><br><br>
<Marquee><h3><a href="marqueetag.html">marquee tag</a></h3>
</marquee><hr/>
<br><br><br><br>
</body>
</html>
OUTPUT:
 EXPERIMENT – 4

Q. Write a HTML code to print the following lines in same manners:

In Mathematics, a quadratic equation is a polynomial

equation of the second degree. The general form is
ax2+bx+c=0
Where != 0 (For if a=0, the equation becomes a linear
equation)

"CHEMICAL EQUATION"

4H3PO3 = 3H3PO4+PH3
and other expression as
Pnew= Pold + X2-Yacosx

CODING:

<HTML>
<HEAD><TITLE>CHEMICAL EQUATION</TITLE></HEAD>
<BODY>
In Mathematics, a quadratic equation is a polynomial equation of the second degree. The general form
is<br>
ax²+bx+c=0<br>
Where != 0 (For if a=0, the equation becomes a linear equation<hr>
<H1><U>"CHEMICAL EQUATION"</U></H1>
4H<SUB>3</SUB>PO<SUB>3</SUB>=3H<SUB>3</SUB>PO<SUB>4</SUB>+PH<SUB>3</SUB>
<BR>
and other expression as <BR>
P<SUB>new</SUB>=P<SUB>old</SUB>+X<SUP>2</SUP>-Y<SUP>acosx</SUP>
</BODY>
</HTML>
OUTPUT:
 EXPERIMENT – 5

Q. Create a nested list as follows:

Computer System
1. Input Devices
i. Keyboard
ii. Mouse
iii. Joystick
iv. Scanner
a. Flat Bed Scanner
b. Hand held Scanner
2. Output Devices
i. Monitor
a. LCD
b. CRT
ii. Printer
a. Impact Printer
b. Non Impact Printer

Apply following parts:

Insert an image of computer on top right corner of web page
Display a marquee displaying “Input and Output Devices”
Use different font styles and colors for Input and Output Devices
Insert horizontal line after Input Devices are over
Use bold, italics and underline in headings

CODING:

<html>
<head> <title> Nested list </title> </head>
<body>
<h1><b> <i> <u> NESTED LIST </u> </i> </b></h1>
<CENTER>COMPUTER SYSTEM</CENTER>
<IMG SRC ="C:\Users\prince mahajan\Desktop\lenovo-desktop-computer-500x500.jpg" ALIGN =
"RIGHT" HEIGHT = "200px" WIDTH = "200px">
<marquee> INPUT OUTPUT DEVICES </marquee>
<ol type="1" >
<li> Input Devices </li>
<ol>
<li> Keyboard </li>
<li> Mouse </li>
<li> Joystick </li>
<li> Scanner </li>
<ol type="a">
<li> Flat Bed </li>
<li> Hand Held </li>
</ol>
</ol>
<hr>
<li> Output Devices </li>
<ol type="a" >
<li> LCD </li>
<li> CRT </li>
</ol>
<li> Printer </li>
<ol type="a">
<li> Impact </li>
<li> Non Impact </li>
</ol>
</body>
</html>
OUTPUT:
 EXPERIMENT – 6

Q. Create a HTML webpage which display the following list.

FRUITS & VEGETABLES

A. Vegetables
• Onion
• Tomato
• Radish
• Potato
• Carrot
B. Fruits
• Apple
• Banana
• Water-Melon
• Mango
• Grapes

Newspaper & Magazine

o Newspaper
5. The Times of India
6. Hindustan Times
7. Navbharat Times
8. Punjab Kesari
9. Dainik Jagran

o Magazine
i. Business Times
ii. The Week
iii. India Today
iv. Harvard Business Review
v. Computer World

Apply following parts:

Put horizontal line after newspaper and magazine
Apply heading tag for newspaper and magazine
Apply a background color
Insert marquee tag displaying “Newspapers and Magazines”

CODING:
<HTML>
<HEAD><TITLE>EXPERIMENT6</TITLE></HEAD>
<BODY BGCOLOR = "BLUE"><H2>FRUITS & VEGETABLES</H2>
<H4><OL TYPE = "A"><LI>VEGETABLES</LI></OL></H4>
<UL>
<LI>ONION</LI>
<LI>TOMATO</LI>
<LI>RADISH</LI>
<LI>POTATO</LI>
<LI>CARROT</LI>
</UL>
<H4><OL TYPE = "A" START = "2"><LI>FRUITS</LI></OL></H4>
<UL>
<LI>APPLE</LI>
<LI>BANANA</LI>
<LI>WATER-MELON</LI>
<LI>MANGO</LI>
<LI>GRAPES</LI>
</UL><BR>
<H2><MARQUEE>NEWSPAPER & MAGAZINE</MARQUEE></H2><HR>
<H4><UL TYPE = "DISC"><LI>NEWSPAPER</LI></UL></H4>
<OL TYPE = "1" START = "5">
<LI>THE TIMES OF INDIA</LI>
<LI>HINDUSTAN TIMES</LI>
<LI>NAVBHARAT TIMES</LI>
<LI>PUNJAB KESARI</LI>
<LI>DAINIK JAGRAN</LI>
</OL>
<H4><UL TYPE = "DISC"><LI>MAGAZINE</LI></UL></H4>
<OL TYPE = "i">
<LI>BUSINESS TIMES</LI>
<LI>THE WEEK</LI>
<LI>INDIA TODAY</LI>
<LI>HARWARD BUSINESS REVIEW</LI>
<LI>COMPUTER WORLD</LI>
</OL>
</BODY>
</HTML>

OUTPUT:
 EXPERIMENT – 7

Q. Design tables as follows:

Roll Name Course Marks

no
1 Ajay BBA 78
Kumar
2 Kavita BCA 62
Sharma
3 Rohit BBA CAM 87
Garg
4 Pooja BBA 67
Kapoor
5 Mohit BBA CAM 72
Gupta

CODING:

<HTML>
<HEAD><TITLE>E7</TITLE></HEAD>
<BODY><CENTER>
<TABLE BORDER = "1">
<TR>
<TH>ROLL NO.</TH><TH>NAME</TH><TH>COURSE</TH><TH>MARKS</TH>
</TR>
<TR>
<TD>1</TD><TD>AJAY KUMAR</TD><TD>BBA</TD><TD>78</TD>
</TR>
<TR>
<TD>2</TD><TD>KAVITA SHARMA</TD><TD>BCA</TD><TD>62</TD>
</TR>
<TR>
<TD>3</TD><TD>ROHIT GARG</TD><TD>BBA CAM</TD><TD>87</TD>
</TR>
<TR>
<TD>4</TD><TD>POOJA KUMAR</TD><TD>BBA</TD><TD>67</TD>
</TR>
<TR>
<TD>5</TD><TD>MOHIT GUPTA</TD><TD>BBA CAM</TD><TD>72</TD>
</TR>
</TABLE>
</BODY>
</HTML>

OUTPUT:

EXPERIMENT – 8

Q. Create following table:

Roll Marks
Name Course
No Internal External Total
123 abc BBA 20 60 80
 789 xyz BCA 15 65 80

CODING:

<HTML>
<HEAD><TITLE>EXPERIMENT-8</TITLE></HEAD>
<BODY><CENTER><TABLE BORDER = "1">
<TR>
<TH ROWSPAN = "2" WIDTH = "50px">ROLL. NO</TH>
<TH ROWSPAN = "2">NAME</TH>
<TH ROWSPAN = "2">COURSE</TH>
<TH COLSPAN = "3">MARKS</TH>
</TR>
<TR>
<TH>INTERNAL</TH>
<TH>EXTERNAL</TH>
<TH>TOTAL</TH>
</TR>
<TR>
<TD>123</TD>
<TD>abc</TD>
<TD>BBA</TD>
<TD>20</TD>
<TD>60</TD>
<TD>80</TD>
</TR>
<TR>
<TD>789</TD>
<TD>xyz</TD>
<TD>BCA</TD>
<TD>15</TD>
<TD>65</TD>
<TD>80</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

OUTPUT:
 EXPERIMENT – 9

Q.DESIGN TABLE AS FOLLOWS:

IP University Courses
Graduate Post Graduate
M.
BBA BCA B. Tech MBA MCA
Tech
240 120 100 200 100 80

CODING:

<HTML>
<HEAD><TITLE>EXPERIMENT-9</TITLE></HEAD>
<BODY><CENTER><TABLE BORDER = "1">
<TR>
<TH COLSPAN = "6">IP UNIVERSIT COURSES</TH>
</TR>
<TR>
<TD COLSPAN = "3" WIDTH = "150px">GRADUATE</TD>
<TD COLSPAN = "3" WIDTH = "150px">POST GRADUATE</TD>
</TR>
<TR>
<TD WIDTH = "10px">BBA</TD>
<TD>BCA</TD>
<TD>B.TECH</TD>
<TD>MBA</TD>
<TD>MCA</TD>
<TD>M.TECH</TD>
</TR>
<TR>
<TD HEIGHT = "50px" VALIGN = "MIDDLE">240</TD>
<TD HEIGHT = "50px" VALIGN = "MIDDLE">120</TD>
<TD HEIGHT = "50px" VALIGN = "MIDDLE">100</TD>
<TD HEIGHT = "50px" VALIGN = "MIDDLE">200</TD>
<TD HEIGHT = "50px" VALIGN = "MIDDLE">100</TD>
<TD HEIGHT = "50px" VALIGN = "MIDDLE">80</TD>
</TR>
</TABLE>
</BODY>
</HTML>

OUTPUT:
 EXPERIMENT – 10

Q.10. Design following frame:

MAIN MENU Explanation

---------------------

Lists ---------------------

Tables View Example

Frames Example

CODE (FRAME):
<html>
<head><title> FRAME </title></head>
<frameset cols="50%,50%">
<frame src="Main Menu.html" name="o1">
<frameset rows="60%,40%">
<frame src="Explanation.html" name="o2"> Explanation
<frame src="Example.html" name="o3">
</frameset>
</frameset>
</html>

CODE (MAIN MENU):

<html>
<head><title> MAIN MENU </title></head>
<body>
<h1> MAIN MENU </h1><br><br><br>
<font size="6">
<a href="Lists.html" target="o2"> Lists </a><br><br>
<a href="Tables.html" target="o2"> Tables </a><br><br>
<a href="Frames.html" target="o2"> Frames </a><br><br>
</font>
</body>
</html>

CODE (LISTS):
<html>
<head><title> LISTS </title></head>
<body><font size="5">
<h2> Explanation </h2>
<p> Understanding HTML Lists. HTML lists are used to present list of information in well formed and
semantic way.
There are three different types of list in HTML and each one has a specific purpose and meaning:
Unordered list — Used to
group a set of related items, in no particular order.</p>
<a href="Example of Lists.html" target="o3"> View Example </a>
</font>
</body>
</html>

CODE (TABLES):
<html>
<head><title> TABLES </title></head>
<body><font size="5">
<h2> Explanation </h2>
<p> An HTML structure for creating rows and columns on a Web page. The Table tag defines the overall
table and the Table
Row (TR) tag is used to build each row. The Table Data (TD) tag defines the actual data. Prior to
HTML5, tables were often
used for virtually every element on the page. </p>
<a href="Example of Tables.html" target="o3"> View Example </a>
</font>
</body>
</html>

CODE (FRAMES):
<html>
<head><title> FRAMES </title></head>
<body><font size="5">
<h2> Explanation </h2>
<p> HTML - Frames. HTML frames are used to divide your browser window into multiple sections
where each section can load
a separate HTML document. A collection of frames in the browser window is known as a frameset. The
window is divided into
frames in a similar way the tables are organized: into rows and columns. </p>
<a href="Example of Frames.html" target="o3"> View Example </a>
</font>
</body>
</html>

CODE (EXAMPLE OF LISTS):

<html>
<head><title> EOL </title></head>
<body><font size="4">
<h3><u> EXAMPLE </u></h3>
<p><pre> ul
li Coffee li
li Tea li
li Milk li
ul
(One needs to open tag with <> this sign and close the tag with <br> < / > this sign.)
</pre></p>
</font>
</body>
</html>

CODE (EXAMPLE OF TABLES):

<html>
<head><title> EOT </title></head>
<body><font size="4">
<h3><u> EXAMPLE </u></h3>
<p><pre> table style="width:100%"
tr
th Firstname th
th Lastname th
th Age th
tr
tr
td Jill td
td Smith td
td 50 td
tr
tr
td Eve td
td Jackson td
td 94 td
tr
table
(One needs to open tag with <> this sign and close the tag with <br> < / > this sign.)
</pre></p>
</font>
</body>
</html>

CODE (EXAMPLE OF FRAMES):

<html>
<head><title> EOF </title></head>
<body><font size="4">
<h3><u> EXAMPLE </u></h3>
<p><pre> frameset cols="25%,*,25%"
frame src="frame_a.htm"
frame src="frame_b.htm"
frame src="frame_c.htm"
frameset
(One needs to open tag with <> this sign and close the tag with <br> "< / >" this sign.)
</pre></p>
</font>
</body>
</html>

OUTPUT:
 EXPERIMENT – 11

Q. Design following HTML form:

CODING:
<HTML>
<HEAD><TITLE>E12</TITLE></HEAD>
<BODY>
<H2>EMPLOYEE FORM</H2>
<FORM>
NAME<INPUT TYPE = "TEXT" NAME = "TEXTNAME"><BR>
DESIGNATION<SELECT NAME = "DESIGNATION">
<OPTION VALUE = "MANAGER">MANAGER
<OPTION VALUE = "EMPLOYEE">EMPLOYEE
</SELECT><BR>
SALARY<INPUT TYPE = "NUMBER">PWD<BR>
SPECIALISATION<INPUT TYPE = "RADIO" NAME = "RADIO">IT<BR>
<INPUT TYPE = "RADIO" NAME = "RADIO">MANAGEMENT
HOBBIES<INPUT TYPE = "CHECKBOX" NAME = "CHECKBOX">TRAVELLING<BR>
<INPUT TYPE = "CHECKBOX" NAME = "CHECKBOX">SPORTS<BR>
<INPUT TYPE = "CHECKBOX" NAME = "CHECKBOX">READING<BR>
<INPUT TYPE = "CHECKBOX" NAME = "CHECKBOX">NET SURFING<BR>
ADDRESS<TEXTAREA PLACEHOLDER = "PLEASE ENTER YOUR ADDRESS" ROWS = "2"
COLS = "30"></TEXTAREA><BR>
<INPUT TYPE = "SUBMIT" VALUE = "SUBMIT"><BR>
<INPUT TYPE = "RESET" NAME = "RESET"><BR>
</FORM>
</BODY>
</HTML>

OUTPUT:
EXPERIMENT – 12
<html>

<head>

<title>HTML Table</title>

</head>

<body>

<form method="" action="">

<table border="1" align="center" width="400" bgcolor="#CCCCCC" >

<caption>Registration form</caption>

<tr>

<th>Enter your first name</th>

<td><input type="text" name="fn" id="fn1" maxlength="10" title="enter your first name"

placeholder="enter your first name" required/></td>

</tr>

<tr>

<th>Enter your last name</th>

<td><input type="text"/></td>

</tr>

<tr>

<th>Enter your password</th>

<td><input type="password"/></td>

</tr>

<tr>

<th>ReEnter your password</th>

<td><input type="password"/></td>

</tr>

<tr>
<th>Enter your email</th>

<td><input type="email"/></td>

</tr>

<tr>

<th>Enter your mobile</th>

<td><input type="number"/></td>

</tr>

<tr>

<th>Enter your address</th>

<td><textarea rows="8" cols="20"></textarea></td>

</tr>

<tr>

<th>Select your gender</th>

<td>

male<input type="radio" name="g" value="m"/>

female<input type="radio" name="g" value="f"/>

</td>

</tr>

<tr>

<th>Select your hobbies</th>

<td>

hobby1<input type="checkbox" name="x[]" value="h"/>

hobby2<input type="checkbox" name="x[]" value="h2"/>
hobby3<input type="checkbox" name="x[]" value="h3"/>

</td>

</tr>

<tr>
<th>Select your DOB</th>

<td><input type="date"/></td>

</tr>

<tr>

<th>Select your Country</th>

<td>

<select name="country">

<option value="" selected="selected" disabled="disabled">Select your country</option>

<option value="1">India</option>

<option value="2">Outside India</option>

</select>

</td>

</tr>

<tr>

<th>Upload your pic</th>

<td><input type="file"/></td>

</tr>

<tr>

<td colspan="2" align="center"><input type="submit" value="Save My Data"/>

<input type="reset" value="Reset Data"/>

</td>

</tr>

</table>

</form>

</body>
</html>

OUTPUT