Scribd
Upload
40 views

Lab Manual - E-Comm Lab - BBA112

This document provides details about 12 practicals related to HTML. It includes the aim, tools required and the code for each practical on topics like basic HTML elements, creating web pages, tables, links, text formatting, lists, forms, audio, and geolocation.

Uploaded by

Simaant Jena
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
40 views

Lab Manual - E-Comm Lab - BBA112

This document provides details about 12 practicals related to HTML. It includes the aim, tools required and the code for each practical on topics like basic HTML elements, creating web pages, tables, links, text formatting, lists, forms, audio, and geolocation.

Uploaded by

Simaant Jena
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/ 28

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.

Tools: Notepad Editor and Web Browser like Internet Explorer or Mozilla Firefox.

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 .

Tools: Notepad Editor and Web Browser like Internet Explorer or Mozilla Firefox.

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)

Tools: Notepad Editor and Web Browser like Internet Explorer or Mozilla Firefox.

HTML Program:

Page1: Main Page

<html>
<body bgcolor = "skyblue">
<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>
<body bgcolor = "skyblue">

<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)

Tools: Notepad Editor and Web Browser like Internet Explorer or Mozilla Firefox.

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)

Tools: Notepad Editor and Web Browser like Internet Explorer or Mozilla Firefox.

HTML Program:

<html>
<body bgcolor = "skyblue">

<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)

Tools: Notepad Editor and Web Browser like Internet Explorer or Mozilla Firefox.

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)

Tools: Notepad Editor and Web Browser like Internet Explorer or Mozilla Firefox.

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)

Tools: Notepad Editor and Web Browser like Internet Explorer or Mozilla Firefox.

HTML Program:

<html>
<body bgcolor = "SkyBlue">

<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)

Tools: Notepad Editor and Web Browser like Internet Explorer or Mozilla Firefox.

HTML Program:

<html>
<body bgcolor = "SkyBlue">

<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)

Tools: Notepad Editor and Web Browser like Internet Explorer or Mozilla Firefox.

HTML Program:

<html>

<body bgcolor = "SkyBlue">

<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)

Tools: Notepad Editor and Web Browser like Internet Explorer or Mozilla Firefox.

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:

You might also like