Scribd
Upload
327 views47 pages

Ecommerce Lab Manual Final

The document provides code samples to create a lab manual for a course on advanced ecommerce applications. It contains 12 experiments covering various HTML tags for formatting text, inserting images, creating links, tables and frames. Each experiment section provides the aim, procedures to develop the code, sample code and output to demonstrate the relevant tag. The manual is intended as a learning resource for students in the course.

Uploaded by

Rishi Sant
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
327 views47 pages

Ecommerce Lab Manual Final

The document provides code samples to create a lab manual for a course on advanced ecommerce applications. It contains 12 experiments covering various HTML tags for formatting text, inserting images, creating links, tables and frames. Each experiment section provides the aim, procedures to develop the code, sample code and output to demonstrate the relevant tag. The manual is intended as a learning resource for students in the course.

Uploaded by

Rishi Sant
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/ 47

SRI RAMAKRISHNA COLLEGE OF ARTS AND SCIENCE

(An Autonomous Institution)


(Accredited by NAAC)

DEPARTMENT OF BBA

LAB MANUAL
ADVANCED FRAMEWORK IN ECOMMERCE
APPLICATIONS -LAB
18BM501
ACADEMIC YEAR 2020-2021
INDEX

PAGE
S.NO NAME OF THE EXPERIMENT
NO
1 To Illustrate Body And Pre Tag 2-4
2 To Illustrate Font Tag 5-7
3 To Illustrate Comment, H1……H6 And Div Tag 8-10
4 To Illustrate Formatting Tag 11-14
5 To Illustrate Ordered List Tag 15-19
6 To Illustrate Unordered List Tag 20-23
7 To Illustrate Nested And Definition Tag 24-27
8 To Illustrate Image Tag 28-31
9 To Illustrate Hyper Link Tag 32-38
10 To Illustrate Table Tag 39=43
11 To Illustrate Frame Tag 44-49
12 To Illustrate Form Tag 50-53
1. BODY AND PRE TAG

AIM:
Design the static webpage to illustrate a Body And Pre Tag

PROCEDURE:
STEP 1 : Open the text editor (Note pad or Word pad)
STEP 2 : Choose new from editor file menu , to create a blank page
STEP 3 : Type the following text to illustrate Body And Pre Tag
STEP 4 : Choose File->Save As
STEP 5 : In the dialog box choose text document for the type
STEP 6: Give the name as BodAndPreTag and extension as .htm or
.html
STEP 7 : Choose the folder in which you want to save the webpage ,
Click save
STEP 8 : Open your browser , choose File -> Open to open file
using browse button
STEP 9 : Once the file has been select press OK to see the HTML
text in the browser
PROGRAM:

<html>
<head>
<title>Body And Pre Tag</title>
</head>
<body text="red" bgcolor="yellow" background="Desert.jpg">
This is an illustration of body tag with its properties
<pre>
This text uses
Pre tag and preserves
Next line and spaces
</pre>
This text does not uses
Pre tag so does not preserves
Next line and spaces..everything
will be printed in the same line
</body>
</html>
OUTPUT:

RESULT:
Thus the webpage to illustrate Body and Pre Tag are created
successfully
2.FONT TAG

AIM:
Design the static webpage to illustrate a Font Tag

PROCEDURE:
STEP 1 : Open the text editor (Note pad or Word pad)
STEP 2 : Choose new from editor file menu , to create a blank page
STEP 3 : Type the following text to illustrate Font Tag
STEP 4 : Choose File->Save As
STEP 5 : In the dialog box choose text document for the type
STEP 6: Give the name as FontTag and extension as .htm or .html
STEP 7 : Choose the folder in which you want to save the webpage ,
Click save
STEP 8 : Open your browser , choose File -> Open to open file
using browse button
STEP 9 : Once the file has been select press OK to see the HTML
text in the browser
PROGRAM:

<html>
<head>
<title>Font Tag </title>
</head>
<body>
<font face="Arial" size"1" color="blue">WELCOME</font><br>
<font size="2" color="cyan">WELCOME</font><br>
<font size="3" color="red">WELCOME</font><br>
<font size="4" color="blue">WELCOME</font><br>
<font size="5" color="green">WELCOME</font><br>
<font size="6" color="yellow">WELCOME</font><br>
<font size="7" color="brown">WELCOME</font><br>
<font size="20" color="gray">WELCOME</font><br>
</body>
</html>
OUTPUT:

RESULT:
Thus the webpage to illustrate Text Font Tag is created
successfully
3.COMMENT, H1…..H6 AND DIV TAG

AIM:
Design the static webpage to illustrate a Comment, h1….h6 And Div
Tags

PROCEDURE:
STEP 1 : Open the text editor (Note pad or Word pad)
STEP 2 : Choose new from editor file menu , to create a blank page
STEP 3 : Type the following text to illustrate Comment, h1…..h6
And Div Tags
STEP 4 : Choose File->Save As
STEP 5 : In the dialog box choose text document for the type
STEP 6: Give the name as CommentHeadingAndDivTags and
extension as .htm or .html
STEP 7 : Choose the folder in which you want to save the webpage ,
Click save
STEP 8 : Open your browser , choose File -> Open to open file
using browse button
STEP 9 : Once the file has been select press OK to see the HTML
text in the browser
PROGRAM:
<html>
<head>
<title>Comment,h1....h6 And Div Tags</title>
</head>
<body>
<!--THIS IS A COMMENT LINE-->
<div style="color:#00ff00">
<h1 align="center">This is h1 tag with center aligned</h1>
<h2 align="left">This is h2 tag with left aligned</h2>
<h3 align="right">This is h3 tag with right aligned</h3>
</div>
<h4>This is h4 tag without alignment</h4>
<h5>This is h5 tag without alignment</h5>
<h6>This is h6 tag without alignment</h6>
</body>
</html>
OUTPUT:

RESULT:
Thus the webpage to illustrate Comment, h1..h6 And Div Tag
are created successfully
4. TEXT FORMATTING TAGS

AIM:
Design the static webpage to illustrate a Text Formatting Tags

PROCEDURE:
STEP 1 : Open the text editor (Note pad or Word pad)
STEP 2 : Choose new from editor file menu , to create a blank page
STEP 3 : Type the following text to illustrate Text Formatting Tags
STEP 4 : Choose File->Save As
STEP 5 : In the dialog box choose text document for the type
STEP 6: Give the name as TextFormattingTags and extension as
.htm or .html
STEP 7 : Choose the folder in which you want to save the webpage ,
Click save
STEP 8 : Open your browser , choose File -> Open to open file
using browse button
STEP 9 : Once the file has been select press OK to see the HTML
text in the browser
PROGRAM:

<html>
<head>
<title>Text Formatting Tags</title>
</head>
<body>
<center>
<h1 align="center">To illustrate Text Formatting Tags</h1>
<hr color="red">
<p><marquee behavior="alternate">This is an Alternate Marquee
Text
</marquee>
<p>this is <i>italized</i></P>
<p>this is <u>underlined</U></p>
<p>this is <b>bold</b></p>
<p>this is <em>emphasized</em></p>
<p>this is <strong>strong text</strong></p>
<p>this is <s>striked text</s></p>
<p>this is <code>computer code</code></p>
<p>this is <sup>superscript</sup>code</p>
<p>this is <sub>subscript</sub>code</p>
<p>this is <big>big TEXT</big></P>
<P>this is <small text</small></P>
</center>
</body>
</html>

OUTPUT:

RESULT:
Thus the webpage to illustrate Formatting Tag is created
successfully
5.ORDERED LIST TAG

AIM
Design the static webpage to illustrate a Ordered List Tag

PROCEDURE
STEP 1 : Open the text editor (Note pad or Word pad)
STEP 2 : Choose new from editor file menu , to create a blank page
STEP 3 : Type the following text to illustrate Ordered List Tag
STEP 4 : Choose File->Save As
STEP 5 : In the dialog box choose text document for the type
STEP 6: Give the name as OrderedListTag and extension as .htm or
.html
STEP 7 : Choose the folder in which you want to save the webpage ,
Click save
STEP 8 : Open your browser , choose File -> Open to open file
using browse button
STEP 9 : Once the file has been select press OK to see the HTML
text in the browser
PROGRAM:

<html>
<head>
<title>Ordered List Tag</title>
</head>
<body>
<h3 align="center" style="color:red">To illustrate ORDERED LIST
Tags</h3>
<hr color="red">
<h4>Numbered List:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Uppercase Letters List:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Letters List:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman Numbers List:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman Numbers List:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
OUTPUT:

RESULT:
Thus the webpage to illustrate Ordered List Tag is created
successfully
6.UNORDERED LIST TAG

AIM:
Design the static webpage to illustrate a Unordered List Tag

PROCEDURE:
STEP 1 : Open the text editor (Note pad or Word pad)
STEP 2 : Choose new from editor file menu , to create a blank page
STEP 3 : Type the following text to illustrate Unordered List Tag
STEP 4 : Choose File->Save As
STEP 5 : In the dialog box choose text document for the type
STEP 6: Give the name as UnorderedListTag and extension as .htm
or .html
STEP 7 : Choose the folder in which you want to save the webpage ,
Click save
STEP 8 : Open your browser , choose File -> Open to open file
using browse button
STEP 9 : Once the file has been select press OK to see the HTML
text in the browser

PROGRAM:

<html>
<title>Unordered List Tag</title>
</head>
<body>
<h3 align="center>To illustrate UNORDERED LIST Tags</h3>
<hr color="red">
<h4>Disc Bullets List:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle Bullets List:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square Bullets List:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
OUTPUT:

RESULT:
Thus the webpage to illustrate Unordered List Tag is created
successfully
7. NESTED AND DEFINITION TAG
AIM:
Design the static webpage to illustrate a nested and definition tag

PROCEDURE:
STEP 1 : Open the text editor (Note pad or Word pad)
STEP 2 : Choose new from editor file menu , to create a blank page
STEP 3 : Type the following text to illustrate Nested and Definition
Tag
STEP 4 : Choose File->Save As
STEP 5 : In the dialog box choose text document for the type
STEP 6: Give the name as NestedAndDefinitionTag and extension as
.htm or .html
STEP 7 : Choose the folder in which you want to save the webpage ,
Click save
STEP 8 : Open your browser , choose File -> Open to open file
using browse button
STEP 9 : Once the file has been select press OK to see the HTML
text in the browser
PROGRAM:
<html>
<head>
<title>nested and defined list</title>
</head>
<body>
<h3 align=”center”>to illustrate nested and definition list tags</h3>
<hr color=”red”>
<h4>an ordered nested list:</h4>
<ol>
<li>coffee</li>
<li>tea
<ol type=”a”>
<li>black tea</li>
<li>green tea</li>
<ol type=”I”>
<li>china</li>
<li>Africa</li>
</ol>
</ol>
<li>milk</li>
</ol>
<h4>a definition list:</h4>
<dl>
<dt>Bangalore</dt>
<dd>-capital city of Karnataka</dd>
<dt>Mumbai</dt>
<dd>-capital city of Maharashtra</dd>
</dl>
</body>
</html>

OUTPUT:

RESULT:
Thus the webpage to illustrate Nested and Definition are Tag
created successfully
8.IMAGE TAG

AIM:
Design the static webpage to illustrate a Image tag

PROCEDURE:
STEP 1 : Open the text editor (Note pad or Word pad)
STEP 2 : Choose new from editor file menu , to create a blank page
STEP 3 : Type the following text to illustrate Image Tag
STEP 4 : Choose File->Save As
STEP 5 : In the dialog box choose text document for the type
STEP 6: Give the name as ImageTag and extension as .htm or .html
STEP 7 : Choose the folder in which you want to save the webpage ,
Click save
STEP 8 : Open your browser , choose File -> Open to open file
using browse button
STEP 9 : Once the file has been select press OK to see the HTML
text in the browser
PROGRAM:

<html>
<head>
<title>Image tag</title>
</head>
<body><h3 align="center" style="color:red">To illustrate Image
Tag</h3><hr>
<p>
<img src= "C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"
align="right" height="100" width="100">
This image is right aligned with the text
</p>
<br><br><br><br><hr>
<p>
<img src="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"
align="left" height="100" width="100">
This image is left aligned with the text
</P>
<br><br><br><br><hr>
This image is center aligned with the text
<img src="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"
align="center" height="100" width="100">
<br><br><br><br><hr>
This image is middle aligned with the text
<img src="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"
align="middle" height="100" width="100">
<br><br><br><br><hr>
This image is bottom aligned with the text
<img src="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"
align="bottom" height="100" width="100">
<br><br><br><br><hr>
This image is top aligned with the text
<img src="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"
align="top" height="100" width="100">
</body>
</html>

