BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
PRACTICAL-1: INTRODUCTION TO HTML
HTML-HYPER TEXT MARKUP LANGUAGE
DHMT-DYNAMIC HTML
-HTML is case insensitive language.
-Used to design web pages.
-Collection of web pages is called website.
-TAGS-
1. Container tags, example-<html>.....</html>
2. Empty tags, example-<br>,<hr>
STRUCTURE OF HTML DOCUMENT:
<HTML>
<HEAD>
<TITLE>.......</TITLE>
</HEAD>
<BODY>
……………
……………
……………
</BODY>
</HTML>
PRACTICAL-2: ILLUSTRATION OF LIST TAGS OF HTML
1
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
LIST TAGS:
- Ordered list
- Unordered list
- Nested list
1. ORDERED LIST:
1. E-Commerce
2. Quantity Technique
3. Business Environment
4. Business Communications
5. Cost Accounting
6. MSD
CODE:
<html>
<head>
<title>www.E-commerce.com</title>
</head>
<body>
<ol>
<li>E-Commerce</li>
<li>Quantity Technique</li>
<li>Business Environment</li>
<li>Business Communications </li>
<li>Cost Accounting</li>
<li>MSD</li>
</ol>
</body>
</html>
A. E-Commerce
2
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
B. Quantity Technique
C. Business Environment
D. Business Communications
E. Cost Accounting
F. MSD
CODE:
<html>
<head>
<title>www.E-commerce.com</title>
</head>
<body>
<ol type='A'>
<li>E-Commerce</li>
<li>Quantity Technique</li>
<li>Business Environment</li>
<li>Business Communications </li>
<li>Cost Accounting</li>
<li>MSD</li>
</ol>
</body>
</html>
i. E-Commerce
ii. Quantity Technique
iii. Business Environment
iv. Business Communications
v. Cost Accounting
vi. MSD
CODE:
<html>
<head>
<title>www.E-commerce.com</title>
</head>
<body>
<ol type='i'>
<li>E-Commerce</li>
<li>Quantity Technique</li>
<li>Business Environment</li>
<li>Business Communications </li>
<li>Cost Accounting</li>
3
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
<li>MSD</li>
</ol>
</body>
</html>
5. E-Commerce
6. Quantity Technique
7. Business Environment
8. Business Communications
9. Cost Accounting
10. MSD
CODE:
<html>
<head>
<title>www.E-commerce.com</title>
</head>
<body>
<ol type='1'start= ‘5’>
<li>E-Commerce</li>
<li>Quantity Technique</li>
<li>Business Environment</li>
<li>Business Communications </li>
<li>Cost Accounting</li>
<li>MSD</li>
</ol>
</body>
</html>
UNORDERED LIST:
E-Commerce
4
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
Quantity Technique
Business Environment
Business Communications
Cost Accounting
MSD
CODE:
<html>
<head>
<title>www.E-commerce.com</title>
</head>
<body>
<ul>
<li>E-Commerce</li>
<li>Quantity Technique</li>
<li>Business Environment</li>
<li>Business Communications </li>
<li>Cost Accounting</li>
<li>MSD</li>
</ul>
</body>
</html>
o E-Commerce
o Quantity Technique
o Business Environment
o Business Communications
o Cost Accounting
o MSD
CODE:
<html>
<head>
<title>www.E-commerce.com</title>
</head>
<body>
<ul type=’circle’>
<li>E-Commerce</li>
<li>Quantity Technique</li>
<li>Business Environment</li>
5
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
<li>Business Communications </li>
<li>Cost Accounting</li>
<li>MSD</li>
</ul>
</body>
</html>
E-Commerce
Quantity Technique
Business Environment
Business Communications
Cost Accounting
MSD
CODE:
<html>
<head>
<title>www.E-commerce.com</title>
</head>
<body>
<ul type=’square’>
<li>E-Commerce</li>
<li>Quantity Technique</li>
<li>Business Environment</li>
<li>Business Communications </li>
<li>Cost Accounting</li>
<li>MSD</li>
</ul>
</body>
</html>
2. NESTED LIST:
6
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
1. MSD
GD
PI
GK
GS
2. Computers
o RAM
o ROM
o HDD
CODE:
<html>
<head>
<title>www.E-commerce.com</title>
</head>
<body>
<ol>
<li>MSD</li>
<ul type='square'>
<li>GD</li>
<li>PI</li>
<li>GK</li>
<li>GS</li>
</ul>
<li>Computers</li>
<ul type='circle'>
<li>RAM</li>
<li>ROM</li>
<li>HDD</li>
</ol>
</body>
</html>
PRACTICAL-3: ILLUSTRATION OF HTML FORMATTING TAGS
7
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
1. FORMATTING TAGS:
<B> BOLD FACE</B>
<I> ITALICS</I>
<U> UNDERLINE</U>
<P> NEW PARAGRAPH</P>
<BR> NEXT LINE
<FONT>
<ALIGN>
CODE:
<html>
<head>
<title>www.E-commerce.com</title>
</head>
<body BGCOLOR="GREY">
<B><H1>VATSAL NANDA</H1></B>
<I><H1>VATSAL NANDA</H1></I>
<U><H1>VATSAL NANDA</H1></U>
<P><H1>VATSAL NANDA</H1></P>
<FONT FACE="THE TIMES OF INDIA" SIZE="5"
COLOR="WHITE"><ALIGN="LEFT">WELCOME TO THE BEAUTIFUL
WORLD OF DOMS SHARP MINDS.
<BR>ENJOY THE DOMS RANGE OF PRODUCTS WITH PRECISE FEATURES
CRAFTED.<BR>
FOR YOU TO EXPLORE YOUR CREATIVITY TO THE MAXIMUM.
<BLINK>VATSAL NANDA</BLINK>
</ALIGN>
</FONT>
<pre><h1>
welcome
to
bba
class
</h1></pre>
</body>
</html>
8
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
9
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
PRACTICAL-4: INSERTING IMAGE IN A WEB PAGE AND ILLUSTRATION OF
ITS ATTRIBUTES
CODE:
<HTML>
<HEAD>
<TITLE>WWW.IMAGE.COM</TITLE>
</HEAD>
<BODY>
<H1>IMAGE TAGS</H1>
<IMG SRC="1.PNG" HEIGHT="500" WIDTH"200">
<IMG SRC="2.JPG">
<IMG SRC="3.PNG">
<IMG SRC="4.JPG">
<IMG SRC="5.JPG">
</BODY
</HTML>
10
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
PRACTICAL NO. 5: To study and design html page to illustration table tags and its
attributes
Tags: <table>
</table>
Attributes: Height, Width, Caption, Border, Color, Cell Spacing, Cell spanning, Row spanning
TIME TABLE
Day/Time 10am-11am 11am-12noon 12noon-1pm 1pm-2pm
Monday E-commerce QT B-environment B.com
Tuesday E-commerce QT B-environment B.com
Wednesday E-commerce QT B-environment B.com
Thursday E-commerce QT B-environment B.com
Saturday E-commerce QT B-environment B.com
CODE:
<html>
<head>
<title>table tags </title>
<body bgcolor="red">
<center>
<h1>partical-5:table tags</h1>
<table border="5" bordercolor=”white”>
<tr><caption>time table</caption>
</tr>
<tr>
<td>day/time</td>
<td>10am-11am</td>
<td>11am-12am</td>
<td>12am-1pm</td>
</tr>
<tr>
<td>monday</td>
<td>e-commerce</td>
<td>qt</td>
<td>b-environment</td>
</tr>
</html>
11
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
12
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
PRACTICAL NO. 6 : To Study and design HTML page to illustrate Table Tags
attributes.
Tags: Cell Spanning and Row Spanning
B C
A D E
F
CODE:
<html>
<head>
<title>Table Tags</title>
<body bgcolor="white">
<center>
<h1> Practical-5: Table Tags</h1>
<table border="5" bordercolor="red">
<TR>
<td rowspan="3">A</td>
<td>B</td>
<td>C</td>
</TR>
<TR>
<td>D</td>
<td>E</td>
</TR>
<TR>
<td colspan="3">F</td>
</tr>
</table>
</center>
</body>
<html>
13
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
PRACTICAL NO. 7: TO STUDY HYPERLINKS TAGS
TAGS:
<a href="home.html">Home</a>
<a href="aboutus.html"> About Us</a>
<a href="contactus.html"> Contact Us</a>
CODE:
<html>
<head>
<title>Table Tags</title>
</head>
<body bgcolor="red">
<center>
<h1> Practical-7: Href Tags</h1>
<a href="home.html">Home</a>
<a href="aboutus.html"> About Us</a>
<a href="contactus.html"> Contact Us</a>
</center>
</body>
</html>
CODE:
14
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
<html>
<head>
<title>Table Tags</title>
</head>
<body bgcolor="red">
<center>
<h1> Practical-7: Href Tags</h1>
<html>
<head>
<title>Table Tags</title>
</head>
<body bgcolor="red">
<center>
<h1> Practical-7: Href Tags</h1>
<a href="home.html">Home</a>
<h1> i am in about us page</h1>
</center>
</body>
</html>
</center>
</body>
</html>
PRACTICAL NO. 8: TO IILUSTRATE IMAGE AS HYPERLINK TAGS:
15
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
Syntax: <a href="image.html"> <img src="4.jpg"></a>
CODE:
<html>
<head>
<title>Table Tags</title>
</head>
<body bgcolor="red">
<center>
<h1> Practical-8: Href Tags</h1>
<a href="home.html">Home</a>
<a href="image.html"> <img src="4.jpg"></a>
</center>
</body>
</html>
16
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
PRACTICAL NO. 9: To Design a Login Form using HTML
CODE:
<html>
<head>
<BODY BGCOLOR="RED">
<title>REGISTRATION FORM </title>
</HEAD>
<BODY>
<FORM><CENTER>
<H1>LOGIN FROM</H1>
FIRST NAME: <INPUT TYPE = "TEXT" NAME = "FIRST_NAME">
<BR>
LAST NAME: <INPUT TYPE = "TEXT" NAME = "LAST_NAME">
<BR>
USER ID: <INPUT TYPE = "TEXT" NAME = "USER_ID">
<BR>
PASSWORD: <INPUT TYPE = "PASSWORD" NAME = "PASSWORD">
<BR>
<INPUT TYPE="SUBMIT" VALUE="LOGIN">
</FORM>
</CENTER>
</BODY>
</html>
17
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
PRACTICAL NO. 10: To Design a Registration Form using HTML
CODE:
<html>
<head>
<BODY BGCOLOR="RED">
<title>REGISTRATION FORM </title>
</HEAD>
<BODY>
<FORM><CENTER>
<H1>REGISTRATION FROM</H1>
FIRST NAME: <INPUT TYPE = "TEXT" NAME = "FIRST_NAME">
<BR>
LAST NAME: <INPUT TYPE = "TEXT" NAME = "LAST_NAME">
<BR>
Gender:<input type="radio" name="gender" >MALE
<input type="radio" name="gender">FEMALE
<br>
COUNTRY
<select name="dropdown">
<option value="select your country name">select your country name</option>
<option value="INDIA">India</option>
<option value="NEPAL">Nepal</option>
<option value="CHINA">China</option>
<option value="AUSTRALIA">Australia</option>
</select>
<br>
USER ID: <INPUT TYPE = "TEXT" NAME = "USER_ID">
<BR>
PASSWORD: <INPUT TYPE = "PASSWORD" NAME = "PASSWORD">
<BR>
Description:<br>
<textarea rows="5" cols="50" name="description">
enter description here.....
</textarea>
<br>
<INPUT TYPE="SUBMIT" VALUE="registration form">
</FORM>
18
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
</CENTER>
</BODY>
</html>
OUTPUT:
19
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
PRACTICAL NO. 11: To design HTML page Layout using DIV Tags
Code:
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#eee" width = "100" height = "200">
Technical and Managerial Tutorials
20
BBA-E2A//E-COMMERCE LAB File//Akshit aggarwal//01480001720
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
HTML LAYOUT
</center>
</td>
</tr>
</table>
</body>
</html>
21
