0% found this document useful (0 votes)

101 views

Web Technology Lab File

vmddhlfjdfmdsnf.sdfds.,nfdnfkednfnfefksdlfnked

Uploaded by

Vaibhav Kumar

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

101 views

Web Technology Lab File

vmddhlfjdfmdsnf.sdfds.,nfdnfkednfnfefksdlfnked

Uploaded by

Vaibhav Kumar

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 106

Practical File on

Web Technology Lab

Bachelor of Computer Applications (BCA-254)

GuruGobindSinghIndraprasthaUniversity, Delhi

Submitted To: Submitted By:

Ms. Leena Gupta Vaibhav kumar
Ms. Kavita Srivastava 01021102019
Batch: BCA-IV(E)
Institute of Information Technology & Management,
Approved By AICTE
Affiliated to Guru Gobind Singh Indraprastha University, Dwarka, New Delhi
New Delhi – 1100 58
Batch (2019-2022)
S.No. Application Problem Statement No. Of Actu
Areas/Functional Hours al
ity Allotte Date
/Concept on d
which practical is
based
HTML & JAVASCRIPT
• • Introducti • Latest Web Browser with their 4
on To versions & features
Web • Types of Search engine& its
browser Functionality
• Demostrat • Create a web page which
ion of display a message “This is my
using First web page “, using different
search level of headings.
engine • Write an HTML code to display
• HTML the different paragraphs with
Tags: different alignment.
1)Heading • Write an HTML code to display
style your Syllabus. Use at least
2)Containe three Container tags and empty
r& tags.
empty tags
3)Alignme
nt option

• • HTML • Write an HTML code to print 4

Tags the quadratic equation
1)Mathem asfollows:
atical In mathematics, a quadratic equation
equation is a polynomial HYPERLINK
2)Use of "http://en.wikipedia.org/wiki/Polynomi
block, al" HYPERLINK
pre,em "http://en.wikipedia.org/wiki/Polynomi
tag,bg al" HYPERLINK
color,text. "http://en.wikipedia.org/wiki/Polynomi
3)Link Tag al" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomi
al" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomi
al" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomi
al" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomi
al" HYPERLINK
"http://en.wikipedia.org/wiki/Equation"
HYPERLINK
"http://en.wikipedia.org/wiki/Polynomi
al" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomi
al" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomi
al" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomi
al" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomi
al" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomi
al" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomi
al"equation of the second degree. The
general form is
ax2+bx+c = 0
where a ≠ 0. (For if a = 0, the
equation becomes a linear
equation

• Create a web page describing

you. Use <block quote> to
display address, for sub
headings <pre> tag and use
<em> tag wherever you are
using numbers. Use different
background color & different
color showing text.
• Develop an HTML document
which displays your name as
heading and displays the name
of any four of your friends in a
list. Each friend’s name should
be a hyperlink. When you click
a friend’s name, it must open
another HTML document which
tells about your friend.
• • HTML • Write HTML code to insert three 4
Tags: images that are aligned left, center
1)Images and right. Also change the
2)List background color as blue of the web
2.1)Unorde page. Give a proper heading to the
red List web page.
2.2)Ordere • Write code to display the name of
d List courses taught in the institute under
2.3)Definit the list headings Morning and
ion List Evening Courses respectively using
different type of unordered list.
• Design an HTML website for
displaying different courses offered
by the university using ordered lists.
• Write a code for the following list(
Definition List)
Coffee
- black hot drink
Milk
- white cold drink

• • HTML • Create a table containing S.No, 4

Tags: Name, course and marks of 10
1)Tables students.
• Create a Table to display the
following table with items in the
Décor using ordered lists and
Hyperlinks. On the click of the
Décor items, suitable pages with
their images and information
should be displayed.
HOUS DECO ROO PRICE/
E R MS SQ FT.
TYPE
S
Villas 1.Dini 4BHK Rs.5000
ng
Room
2.
Master
Bed
Room
3.
Kid’s
Room
4.Kitc
hen
Mansi 1.Dini 5BHK Rs 7000
ons ng
Room
2.
Master
Bed
Room
3.
Kid’s
Room
4.Kitc
hen
Flats 1.Singl 1BHK Rs500
e
Bedroo
m
2.Dou 2BHK Rs.700
ble
Bedroo
m
• • HTML Tags: • Create an application form for 4
1)Form admission to undergraduate
2)Frames students.
• Create a two-column frames where
left-frame will contain the heading
as “CONTENTS” & rightframe
contain the message “Select any one
of the items shown on the left &
you will find five names”
.Leftframe contain three items
animals, Fruits & Birds with Bullet
& the output should look like:

• • Javascript • Write a JavaScript to accept your name 4

1)Control and display it.
Structures, • Write a JavaScript code to accept 10
Functions, numbers and check how many are +ive,
-ive and zero.
Arrays
• Write a Program in JavaScript to find
the factorial of a number between 1 to
10
Output should be like as given below: -
Factorial of 1 is: 1
Factorial of 2 is: 2
:::::::::::::::::::::::::
::::::::::::::::::::::::::
::::::::::::::::::::::::::
factorial of 10 is :
• Write a Program in JavaScript to find
reverse of a digit.

• • JavaScript • Write a JavaScript code block, which 4

• Objects greets a user with a message Welcome’.
When a user leaves this page, the ‘Good-
bye’ alert dialog box is displayed
• Write a script that displays the various
Math& String Functions.
• Write a script that reads a date from an
HTML form and creates a Date object in
which to store that date. Then, use the
various method of Date object to display
the date in several formats.

DHTML,CSS& XML
• • DHTML • Write a CSS rule that make all 4
1)CSS text size as 18pt and color as red,
2)CSS with background color blue. Give the
Style heading style font size as 24pt,
elements and font family as sans-serif, color
class black and text align as Centre.
and • Write a CSS rule for EM, H1 and
inheritance P elements. Create Class
3)Linking attributes that applies a style class
External and inheritance
Style sheet • Write an external linking style
sheet to Create a website which
show the different courses in your
institute
• • DHTML • Write a program to show the 4
1)CSS-Positioning conflicting style
elements. • Create a site of Solar System and
2)CSS Elements insert an image of planets and
Dimension. position the style as absolute and give
a proper margins as top ,left, right and
bottom
• Write a CSS rule that set the three box
dimension and align the text. The first
box should be 20%, second division
should be 80% and centre aligns. And
in the third division give a proper
height and width.
• • DHTML • Create a web page, which applies the 4
1)Filters & invert filter to an image, glow filter to
Transition a hyperlink.
• Create a web page, which attaches
two filters to the object. The first
causes the image to blur over a
specified number of pixels. The
second filter flips the image
vertically.
• Using Alpha filter change the content
by changing the Opacity property.
• Using transition's apply and play
method freezes the appearance of an
object and then invokes the transition.
”.

11 • DHTML • Create a web page, which prompts a 4

