Lab Manual - E-Comm Lab - BBA112

INDEX
S. No. Name of Practical
1 Introduction to basic HTML elements.
2 To create first web page using HTML Tags.
Design a table to store Student Name, Course Name and Contact

3
Number.
Design a Web page for your Qualification Details in tabular form and
4
also have a link to move to other page. (Table and Linking)
Design a Web page with a heading in blue color text and a paragraph in
5
red color text. (Text Property)
6 Design a Web page with different lists in HTML. (List Property)
7 Design a Web page to create a form in HTML. (Form Property)
Design a Web page to upload a music file on it and play automatically

8
when the webpage loads. (Audio Property)
9 Design a Web page to get and post location. (Geolocation Property)
Design a Web page to draw a diagonal line and circle using Canvas in
10
HTML. (Canvas Property)
Design a Web page to draw “Hello World” using Canvas in HTML.

11
(Canvas Property)
12 Develop a static website of different pages. (Multiple Properties)

Practical No. 1
Aim: - Introduction to basic HTML elements.
Tools: Notepad Editor and Web Browser like Internet Explorer or Mozilla Firefox.
Standard Procedure for Creating and View an HTML document?

  Use a text editor such as Notepad to write the document.
  Save the file as filename.html on a PC. This is called the Document Source.
  Open the file that you have saved in any browser Off-Line.
  Your HTML page should now appear just like any other Web page in browser.
  You may now switch back and forth between the Source and the HTML
  Document
  switch to Notepad with the Document Source
  make changes .
  save the document again.
  switch back to browser .
  click on RELOAD and view the new HTML Document .
 switch to Notepad with the Document Source.
THEORY:
1. What is HTML?
  A series of tags that are integrated into a text document.
  A series of tags that are integrated into a text document.
 These look like: <code>formatted text</code> o <code> begins the formatting tag. o

 </code> ends the formatting tag.
 These tags are then read by a Browser, which translates the tags into the
formatting thatthey represent

2. What are Tags?
  HTML tags are used to mark-up HTML elements.
  HTML tags are surrounded by the two characters < and >.
  The surrounding characters are called angle brackets .
  HTML tags normally come in pairs like <b> and </b>.
  The first tag in a pair is the start tag; the second tag is the end tag.
  The text between the start and end tags is the element content.
 HTML tags are not case sensitive; <b> means the same as <B>.

3. Structure Tags In
HTML
HTML Tag
<HTML></HTML>
These tags begin and end an HTML document.
HEAD Tag
<HEAD></HEAD>
These tags are in the beginning of the document. Important information
is stored in- between these tags including: title, meta-data, styles, and
programming scripts
TITLE Tag
<TITLE></TITLE>
These tags are in-between the HEAD tags and contain the text that appears
in the title of the Web page.
BODY Tag
<BODY></BODY>
As you may have guessed, the BODY tags contain all the text in
the body of the document.
4. Block Level tags
HTML Headings –
Headings are defined with the<h1>
to<h6> tags. Where <h1> -Defines the
largest headings.
<h6> -Defines the smallest headings.
HTML Paragraphs -
Paragraphs are defined with the<p> tag.
HTML Line Breaks -

Use the <br/> tag if you want a line break (a new line)
without starting a new paragraph.
Horizontal Rule
The <hr> element is used for horizontal rules that act as dividers
between sections
5. HTML Text Formatting Tags
Tag Description
<b> Defines bold Text
<big> Defines big text.
<em> Defines emphasized text