OUTPUT:

RESULT:
Thus the webpage to illustrate Image Tag is created
successfully
9. HYPER LINK TAG

AIM:
Design the static webpage to illustrate a Hyper Link tag

PROCEDURE:
STEP 1 : Open the text editor (Note pad or Word pad)
STEP 2 : Choose new from editor file menu , to create a blank page
STEP 3 : Type the following text to illustrate Hyper link Tag
STEP 4 : Choose File->Save As
STEP 5 : In the dialog box choose text document for the type
STEP 6: Give the name as HyperLinkTag and extension as .htm or
.html
STEP 7 : Choose the folder in which you want to save the webpage ,
Click save
STEP 8 : Open your browser , choose File -> Open to open file
using browse button
STEP 9 : Once the file has been select press OK to see the HTML
text in the browser
PROGRAM:

<html>
<head>
<title>Hyper Link Tag</title>
</head>
<body>
<h1 align="center"><u>SNR SON'S COLLEGE</u></h1>
<h1 align="center">Web Designing Tags</h1>
<h2>Subject: INTERNET AND WEBPAGE DESINGING<br><br>
Department: BBA.CA<br><br>
Semester: FOURTH<br><br>
Batch: 2015 - 2018<br><br>
<h1 align="center">Various Tags</h1>
<h2><a href="web program 1.html">Body and Pre tag</a></h2>
<br><br>
<h2><a href="web program 2.html">Text Font Tag</a></h2>
<br><br>
<h2><a href="web program 3.html">Comment, h1....h6 and div
Tags</a></h2>
<br><br>
</body>
</html>
webprogram1.html
<html>
<head>
<title>Body and Pre tag</title>
</head>
<body text="red" bgcolor="yellow" background="Desert.jpeg">
This is an illustration of body tag with its properties
<pre>
This text uses
Pre tag and preserves
Next line and spaces
</pre>
This text does not uses
Pre tag so does not preserves
Next line and spaces..everything
will be printed in the same line
</body>
</html>

webprogram2.html
<html>
<head>
<title> Font Tag</title>
</head>
<body>
<font face="arial"size"1"color="blue">WELCOME</font><br>
<font size="2"color="cyan">WELCOME</font><br>
<font size="3"color="red">WELCOME</font><br>
<font size="4"color="blue">WELCOME</font><br>
<font size="5"color="green">WELCOME</font><br>
<font size="6"color="yellow">WELCOME</font><br>
<font size="7"color="brown">WELCOME</font><br>
<font size="20"color="gray">WELCOME</font><br>
</body>
</html>

webprogram3.html
<html>
<head>
<title>Comment,h1....h6 and div tags</title>
</head>
<body>
<!--THIS IS A COMMENT LINE-->
<div style="color:#00ff00">
<h1 align="center">This is h1 tag with center aligned</h1>
<h2 align="left">This is h2 tag with left aligned</h2>
<h3 align="right">This is h3 tag with right aligned</h3>
</div>
<h4>This is h4 tag without alignment</h4>
<h5>This is h5 tag without alignment</h5>
<h6>This is h6 tag without alignment</h6>
</body>
</html>

OUTPUT:
RESULT:
Thus the webpage to illustrate Hyper Link Tag is created
successfully
10.TABLE TAG

AIM:
Design the static webpage to illustrate a Table Tag

PROCEDURE:
STEP 1 : Open the text editor (Note pad or Word pad)
STEP 2 : Choose new from editor file menu , to create a blank page
STEP 3 : Type the following text to illustrate Table Tag
STEP 4 : Choose File->Save As
STEP 5 : In the dialog box choose text document for the type
STEP 6: Give the name as TableTag and extension as .htm or .html
STEP 7 : Choose the folder in which you want to save the webpage ,
Click save
STEP 8 : Open your browser , choose File -> Open to open file
using browse button
STEP 9 : Once the file has been select press OK to see the HTML
text in the browser
PROGRAM:

<html>
<head>
<title>Table Tag</title>
</head>
<body>
<h1 align="center">PERSONAL DETAILS</h1>
<table border="5">
<tr>
<th><font color="blue">NAME </font>
<th><font color="blue">BLOOD GROUP </font>
<th><font color="blue">DOB </font>
<tr>
<th> Nithishkumar R M
<td> O+
<td>04/06/1998
<tr>
<th>Kamala kannan R
<td>O+
<td>11/05/1997
<tr>
<th>Gokulnath N
<td>O+
<td>16/09/1997
<tr>
<th>Lalithkumar S
<td>AB+
<td>23/05/1998
<tr>
<th>Ram prabhu
<td>A+
<td>17/12/1998
<tr>
<th>B Dineshkumar
<td>O+
<td>16/01/1994
<tr>
<th> viswanathan c
<td>O+
<td>09/01/1998
<tr>
<th rowspan="3">BLOOD GROUP
<td>O+ 5Members</tr>
<tr>
<td>A+ 1Member</tr>
<tr>
<td>AB+ 1Member</tr>
</table>
</body>
</html>
OUTPUT:

RESULT:
Thus the webpage to illustrate Table Tag is created successfully
11.FRAME TAG
AIM:
Design the static webpage to illustrate Frame Tag

PROCEDURE:
STEP 1 : Open the text editor (Note pad or Word pad)
STEP 2 : Choose new from editor file menu , to create a blank page
STEP 3 : Type the following text to illustrate Frame Tag
STEP 4 : Choose File->Save As
STEP 5 : In the dialog box choose text document for the type
STEP 6: Give the name as FrameTag and extension as .htm or .html
STEP 7 : Choose the folder in which you want to save the webpage ,
Click save
STEP 8 : Open your browser , choose File -> Open to open file
using browse button
STEP 9 : Once the file has been select press OK to see the HTML
text in the browser
PROGRAM:
<html>
<head>
<title> Frame Tag</title>
</head>
<head>
<frameset cols="40,60">
<frame src="f1.html">
<frame src="f2.html" name="main">
</frameset>
</frameset>
</head>
</html>

f1.html
<html>
<head>
<title>f2.html</title>
</head>
<body>
<h1> Click on any following link</h1>
</body>
</html>
f2.html
<html>
<head>
<title>f1.html</title>
</head>
<body>
<h3>SNR SONS COLLEGE</h3>
<a href="photos.html" target="main">PHOTOS<br></a>
<a href="about.html" target="main">ABOUT SNR<br></a>
</body>
</html>

photos.html
<html>
<head>
<title>gulbarga.html</title>
</head>
<img src="snr.png" height="700" width="800">
</body>
</html>
about snr
<html>
<head>
<title>bidar.html</title>
</head>
<body>
<h1>SNR Sons College is an arts and science institute in
Coimbatore, Tamil Nadu, India.<br>It was founded in 1987 by Seva
ratna Dr.R. Venkatesalu.</h1>
</body>
</html>
OUTPUT:
RESULT:
Thus the webpage to illustrate Frame Tag is created successfully
12. FORM TAG
AIM:
Design the static webpage to illustrate a Form Tag

PROCEDURE:
STEP 1 : Open the text editor (Note pad or Word pad)
STEP 2 : Choose new from editor file menu , to create a blank page
STEP 3 : Type the following text to illustrate Form Tag
STEP 4 : Choose File->Save As
STEP 5 : In the dialog box choose text document for the type
STEP 6: Give the name as FromTag and extension as .htm or .html
STEP 7 : Choose the folder in which you want to save the webpage ,
Click save
STEP 8 : Open your browser , choose File -> Open to open file
using browse button
STEP 9 : Once the file has been select press OK to see the HTML
text in the browser
PROGRAM:
<html>
<head>
<title>Form Tag</title>
</head>
<body>
<center>
<h3 align="center">To illustrate form based tags</h3><hr
color="red">
<form action="">
<p> User ID :<input type="text">
<p> Password :<input type="password">
<p> Confirm Password :<input type="password">
<p> First Name :<input type="text">
<p> Last Name :<input type="text">
<p> Address :<input type="text">
<p> City :<input type="text">
<p> Zip :<input type="text">
<p><b> State :</b>
<select name="States">
<option value="TAMILNADU">TAMILNADU</option>
<option value="ANDRAPRADESH"> ANDRAPRADESH</option>
<option value="KERALA">KERALA</option>
<option value="KARANATAKA">KARANATAKA</option></select>
<p>E-mail :<input type="text">
<p> Phone number :<input type="text"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</center>
</body>
</html>

OUTPUT:

RESULT:
Thus the webpage to illustrate Form Tag is created successfully

You might also like