1)Event Model user to enter a colour, then sets the
background Colour to that value.
• Insert an image to a web page and
display its co-ordinates on a mouse
move.
• Create a web page, which shows
Rollover effects.

• • Introductio • Working with Dreamweaver 2

12 n to • Steps to Create a Website &
dreamwea Publishing it on Internet.
ver
• Introductio
n to
Website
Creation &
Publishing
Concepts

• • Create a XML food menu as 4

14 • XML- BREAK FAST MENU
DTD FOOD PRICE Calories
ITEM
French Rs. 35 600
Toast
Home Rs. 50 900
Style
Breakfast
Grill Rs. 40 650
sandwich
And in this insert a style sheets as
menu.css. Each element tag in the
CSS should have at least four styles.
This style sheet should have a user-
defined format in a browser. Should
have root tags and child tags, which
take the presentation style from the
style sheet.
• Write an XML code, which uses CSS
styles and DTD as external DTD.
• Display the mathematical Expression
using MathML markup
• Display the algebric Expression using
MathML markup

Ms.Geetali Benarjee Prepared By:

Mrs Ruchi Kawatra
(Program Director) Ms. Manu Anand
(Assitant Professor)
Latest web browser with their versions and features
Web browser:-
A web browser is a kind of software that is used to access the information on
the internet. In our day to day life, we use web browser on many occasion to
access the information on the internet. Chrome, Firefox, opera, safari etc. are
some of the very famous web browser used by millions of people around the
world.

• Mozilla Firefox
It is known as the swiss army knife of the internet. It runs on windows,
android and apple devices as well. It protects the user’s privacy on the
internet to some extent. It is free and open source web browser. The recent
version of Firefox on windows is Firefox 86. Some of the features pushed by
Firefox are:- picture in picture mode, protection from cross site cookies,
malicious super cookies and better bookmarks.

• Google Chrome
As the name suggests, Chrome browser is developed by Google. It is a very
fast browser. Most of the people around the world love this browser due to
its lightening fast speed. The current version of Chrome browser is 89 on
windows platform. It can be used on macOs, iOS, android and Microsoft
devices. Chrome uses AI to improve the users experience. Chrome has just
rolled out browser sandbox method to enhance the security.
• Microsoft Edge
It is developed by Microsoft. It is the default browser of the windows
operating system. It is rebuilt with chromium open source project. It is faster
than its previous versions. Edge’s current version is 89 for the windows
platform. Microsoft defender smartScreen protects the user from phishing
attacks. It disables the trackers to protect the privacy of the user. User can
access the pdf much quicker.
• Opera
Opera is another browser based on chromium project which means it is a fast
browser. It is available on windows, android, mac OS and iOS. The current
version of opera for windows platform is opera 74. Some of its features
include in built VPN and adblocker which means this browser enhances the
privacy of the user. It has crypto wallet feature, and we can use this feature
to pay in cryptocurrency as well. Apart from this opera has some cool
extensions as well.
Types of search engine and its functionality
Search engine:-A search engine is a software that is used to search the world wide
web. Google, Yahoo, Yandex, Bing, DuckDuckGo etc. are some of the very
famous search engine nowadays. However, there are categories of the web browser
which most of the people don’t know.
• Crawler Based Search Engine
A crawler based search engine uses automated programs to access the web
pages. The programs that are used by these search engines are known as
spiders, bots, crawlers etc. The next process is a bot downloads the page,
analyses it and then show it to the web page. Example of crawlers based
search engines are google and ask jeeves.

• Directories based search Engine

Directories search engines uses human instead of automated programs. They
place websites within specific categories in the directories database.
Example of directories based search engines are yahoo directory and open
directory.
• Hybrid search engines
Hybrid search engine uses a combination of both directories based and
crawler based search engines. Examples of hybrid search engines are yahoo
and google.

• Meta Search engines

They take results from all the search engines, combine them and then present
it to the user. Example of meta search engines are dogpile and metacrawler.

Practical – 1
Aim :-
Create a web page which display a message “This is my First web page “, using
different level of headings.
Source Code :-
<html>
<head>
<title>
My First Web Page
</title>
</head>
<body>
<h1 style="color: orange"> This is my first web page using heading 1. </h1>
<h2 style="color: blue"> This is my first web page using heading 2. </h2>
<h3 style="color: green"> This is my first web page using heading 3. </h3>
<h4 style="color: aqua"> This is my first web page using heading 4. </h4>
<h5 style="color: violet"> This is my first web page using heading 5. </h5>
<h6 style="color: brown"> This is my first web page using heading 6. </h6>
</body>
</html>
Output :-

Practical – 2
Aim :-
Write an HTML code to display the different paragraphs with different alignment.
Source Code :-
<!DOCTYPE html>
<html>
<head>
<title>
My second practical.
</title>
</head>
<body>
<hr>
<p style="text-align: left"> This paragraph is aligned to the <b> left. </b></p>
<hr>
<p style="text-align: center"> This paragraph is aligned to the <i> centre. </i></p>
<hr>
<p style="text-align: right"> This paragraph is aligned to the <big> right.
</big></p>
<hr>
</body>
</html>
Output :-
Practical – 3
Aim :-
Write an HTML code to display your Syllabus. Use at least three Container tags
and empty tags.
Source Code :-
<html>
<head>
<title>WT Syllabus of BCA</title>
</head>
<body>
<div style="margin: 50px;padding:20px;background-color:#EBEDEF;">
<center><img src="syllabus.jpg"/></center>
<p style="font-size: 25px; font-weight: bold;">UNIT – I</p>
<p style="font-size: 20px;text-align:justify;line-height: 20px;">History of the
Internet and World Wide Web, Search Engines, News-group, E-mail and its
Protocols, Web Portal, Browsers and their versions, Its functions, URLs, web sites,
Domain names, Portals.
Static Web Development: HTML - Introduction to HTML, HTML Document
structure tags, HTML comments, Text formatting, inserting special characters,
anchor tag, adding images and Sound, lists types of lists, tables, frames and
floating frames, Developing Forms, Image maps.</p>
<p align="right">[No. of Hrs: 11]</p>
<hr/>

<p style="font-size: 25px; font-weight: bold;">UNIT – II</p>

<p style="font-size: 20px;text-align:justify;line-height: 20px;">Introduction to
Java Script: Data Types, Control Statements, operators, Built in and User Defined
Functions, Objects in Java Script, Handling Events.
Cascading Style Sheet: Types of Style Sheets – Internal, inline and External style
sheets, creating styles, link tag.

</p>
<p align="right">[No. of Hrs: 11]</p>
<hr/>

<p style="font-size: 25px; font-weight: bold;">UNIT – III</p>

<p style="font-size: 20px;text-align:justify;line-height: 20px;">DHTML :
Introduction to DHTML, JavaScript & DHTML, Document Object Model, Filters
and Transitions, DHTML Events, Dynamically change style to HTML Documents.
</p>
<p align="right">[No. of Hrs: 11]</p>
<hr/>