<i> Defines Italic text
<small> Defines italic text.
<strong> Defines Strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
CONCLUSIONS:
In this way we can use different basic tags of HTML for creating
webpage displaying information.
Practical No. 2
Aim: - To create first web page using HTML Tags.
HTML Program:
<HTML>
<Title> My Web Page </Title>
<Body BGcolor = “sykblue”>
<H1> This is my first page with Heading H1 </H1>
<p> This is my first paragraph with web pages development </p>
<p> This is my experiment with br tag: <br> My Name is: ABC <br> I am the student of
B.Com (H) VI Sem. <br> My college name is KCC College of Legal and Higher
Education <p>
</body>
</HTML>
OUTPUT:
Practical No. 3
Aim: - Design a table to store Student Name, Course Name and Contact Number .
HTML Program:
<html>
<body bgcolor = "skyblue">
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name of student</th>
<th>Course Name</th>
<th>Mobile Number</th>
</tr>
<tr>
<td>Alice</td>
<td>B.Com (H)</td>
<td>9876543210</td>
</tr>
<tr>
<td>Bob</td>
<td>B.Com (H)</td>
<td>9876543211</td>
</tr>
<tr>
<td>Clair</td>
<td>B.Com (H)</td>
<td>9876543212</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Practical No. 4
Aim: - Design a Web page for your Qualification Details in tabular form and also
have a link to move to other page. (Table and Linking)
HTML Program:
Page1: Main Page
<html>
<h4>Bob's Webpage</h4>
<table border="1">
<a href = "F:\KCC\Lab Manuual - E-Commerce
Lab\Web Pages\page3link1.html"> Click Here
</a> - To See my Image
<br>
<br>
<tr>
<th Colspan = "3">Bob's Qualifications</th>
</tr>
<tr>
<th>Standard</th>
<th>School Name</th>
<th>Grade</th>
</tr>
<tr>
<td>10th</td>
<td>Stephen's Academy</td>
<td>A+</td>
</tr>
<tr>
<td>12th</td>
<td>Stephen's Academy</td>
<td>A+</td>
</tr>
<tr>
<td>B.Com(H)</td>
<td>KCC ILHE (GGSIPU)</td>
<td>A++</td>
</tr>
</table>
</body>
</html>
Page 2: Link Page
<html>
<img src="F:\KCC\Lab Manuual - E-Commerce Lab\Web Pages\Bob.jpg" height = "120"

width = "120">
</body>
</html>
OUTPUT:
Page 1: Main Page
Page2 : Link Page:

Practical No. 5
Aim: - Design a Web page with a heading in blue color text and a paragraph in
red color text. (Text Property)
HTML Program:
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color:
red;} </style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT:
Practical No. 6
Aim: - Design a Web page with different lists in HTML. (List Property)
HTML Program:
<html>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h2>An description HTML list</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
OUTPUT:
Practical No. 7
Aim: - Design a Web page to create a form in HTML. (Form Property)
HTML Program:
<html>
<body bgcolor = “Skyblue”>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br> <label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe"><br><br> <input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page
called "/action_page.php".</p>
</body>
</html>
OUTPUT:
Practical No. 8
Aim: - Design a Web page to upload a music file on it and play automatically when
the webpage loads. (Audio Property)
HTML Program:
<html>
<body bgcolor = "SkyBlue">
<H1> Web Page with Audio File </H1>
<audio controls autoplay>

<source src="F:\KCC\Lab Manuual - E-Commerce Lab\Web
Pages\Audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
OUTPUT:
Practical No. 9
Aim: - Design a Web page to get and post location. (Geolocation Property)
HTML Program:
<html>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
OUTPUT:
Practical No. 10
Aim: - Design a Web page to draw a diagonal line and circle using Canvas in
HTML. (Canvas Property)
HTML Program:
<html>
<canvas id="myCanvas" width="200" height="100" style="border:1px
solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
<br>
<br>
<br>
<br>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
OUTPUT:
Practical No. 11
Aim: - Design a Web page to draw “Hello World” using Canvas in HTML.
(Canvas Property)
HTML Program:
<html>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#d3d3d3;"> Your browser does not support the HTML canvas tag.</canvas>
<script>
var c =
document.getElementById("myCanvas"); var ctx
= c.getContext("2d"); ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
</body>
</html>
OUTPUT:
Practical No. 12
Aim: - Develop a static website of different pages. (Multiple Properties)
HTML Program:
<HTML>
<Title> My Website </Title>
<Body BGcolor = “Teal”>
<H1> This is my Educatonal Website </H1>
<table border="1">
<tr>
<th colspan = "3"> Students Registered With Us:
</th> <tr>
<th>Name of student</th>
<th>Course Name</th>
<th>Mobile Number</th>
</tr>
<tr>
<td>Alice</td>
<td>B.Com (H)</td>
<td>9876543210</td>
</tr>
<p> To Know About Bob, Click on the Name: <P>
<tr>
<td><a href = "F:\KCC\Lab Manuual - E-Commerce Lab\Web
Pages\Program4.html"> Bob </a>
</td>
<td>B.Com (H)</td>
<td>9876543211</td>
</tr>
<tr>
<td>Clair</td>
<td>B.Com (H)</td>
<td>9876543212</td>
</tr>
<br>
</table>
<p> <h1>Menu of Canteen</h1> </p> <a href = "F:\KCC\Lab Manuual - E-Commerce

