SATYUG DARSHAN INSTITUTE OF

ENGINEERING AND
TECHNOLOGY

MIS LAB

LAB MANUAL
BBA II 3RD Yr

Name :………………………………………………………

Roll No :…………………….. Branch: ………………

Group :……………………….. Session: 20….. – 20……

SCHOOL OF COMPUTER SCIENCE

 MIS Lab
INDEX
S.NO TOPIC TOPIC NAME SIGNATURE

1 STUDY INTRODUCTION TO WEB TECHNOLOGY

1. Experiment 1 Create a webpage with a text displayed. HTML

2. Experiment 2 To add color and image in background of webpage. HTML

3. Practice Sheet 1 Create a webpage with text “hello” and text should have yellow colour HTML
and background of the webpage should be red colour

4. Practice Sheet 2 Create a webpage that should contain any picture and the content of HTML
the webpage is the caption related to that picture.

5. Experiment 3 To manage text in a webpage. HTML

6. Practice Sheet 3 Create a webpage containing your name with 3 different fonts, 3 HTML
different sizes and 3 different colours.

7. Practice Sheet 4 Create a web page with HTML

1. WT LAB (underlined, bold and center).

2. Experiment (italic and underlined).
3. Font 1(Times New Roman, red)
4. Font 2(Arial , blue)
5. End (strike off)
8. Experiment 4 To manage IMAGE in a webpage HTML

9. Practice Sheet 5 Insert four different images with different sizes in a single webpage. HTML

10. Experiment 5 To manage movement of objects in a webpage. HTML

11. Practice Sheet 6 Create movement of text WEB TECHNOLOGY lab HTML

Scroll, speed=2, starting from left.

1. Slide, speed=5, up.

2. Alternative, color=yellow.
3. Move image.
12. Experiment 6 To create linking in webpages. HTML

13. Practice Sheet 7 Create a hyper reference of all the experiments. HTML

14. Experiment 7 To manage headings in a webpage. HTML

 WEB TECHNOLOGY
Introduction about Web Technology:

Web technology is the establishment and use of mechanisms that make it possible for
different computers to communicate and share resources. Web technologies are
infrastructural building blocks of any effective computer network: Local Area Network (LAN),
Metropolitan Area Network (MAN) or a Wide Area Network (WAN), such as the Internet.
Communication on a computer could never be as effective as they are without the plethora
of web technologies in existence.
Some examples of web technologies include:

1) Mark-up languages including HTML, CSS, XML, CGI and HTTP;

2) Programming Languages and Technologies which help in creating applications for the
web; some of the languages are Perl, C#, Java and Visual Basic .Net;

3) Web servers and server technologies which facilitate request handling on a network
where different users have to share the same resources and communicate with one
another;

4) Databases, which are crucial for data and information storage on a computer network; and

5) Business applications customized for specific execution of tasks on a network.

In short, web technology provides a platform for effective communication among different
users and devices on a computer network.

1 Markup Languages:
Markup is used to in text and word processing documents to describe how a
document should look when displayed or printed. The Internet uses markup to define how
Web pages should look when displayed in a browser or to define the data contained within
a Web document.
There are many different types of markup languages. For example, Rich Text Formatting
(RTF) is a markup language that word processors use. This section describes the most
common markup languages that are used on the Internet.

1.1 HTML:
HTML is the standard markup language for creating Web pages.

 HTML stands for Hyper Text Markup Language

 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
 Browsers do not display the HTML tags, but use them to render the content of the
page
1.2 CSS:
CSS stands for cascading style sheets. Cascading style sheets provide the ability to
change the appearance of text (such as fonts, colors, spacing) on Web pages. Using CSS,
you can also position elements on the page, make certain elements hidden, or change
the appearance of the browser, such as changing the color of scroll bars in Microsoft
Internet Explorer.
Cascading style sheets can be used similar to FrontPage Themes. For example, you can
apply a cascading style sheet across all the pages in a Web site to give the site a uniform
look and feel. Then all you need to do is to change the CSS style formatting in a single file
to change the look and feel of an entire Web site.

 CSS stands for Cascading Style Sheets

 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files