<p style="font-size: 25px; font-weight: bold;">UNIT – IV</p>

<p style="font-size: 20px;text-align:justify;line-height: 20px;">Introduction to
WYSIWYG Design tools, Introduction to Dreamweaver, Website Creation and
maintenance, Web Hosting and Publishing Concepts, XML: Introduction to XML-
Mark up languages, Features of Mark up languages, XML Naming rules, Building
block of XML Document, Difference between HTML & XML
<br/>
Components of XML, XML Parser, DTD’s Using XML with HTML and CSS

</p>
<p align="right">[No. of Hrs: 11]</p>
<hr/>
<p style="font-weight:bold;">TEXT BOOKS</p>
<p>[T1] The complete reference HTML, by Thomas A powell, TMH publication.
<br/>
[T2] Mastering HTML 4.0 by Deborah S. Ray and Erich J. Ray. BPB Publication.
<br/>
[T3] Internet and World Wide Web Deitel HM, Deitel ,Goldberg , Third
Edition<br/>
</p>

<p style="font-weight:bold;">
REFERNCES,</p>
<p>
[R1] HTML Black Book , Stephen Holzner, Wiley Dreamtech.<br/>
[R2]Rajkamal, “Web Technology”, Tata McGraw-Hill, 2001.<br/>
[R3] Jeffrey C. Jackson, “Web Technologies : A Computer Science Perspective”,
Pearson. <br/>
[R4]XML How to Program by Deitel Deitel Nieto.<br/>
</p>

</div>
</body>
</html>

