Ecommerce Lab Manual Final

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 3 : Type the following text to illustrate Font Tag
STEP 6: Give the name as FontTag and extension as .htm or .html
Click save
using browse button
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 3 : Type the following text to illustrate Comment, h1…..h6
And Div Tags
STEP 6: Give the name as CommentHeadingAndDivTags and
extension as .htm or .html
Click save
using browse button
text in the browser
PROGRAM:
<html>
<head>
<title>Comment,h1....h6 And Div Tags</title>
</head>
<body>

<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>
</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 3 : Type the following text to illustrate Text Formatting Tags
STEP 6: Give the name as TextFormattingTags and extension as
.htm or .html
Click save
using browse button
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 3 : Type the following text to illustrate Ordered List Tag
STEP 6: Give the name as OrderedListTag and extension as .htm or
.html
Click save
using browse button
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 3 : Type the following text to illustrate Unordered List Tag
STEP 6: Give the name as UnorderedListTag and extension as .htm
or .html
Click save
using browse button
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 3 : Type the following text to illustrate Nested and Definition
Tag
STEP 6: Give the name as NestedAndDefinitionTag and extension as
.htm or .html
Click save
using browse button
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 3 : Type the following text to illustrate Image Tag
STEP 6: Give the name as ImageTag and extension as .htm or .html
Click save
using browse button
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>
This image is center aligned with the text
align="center" height="100" width="100">
This image is middle aligned with the text
align="middle" height="100" width="100">
This image is bottom aligned with the text
align="bottom" height="100" width="100">
This image is top aligned with the text
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 3 : Type the following text to illustrate Hyper link Tag
STEP 6: Give the name as HyperLinkTag and extension as .htm or
.html
Click save
using browse button
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>

<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>
</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 3 : Type the following text to illustrate Table Tag
STEP 6: Give the name as TableTag and extension as .htm or .html
Click save
using browse button
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 3 : Type the following text to illustrate Frame Tag
STEP 6: Give the name as FrameTag and extension as .htm or .html
Click save
using browse button
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 3 : Type the following text to illustrate Form Tag
STEP 6: Give the name as FromTag and extension as .htm or .html
Click save
using browse button
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

Ecommerce Lab Manual Final

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ecommerce Lab Manual Final

Uploaded by

Copyright:

Available Formats

SRI RAMAKRISHNA COLLEGE OF ARTS AND SCIENCE

(An Autonomous Institution)

You might also like