1.3 XML

 XML stands for extensible Markup Language

 XML is a markup language much like HTML
 XML was designed to store and transport data
 XML was designed to be self-descriptive
 XML is a W3C Recommendation

2. Programming languages and technology:

2.1 Java Script:

JavaScript ("JS" for short) is a full-fledged dynamic programming language that,

when applied to an HTML document, can provide dynamic interactivity on websites. It
was invented by Brendan Eich, Co-founder of the Mozilla project, the Mozilla
Foundation, and the Mozilla Corporation.
JavaScript is incredibly versatile. You can start small, with carousels, image galleries,
fluctuating layouts, and responses to button clicks. With more experience you'll be able
to create games, animated 2D and 3D graphics, comprehensive database-driven apps,
and much more

2.2 PHP:

PHP is a server-side scripting language designed primarily for web development but
also used as a general-purpose programming language. Originally created by Rasmus
Lerdorf in 1994, the PHP reference implementation is now produced by The PHP
Development Team. PHP originally stood for Personal Home Page, but it now stands for
the recursive acronym PHP: Hypertext Preprocessor.
PHP code may be embedded into HTML or HTML5 code, or it can be used in combination
with various web template systems, web content management systems and web
frameworks. PHP code is usually processed by a PHP interpreter implemented as
a module in the web server or as a Common Gateway Interface (CGI) executable. The
web server combines the results of the interpreted and executed PHP code, which may
be any type of data, including images, with the generated web page. PHP code may also
be executed with a command-line interface (CLI) and can be used to
implement standalone graphical applications
 EXPERIMENT 1
AIM: To create a webpage with a text displayed.

OBJECTIVE: To get familiar with basic creation of a web page.

TAGS USED:

TAG NAME CODE EXAMPLE

<html>
<head>

hypertext markup <title>Title of your web page</title>

<html>
language </head>
<body>HTML web page contents
</body>
</html>
heading of HTML <head>Contains elements describing the
<head>
document document</head>
<title>document title <title>Title of your HTML page</title>
body of HTML
<body> <body>The content of your HTML page</body>
document

HTML CODE:

<html>

<head>

<title>AISHWARYA 18020304004</title>

</head>

<body>HELLO WORLD

</body>

</html>
OUTPUT :
 EXPERIMENT 2
BODY ATTRIBUTES

AIM: To add color and image in background of webpage.

OBJECTIVE: To study attributes of body tag

TAGS USED:

TAG NAME CODE EXAMPLE

<body>The content of your HTML
<body> body of HTML document
page</body>
<body Background image of <body
background=value> document background="bgimage.jpg">
<body Background colour of <body
Bgcolor=value> document Bgcolor=”red”/”FF0000”>
<body <body
Text colour
text=value> text= red”/”FF0000”>

HTML CODE:

<html>

<head>

<title>AISHWARYA 18020304004</title>

</head>

<body bgcolor="red" background="nature.jpg" text="yellow">HELLO WORLD

</body>

</html>
OUTPUT :
 PRACTICE SHEET 1
AIM: Create a webpage with text “hello” and text should have yellow colour and background
of the webpage should be red colour

TAGS USED:

TAG NAME CODE EXAMPLE

<html>
<head>

hypertext markup <title>Title of your web page</title>

<html>
language </head>
<body>HTML web page contents
</body>
</html>
heading of HTML <head>Contains elements describing the
<head>
document document</head>
<title> document title <title>Title of your HTML page</title>
body of HTML
<body> <body>The content of your HTML page</body>
document

HTML CODE :

<HTML>

<head>

<title>AISHWARYA 18020304004</title>

</head>

<body bgcolor="red"text ="yellow">HELLO</body>

</HTML>
OUTPUT:
 PRACTICE SHEET 2
AIM : Create a webpage that should contain any picture and the content of the webpage is
the caption related to that picture.

TAGS USED :

TAG NAME CODE EXAMPLE

<body>The content of your HTML
<body> body of HTML document
page</body>
<body Background image of <body
background=value> document background="bgimage.jpg">
<body Background colour of <body
Bgcolor=value> document Bgcolor=”red”/”FF0000”>
<body <body
Text colour
text=value> text= red”/”FF0000”>