Lab\Web
Pages\Program6.HTML"> Click Here </a>
<H1> We also provide Music to Relax </H1>
<audio controls autoplay>

<source src="F:\KCC\Lab Manuual - E-Commerce Lab\Web Pages\Audio.mp3"
type="audio/mpeg">
</audio>
<p> To Get Location your Location: </P> <button

onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</HTML>
OUTPUT:

Lab Manual - E-Comm Lab - BBA112

Uploaded by

Copyright:

Available Formats

Lab Manual - E-Comm Lab - BBA112

Uploaded by

Document Information

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

Lab Manual - E-Comm Lab - BBA112

Uploaded by

Copyright:

Available Formats

INDEX

S. No. Name of Practical

1 Introduction to basic HTML elements.

2 To create first web page using HTML Tags.

Design a table to store Student Name, Course Name and Contact

6 Design a Web page with different lists in HTML. (List Property)

7 Design a Web page to create a form in HTML. (Form Property)

Design a Web page to upload a music file on it and play automatically

9 Design a Web page to get and post location. (Geolocation Property)

Design a Web page to draw “Hello World” using Canvas in HTML.

12 Develop a static website of different pages. (Multiple Properties)

Aim: - Introduction to basic HTML elements.

Standard Procedure for Creating and View an HTML document?

These tags begin and end an HTML document.

HTML Line Breaks -

5. HTML Text Formatting Tags

<b> Defines bold Text

<big> Defines big text.

<em> Defines emphasized text

<small> Defines italic text.

<strong> Defines Strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

Aim: - To create first web page using HTML Tags.

<Title> My Web Page </Title>

<Body BGcolor = “sykblue”>

<H1> This is my first page with Heading H1 </H1>

<p> This is my first paragraph with web pages development </p>

Page1: Main Page

<a href = "F:\KCC\Lab Manuual - E-Commerce

Lab\Web Pages\page3link1.html"> Click Here

</a> - To See my Image

Page 2: Link Page

<img src="F:\KCC\Lab Manuual - E-Commerce Lab\Web Pages\Bob.jpg" height = "120"

Page 1: Main Page

Page2 : Link Page:

<h2>An unordered HTML list</h2>

<h2>An ordered HTML list</h2>

<h2>An description HTML list</h2>

Aim: - Design a Web page to create a form in HTML. (Form Property)

<H1> Web Page with Audio File </H1>

<audio controls autoplay>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<canvas id="myCanvas" width="200" height="100" style="border:1px

<body bgcolor = "SkyBlue">

<canvas id="myCanvas" width="200" height="100" style="border:1px solid

document.getElementById("myCanvas"); var ctx

= c.getContext("2d"); ctx.font = "30px Arial";

ctx.strokeText("Hello World", 10, 50);

Aim: - Develop a static website of different pages. (Multiple Properties)

<p> <h1>Menu of Canteen</h1> </p> <a href = "F:\KCC\Lab Manuual - E-Commerce

Pages\Program6.HTML"> Click Here </a>

<H1> We also provide Music to Relax </H1>

<audio controls autoplay>

<p> To Get Location your Location: </P> <button

You might also like