Output:-
Practical – 4
Aim :- Write an HTML code to print the quadratic equation asfollows:
In mathematics, a quadratic equation is a polynomial HYPERLINK
"http://en.wikipedia.org/wiki/Polynomial" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomial" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomial" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomial" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomial" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomial" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomial" HYPERLINK
"http://en.wikipedia.org/wiki/Equation" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomial" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomial" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomial" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomial" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomial" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomial" HYPERLINK
"http://en.wikipedia.org/wiki/Polynomial"equation of the second degree. The
general form is
ax2+bx+c = 0
• where a ≠ 0. (For if a = 0, the equation becomes a linear equation
Source Code :-
<!DOCTYPE html>
<html>
<head>
<title>
Quadratic Equation
</title>
</head>
<body>
<p> In <ins>mathematics</ins>, a <b>quadratic equation</b><br/> is a
polynomial equation of the second<br/> degree. The general form is<br/>
ax<sup>2</sup>+bx+c = 0 <br/>
<blockquote>where <i> a </i> ≠ 0. (For if a = 0, the <br/> equation becomes a
<ins>linear <br/> equation</ins>
</blockquote>
</p>
</body>
</html>
Output :-

Practical – 5
Aim :-
Create a web page describing you. Use <block quote> to display address, for sub
headings <pre> tag and use <em> tag wherever you are using numbers. Use
different background color & different color showing text.
Source Code :-
<!DOCTYPE html>
<html>
<head>
<title>
Practical 5
</title>
</head>
<body bgcolor="">
<h1 style="color: orangered;">
Information about Me<hr/>
</h1>
<p style="color:black;"> My name is <b>Vaibhav Kumar </b> . I am <em> 20
</em> years old. I am currently pusrsuing BCA from <strong> IP University
</strong>.
I live in Uttam nagar. <blockquote style="font-size: medium;">My address
is : <em>wz-50 om vihar, uttam nagar, New Delhi- 46</em></blockquote>
I passed my 10 and 12<sup>th</sup> class from Kendriya Vidayalaya
which is located in Vikas Puri.
</p>
<pre>
Written By :- vaibhav Kumar
</pre>

</body>
</html>
Output :-
Practical – 6
Aim : -
Develop an HTML document which displays your name as heading and displays
the name of any four of your friends in a list. Each friend’s name should be a
hyperlink. When you click a friend’s name, it must open another HTML document
which tells about your friend.
Source Code : -
(Main Page)
<!DOCTYPE html>
<html>
<head>
<title> Friend </title>
</head>
<body bgcolor="cyan">
<h1 style="color: Black; text-align: center ;"><i> Hello my name is Vaibhav
kumar. </i></h1>
<blockquote> Here is a list of some of my friends and if you click on any of their
name you will be redirected to their info page. Happy surfing. </blockquote>
<ol>
<li><a href="file:///D:/outputs%20html/html6(2).html" target="_blank"> Friend 1
</a></li>
<li><a href="file:///D:/outputs%20html/html(3).html" target="_blank"> Friend 2
</a></li>
<li><a href="file:///D:/outputs%20html/html(4).html" target="_blank"> Friend 3
</a></li>
</ol>
</body>
</html>

(Friend 1)
<html>
<head>
<title>
Friend 1
</title>
<body bgcolor="green">
<h1 style="color: white;"> Hello my name is Aman. </h1>
<p style="color: white;"> I am 21. <br> I am pursuing BA program from SOL.
<br> I want to become IFS officer. </p>
</body>
</head>
</html>
(Friend 2)
<html>
<head>
<title>
Friend 2
</title>
<body bgcolor="orange">
<h1> Hello my name is Amit. </h1>
<p> I am 21 yearsold. <br> I am IPS aspirant. <br> I am a dog lover. </p>
</body>
</head>
</html>
(Friend 3)
<html>
<head>
<title>
Friend 3
</title>
<body bgcolor="yellow">
<h1> Hello my name is Mayank. </h1>
<p style="background-color: blue; color: whitesmoke;"> I am 20 years old. <br> I
am in CS engineering. <br> I am single. </p>
</body>
</head>
</html>
Output:-
Practical – 7
Aim :-
Write HTML code to insert three images that are aligned left, center and right.
Also change the background color as blue of the web page. Give a proper heading
to the web page.
Source Code :-
<!DOCTYPE html>
<html>
<head>
<title> Practical 7 </title>
</head>
<body bgcolor="blue">
<h1 style="color:wheat; text-align: center;"> Inserting images in HTML </h1>
<p style="background-color: orange;"><b> The next image is aligned to left.
</b></p>
<img src="jett.jpg" alt="AGENT JETT" height="110px" width="110px">
<br>

<p style="background-color: yellow; color: black;"><b> The next image is aligned

to centre. </b></p>
<div style="text-align: center;">
<img align = "center" src = "viper.jpg" alt= height="590px" width="100px" align
= "bottom">
</div>
<br>

<p style="background-color: green; color: yellowgreen;"><b> The next image is

aligned to right. </b></p>
<img align = "right" src = "valorant.jpg" alt="Valorant is a 5 V 5 compiteitive
game." height="190px" width="500px">
<br>
</body>
</html>

Output : -
Practical – 8
Aim :-
Write code to display the name of courses taught in the institute under the list
headings Morning and Evening Courses respectively using different type of
unordered list.
Source Code : -
<!DOCTYPE html>
<html>
<head>
<title>
Practical 8
</title>
</head>
<body>
<h1> Courses offered by IITM Janak Puri </h1>
<ul type = "circle">
<li><h3> Morning </h3></li>
<ul type = "disc">
<li> MCA </li>
<li> MBA </li>
<li> BBA </li>
</ul>
<li><h3> Evening </h3></li>
<ul type = "square">
<li> BCA </li>
<li> B.com </li>

</ul>
</ul>
</body>
</html>
Output : -
Practical – 9
Aim : -
Design an HTML website for displaying different courses offered by the
university using ordered lists.
Source Code : -
<!DOCTYPE html>
<html>
<head>
<title> Practical 9 </title>
</head>
<body>
<h1> Courses offered by IP University </h1>
<h3>Engineering</h3>
<ol type="1">
<li> B.Arch </li>
<li> BCA </li>
<li> Civil Engineering </li>
<li> Computer Science Engineering</li>
<li> Electrical and Electronics Engineering </li>
<li> Electronics and Communication Engineering </li>
<li> Information Technology </li>
<li> MCA </li>
<li> Mechanical Engineering </li>
<li> Mechanical and Aerospace Engineering </li>
<li> Mechatronics Engineering </li>
<li> Tool Engineering </li>
</ol>

<h3> Commerce </h3>

<ol type="i">
<li> BBA </li>
<li> BBA (Banking and Insurance) </li>
<li> BBA (CAM) </li>
<li> BBA LLB(Integrated) </li>
<li> B.Com </li>
<li> B.Com (Hons.) </li>
<li> MBA (Financial Management)</li>
<li> MBA (IT) </li>
<li> M.Com </li>
</ol>

<h3> Arts </h3>

<ol type="a">
<li> BA </li>
<li> BA (Economics Hons.) </li>
<li> BA (English Hons.) </li>
<li> BA LLB </li>
<li> BA LLB (Integrated) </li>
<li> B.Ed (Special Education (Autism)) </li>
<li> B.Ed (Special Education (ASD)) </li>
<li> B.Ed (Special Education (LD)) </li>
<li> B.Ed (Special Education (VI)) </li>
<li> BJMC </li>
<li> MA </li>
</ol>

<h3> Others </h3>

<ol type="I">
<li> B.Voc </li>
<li> B.Pharma </li>
<li> Bachelor of Hotel Management and Catering Technology </li>
<li> Bachelor of Occupational Therapy </li>
<li> Bachelor of Physiotherapy </li>
<li> Bachelor in Prosthetics and Orthotics </li>
<li> B.Sc.(Nursing) </li>
<li> B.Sc. (Nursing Hons.) </li>
<li> B.Sc. (Medical Technology, Radiotherapy) </li>
<li> M.Sc.(Nursing) </li>
<li> M.Sc. Nursing (Community Health) </li>
<li> Master of Physiotherapy (Cardiopulmonary) </li>
<li> Master of Physiotherapy (Musculoskeletal) </li>
<li> Master of Physiotherapy (Neurology) </li>
<li> Master of Physiotherapy (Sports) </li>
<li> MBBS </li>
<li> Post Basic Nursing </li>
</ol>
</body>
</html>
Output : -
Practical – 10
Aim : -
Write a code for the following list( Definition List)
Coffee
• black hot drink
Milk
• white cold drink
Source Code : -
<!DOCTYPE html>
<html>
<head>
<title> Practical 10 </title>
</head>
<body>
<h1> Definition List </h1>
<dl>
<dt> Coffee </dt>
<dd> - black hot drink </dd>

<dt> Milk </dt>

<dd> - white cold drink </dd>
</dl>
</body>
</html>
Output : -
Practical – 11
Aim : -
Create a table containing S.No, Name, course and marks of 10 students.
Source Code : -
<!DOCTYPE html>
<html>
<head>
<title> Practical 11 </title>
</head>
<body>
<table border="1">
<tr>
<th> S.No </th>
<th> Name </th>
<th> Course </th>
<th> Marks </th>
</tr>
<tr>
<td> 1. </td>
<td> vaibhav </td>
<td> BCA </td>
<td> 89 </td>
</tr>
<tr>
<td> 2. </td>
<td> Amit </td>
<td> B.Tech </td>
<td> 92 </td>
</tr>
<tr>
<td> 3. </td>
<td> Aman </td>
<td> B.Com </td>
<td> 88 </td>
</tr>
<tr>
<td> 4. </td>
<td> Ajeet </td>
<td> BA </td>
<td> 80 </td>
</tr>
<tr>
<td> 5. </td>
<td> Ajay </td>
<td> BBA </td>
<td> 78 </td>
</tr>
<tr>
<td> 6. </td>
<td> Alok </td>
<td> BBA </td>
<td> 84 </td>
</tr>
<tr>
<td> 7. </td>
<td> Ashraf </td>
<td> B.Tech </td>
<td> 79 </td>
</tr>
<tr>
<td> 8. </td>
<td> Ashok </td>
<td> B.Sc </td>
<td> 97 </td>
</tr>
<tr>
<td> 9. </td>
<td> Adarsh </td>
<td> B.Com </td>
<td> 89 </td>
</tr>
<tr>
<td> 10. </td>
<td> Atul </td>
<td> BA </td>
<td> 82 </td>
</tr>
</table>
</body>
</html>
Output : -
Practical – 12
Aim : -
Create a Table to display the following table with items in the Décor using
ordered lists and Hyperlinks. On the click of the Décor items, suitable pages with
their images and information should be displayed.
HOUSE DECOR ROOMS
TYPES
Villas 1.Dining Room 4BHK
2. Master Bed
Room
3. Kid’s Room
4.Kitchen
Mansions 1.Dining Room 5BHK
2. Master Bed
Room
3. Kid’s Room
4.Kitchen
Flats 1.Single 1BHK
Bedroom
2.Double 2BHK
Bedroom

Source Code : -
(Main Page)
<!DOCTYPE html>
<html>
<head>
<title> Practical 12 </title>
</head>
<body>
<table border="2">
<tr>
<th> House <br> Types </th>
<th> Decor </th>
<th> Rooms </th>
</tr>
<tr>
<td> Villas </td>
<td><ol type="1">
<li><a href="file:///D:/outputs%20html/html12(4).html" target="_blank"> Dining
Room </a></li>
<li><a href="file:///D:/outputs%20html/html12(1).html" target="_blank"> Master
Bed Room </a></li>
<li><a href="file:///D:/outputs%20html/html12(2).html"target="_blank"> Kid's
Room </a></li>
<li><a href="file:///D:/outputs%20html/html12(3).html"target="_blank"> Kitchen
</a></li>
</ol>
</td>
<td> 4 BHK </td>
</tr>
<tr>
<td> Mansions </td>
<td><ol type="1">
<li><a href=""> Dining Room </a></li>
<li><a href=""> Master Bed Room </a></li>
<li><a href=""> Kid's Room </a></li>
<li><a href=""> Kitchen </a></li>
</ol>
</td>
<td> 5 BHK </td>
</tr>
<tr>
<td> Flats </td>
<td>
<ol type="1">
<li><a href=""> Single Bedroom </a></li>
<li><a href=""> Double Bedroom </a></li>
</ol>
</td>
<td>1BHK <br>2BHK </td>
</tr>
</table>
</body>
</html>

(Dining)
<!DOCTYPE html>
<html>
<head>
<title> Practical 12(i) </title>
</head>
<body>
<h2> Villa Dinning room </h2>
<img src="dining room.jpg" alt="dining room"height="500px" width="500px">
<br>
<blockquote><b> Your family love this dining room. </b></blockquote>
</body>
</html>

(Villas)
<!DOCTYPE html>
<html>
<head>
<title> Practical 12(ii) </title>
</head>
<body>
<h2> Villa master bedroom </h2>
<img src="villa master bedroom.jpg" alt="master bedroom">
<blockquote><b> Grab a chance to have your best power nap in this bedroom.
</b></blockquote>
</body>
</html>
(Mansion)
<!DOCTYPE html>
<html>
<head>
<title> Practical 12(iii) </title>
</head>
<body>
<h2> Villa Kids Bedroom </h2>
<img src="Villa Kids Bedroom.jpg" alt="Kids bedroom">
<blockquote><b> Your kids will love this bedroom. As they will get a lot of free
space to play here. </b></blockquote>
</body>
</html>
(Flat)
<!DOCTYPE html>
<html>
<head>
<title> Practical 12(iv) </title>
</head>
<body>
<h2> Villa Kitchen </h2>
<img src="Villa Kitchen.jpg" alt="Kitchen">
<blockquote><b> Give your wife a chance to cook here in this kitchen. She would
never want to leave this kitchen. </b></blockquote>
</body>
</html>
Output : -
Practical – 13
.
Aim : -
Write a JavaScript to accept your name and display it

Source Code:

<html>
<head>
<script>
var name = window.prompt("Enter your name: ");
alert("Your name is " + name);
</script>
</head>
</body>
</html>

Output:
Practical – 14

Aim : -
Write a JavaScript code to accept 10 numbers and check how many are +ive, -ive
and zero

Source Code:
<html>
<head>
<title>Program</title>
</head>
<body>
<script>
var n = new Array(10);
var i;
for (i = 0; i < 10; i++)
{
n[i]=prompt("Enter numbers:","Enter one at a time...");
}
document.write("Zero numbers : "+"<br>");
for (i = 0; i < 10; i++)
{
if(n[i]==0)
{
document.write(n[i]+"<br>");
}
}
document.write("Positive numbers"+"<br>");
for (i = 0; i < 10; i++)
{
if(n[i]>0)
{
document.write(n[i]+"<br>");
}
}
document.write("Negative number : "+"<br>");
for (i = 0; i < 10; i++)
{
if(n[i]<0)
{
document.write(n[i]+"<br>");
}
}
</script>
</body>
</html>

Output:
Practical – 15

Aim : -
Write a Program in JavaScript to find the factorial of a number between 1 to 10
Output should be like as given below: -
Factorial of 1
is: 1
Factorial of 2 is:
2
:::::::::::::::::::::::::
::::::::::::::::::::::::::
::::::::::::::::::::::::::
factorial of 10 is
:
Source Code:
<html>
<head>
<title>Program</title>
</head>
<body>
<script>
var a;
a=prompt("Enter your number :","Enter!!");
if(a>0 && a<=10)
{
var i=1;
var f=a;
while(a>0)
{
i=a*i;
a--;
}
alert("Factorial of"+f+", is "+i);
}
else
alert("Please Enter a number between 1 and 10");
</script>
</body>
</html>
Output:
Practical – 16

Aim : -
Write a Program in JavaScript to find reverse of a digit

Source Code:

<html>
<head>
<title>Reverse</title>
</head>
<body>
<script>
var a =prompt("enter a number :","enter here...");
var b=a;
var c;
var d=0;
while(b>0)
{
c=b%10;
d=d*10+c;
b=Math.floor(b/10);
}
document.write("reverse of "+a +"is "+d);
</script>
</body>
</html>

Output:
Practical – 17

Aim : -
Write a JavaScript code block, which greets a user with a message Welcome’.
When a user leaves this page, the ‘Good-bye’ alert dialog box is displayed

Source Code:

<HTML>
<HEAD>
<TITLE>Example 5.1</TITLE>
</HEAD>
<BODY onLoad="alert('Welcome to my page!');"
onunload="console.log('bye')">
</BODY>
</HTML>
Output:-

Practical – 18

.
Aim : -
Write a script that displays the various Math & String Functions

Source Code:
<html>
<body>
<p id="abs_demo"></p>
<script>
functiongfg() {
var geek = Boolean(1);
var geeks = Boolean(0);

var string =
String(geek) + "<br>" +
String(geeks);

document.write(string);
}
gfg();
document.getElementById("abs_demo").innerHTML = Math.abs(-5.6);
</script>
</body>
</html>
Output:

Practical – 19

.
Aim : -
Write a script that reads a date from an HTML form and creates a Date object in
which to store that date. Then, use the various method of Date object to display the
date in several formats

Source Code:
<html>
<body>
<p id="p2"></p>
<p id="p3"></p>
<script type="text/javascript">
var date = new Date('2021-04-10T10:12:50.5000z');

document.getElementById("p2").innerHTML = 'toDateString: '+

date.toDateString();
document.getElementById("p3").innerHTML='toLocaleDateString:'+date.toLocale
DateString();
</script>
</body>
</html>
Output:

Practical – 20

.
Aim : -
Write a CSS rule that make all text size as 18pt and color as red, background color
blue. Give the heading style font size as 24pt, font family as sans-serif,color black
and text align as Centre.

Source Code:
<html>
<head>
<style>
p{
background-color: lightblue;
color:red;
font-size:18pt
}
h1 {
color: black;
text-align: center;
font-size: 24pt;
font-family: sans-serif;

}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Output:
Practical – 21

.
Aim : -Write a CSS rule for EM, H1 and P elements. Create Class attributes that
applies a style class and inheritance

Source Code:
<html>
<head>
<style>
.main {
color: rebeccapurple;
border: 2px solid #ccc;
padding: 1em;
}

.special {
color: black;
font-weight: bold;
}
p{
background-color: lightblue;
color:red;
font-size:18pt
}
h1 {
color: black;
text-align: center;
font-size: 24pt;
font-family: sans-serif;

</style>
</head>
<body>
<h1>Inheritance</h1>
<ul class="main">
<li>Item One</li>
<li>Item Two
<ul>
<li>2.1</li>
<p>two point 1<p>
<li>2.2</li>
<p>two point 2<p>
</ul>
</li>
<li>Item Three
<ul class="special">
<li>3.1
<ul>
<li>3.1.1</li>
<li>3.1.2</li>
</ul>
</li>
<li>3.2</li>
</ul>
</li>
</ul>

</body>
</html>

Output:
Practical – 22

Aim : -
Write a program to show the conflicting style

Source Code:
<html>
<head>
<style>
.box{
color:blue;
background-color:green;
width:150px;
height:150px;
}
.box{
color:yellow;
font-size:3em;
}
</style>
</head>
<body>
<div class ="box">I am a box</div>
</body>
</html>

Output:

Practical - 23

Aim:-
Create a site of Solar System and insert an image of planets and position the style
as absolute and give proper margins as top, left, right and bottom.
Source Code:
<html>
<head>
<title>Solar System
</title>
</head>
<body bgcolor="black">
<img src="Sun.jpg"
style="position:absolute;
height: 200;
width: 200;
top: 100px;
left: 50px;">
<img src="mercury.jpg"
style="position:absolute;
height: 60; width: 60;
top: 90px; left: 300px;">
<img src="venus.jpg"
style="position:absolute;
height: 80;
width: 80;
top: 120px;
left: 450px;">
<img src="earth.jpg"
style="position:absolute;
height: 100; width: 100;
top: 130px; left: 600px;">
<img src="mars.jpg"
style="position:absolute;
height: 95;
width: 95;
top: 150px;
left: 750px;">
<img src="jupiter.jpg"
style="position:absolute;
height: 150;
width: 150;
top: 350px;
left: 960px;">
<img src="saturn.jpg"
style="position:absolute;
height: 140;
width: 140;
top: 400px;
left: 1150px;">
<img src="neptune.jpg"
style="position:absolute;
height: 130;
width: 130;
top: 350px;
left: 1450px;">
</body>
</html>
Output:-

Practical –24
Aim:-
Create a web page, which applies the invert filter to an image, glow filter to a
hyperlink.

Source Code:-
<!DOCTYPE html>
<html>
<head>
<title> Filter </title>
</head>
<body>
<style>
img.b {
filter: invert(75%);
}
a.glow:hover, a.glow:focus
{
color: #DC143C;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}
</style>
<img class="b" src="C:\Users\Bhaskar\Pictures\Saved Pictures\jett.jpg" alt="jett"
height="290px" width="500px" >
<a href="Quer.com" class="glow">Glowing Link</a>
</body>
</html>
Output:-

Practical 25

Aim:-
Write a CSS rule that set the three box dimension and align the text. The first box
should be 20%, second division should be 80% and centre aligns. And in the third
division give a proper height and width.

Source Code:
<html>
<head>
<style type="text/css">
.box
{
width: 20%; heigth:20%;
color: green; font-size:34; padding: 10px; border: 12px white; margin:12;
align: center;
}
.box1
{
width: 80%;
height:80%;
color:orange; font-size:20;
padding: 10px;
border: 15px dotted white; margin: 15px; text-align:left;
}
.box2
{
width: 50%; height: 50%; color:cyan; font-size:20; padding: 10px; border: 5px
purple; margin: 10px;

text-align:center; }
</style>
</head>
<body bgcolor="Cyan">
<div class="box"> My Website </div>
<div class="box1"> ABOUT: <br><br>
<font color="red" size="6"> Tricksters
</div>
<div class="box2">
<font color="red" size="7"> <p>Bca evening </p> </div>
</body>
</html>
Output:
Practical –26
Aim : -
Create a web page, which attaches two filters to the object. The first causes the
image to blur over a specified number of pixels. The second filter flips the image
vertically.

Source Code : -
<!DOCTYPE html>
<html>
<head>
<title> Filter </title>
</head>
<body>
<style>
img.a {
filter: blur(3px);
}
img.b {
transform: scaleY(-1);
}
</style>
<img class="a" src="battlefield.jpg" alt="battlefield" height="290px"
width="500px">
<img class="b" src="battlefield.jpg" alt="battlefield" height="290px"
width="500px" >
</body>
</html>
Output : -

Practical –27
Aim : -
Using Alpha filter change the content by changing the Opacity property.

Source Code : -
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: red;
opacity: 0.5;
}
</style>
</head>
<body>
<h1>The opacity Property</h1>
<div>The following div element's opacity is 0.5</div>
</body>
</html>
Output : -

Practical 28
Aim:-
Using transition's apply and play method freezes the appearance of an object and
then invokes the transition.

Source Code:-
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
</body>
</html>

Output:-
Practical –29
Aim : -
Create a web page, which prompts a user to enter a colour, then sets the
background Colour to that value.

Source Code : -
<!DOCTYPE html>
<html>
<head>
<title>Change the Background Color with JavaScript</title>
<script>
function changeBodyBg(color){
document.body.style.background = color;
}
</script>
</head>
<body>
<div>
<label>Change Webpage Background To:</label>
<button type="button" onclick="changeBodyBg('yellow');">Yellow</button>
<button type="button" onclick="changeBodyBg('lime');">Lime</button>
<button type="button" onclick="changeBodyBg('orange');">Orange</button>
</div>
</body>
</html>

Output : -
Practical –30
Aim : -
Insert an image to a web page and display its co-ordinates on a mouse move.

Source Code : -
<html>
<head>
<script>
function coordinate(event) {
var x = event.clientX;
var y = event.clientY;
document.getElementById("X").value = x;
document.getElementById("Y").value = y;
}
</script>
</head>
<body onmousemove="coordinate(event)">
<img src="valorant.jpg" alt="valorant" height="290px" width="500px">

<p>
X-coordinate
<input type="text" id="X">
<br>
<br>
Y-coordinate
<input type="text" id="Y">

</body>
</html>

Output : -
Practical –31
Aim : -
Create a web page, which shows Rollover effects.

Source Code : -
<!DOCTYPE html>
<html>
<head>
<title>Rollover Image Effect in Html</title>
</head>
<body>
<h2>Rollover Image Effect in Html</h2>
<img src="viper.jpg" height="290px" width="500px"
onmouseover="this.src='valo.jpg'" height="290px" width="500px"
onmouseout="this.src='viper.jpg'" height="290px" width="500px" />
</body>
</html>

Output : -
Practical –32
Aim : -
Write an external linking style sheet to Create a website which show the different
courses in your institute.

Source Code : -
(Main Page)
<html>
<head><title>Div Tag Example</title>
</head>
<style>
.container{
background-color:#d1d1d1;
margin:30px;
padding:20px;
min-height:700px;
}
.header{
background-color: #C7C3F2;
color: #060230;
text-align: center;
font-size: 30px;
min-height: 100px;
padding: 20px;
}
.main
{
font-size: 20px;
text-align: center;
color: #054D54
min-height: 400px;
}
.about{
color:#A60E3E;
}
.para{
color:#357E08;
}
.myhr
{height:3px;
background-color:#3F0B69;
}
.footer{
background-color:#056670;
color:#09DEF4;
text-align:center;
min-height: 70px;
padding: 50px;
font-size:20px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<body>
<div class="container">
<div class="header">

<img src="logo.png" width="300" height="200">

</div>
<div class="main">
<h2 class="about">Programmes</h2>
<hr class="myhr">
<a href="file:///D:/outputs%20html/html32(1).html" class="button">
<button>BCA</button>
</a>
<a href="file:///D:/outputs%20html/html32(2).html" class="button">
<button>MCA</button>
</a>
<a href="file:///D:/outputs%20html/html32(3).html" class="button">
<button>BBA</button>
</a>
<a href="file:///D:/outputs%20html/html32(4).html" class="button">
<button>MBA</button>
</a>
<h2 class="about">About Us</h2>
<hr class="myhr">
<p class="para">
<p>
</p>
<p>
Institute of Information Technology and Management (IITM) was set up in 1999
under the aegis of Mata Leelawati <br>
Shikshan Sansthan (MLSS), a registered education society engaged in
philanthropic activities, with the Late Shri T.N. <br>
Chaturvedi, the well known educationist, parliamentarian, ex-Governor of
Karnataka and CAG of India and Padma <br>
Vibhushan Awardee, as founder President of both the society and the
Institute.<br>
The campus is located in pollution free salubrious surroundings, in close proximity
to Delhi Metro Rail.<br>

The Institute takes pride in having developed the faculty support and
infrastructure imperative to effectively implement<br>
the ‘Outcome Based Education’, a technology-based learner centric and result-
oriented approach which enhances<br>
students' learning and performance capabilities. We are passionate about
grooming the nation’s youth to grow into <br>
excellent professionals and good human beings destined to become torch bearers
of their respective domains.<br>

IITM conducts a plethora of short duration skill enhancement and syllabus

enrichment workshops related to areas of<br>
management specialisations and emerging IT technologies. We have a strong
alumni network of over 4800<br>
professionals working at various management levels in the leading corporate
houses of the country.<br>
</div>
<div class="footer">
<p>
©Institute of Information Technology & Management 2019
</div>
</div>
</body>
</html>
(BCA)
<html>
<head><title>Div Tag Example</title>
</head>
<style>
.container{
background-color:#d1d1d1;
margin:30px;
padding:20px;
min-height:700px;
}
.header{
background-color: #C7C3F2;
color: #060230;
text-align: center;
font-size: 30px;
min-height: 100px;
padding: 20px;
}
.main
{
font-size: 20px;
text-align: center;
color: #054D54
min-height: 400px;
}
.about{
color:#A60E3E;
}
.para{
color:#357E08;
}
.myhr
{height:3px;
background-color:#3F0B69;
}
.footer{
background-color:#056670;
color:#09DEF4;
text-align:center;
min-height: 70px;
padding: 50px;
font-size:20px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<body>
<div class="container">
<div class="header">
<h1 align="center">Bachelor of Computer Applications(BCA)</h1>
</div>
<div class="main">
<p class="para">
<p>
</p>
<p>
Overview<br>
The three-year BCA programme is affiliated to Guru Gobind Singh Indraprastha
University. It focuses on preparing students through innovative pedagogy for a
competitive professional environment, thoughtful inquiry, vigorous skill
development and insightful discourse among students. This approach is designed
to help students to achieve excellence in their careers in research, consultancy
and analytics.

The BCA programme is divided into six semesters, each semester comprises five
theory and three practical subjects. The fifth and sixth semesters expose students
to industrial training and a project, essentially an experiential leaning excercise,
respectively. <br>

Programme Educational Objectives (PEOs)<br>

BCA Programme focuses on the following PEOs:<br>

The main objective is to develop the student’s computational knowledge,

technical and professional abilities in order to make them competent so that they
can meet the challenges of employment in IT industry.<br>
The main thrust is on equipping students with skills and further trains them in the
varied emerging industrial requirements such as software engineering areas and
web technologies.<br>
To train students on various software tools platforms to comprehend, analyze,
design and create innovative applications.<br>
To help students imbibe professional and ethical attitudes by imparting effective
communication skills, teamwork skills, multidisciplinary approach and enhancing
ability to relate computer applications to broader social context. The professional
outlook of every student is groomed through soft skills training and career
development programmes. Students participate and attend seminar, workshop
and conferences.<br>
Duration<br>
3 Years<br>

Intake and Reservation of Seats<br>

The programme is run in two shifts. The intake for BCA is 90 students in morning
shift and 60 in evening shift. The existing reservation policy stipulates 10% seats
as "Management Quota Seats". Out of the remaining 90% seats, 85% seats are
reserved for Delhi candidates and 15% seats for outside Delhi candidates. Further
reservations for specific categories are as per the guidelines of Government of
NCT of Delhi.<br>

Eligibility Criteria<br>
Passed 12th Class of 10+2 of CBSE or equivalent with a minimum of 50% marks in
aggregate with pass in English (core or elective or functional) and Mathematics or
Computer Science/Informatics Practice/Computer Applications.<br>

or<br>

Three year Diploma in a branch of Engineering from a polytechnic duly approved

by All India Council for Technical Education and affiliated to a recognized
examining body with a minimum of 50% marks in aggregate.<br>
</div>
<div class="footer">
<p>
©Institute of Information Technology & Management 2019
</div>
</div>
</body>
</html>

(MCA)
<html>
<head><title>Div Tag Example</title>
</head>
<style>
.container{
background-color:#d1d1d1;
margin:30px;
padding:20px;
min-height:700px;
}
.header{
background-color: #C7C3F2;
color: #060230;
text-align: center;
font-size: 30px;
min-height: 100px;
padding: 20px;
}
.main
{
font-size: 20px;
text-align: center;
color: #054D54
min-height: 400px;
}
.about{
color:#A60E3E;
}
.para{
color:#357E08;
}
.myhr
{height:3px;
background-color:#3F0B69;
}
.footer{
background-color:#056670;
color:#09DEF4;
text-align:center;
min-height: 70px;
padding: 50px;
font-size:20px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<body>
<div class="container">
<div class="header">
<h1 align="center">Master of Computer Application(MCA)</h1>
</div>
<div class="main">
<p class="para">
<p>
</p>
<p>
Overview<br>
The three-year MCA programme is affiliated to Guru Gobind Singh Indraprastha
University. The Programme inculcates essential skills demanded by the global
software industry through an interactive learning process. These include : thinking
skills and team-building skills imparted through audio-visual presentations and
personality development programmes. The norms and standards for delivery of
the course are as laid down by the All India Council of Technical Education
(AICTE), Ministry of HRD, Government of India.<br>

The MCA Programme is spread over six semesters(15-weeks each), the first four
of which are devoted to foundation courses across core areas of Computer
Applications. An elective subject is offered in the fifth semester followed by an
Industrial Training Programme in the sixth semester.Over and above this, each
semester has a ‘General Proficiency’ paper which allows the students to delve
into subjects beyond the laid down syllabi.<br>

Vision of the Department<br>

The Department of Information Technology aims to promote value based quality
education to the students and impart skills and training in the field of information
technology and allied areas to meet the industry demands.<br>

Mission of the Department<br>

The overall mission of the Information Technology Department is to provide
students with up-to-date curriculum and pedagogy in information technology and
equip them with thinking skills, and prepare them to meet the growing demands
for competent and trained professionals.<br>
Duration<br>
3 Years<br>

Intake and Reservation of Seats<br>

AICTE approved intake for the programme is 60 students. The existing reservation
policy stipulates 10% seats (6 in number) as "Management Quota Seats". Out of
the remaining 90% seats (54 in number), 85% seats (46 in number) are reserved
for Delhi candidates and 15% seats (8 in number) for outside Delhi candidates.
Further reservation for specific categories are as per the guidelines of
Government of NCT of Delhi.<br>

Eligibility Criteria<br>
Bachelor's Degree of a Recognised University in any discipline with at least 50%
marks in aggregate and must also have passed Mathematics and English at least
at the Senior School Certificate Examination (Class XII) of the CBSE or any other
Examination recognized as equivalent thereto.<br>

or<br>

BCA/BIT/BIS of a recognised university of at least three years duration with at

least 50% marks in aggregate.<br>

or<br>

Bachelor's Degree in Engineering or Technology or a qualification recognised as

equivalent thereto with at least 50% marks in aggregate.<br>
</div>
<div class="footer">
<p>
©Institute of Information Technology & Management 2019
</div>
</div>
</body>
</html>

(BBA)
<html>
<head><title>Div Tag Example</title>
</head>
<style>
.container{
background-color:#d1d1d1;
margin:30px;
padding:20px;
min-height:700px;
}
.header{
background-color: #C7C3F2;
color: #060230;
text-align: center;
font-size: 30px;
min-height: 100px;
padding: 20px;
}
.main
{
font-size: 20px;
text-align: center;
color: #054D54
min-height: 400px;
}
.about{
color:#A60E3E;
}
.para{
color:#357E08;
}
.myhr
{height:3px;
background-color:#3F0B69;
}
.footer{
background-color:#056670;
color:#09DEF4;
text-align:center;
min-height: 70px;
padding: 50px;
font-size:20px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<body>
<div class="container">
<div class="header">
<h1 align="center">Bachelor of Business Administration (BBA)</h1>
</div>
<div class="main">
<p class="para">
<p>
</p>
<p>
Overview<br>
The three-year BBA programme is affiliated to Guru Gobind Singh Indraprastha
University. It is designed to equip students with strong conceptual knowledge and
thinking skills to manage integrated business operations. <br>

The BBA programme is divided into six semesters, the first four of which are
devoted to foundation courses across core areas of Business Administration. The
fifth and sixth semesters expose students to industrial training and project based
learning respectively.<br>

Programme Educational Objectives (PEOs)<br>

The Bachelor of Business Administration (BBA) Program has following four
Program Educational objectives(PEOs):<br>

PEO1: Develop leadership and communication skills in students to become

successful business leaders and managers.<br>
PEO2: Encourage critical thinking, analysis and initiative ability amongst
students.<br>
PEO3: Develop problem solving skills through student’s experiential learning and
innovative pedagogy to ensure utilization of knowledge in professional
careers.<br>
PEO4: To make aware students of dynamic business environment in line with
global imperatives and ethical values.<br>
Program Outcomes (POs)<br>
PO1 : Domain Knowledge .<br>
PO2 : Critical Thinking & Problem Solving (Ability in data based decision making
for achievement of organizational goals)<br>
PO3 : Effective Communication Skills<br>
PO4 : Leadership and Teamwork<br>
PO5 : Understanding of Global Business Environment<br>
Duration<br>
3 Years<br>

Intake and Reservation of Seats<br>

This course is run in two-shifts, each having an intake of 120 students (total 240
students). The existing reservation policy specifies 10% seats (24 in number) as
"Management Quota Seats". Out of the remaining 90% seats (216 in number),
85% seats (184 in number) are reserved for Delhi candidates and 15% (32 seats)
for outside Delhi candidates. Further reservation for specific categories shall be as
per the guidelines of Government of NCT of Delhi.<br>

Eligibility Criteria<br>
Passed 12th Class of 10+2 of CBSE or equivalent with a minimum of 50% marks in
aggregate and must also have passed English (core or elective or functional) as a
subject.<br>
</div>
<div class="footer">
<p>
©Institute of Information Technology & Management 2019
</div>
</div>
</body>
</html>

(MBA)
<html>
<head><title>Div Tag Example</title>
</head>
<style>
.container{
background-color:#d1d1d1;
margin:30px;
padding:20px;
min-height:700px;
}
.header{
background-color: #C7C3F2;
color: #060230;
text-align: center;
font-size: 30px;
min-height: 100px;
padding: 20px;
}
.main
{
font-size: 20px;
text-align: center;
color: #054D54
min-height: 400px;
}
.about{
color:#A60E3E;
}
.para{
color:#357E08;
}
.myhr
{height:3px;
background-color:#3F0B69;
}
.footer{
background-color:#056670;
color:#09DEF4;
text-align:center;
min-height: 70px;
padding: 50px;
font-size:20px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<body>
<div class="container">
<div class="header">
<h1 align="center">Master of Business Administration (MBA)</h1>
</div>
<div class="main">
<p class="para">
<p>
</p>
<p>
Overview<br>
The two-year MBA programme is affiliated to Guru Gobind Singh Indraprastha
University. It is designed to impart relevant knowledge, attributes and skills
necessary for a successful career in the corporate world. The programme not only
focuses on domain-specific enterprises but also equips the students with
leadership and entrepreneurial qualities which enable them to contribute
positively to the society at large. Some highlights of the student-centric pedagogy
at IITM are Summer Industrial Training, value added courses, added focus on
public speaking via presentations and group activities aimed at course
enrichment.<br>

The norms and standards for the delivery of the course are as laid down by the All
India Council of Technical Education (AICTE), Ministry of HRD, Government of
India. The MBA programme is spread over four semesters (15-weeks each), the
first two of which are devoted to foundation courses across core areas of Business
Administration. Students have to undergo a summer training after the second
semester, they are also offered elective subjects in the third and fourth
semesters.<br>

Vision of the Department<br>

Department of Management Studies aims to be a centre of excellence in
management education, research and consultancy.<br>

Duration<br>
2 Years<br>

Intake and Reservation of Seats<br>

Eligibility Criteria<br>
Bachelor's Degree of a Recognised University in any discipline with at least 50%
marks in aggregate.<br>

or<br>

Bachelor's Degree in Engineering or Technology or any qualification recognised as

equivalent thereto with at least 50% marks in aggregate.<br>

or<br>

Passed the Final Examination of Institute of Chartered Accountants of India or

England, the Institute of Cost and Work Accountants of India or England or the
Institute of Company Secretaries of India.<br>
</div>
<div class="footer">
<p>
©Institute of Information Technology & Management 2019
</div>
</div>
</body>
</html>
Output: -