HTML CODE :

<html>

<head>

<title>AISHWARYA 18020304004</title>

</head>

<body background="nature.jpg">Mountains are higher to climb

</body>

</html>
OUTPUT :
 EXPERIMENT 3
FONT ATTRIBUTES

AIM: To manage text in a webpage.

OBJECTIVE: To study attributes of FONT tag

TAGS USED:

TAG NAME CODE EXAMPLE

<font> Font <font face="Times New Roman">Example</font>
<font> Font <font face="Times New Roman" size="4">Example</font>
<font face="Times New Roman" size="+3"
<font> Font
color="#ff0000">Example</font>
<i> Italic <i>Example</i>
small
<small> <small>Example</small>
(text)
deleted
<strike> <strike>Example</strike>
text
strong
<strong> <strong>Example</strong>
emphasis
<u> Underline <u>Example</u>
<b> Bold <b>Example</b>
<big> big (text) <big>Example</big>
<center> Center <center>This will center your contents</center>

HTML CODE:
<html>
<head>
<title>AISHWARYA 18020304004</title>
</head>
<body bgcolor="red" >
<b>
<font face="Times New Roman" size="+3" color="yellow">Example1 in times new roman
and bold</font></b>
<br>
<u>
<font face="Arial" size="+6" color="blue">Example2 in Arial and underline</font>
</u>
<br>
<i><font face="Verdana" size="+4" color="cyan">Example3 in Verdana and italics</font>
</i>
<br>
<small>Example4 for Small</small>
<br>
<strike>Example5 for Strike</strike>
<br>
<strong>Example6 for strong</strong>
<br>
<big>Example7 in Big</big>
<br>
</body>
</html>

OUTPUT :
 PRACTICE SHEET 3

AIM : Create a webpage containing your name with 3 different fonts, 3 different sizes and 3
different colours.

TAGS USED :
TAG NAME CODE EXAMPLE
<font> Font <font face="Times New Roman">Example</font>
<font> Font <font face="Times New Roman" size="4">Example</font>
<font face="Times New Roman" size="+3"
<font> Font
color="#ff0000">Example</font>
<i> Italic <i>Example</i>
small
<small> <small>Example</small>
(text)
deleted
<strike> <strike>Example</strike>
text
strong
<strong> <strong>Example</strong>
emphasis
<u> Underline <u>Example</u>
<b> Bold <b>Example</b>
<big> big (text) <big>Example</big>
<center> Center <center>This will center your contents</center>

HTML CODE :
<html>
<head>
<title>AISHWARYA 18020304004</title>
</head>
<body>
<font face="chiller" size="30" color="orange">Aishwarya </font><br>
<font face="monotype corsiva" size="40" color="black">Aishwarya </font><br>
<font face="impact" size="50" color="green">Aishwarya </font><br>
</html>
OUTPUT :
 PRACTICE SHEET 4
AIM : Create a web page
with
6. WT LAB (underlined, bold and centre).
7. Experiment (italic and underlined).
8. Font 1(Times New Roman, red)
9. Font 2(Arial,blue)
10. End (strike off)
TAGS USED :
TAG NAME CODE EXAMPLE
<font> font <font face="Times New Roman">Example</font>
<font> font <font face="Times New Roman" size="4">Example</font>
<font face="Times New Roman" size="+3"
<font> font
color="#ff0000">Example</font>
<i> italic <i>Example</i>
small
<small> <small>Example</small>
(text)
deleted
<strike> <strike>Example</strike>
text
strong
<strong> <strong>Example</strong>
emphasis
<u> underline <u>Example</u>
<b> bold <b>Example</b>
<big> big (text) <big>Example</big>
<center> center <center>This will center your contents</center>

HTML CODE :
<html>
<head>
<title>AISHWARYA 18020304004</title>
</head>
<body>
<center>
<i><b><u>
<font size="20">WEB TECHNOLOGY LAB</font>
</i>
</b>
</u>
</center>
<br>
<i>
<b>
<u>
<font size="17">EXPERIMENT 4</font>
</i>
</b>
</u>
<br>
<font face="times new roman" size="15" color="red">Pandey</font>
<br>
<font face="Arial" size="15" color="blue">Aishwarya</font>
<br>
<strike><font size="15">END</font></strike>
</body>
</html>

OUTPUT :
 EXPERIMENT 4
IMAGE AND ATTRIBUTES

AIM: To manage IMAGE in a webpage.

OBJECTIVE: To study attributes of IMAGE tag

TAGS USED:

TAG NAME CODE EXAMPLE

<img src="Earth.gif" width="41" height="41" border="0" alt="text
<img> image
describing the image" />

HTML CODE:

<html>
<head>
<title>AISHWARYA 18020304004</title>
</head>
<body bgcolor="yellow" >
<img src="nature.jpg" width="41" height="41" border="0" alt="nothing to display" >
</img>
<img src="D:\Images\My Images\132456 copy.jpg" width="900" height="520" border="3"
alt="Aishwarya Pandey" >
</img>
</body>
</html>
OUTPUT :
 PRACTICE SHEET 5
AIM : Insert four different images with different sizes in a single webpage.

TAGS USED:

TAG NAME CODE EXAMPLE

<img src="Earth.gif" width="41" height="41" border="0" alt="text
<img> image
describing the image" />

HTML CODE :
<html>
<head>
<title>AISHWARYA 18020304004</title>
</head>
<body>
<img src="D:\Images\My Images\PSX_20150405_215414.jpg" height="300" width="500"
border="2">
</img>
<img src="D:\Aishwarya \new.jpg" height="250" width="400" border="1.5">
</img>
<img src="D:\Aishwarya \gggg copy.jpg" height="220" width="420" border="2.1">
</img>
<img src="D:\Aishwarya \treeee.jpg" height="250" width="450" border="1.6">
</img>
</body>
</html>
OUTPUT :
 EXPERIMENT 5
MARQUEE

AIM: To manage movement of objects in a webpage.

OBJECTIVE: To study marquee tag and its attributes

TAGS USED:

<marquee> <marquee bgcolor="#cccccc" loop="-1"

scrolling
(Internet scrollamount="2" width="100%">Example
text
Explorer) Marquee</marquee>
<marquee Continous
<marquee behavior="scroll">
behavior="scroll"> scroll
Scroll in
<marquee
one <marquee behavior="slide">
behavior="slide"> direction
<marquee Back and
<marquee behavior="alternate">
behavior="alternate"> forth
Scroll in
<marquee
upwards <marquee behavior="scroll" direction="up">
direction="up"> direction
<marquee Changing <marquee behavior="scroll" direction="left" scroll
scrollamount="1"> speed amount="1">

HTML CODE:

<html>
<head>
<title>AISHWARYA 18020304004</title>
</head>
<body>
<marquee bgcolor="red" loop="-1" scrollamount="2" width="100%">Example Marquee in
red color</marquee>
<br>
<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee><br>
<marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee><br>
<marquee behavior="alternate">Your bouncing text goes here</marquee><br>
<marquee behavior="scroll" direction="up">Your upward scrolling text goes
here</marquee><br>
<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll
speed</marquee><br>
<marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll
speed</marquee><br>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll
speed</marquee><br>
<marquee behavior="scroll" direction="left"><img src="green.jpg" width="100"
height="100" alt="smile" /></marquee><br>
</body>
</html>

OUTPUT :
 PRACTICE SHEET 6
AIM: Create movement of text WEB TECHNOLOGY lab
4. Scroll, speed=2, starting from left.
5. Slide, speed=5, up.
6. Alternative, color=yellow.
7. Move image.
TAGS USED:
<marquee> <marquee bgcolor="#cccccc" loop="-1"
scrolling
(Internet scrollamount="2" width="100%">Example
text
Explorer) Marquee</marquee>
<marquee Continous
<marquee behavior="scroll">
behavior="scroll"> scroll
Scroll in
<marquee
one <marquee behavior="slide">
behavior="slide"> direction
<marquee Back and
<marquee behavior="alternate">
behavior="alternate"> forth
Scroll in
<marquee
upwards <marquee behavior="scroll" direction="up">
direction="up"> direction
<marquee Changing <marquee behavior="scroll" direction="left"
scrollamount="1"> speed scrollamount="1">

HTML CODE :
<html>
<head>
<title>AISHWARYA 18020304004</title>
</head>
<body>
<marquee behaviour="scroll" direction="left" scrollamount="2">Web Technology Lab
</marquee>
<marquee behavior="slide" scrollamount="5" direction="top">Web Technology Lab
</marquee>
<marquee behavior="alternate" bgcolor="yellow">Web Technology Lab
</marquee>
<marquee behavior="scroll" direction="up"><img src="green.jpg">
</img>
</marquee>
</body>
</html>
OUTPUT :
 EXPERIMENT 6
HYPERLINKING OF DOCUMENTS

AIM: To create linking in webpages.

OBJECTIVE: To study linking through various webpages.

TAGS USED:

TAG NAME CODE EXAMPLE

<a href="http://www.domain.com/">
<a - Anchor
Visit Our Site</a>

HTML CODE:

<html>
<head>
<title>AISHWARYA 18020304004</title>
</head>
<body>
<a href=”1.htm”>go to page 1</a><br>
<a href=”2.htm”>go to page 2</a><br>
<a href=”3.htm”>go to page 3</a><br>
<a href=”4.htm”>go to page 4</a><br>
<a href=”5.htm”>go to page 5</a><br>
</body>
</html>
OUTPUT :
 PRACTICE SHEET 7

AIM : Create a hyper reference of all the experiments.

TAGS USED:

TAG NAME CODE EXAMPLE

<a href="http://www.domain.com/">
<a - Anchor
Visit Our Site</a>

HTML CODE :
<html>
<head>
<title>AISHWARYA 18020304004</title>
</head>
<body>
<a href="1.htm">click here for experiment 1
</a><br>
<a href="2.htm">click here for experiment 2
</a><br>
<a href="3.htm">click here for experiment 3
</a><br>
<a href="4.htm">click here for experiment 4
</a><br>
<a href="5.htm">click here for experiment 5
</a><br>
<a href="6.htm">click here for experiment 6
</a><br>
</body>
</html>
OUTPUT :
 EXPERIMENT 7
HEADING

AIM: To manage headings in a webpage.

OBJECTIVE: To study different size of text for different heading tag

TAGS USED:

Tag Name Code Example Browser View

<h1> heading 1 <h1>Heading 1 Example</h1>

<h2> heading 2 <h2>Heading 2 Example</h2>
<h3> heading 3 <h3>Heading 3 Example</h3>
<h4> heading 4 <h4>Heading 4 Example</h4>
<h5> heading 5 <h5>Heading 5 Example</h5>
<h6> heading 6 <h6>Heading 6 Example</h6>

HTML CODE:

<html>
<head>
<title>AISHWARYA 18020304004</title>
</head>
<body>
<h1>Heading 1 Example</h1>
<h2>Heading 2 Example</h2>
<h3>Heading 3 Example</h3>
<h4>Heading 4 Example</h4>
<h5>Heading 5 Example</h5>
<h6>Heading 6 Example</h6>
</body>
</html>
OUTPUT :
 PRACTICE SHEET 8
AIM : Create a web page having 6 different headings in the center of the page.

TAGS USED :
Tag Name Code Example Browser View

<h1> heading 1 <h1>Heading 1 Example</h1>

<h2> heading 2 <h2>Heading 2 Example</h2>
<h3> heading 3 <h3>Heading 3 Example</h3>
<h4> heading 4 <h4>Heading 4 Example</h4>
<h5> heading 5 <h5>Heading 5 Example</h5>
<h6> heading 6 <h6>Heading 6 Example</h6>

HTML CODE :
<html>
<head>
<title>AISHWARYA 18020304004</title>
</head>
<body>
<center><h1>Heading 1 </h1></center>
<center><h2>Heading 2 </h2></center>
<center><h3>Heading 3 </h3></center>
<center><h4>Heading 4 </h4></center>
<center><h5>Heading 5 </h5></center>
<center><h6>Heading 6 </h6></center>
</body>
</html>
OUTPUT :