WP Notes Web Programming Compress

Download as pdf or txt
Download as pdf or txt
You are on page 1of 117

A quality product by BrainheatersTM LLC

Brainheaters Notes
WP | COMPUTER Semester-6

SERIES 313 - 2018 (A.Y 2020 -21)


© 2016-21 | Proudly Powered by www.brainheaters.in

0 0
BH.Index
(Learn as per the Priority to prepare smartly)

Sr Chapter Name & Content Priority Pg no


No

1. Introduction to WEB 6 2

2. Web Design 5 26

3. Basics of HTML and CSS 3 58

4. Client Side Scripting using JavaScript 2 63

5. Server Side Programming with PHP 1 77

6. Database programming with PHP and 4 81


MySQL

7. Advanced Web Programming concepts 3 87

Page no - 1 Handcrafted by Engineers | P - Priority

0 0
MODULE-1

Q1. Explain RSS elements with examples. What are the uses of RSS?
(P4 - Appeared 1 Time) (3-7M)

Ans : RSS Elements :


<channel> element
● The <channel> element has three required child elements:
○ <title> - Defines the title of the channel (e.g. BH. Home
Page)
○ <link> - Defines the hyperlink to the channel (e.g.
https://www.google.com)
○ <description> - Describes the channel (e.g. Free web
building tutorials)
● Each <channel> element can have one or more <item>
elements.
● Each <item> element defines an article or "story" in the RSS
feed.
<item> element
● The <item> element has three required child elements:
○ <title> - Defines the title of the item (e.g. RSS Tutorial)
○ <link> - Defines the hyperlink to the item .
○ <description> - Describes the item (e.g. New RSS
tutorial on Brainheaters)
Example :
<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">

Page no - 2 Handcrafted by Engineers | P - Priority

0 0
<channel>
<title>Brainheaters Home Page</title>
<link>https://www.w3schools.com</link>
<description>Free web building tutorials</description>
<item>
<title>RSS Tutorial</title>
<link>https://www.w3schools.com/xml/xml_rss.asp</link>
<description>New RSS tutorial on W3Schools</description>
</item>
</channel>
</rss>
<category> Element
● The <category> child element is used to specify a category for
your feed.
● The <category> element makes it possible for RSS
aggregators to group sites based on category.
● The category for the RSS document above could be:
<category>Web development</category>
<copyright> Element
● The <copyright> child element notifies you about copyrighted
material.
● The copyright for the RSS document above could be:
<copyright>2006 Refsnes Data as. All rights reserved.</copyright>

<image> Element
● The <image> child element allows an image to be displayed
when aggregators present a feed.

Page no - 3 Handcrafted by Engineers | P - Priority

0 0
● The <image> element has three required child elements:
○ <url> - Defines the URL to the image
○ <title> - Defines the text to display if the image could
not be shown
○ <link> - Defines the hyperlink to the website that offers
the channel
● The image for the RSS document above could be:
<image>
<url>https://www.w3schools.com/images/logo.gif</url
>
<title>W3Schools.com</title>
<link>https://www.w3schools.com</link>
</image>
<language> Element
● The <language> child element is used to specify the language
used to write your document.
● The <language> element makes it possible for RSS
aggregators to group sites based on language.
● The language for the RSS document above could be:
○ <language>en-us</language>

Uses of RSS
RSS is useful for web sites that are updated frequently, like:
● News sites - Lists news with title, date and descriptions
● Companies - Lists news and new products
● Calendars - Lists upcoming events and important days
● Site changes - Lists changed pages or new pages
Since RSS data is small and fast-loading, it can easily be used with
services like cell phones or PDA's.

Page no - 4 Handcrafted by Engineers | P - Priority

0 0
Q2. Explain the need and working of web services with diagrams.
(P4 - Appeared 1 Time) (3-7M)

Ans : Why do you need a Web Service?


● Modern day business applications use a variety of
programming platforms to develop web-based applications.
Some applications may be developed in Java, others in .Net,
while some others in AngularJS, Node.js, etc.
● Most often than not, these heterogeneous applications need
some sort of communication to happen between them. Since
they are built using different development languages, it
becomes really difficult to ensure accurate communication
between applications.
● Here is where web services come in. Web services provide a
common platform that allows multiple applications built on
various programming languages to have the ability to
communicate with each other.

How WebServices Work?


● The above diagram shows a very simplistic view of how a web
service would actually work. The client would invoke a series of
web service calls via requests to a server which would host
the actual web service.
● These requests are made through what is known as remote
procedure calls. Remote Procedure Calls(RPC) are calls made
to methods which are hosted by the relevant web service.

Page no - 5 Handcrafted by Engineers | P - Priority

0 0
● As an example, Amazon provides a web service that provides
prices for products sold online via amazon.com. The front end
or presentation layer can be in .Net or Java but either
programming language would have the ability to
communicate with the web service.
● The main component of a web service design is the data
which is transferred between the client and the server, and
that is XML. XML (Extensible markup language) is a
counterpart to HTML and is an easy to understand
intermediate language that is understood by many
programming languages.
● So when applications talk to each other, they actually talk in
XML. This provides a common platform for applications
developed in various programming languages to talk to each
other.

Page no - 6 Handcrafted by Engineers | P - Priority

0 0
● Web services use something known as SOAP (Simple Object
Access Protocol) for sending the XML data between
applications. The data is sent over normal HTTP. The data
which is sent from the web service to the application is called
a SOAP message. The SOAP message is nothing but an XML
document. Since the document is written in XML, the client
application calling the web service can be written in any
programming language.

Q3. Explain the following. 1) Blog 2) Web feeds (P4 - Appeared 1


Time) (3-7M)

Ans: 1) Blog:
● A blog is a website or part of a site that contains
regularly-updated content about one or multiple topics. The
term is short for “web log,” which means to log information on
a website.
● The content on a blog usually comes in the form of articles on
individual web pages called blog posts.
● A key characteristic of a blog is that blog posts are presented
in reverse chronological order. This is unlike regular static
websites.
2) Web feeds:
● A web feed is an XML-based document which contains a
sequence of content items. Web logs or blogs are a common
source for web feeds. However, web feeds may also be
associated with different sources other than blogs.

Page no - 7 Handcrafted by Engineers | P - Priority

0 0
● Web feeds are designed to be machine readable, so there is
no requirement that they be destined only for user
consumption. For example, business partners could use web
feeds to exchange information without any user intervention.
● Web feeds are commonly in RSS or Atom "feed" format. They
may also be in RDF format.

Q4. Draw and Explain Web Browser Architecture. (P4 - Appeared 1


Time) (3-7M)

Ans : Browser Architecture


The primary components of a browser are shown in the below image:

Page no - 8 Handcrafted by Engineers | P - Priority

0 0
1. User Interface: The user interface is an area where the user
can use several options like address bar, back and forward
button, menu, bookmarking, and many other options to
interact with the browser.
2. Browser Engine: It connects the UI (User Interface) and the
rendering engine as a bridge. It queries and manipulates the
rendering engine based on inputs from several user
interfaces.
3. Rendering Engine: It is responsible for displaying the
requested content on the browser screen. It translates the
HTML, XML files, and images, which are formatted by using the
CSS. It generates the layout of the content and displays it on
the browser screen. Although it can also display the other
types of content by using different types of plugins or
extensions. such as:
● Internet Explorer uses Trident
● Chrome & Opera 15+ use Blink
● Chrome (iPhone) & Safari use Webkit
● Firefox & other Mozilla browsers use Gecko
4. Networking: It retrieves the URLs by using internet protocols
like HTTP or FTP. It is responsible for maintaining all aspects of
Internet communication and security. Furthermore, it may be
used to cache a retrieved document to reduce network traffic.
5. JavaScript Interpreter: As the name suggests, JavaScript
Interpreter translates and executes the JavaScript code,
which is included in a website. The translated results are sent
to the rendering engine to display results on the device
screen.

Page no - 9 Handcrafted by Engineers | P - Priority

0 0
6. UI Backend: It is used to draw basic combo boxes and
Windows (widgets). It specifies a generic interface, which is
not platform-specific.
7. Data Storage: The data storage is a persistence layer that is
used by the browser to store all sorts of information locally,
like cookies. A browser also supports different storage
mechanisms such as IndexedDB, WebSQL, localStorage, and
FileSystem. It is a database stored on the local drive of your
computer where the browser is installed. It handles user data
like cache, bookmarks, cookies, and preferences.

Q5. What is a meta tag? How is it useful to search engines? (P4 -


Appeared 1 Time) (3-7M)

Ans: Meta tags :


● Meta tags are snippets of code that tell search engines
important information about a web page, such as how they
should display it in search results. They also tell web browsers
how to display it to visitors.
How is it useful to search engines?
● Meta tags offer more details about your site to search engines
and website visitors who encounter your site in the SERP. They
can be optimized to highlight the most important elements of
your content and make your website stand out in search
results.

Page no - 10 Handcrafted by Engineers | P - Priority

0 0
● Search engines increasingly value a good user experience,
and that includes making sure that your site satisfies a user’s
query as best as it possibly can. Meta tags help with this by
making sure that the information searchers need to know
about your site is displayed upfront in a concise and useful
fashion.
● Some types of meta tag relate to page structure and will
ensure that your site is easy to navigate, while others tell
search engines which parts of your page are important and
which to overlook.

Q6. Explain the points which should be considered for planning a


website. (P4 - Appeared 1 Time) (3-7M)

Ans : Following points should be considered while planning a website:


● Creation of a website takes time and resources, so the plan
must proceed sequentially and properly.
● This plan contain the following things
○ Defining the purpose of website
○ Knowing the audience of website
○ Organizing contents of website
○ Publishing of website
Defining the Purpose of Website
● This step starts by defining the goals and objectives of the
website. Goals are the outcomes that designers want from a
website to achieve in a particular time period.
● Objectives are the methods that are used to achieve the
goals of the website.

Page no - 11 Handcrafted by Engineers | P - Priority

0 0
Knowing the Audience of Website
● Audience refers to the site visitors or customers who visit the
site for the purpose of viewing the products, information or
buying them.
● Therefore assessment of the audience according to their
demands, requirements and expectations are very important
things.
● So the content of a website must satisfy the needs and
expectations of the customer or audience.
Organizing Contents of Website
● Website is made of multiple web pages that may be a
combination of text, images, audio, video, animations and
other multimedia elements.
● Generally a website has a home page and other more pages.
When a visitor visits a website, the home page appears first.
● The contents of a website should be arranged in a logical
manner from home page to end page.
● The information on a web page must flow from basic to more
detailed content.
Publishing of Website
● Publishing a website is nothing but making it available on the
Internet for everyone.
● To do this following thing need to perform
○ Domain registration and hosting – Register a domain
name from the concerned authority and purchase a
certain amount of hosting space having some
bandwidth.

Page no - 12 Handcrafted by Engineers | P - Priority

0 0
○ Upload website on server – A website can be
uploaded on a remote server either by using an FTP
Program or using a hosting control panel.
○ Viewing website – Check websites in different
browsers and on different screens. If it is displayed
properly on each platform, then only consider the
website is working properly.

Q7. Explain Ordered list with example. (P4 - Appeared 1 Time)


(3-7M)

Ans : Ordered list is used to create a list of related items, in a specific


order.
1. An ordered list created using the <ol> element, and each list
item starts with the <li> element.
2. Ordered lists are used when the order of the list's items is
important.
3. The list items in an ordered list are marked with numbers.
For example:
<ol>
<li>Fasten your seatbelt</li>
<li>Starts the car's engine</li>
<li>Look around and go</li>
</ol>
OUTPUT:
1. Fasten your seatbelt.
2. Start the car’s engine.
3. Look around and go.

Page no - 13 Handcrafted by Engineers | P - Priority

0 0
Q8. Differentiate between “ID” and “Class” using suitable
examples. (P4 - Appeared 1 Time) (3-7M)

Ans: The following are the important differences between Id and


Class.

No KEY ID CLASS
.

1. Syntax In Html for an element ID On the other hand, a


name starts with the “#” class assigned to an
symbol followed by a element has its name
unique name assigned starting with “.” followed
to it. by the class name.

2. Selector Only one ID selector can Multiple class selectors


be attached to an can be attached to an
element. element.

3. Uniqueness Id is unique in a page The class can be


and can only apply to at applied to multiple
most one element elements so it could be
multiple times on a
single page.

Example of Id vs Class
Id.html
<!DOCTYPE html>
<html>

Page no - 14 Handcrafted by Engineers | P - Priority

0 0
<head>
<title>
Id demo
</title>
<style>
#idDemo{
color:green;
font-size:25px;
}
</style>
</head>
<body style="text-align:center">
<h1>Get element by Id</h1>
<p id="idDemo">Demo for Id selector</p>
</body>
</html>
Class.html
<!DOCTYPE html>
<html>
<head>
<title>
Class demo
</title>
<style>
.classDemo{
color:orange;
font-size:25px;
}
</style>

Page no - 15 Handcrafted by Engineers | P - Priority

0 0
</head>
<body style="text-align:center">
<h1>Get element by class</h1>
<p class="classDemo">Demo for class selector</p>
</body>
</html>

Q9. Give full name of followings: (P4 - Appeared 1 Time) (3-7M)

Ans : 1) DOM: Document object model


2) TCP: Transmission Control Protocol
3) RSS: Really Simple Syndication
4) ISP: Internet service provider
5) XSD: XML Schema Definition
6) HTTP: HyperText Transfer protocol

Q10. What are frames? List out its advantages and


disadvantages. (P4 - Appeared 1 Time) (3-7M)

Ans : HTML frames are used to divide your browser window into
multiple sections where each section can load a separate HTML
document. A collection of frames in the browser window is known as
a frameset. The window is divided into frames in a similar way the
tables are organized: into rows and columns.

Page no - 16 Handcrafted by Engineers | P - Priority

0 0
The major disadvantages of using frames are:
● Bookmarks only bookmark the top level pages (the framesets
themselves). A user is unable to bookmark any of the Web
pages viewed within a frame.
● Frames can make the production of a website complicated,
although current software addresses this problem.
● It is easy to create badly constructed websites using frames.
The most common mistake is to include a link that creates
duplicate Web pages displayed within a frame.
● Search engines that reference a Web page only give the
address of that specific document. This means that search
engines might link directly to a page that was intended to be
displayed within a frameset.

● Users have become so familiar with normal navigation using
tables, the back button, and so on, that navigating through a
site that uses frames can be a problem.
● The use of too many frames can put a high workload on the
server. A request for, say, ten files, each 1 Kilobyte in size,
requires a greater workload than a request for a single 10
Kilobyte file.
● Older browsers do not support frames.

The advantages of HTML frames include:


● The main advantage of frames is that it allows the user to
view multiple documents within a single Web page.
● It is possible to load pages from different servers in a single
frameset.

Page no - 17 Handcrafted by Engineers | P - Priority

0 0
● The concern that older browsers do not support frames can
be addressed using the <noframe> tag. This tag provides a
section in an HTML document to include alternative content
for browsers without support for frames. However, it requires
that the Web designer provide two formats for one page.

Q11. Describe the web design issues. (P4 - Appeared 1 Time 3-7M)

Ans : Following are the issues that are faced during web
1. Website accessibility: The Web is basically designed to
work for all people, irrespective of the culture, language,
location, or physical or mental ability. However, one of the
major challenges a web designer faces is to enhance the
accessibility of websites. A good designer should ensure
that the website is not only accessible across the world but
also its various features are fully functional as well.
2. Compatibility with browsers: With the introduction of
different browsers, designers are constantly facing the
challenge of building a website which is compatible with
almost all the major browsers. After designing a website, it
should be tested on all browsers to ensure that the website
is completely functional.
3. Navigational structure: Navigational structure is one of the
vital aspects of any website, as the usability of the website is
based on an excellent navigational structure. Hence, in
order to avoid any such issues, designers have to ensure
that they provide a proper navigational structure to the
users.

Page no - 18 Handcrafted by Engineers | P - Priority

0 0
4. Positioning of content: Another prominent aspect of a
website is that the users should find it readable. While
designing the structure of the website, the designer should
place the content in such a manner that it enhances easy
reading. In addition, use suitable colors when it comes to
fonts.

Q12. List features of Web 2.0. (P4 - Appeared 1 Time) (3-7M)

Ans : The key characteristics of Web 2.0 include:


1. Folksonomy : free classification of information; allows users
to collectively classify and find information (e.g. "tagging" of
websites, images, videos or links)
2. Rich User Experience : dynamic content that is responsive to
user input (e.g., a user can "click" on an image to enlarge it or
find out more information)
3. User Participation : information flows two ways between the
site owner and site users by means of evaluation, review, and
online commenting. Site users also typically create
user-generated content for others to see (e.g., Wikipedia, an
online encyclopedia that anyone can write articles for or
edit)
4. Software as a Service : Web 2.0 sites developed APIs to allow
automated usage, such as by a Web "app" (software
application) or a mashup

Page no - 19 Handcrafted by Engineers | P - Priority

0 0
5. Mass Participation : near-universal web access leads to
differentiation of concerns, from the traditional Internet user
base (who tended to be hackers and computer hobbyists) to
a wider variety of users

Q13. Briefly explain following: (P4 - Appeared 1 Time) (3-7M)

Ans: Web server: A program that uses HTTP for serving files that
create web pages for users in response to their requests that are sent
by the HTTP clients of their computer is called a web server.

1. Blog: A blog is a website or part of a site that contains


regularly-updated content about one or multiple topics. The
term is short for “web log,” which means to log information on
a website.

2. SOAP : SOAP stands for Simple Object Access Protocol. SOAP is


an application communication protocol. SOAP is a format for
sending and receiving messages. SOAP is platform
independent.

3. Web feeds: A web feed is an XML-based document which


contains a sequence of content items. Web logs or blogs are
a common source for web feeds. However, web feeds may
also be associated with different sources other than blogs.

Page no - 20 Handcrafted by Engineers | P - Priority

0 0
Q14. Explain the points which should be considered for planning a
website. (P4 - Appeared 1 Time) (3-7M)

Ans :Defining the Purpose of Website


● This step starts by defining the goals and objectives of the
website. Goals are the outcomes that designers want from a
website to achieve in a particular time period.
● Objectives are the methods that are used to achieve the
goals of the website.
Knowing the Audience of Website
● Audience refers to the site visitors or customers who visit the
site for the purpose of viewing the products, information or
buying them.
● Therefore assessment of the audience according to their
demands, requirements and expectations are very important
things.
● So the content of a website must satisfy the needs and
expectations of the customer or audience.
Organizing Contents of Website
● Website is made of multiple web pages that may be a
combination of text, images, audio, video, animations and
other multimedia elements.
● Generally a website has a home page and other more pages.
When a visitor visits a website, the home page appears first.
● The contents of a website should be arranged in a logical
manner from home page to end page.
● The information on a web page must flow from basic to more
detailed content.

Page no - 21 Handcrafted by Engineers | P - Priority

0 0
Publishing of Website
● Publishing a website is nothing but making it available on the
Internet for everyone.
● To do this following thing need to perform
○ Domain registration and hosting – Register a domain
name from the concerned authority and purchase a
certain amount of hosting space having some
bandwidth.
○ Upload website on server – A website can be uploaded
on a remote server either by using an FTP Program or
using a hosting control panel.
○ Viewing website – Check websites in different browsers
and on different screens. If it is displayed properly on
each platform, then only consider the website is
working properly.
● Domain registration and hosting – Register a domain name
from the concerned authority and purchase a certain amount
of hosting space having some bandwidth.
● Upload website on server – A website can be uploaded on a
remote server either by using an FTP Program or using a
hosting control panel.
● Viewing website – Check websites in different browsers and
on different screens. If it is displayed properly on each
platform, then only consider the website is working properly.

Page no - 22 Handcrafted by Engineers | P - Priority

0 0
Q15. List and explain various list tags in HTML with example (P4 -
Appeared 1 Time) (3-7M)

Ans : Unordered HTML List


● An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.
● The list items will be marked with bullets (small black circles)
by default:
● Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ordered HTML List


● An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
● The list items will be marked with numbers by default:
● Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Page no - 23 Handcrafted by Engineers | P - Priority

0 0
Description Lists
● HTML also supports description lists.
● A description list is a list of terms, with a description of each
term.
● The <dl> tag defines the description list, the <dt> tag defines
the term (name), and the <dd> tag describes each term:
● Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Q16.Explain any 2 HTML tags with examples. (P4 - Appeared 1


Time) (3-7M)

Ans : HTML tag:


● It is the root of the html document which is used to specify
that the document is html.
● Syntax:
<html> Statements... </html>
Head tag:
● Head tag is used to contain all the head elements in the html
file. It contains the title, style, meta, … etc tag.
● Syntax:
<head> Statements... </head>

Page no - 24 Handcrafted by Engineers | P - Priority

0 0
Example:
<html>
<head>
<title>Title of your web page</title>
</head>
<body>HTML web page contents </body>
</html>

Q17. What is HTTP? Explain HTTP Request and Response. (P4 -


Appeared 1 Time) (3-7M)

Ans : HTTP
● The Hypertext Transfer Protocol (HTTP) is designed to enable
communications between clients and servers.
● HTTP works as a request-response protocol between a client
and server.
● Example: A client (browser) sends an HTTP request to the
server; then the server returns a response to the client. The
response contains status information about the request and
may also contain the requested content.
HTTP requests
● An HTTP request is made by a client, to a named host, which is
located on a server. The aim of the request is to access a
resource on the server.
● To make the request, the client uses components of a URL
(Uniform Resource Locator), which includes the information
needed to access the resource. The components of a URL
explains URLs.

Page no - 25 Handcrafted by Engineers | P - Priority

0 0
● A correctly composed HTTP request contains the following
elements:
○ A request line.
○ A series of HTTP headers, or header fields.
○ A message body, if needed.
HTTP responses
● An HTTP response is made by a server to a client. The aim of
the response is to provide the client with the resource it
requested, or inform the client that the action it requested has
been carried out; or else to inform the client that an error
occurred in processing its request.
● An HTTP response contains:
○ A status line.
○ A series of HTTP headers, or header fields.
○ A message body, which is usually needed.

Page no - 26 Handcrafted by Engineers | P - Priority

0 0
MODULE-2

Q1. What is CSS? Explain the different types of CSS. (P4 -


Appeared 1 Time) (3-7M)

Ans : CSS (Cascading Style Sheet)


● Cascading Style Sheet(CSS) is used to set the style in web
pages that contain HTML elements.
● It sets the background color, font-size, font-family, color, … etc
property of elements on a web page.
There are three types of CSS which are given below:
1. Inline CSS
2. Internal or Embedded CSS
3. External CSS
Inline CSS:
● Inline CSS contains the CSS property in the body section
attached with the element is known as inline CSS.
● This kind of style is specified within an HTML tag using the style
attribute.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>

<body>

Page no - 27 Handcrafted by Engineers | P - Priority

0 0
<p style = "color:#009900; font-size:50px;
font-style:italic; text-align:center;">
GeeksForGeeks
</p>
</body>
</html>
Output:
Internal or Embedded CSS:
● This can be used when a single HTML document must be
styled uniquely.
● The CSS rule set should be within the HTML file in the head
section i.e the CSS is embedded within the HTML file.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
.geeks {
font-style:bold;
font-size:20px;

Page no - 28 Handcrafted by Engineers | P - Priority

0 0
}
</style>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>

<div class ="geeks">


A computer science portal for geeks
</div>
</div>
</body>
</html>
Output:

External CSS:
● External CSS contains a separate CSS file which contains only
style property with the help of tag attributes (For example
class, id, heading, … etc).
● CSS property written in a separate file with .css extension and
should be linked to the HTML document using link tag.
● This means that for each element, style can be set only once
and that will be applied across web pages.
Example: The file given below contains CSS property. This file is saved
with the .css extension. For Ex: geeks.css

body {
background-color:powderblue;
}

Page no - 29 Handcrafted by Engineers | P - Priority

0 0
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
#geeks {
font-style:bold;
font-size:20px;
}
Below is the HTML file that is making use of the created external style
sheet
link tag is used to link the external style sheet with the html webpage.
href attribute is used to specify the location of the external style sheet
file.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="geeks.css"/>
</head>

<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
<div id ="geeks">
A computer science portal for geeks
</div>

Page no - 30 Handcrafted by Engineers | P - Priority

0 0
</div>
</body>
</html>
Output:
Properties of CSS:
● Inline CSS has the highest priority, then comes
Internal/Embedded followed by External CSS which has the least
priority.
● Multiple style sheets can be defined on one page.
● If for an HTML tag, styles are defined in multiple style sheets
then the below order will be followed.
● As Inline has the highest priority, any styles that are defined in
the internal and external style sheets are overridden by Inline
styles.
● Internal or Embedded stands second in the priority list and
overrides the styles in the external style sheet.
● External style sheets have the least priority.
● If there are no styles defined either in inline or internal style
sheets then external style sheet rules are applied for the HTML
tags.

Q2. Design a login form using HTML & JavaScript with following

validations on username and password fields. 1. Password length


must be 6 to 12 characters 2. Username should not start with _, @ or
number. 3. Both should not be blank. (P4 - Appeared 1 Time) (3-7M)

Ans: Javascript File: login.js


var attempt = 3; // Variable to count number of attempts.

Page no - 31 Handcrafted by Engineers | P - Priority

0 0
// Below function Executes on click of login button.
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ( username == "Formget" && password == "formget#123"){
alert ("Login successfully");
window.location = "success.html"; // Redirecting to another page.
return false;
}
else{
attempt --;// Decrementing by one.
alert("You have left "+attempt+" attempt;");
// Disabling fields after 3 attempts.
if( attempt == 0){
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}

Page no - 32 Handcrafted by Engineers | P - Priority

0 0
Q3. Why do you need validation? Write HTML and JavaScript code
to validate the email address using regular expressions. (P4 -
Appeared 1 Time) (3-7M)

Ans: Form validation using HTML and JavaScript


● Forms are used in web pages for the user to enter their
required details that further send it to the server for
processing.
● A form is also known as a web form or HTML form.
● Examples of form use are prevalent in e-commerce websites,
online banking, online surveys to name a few.

Syntax for form in HTML


<body>
<h1 style="text-align: center;">REGISTRATION FORM</h1>
<form name="RegForm" action="/submit.php"
onsubmit="return BRAINHEATERS()" method="post">
<p>Name: <input type="text"
size="65" name="Name" /></p>
<br />
<p>Address: <input type="text"
size="65" name="Address" /></p>
<br />
<p>E-mail Address: <input type="text"
size="65" name="EMail" /></p>
<br />
<p>Password: <input type="text"
size="65" name="Password" /></p>

Page no - 33 Handcrafted by Engineers | P - Priority

0 0
<br />
<p>Telephone: <input type="text"
size="65" name="Telephone" /></p>
<br />

<p>
SELECT YOUR COURSE
<select type="text" value="" name="Subject">
<option>BTECH</option>
<option>BBA</option>
<option>BCA</option>
<option>B.COM</option>
<option>GEEKFORGEEKS</option>
</select>
</p>
<br />
<br />
<p>Comments: <textarea cols="55"
name="Comment"> </textarea></p>
<p>
<input type="submit"
value="send" name="Submit" />
<input type="reset"
value="Reset" name="Reset" />
</p>
</form>
</body>

Page no - 34 Handcrafted by Engineers | P - Priority

0 0
Validating a form:
● The data entered into a form needs to be in the right format
and certain fields need to be filled in order to effectively use
the submitted form.
● Username, password, contact information are some details
that are mandatory in forms and thus need to be provided by
the user.
● Below is a code in HTML, CSS, and JavaScript to validate a
form.
● HTML is used to create the form.JavaScript to validate the
form.
● CSS to design the layout of the form.
Form validation:
<script>
function GEEKFORGEEKS() {
var name = document.forms["RegForm"]["Name"];
var email = document.forms["RegForm"]["EMail"];
var phone = document.forms["RegForm"]["Telephone"];
var what = document.forms["RegForm"]["Subject"];
var password = document.forms["RegForm"]["Password"];
var address = document.forms["RegForm"]["Address"];
if (name.value == "") {
window.alert("Please enter your name.");
name.focus();
return false;
}
if (address.value == "") {
window.alert("Please enter your address.");
address.focus();

Page no - 35 Handcrafted by Engineers | P - Priority

0 0
return false;
}
if (email.value == "") {
window.alert(
"Please enter a valid email address.");
email.focus();
return false;
}

if (phone.value == "") {
window.alert(
"Please enter your telephone number.");
phone.focus();
return false;
}
if (password.value == "") {
window.alert("Please enter your password");
password.focus();
return false;
}

if (what.selectedIndex < 1) {
alert("Please enter your course.");
what.focus();
return false;
}
Styling the form:
<style>
div {

Page no - 36 Handcrafted by Engineers | P - Priority

0 0
box-sizing: border-box;
width: 100%;
border: 100px solid black;
float: left;
align-content: center;
align-items: center;
}
form {
margin: 0 auto;
width: 600px;
}</style>
return true;
}
</script>

Q4. Explain the following XSL(XML stylesheet elements). (i)


value-of (ii) for-each (iii) sort (P4 - Appeared 1 Time) (3-7M)

Ans: Value-of :
● Inserts the value of the selected node as text.
<xsl:value-of
select = Expression
disable-output-escaping = "yes" | "no"
</xsl:value-of>
Attributes
● select

Page no - 37 Handcrafted by Engineers | P - Priority

0 0
Required. The Expressions to be evaluated against the current
context. The results are converted to a string, as by a call to
the string() function. A node-set is converted to a string by
inserting the string value of the first node in the set.
● disable-output-escaping
Default is "no". If the value is "yes", a text node generated by
instantiating the <xsl:value-of> element will be output without
any escaping. For example, the following generates the single
character "<".
<xsl:value-of disable-output-escaping="yes" select="string('&lt;')"/>

For-each
● The XSL <xsl:for-each> element can be used to select every
XML element of a specified node-set:

Example
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>

Page no - 38 Handcrafted by Engineers | P - Priority

0 0
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
sort
● The <xsl:sort> element is used to sort the output.
● To sort the output, simply add an <xsl:sort> element inside the
<xsl:for-each> element in the XSL file:
Example
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>

Page no - 39 Handcrafted by Engineers | P - Priority

0 0
</tr>
<xsl:for-each select="catalog/cd">
<xsl:sort select="artist"/>
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

Page no - 40 Handcrafted by Engineers | P - Priority

0 0
Q5. What is XML? Write XML file to store personal information of
student (P4 - Appeared 1 Time) (3-7M)

Ans : What is xml


● Xml (eXtensible Markup Language) is a markup language.
● XML is designed to store and transport data.
● Xml was released in the late 90’s. it was created to provide an
easy to use and store self describing data.
● XML became a W3C Recommendation on February 10, 1998.
● XML is not a replacement for HTML.
● XML is designed to be self-descriptive.
● XML is designed to carry data, not to display data.
● XML tags are not predefined. You must define your own tags.
● XML is platform independent and language independent.
student.xml File
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type='text/xsl' href='cgpa.xsl'?>
<class>
<student>
<name> ABC </name>
<id> 001 </id>
<branch> IT </branch>
<cgpa> 9 </cgpa>
</student>
<student>
<name> PQR </name>
<id> 004 </id>
<branch> Computer </branch>

Page no - 41 Handcrafted by Engineers | P - Priority

0 0
<cgpa> 7 </cgpa>
</student>
<student>
<name> XYZ </name>
<id> 006 </id>
<branch> IT </branch>
<cgpa> 10 </cgpa>
</student>
</class>
cgpa.xsl File
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="https://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Student list in descending order of their CGPA.</h2>
<table border="1">
<tr bgcolor="lightblue">
<th>ID</th>
<th>Name</th>
<th>Branch</th>
<th>CGPA</th>
</tr>
<xsl:for-each select="class/student">
<xsl:sort select="cgpa" order="descending" data-type="number"/>
<tr>
<td><xsl:value-of select="id"/></td>
<td><xsl:value-of select="name"/></td>

Page no - 42 Handcrafted by Engineers | P - Priority

0 0
<td><xsl:value-of select="branch"/></td>
<td><xsl:value-of select="cgpa"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Q6. Explain the key components of XML. (P4 - Appeared 1 Time)

(3-7M)

Ans :

Component Description

XML root The XML root element represents the XML document that
element is being mapped. The XML root element is a looping
structure that contains elements and content particles
that repeat in sequence until either the group data ends
or the maximum number of times that the loop is
permitted to repeat is exhausted. The root element
cannot be referenced by standard rules or links.

Element An element contains related elements and content


particles. In addition, an element can contain one pcdata
and one attribute container. These objects repeat in

Page no - 43 Handcrafted by Engineers | P - Priority

0 0
sequence until either the element data ends or the
maximum number of times that the loop is permitted to
repeat is exhausted. A repeating element that contains
another repeating element corresponds to a nested
looping structure. The XML Element object cannot be
referenced by standard rules or links.

Abstract An abstract element is an in concrete element from an


element XML schema (for example, the term “appliance” may be
considered an abstract element while “dishwasher” is a
concrete one). An abstract element must be substituted
with a non-abstract element for a map to be
successfully compiled.

Content A content particle contains related subordinate objects


particle that define either a choice, a sequence, or an all. A
content particle can contain only one pcdata. If
specified, these objects can repeat in sequence until
either the content particle data ends or the maximum
number of times that the loop is permitted to repeat is
exhausted. If you create a content particle that is
subordinate to another content particle, the content
particle corresponds to a nested looping structure (a
loop within a loop). A content particle cannot be
referenced by standard rules or links.

Pcdata A pcdata contains character data in an XML document.


Only one pcdata can be defined per element or content
particle. Sterling B2B Integrator Map Editor automatically

Page no - 44 Handcrafted by Engineers | P - Priority

0 0
names the pcdata with the name of the parent element
or content particle.
When a pcdata has a link performed against it, a red
check mark appears over the pcdata icon.
When a pcdata contains an extended rule or a standard
rule, an asterisk appears to the right of the pcdata icon.

Attribute An attribute container does not correspond to an XML


container function. Sterling B2B Integrator Map Editor uses attribute
containers to contain the attributes of an XML element.
The attribute container has no properties. When you
create the first attribute of an XML element, the Sterling
B2B Integrator Map Editor automatically creates an
attribute container object. An element can have only one
attribute container, but the attribute container object can
enclose many attribute objects.

Attribute An attribute specifies information associated with an


element that further defines the element. The attribute is
located within an attribute container. Attributes do not
have to occur in sequence in the input data.
When an attribute has a link performed against it, a red
check mark appears over the attribute icon.
When an attribute contains an extended rule or a
standard rule, an asterisk appears to the right of the
attribute icon.

Page no - 45 Handcrafted by Engineers | P - Priority

0 0
Q7. Explain XSL and XSLT with examples. (P4 - Appeared 1 Time)
(3-7M)

Ans : Extensible Stylesheet Language (XSL)


● XSL is a language for expressing stylesheets
● support for browsing, printing, and aural rendering
● formatting highly structured documents (XML)
● performing complex publishing tasks: tables of contents,
indexes, reports,...
● addressing accessibility and internationalization issues
● written in XML
XSL Architecture

XSL Components
XSL is constituted of three main components:
● XSLT: a transformation language
● XPath: an expression language for addressing parts of XML
documents
● FO: a vocabulary of formatting objects with their associated
formatting properties

Page no - 46 Handcrafted by Engineers | P - Priority

0 0
XSL uses XSLT which uses XPath
XSL Transformations

XSLT - Basic Principle


Patterns and Templates
● A style sheets describes transformation rules
● A transformation rule: a pattern + a template
● Pattern: a configuration in the source tree
● Template: a structure to be instantiated in the result tree
● When a pattern is matched in the source tree, the
corresponding pattern is generated in the result tree

An Example: Transformation
<xsl:template match="Title">
<H1>
<xsl:apply-templates/>
</H1>
</xsl:template>

Page no - 47 Handcrafted by Engineers | P - Priority

0 0
Input : <Title>Introduction</Title>
Output : <H1>Introduction</H1>

Q8. What is SOAP? Explain the role of SOAP in web services. (P4 -
Appeared 1 Time) (3-7M)

Ans : SOAP is a Protocol.


● SOAP stands for Simple Object Access Protocol.
● SOAP can't use REST because it is a protocol.
● SOAP uses services interfaces to expose the business logic.
● JAX-WS is the Java API for SOAP web services.
● SOAP defines standards to be strictly followed.
● SOAP requires more bandwidth and resources than RESR.
● SOAP defines its own security.
● SOAP permits XML data format only.
● SOAP is less preferred than REST.

Q9. Differentiate following. (1). HTML and XHTML (2). GET and POST
(P4 - Appeared 1 Time) (3-7M)

Ans :

S.No HTML XHTML

XHTML stands for Extensible


HTML stands for Hypertext
1. Hypertext Markup
Markup Language.
Language.

Page no - 48 Handcrafted by Engineers | P - Priority

0 0
It was developed by W3C
It was developed by Tim
2. i.e World Wide Web
Berners-Lee.
Consortium.

3. It was developed in 1991. It was released in 2000.

It is extended from XML and


4. It is extended from SGML.
HTML.

The format is a document The format is a markup


5.
file format. language.

All tags and attributes are In this, every tag and


6. not necessarily to be in attribute should be in lower
lower or upper case. case.

Doctype is very necessary


Doctype is not necessary
7. to write at the top of the
to write at the top.
file.

It is not necessary to close It is necessary to close the


8. the tags in the order they tags in the order they are
are opened. opened.

Page no - 49 Handcrafted by Engineers | P - Priority

0 0
While using the attributes While using the attributes it
it is not necessary to is mandatory to mention
9.
mention quotes. For e.g. quotes. For e.g.
<Geeks>. <Geeks=”GFG”>.

Filename extensions used Filename extensions are


10.
are .html, .htm. .xhtml, .xht, .xml.

GET POST

1) In case of Get request, only a In case of a post request, a


limited amount of data can be large amount of data can be
sent because data is sent in the sent because data is sent in the
header. body.

2) Get request is not secured Post request is secured because


because data is exposed in the data is not exposed in the URL
URL bar. bar.

3) Get request can be Post requests cannot be


bookmarked. bookmarked.

4) Get request is idempotent . It Post request is non-idempotent.


means second request will be
ignored until response of first
request is delivered

5) Get requests are more Post request is less efficient and

Page no - 50 Handcrafted by Engineers | P - Priority

0 0
efficient and used more than used less than get.
Post.

Q11. Design Login Page HTML. Page must have fields in page
Username, Password, Remember Me and Login Button. (P4 -
Appeared 1 Time) (3-7M)

Ans : Step 1) Add HTML :


● Add an image inside a container and add inputs (with a
matching label) for each field. Wrap a <form> element around
them to process the input.
<form action="action_page.php" method="post">
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname"
required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw"
required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember">
Remember me
</label>

Page no - 51 Handcrafted by Engineers | P - Priority

0 0
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>

Step 2) Add CSS:


/* Bordered form */
form {
border: 3px solid #f1f1f1;
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;

Page no - 52 Handcrafted by Engineers | P - Priority

0 0
width: 100%;
}
/* Add a hover effect for buttons */
button:hover {
opacity: 0.8;
}
/* Extra style for the cancel button (red) */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the avatar image inside this container */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
/* Avatar image */
img.avatar {
width: 40%;
border-radius: 50%;
}

/* Add padding to containers */


.container {
padding: 16px;
}
/* The "Forgot password" text */
span.psw {

Page no - 53 Handcrafted by Engineers | P - Priority

0 0
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens
*/
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}

Q12. Design Registration page in HTML. (P4 - Appeared 1 Time)

(3-7M)

Ans : <Html>
<head>
<title>
Registration Page
</title>
</head>
<body bgcolor="Lightskyblue">
<br>
<br>
<form>

Page no - 54 Handcrafted by Engineers | P - Priority

0 0
<label> First Name </label>
<input type="text" name="firstname" size="15"/> <br> <br>
<label> Middle Name: </label>
<input type="text" name="middlename" size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/> <br> <br>

<label>
Course :
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>

<br>
<br>
<label>
Gender :
</label><br>
<input type="radio" name="male"/> Male <br>
<input type="radio" name="female"/> Female <br>
<input type="radio" name="other"/> Other

Page no - 55 Handcrafted by Engineers | P - Priority

0 0
<br>
<br>

<label>
Phone :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="text" name="phone" size="10"/> <br> <br>
Address
<br>
<textarea cols="80" rows="5" value="address">
</textarea>
<br> <br>
Email:
<input type="email" id="email" name="email"/> <br>
<br> <br>
Password:
<input type="Password" id="pass" name="pass"> <br>
<br> <br>
Re-type password:
<input type="Password" id="repass" name="repass"> <br> <br>
<input type="button" value="Submit"/>
</form>
</body>
</html>

Page no - 56 Handcrafted by Engineers | P - Priority

0 0
Q13. Explain the Document Object Model with example (P4 -
Appeared 1 Time) (3-7M)

Ans : The Document Object Model (DOM) is a programming API for


HTML and XML documents.
● It defines the logical structure of documents and the way a
document is accessed and manipulated.
● In the DOM specification, the term "document" is used in the
broad sense - increasingly, XML is being used as a way of
representing many different kinds of information that may be
stored in diverse systems, and much of this would traditionally
be seen as data rather than as documents. Nevertheless, XML
presents this data as documents, and the DOM may be used
to manage this data.
● With the Document Object Model, programmers can create
and build documents, navigate their structure, and add,
modify, or delete elements and content.
● Anything found in an HTML or XML document can be
accessed, changed, deleted, or added using the Document
Object Model, with a few exceptions - in particular, the DOM
interfaces for the internal subset and external subset have not
yet been specified.
● The name "Document Object Model" was chosen because it is
an "object model" used in the traditional object oriented
design sense: documents are modeled using objects, and the
model encompasses not only the structure of a document,
but also the behavior of a document and the objects of which
it is composed.

Page no - 57 Handcrafted by Engineers | P - Priority

0 0
● In other words, the nodes in the above diagram do not
represent a data structure, they represent objects, which have
● functions and identity.
● As an object model, the Document Object Model identifies:
● the interfaces and objects used to represent and manipulate
a document
● the semantics of these interfaces and objects - including both
behavior and attributes
● the relationships and collaborations among these interfaces
and objects
The Document Object Model represents this table like this:

DOM representation of the example table

Page no - 58 Handcrafted by Engineers | P - Priority

0 0
Q14. XHTML is a stricter language than HTML. Justify. (P4 -
Appeared 1 Time) (3-7M)

Ans : XHTML is the extended version of widely used Hypertext Markup


Language (HTML) and designed to work with the eXtensible Markup
Language, or XML.
● XHTML is in many ways similar to HTML, but it is more stricter
and cleaner than HTML.
● Here are the most important points to remember while
creating a new XHTML document or converting existing HTML
document into XHTML document:
● XHTML document must have a DOCTYPE declaration at the top
of the document.
● All XHTML tag and attribute names must be written in
lowercase.
● All the tags must be nested properly.
● End tags are required for non-empty elements.
● The start tag of an empty element must end with />.
● All the attribute values must be quoted.
● Attribute minimization is forbidden.
Why XHTML?
● As XHTML documents need to be well-formed, your website
will be more likely to be compatible with present and future
web browsers and rendered more accurately.
● It also makes your website easier to maintain, convert and
format in the long run.

Page no - 59 Handcrafted by Engineers | P - Priority

0 0
● XHTML combines strength of HTML and XML; thus XHTML pages
can be parsed by any XML enabled devices — unlike HTML,
which requires a lenient HTML specific parser.
● Web developers and user agent designers are constantly
discovering new ways to express their ideas through new
markup.
● In XML, it is relatively easy to introduce new elements or
additional element attributes.
● The XHTML family is designed to accommodate these
extensions through XHTML modules.
● These modules will permit the combination of existing and
new feature sets when developing content and when
designing new user agents.

Q15. Write HTML code for creating the following table. 2


January February

March 1 2

3 4

Ans :
<!DOCTYPE html>
<html>
<style>
table, th,td{
border:2px solid black;
}

Page no - 60 Handcrafted by Engineers | P - Priority

0 0
</style>
<body>
<table style="width:100%">
<tr>
<th colspan="2">January</th>
<th>February</th>
</tr>
<tr>
<td rowspan="2">march </td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4<td>
</tr>
</table>
</body>
</html>

Page no - 61 Handcrafted by Engineers | P - Priority

0 0
MODULE-3

Q1. Write Well formed XML file to store student information (P4 -
Appeared 1 Time) (3-7M)

Ans : student.xml File


<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type='text/xsl' href='cgpa.xsl'?>
<class>
<student>
<name> ABC </name>
<id> 001 </id>
<branch> IT </branch>
<cgpa> 9 </cgpa>
</student>
<student>
<name> PQR </name>
<id> 004 </id>
<branch> Computer </branch>
<cgpa> 7 </cgpa>
</student>
<student>
<name> XYZ </name>
<id> 006 </id>
<branch> IT </branch>
<cgpa> 10 </cgpa>
</student>

Page no - 62 Handcrafted by Engineers | P - Priority

0 0
</class>
cgpa.xsl File
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="https://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Student list in descending order of their CGPA.</h2>
<table border="1">
<tr bgcolor="lightblue">
<th>ID</th>
<th>Name</th>
<th>Branch</th>
<th>CGPA</th>
</tr>
<xsl:for-each select="class/student">
<xsl:sort select="cgpa" order="descending" data-type="number"/>
<tr>
<td><xsl:value-of select="id"/></td>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="branch"/></td>
<td><xsl:value-of select="cgpa"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>

Page no - 63 Handcrafted by Engineers | P - Priority

0 0
</xsl:stylesheet>

Q2. Develop XML File for book record and also write a DTD and XSL
for it. (P4 - Appeared 1 Time) (3-7M)

Ans : DTD stands for Document Type Definition.


● A DTD defines the structure and the legal elements and
attributes of an XML document.
● A "Valid" XML document is "Well Formed", as well as it conforms
to the rules of a DTD:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE note SYSTEM "Note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
The purpose of a DTD is to define the structure and the legal
elements and attributes of an XML document:
<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>

Page no - 64 Handcrafted by Engineers | P - Priority

0 0
Q3. Differentiate client side scripting and server side scripting.
(P4 - Appeared 1 Time) (3-7M)

Ans :

Client side scripting Server side scripting

Source code is not visible to the


Source code is visible to the user. user because it’s output on the
server side is a HTML page.

In this any server side technology


It usually depends on the browser
can be used and it does not
and it’s version.
depend on the client.

It runs on the user's computer. It runs on a web server.

There are many advantages


The primary advantage is its
linked with this like faster.
ability to highly customize
response times, a more interactive
response requirements, access
application.
rights based on the user.

It does not provide security for


It provides more security for data.
data.

Page no - 65 Handcrafted by Engineers | P - Priority

0 0
It is a technique that uses scripts
It is a technique used in web
on a web server to produce a
development in which scripts run
response that is customized for
on clients' browsers.
each client's request.

HTML, CSS and javascript are used. PHP, Python, Java, Ruby are used.

Q3. What do you mean by event in JavaScript? Give at least two


examples of events with their handling.(P4 - Appeared 1 Time)
(3-7M)

Ans : Events
● JavaScript's interaction with HTML is handled through events
that occur when the user or the browser manipulates a page.
● When the page loads, it is called an event. When the user
clicks a button, that click too is an event. Other examples
include events like pressing any key, closing a window, resizing
a window, etc.
onclick Event Type
This is the most frequently used event type which occurs when a user
clicks the left button of his mouse. You can put your validation,
warning etc., against this event type.
Example
<html>
<head>
<script type = "text/javascript">
<!--

Page no - 66 Handcrafted by Engineers | P - Priority

0 0
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>

<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>

onsubmit Event Type


onsubmit is an event that occurs when you try to submit a form. You
can put your form validation against this event type.
Example
<html>
<head>
<script type = "text/javascript">
<!--
function validation() {
all validation goes here
.........
return either true or false
}
//-->

Page no - 67 Handcrafted by Engineers | P - Priority

0 0
</script>
</head>

<body>
<form method = "POST" action = "t.cgi" onsubmit = "return
validate()">
.......
<input type = "submit" value = "Submit" />
</form>
</body>
</html>

Q4. Write and explain rules for a well formed XML document.(P4 -
Appeared 1 Time) (3-7M)

Ans : Well-Formedness Rules :


● All XML elements must have a closing tag.
● XML tags are case-sensitive.
● All XML elements must be properly nested.
● All XML documents must have a root element.
● Attribute values must always be quoted.

Page no - 68 Handcrafted by Engineers | P - Priority

0 0
MODULE-4

Q1. Explain sessions and cookies in PHP with proper examples. (P4

- Appeared 1 Time) (3-7M)

Ans: A cookie is often used to identify a user.


● A cookie is a small file that the server embeds on the user's
computer.
● Each time the same computer requests a page with a
browser, it will send the cookie too.
● With PHP, you can both create and retrieve cookie values.
● A cookie is created with the setcookie() function.
Syntax
● setcookie(name, value, expire, path, domain, secure,
httponly);
● Only the name parameter is required. All other parameters
are optional.
● The following example creates a cookie named "user" with the
value "John Doe". The cookie will expire after 30 days (86400 *
30). The "/" means that the cookie is available on the entire
website (otherwise, select the directory you prefer).
● We then retrieve the value of the cookie "user" (using the
global variable $_COOKIE). We also use the isset() function to
find out if the cookie is set:
Example
<?php
$cookie_name = "user";

Page no - 69 Handcrafted by Engineers | P - Priority

0 0
$cookie_value = "John Doe";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/");
// 86400 = 1 day
?>
<html>
<body>

<?php
if(!isset($_COOKIE[$cookie_name])) {
echo "Cookie named '" . $cookie_name . "' is not set!";
} else {
echo "Cookie '" . $cookie_name . "' is set!<br>";
echo "Value is: " . $_COOKIE[$cookie_name];
}
?>

</body>
</html>
PHP Session
● A PHP session is used to store and pass information from one
page to another temporarily (until the user closes the
website).
● PHP session technique is widely used in shopping websites
where we need to store and pass cart information e.g.
username, product code, product name, product price etc
from one page to another.
● PHP session creates a unique user id for each browser to
recognize the user and avoid conflict between multiple
browsers.

Page no - 70 Handcrafted by Engineers | P - Priority

0 0
php session working
PHP session_start() function
● PHP session_start() function is used to start the session. It
starts a new or resumes an existing session. It returns an
existing session if the session is created already. If a session is
not available, it creates and returns a new session.
Syntax
bool session_start ( void )
Example
session_start();

Q2. Write a PHP program to find whether the entered year is leap
year or not. (P4 - Appeared 1 Time) (3-7M)

Ans : <?php
function year_check($my_year)
{
if ($my_year % 400 == 0)
print("It is a leap year");
if ($my_year % 4 == 0)
print("It is a leap year");
else if ($my_year % 100 == 0)
print("It is not a leap year");
else
print("It is not a leap year");
}
$my_year = 2024;
year_check($my_year);

Page no - 71 Handcrafted by Engineers | P - Priority

0 0
?>

Q3. Explain Browser detection PHP with Example. (P4 - Appeared 1


Time) (3-7M)

Ans : Definition and Usage


The get_browser() function looks up the user's browscap.ini file and
returns the capabilities of the user's browser.

Syntax
get_browser(user_agent,return_array)
Parameter Values

Parameter Description

user_age Optional. Specifies the name of an HTTP user agent.


nt Default is the value of $HTTP_USER_AGENT. You can
bypass this parameter with NULL

return_arr Optional. If this parameter is set to TRUE, the function


ay will return an array instead of an object

Technical Details

Return Returns an object or an array with information


Value: about the user's browser on success, or FALSE on
failure

Page no - 72 Handcrafted by Engineers | P - Priority

0 0
Q4. How to write in PHP? Explain session in PHP with example (P4 -
Appeared 1 Time) (3-7M)

Ans : PHP Syntax


● A PHP script can be placed anywhere in the document.
● A PHP script starts with <?php and ends with ?>:
<?php
// PHP code goes here
?>
● The default file extension for PHP files is ".php".
● A PHP file normally contains HTML tags, and some PHP
scripting code.
PHP Session
● A PHP session is used to store and pass information from one
page to another temporarily (until the user closes the
website).
● PHP session technique is widely used in shopping websites
where we need to store and pass cart information e.g.
username, product code, product name, product price etc
from one page to another.
● PHP session creates a unique user id for each browser to
recognize the user and avoid conflict between multiple
browsers.
php session working
PHP session_start() function

Page no - 73 Handcrafted by Engineers | P - Priority

0 0
● PHP session_start() function is used to start the session. It
starts a new or resumes an existing session. It returns an
existing session if the session is created already. If a session is
not available, it creates and returns a new session.

Syntax
bool session_start ( void )
Example
session_start();

Q5. Using HTML and Javascript design a web page that takes one
integer as input and display total N prime numbers starting from 1 in
HTML table on web page (P4 - Appeared 1 Time) (3-7M)

Ans: // take input from the user


const higherNumber = parseInt(prompt('Enter number: '));

console.log(`The prime numbers between 1 and ${higherNumber}


are:`);

// looping from 1 to higherNumber


for (let i = 1; i <= higherNumber; i++) {
let flag = 0;

// looping through 2 to user input number


for (let j = 2; j < i; j++) {
if (i % j == 0) {
flag = 1;

Page no - 74 Handcrafted by Engineers | P - Priority

0 0
break;
}
}

// if number greater than 1 and not divisible by other numbers


if (i > 1 && flag == 0) {
console.log(i);
}
}

Q6. What is the use of “break” and “continue” statements in PHP


scripts? (P4 - Appeared 1 Time) (3-7M)

Ans: PHP Break


You have already seen the break statement used in an earlier
chapter of this tutorial. It was used to "jump out" of a switch
statement.
The break statement can also be used to jump out of a loop.
This example jumps out of the loop when x is equal to 4:
Example
<?php
for ($x = 0; $x < 10; $x++) {
if ($x == 4) {
break;
}
echo "The number is: $x <br>";
}
?>

Page no - 75 Handcrafted by Engineers | P - Priority

0 0
PHP Continue
The continue statement breaks one iteration (in the loop), if a
specified condition occurs, and continues with the next iteration in
the loop.
This example skips the value of 4:
Example
<?php
for ($x = 0; $x < 10; $x++) {
if ($x == 4) {
continue;
}
echo "The number is: $x <br>";
}
?>

Q7. Write a PHP script to read and write a text file. (P4 - Appeared
1 Time) (3-7M)

Ans :
<?php
$filename = "/home/user/guest/newfile.txt";
$file = fopen( $filename, "w" );

if( $file == false ) {


echo ( "Error in opening new file" );
exit();
}
fwrite( $file, "This is a simple test\n" );

Page no - 76 Handcrafted by Engineers | P - Priority

0 0
fclose( $file );
?>
<html>

<head>
<title>Writing a file using PHP</title>
</head>

<body>

<?php
$filename = "newfile.txt";
$file = fopen( $filename, "r" );

if( $file == false ) {


echo ( "Error in opening file" );
exit();
}

$filesize = filesize( $filename );


$filetext = fread( $file, $filesize );

fclose( $file );

echo ( "File size : $filesize bytes" );


echo ( "$filetext" );
echo("file name: $filename");
?>

Page no - 77 Handcrafted by Engineers | P - Priority

0 0
</body>
</html>

Q8. Explain DOM structure of HTML. Write JavaScript code to know


which mouse button was clicked and number of elements in form.

Ans: The HTML DOM (Document Object Model)


● The HTML DOM is an Object Model for HTML. It defines:
○ HTML elements as objects
○ Properties for all HTML elements
○ Methods for all HTML elements
○ Events for all HTML elements
● When a web page is loaded, the browser creates a Document
Object Model of the page.
● The HTML DOM model is constructed as a tree of Objects.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Mouse Event</title>
<style>
body {
text-align:center;
}
.gfg {
font-size:40px;
font-weight:bold;
color:green;

Page no - 78 Handcrafted by Engineers | P - Priority

0 0
}
</style>
</head>
<body>
<div class = "gfg">GeeksforGeeks</div>
<h2>Mouse click event</h2>
<button onclick="click(event)">Click me</button>
<p id="demo"></p>
<script>
document.onmousedown = click

// click function called


function click(event) {

// Condition to disable left click


if (event.button == 0) {
alert("Left click not
allowed");
}
}
</script>
</body>
</html>

Page no - 79 Handcrafted by Engineers | P - Priority

0 0
Q9. Design a login form using HTML & JavaScript with following
validations on username and password fields. 1. Password length
must be 6 to 12 characters 2. Username should not start with _, @ or
number. 3. Both should not be blank. (P4 - Appeared 1 Time) (3-7M)

Ans :
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;

if (uname==null || uname==""){
alert(" UserName can't be blank");
return false;
}
else if {
if (password==null || password==""){
alert(" UserName can't be blank");
return false;
}
else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>

Page no - 80 Handcrafted by Engineers | P - Priority

0 0
<form name="myform" method="post" action="abc.jsp"
onsubmit="return validateform()" >
UserName: <input type="text" name="uname"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>

Q10. Write an HTML and JavaScript program which accepts N as


input and print first N odd numbers. (P4 - Appeared 1 Time) (3-7M)

Ans:
function oddNum(number) {
for (let i = 1; i <= number; i++) {
if (i % 2 != 0) {
console.log(i);
}
}
}
oddNum(7);
//2nd solution:
function oddNumberCheck(input) {
for (let i = 1; i <= input; i += 2) {
console.log(i);
}
}
oddNumberCheck(7);

Page no - 81 Handcrafted by Engineers | P - Priority

0 0
Q11. Create an HTML Page with JavaScript which takes an Integer
number as input and tells whether the number is Prime or Not. (P4 -
Appeared 1 Time) (3-7M)

Ans :
<!DOCTYPE html>
<html>
<head>
<title>
Check a number is Prime or
not using JavaScript
</title>

<script type="text/javascript">

// Function to check prime number


function p() {

var n, i, flag = true;

// Getting the value form text


// field using DOM
n = document.myform.n.value;
n = parseInt(n)
for(i = 2; i <= n - 1; i++)
if (n % i == 0) {
flag = false;
break;

Page no - 82 Handcrafted by Engineers | P - Priority

0 0
}

// Check and display alert message


if (flag == true)
alert(n + " is prime");
else
alert(n + " is not prime");
}
</script>
</head>

<body>
<center>
<h1>GeeksforGeeks</h1>

<h4>check number is prime or not</h4>

<hr color="Green">

<form name="myform">
Enter the number:
<input type="text" name=n value="">

<br><br>

<input type="button" value="Check"


onClick="p()">
<br>
</form>

Page no - 83 Handcrafted by Engineers | P - Priority

0 0
</center>
</body>

</html>

Q12. Write a PHP program to print the following pattern:


1
01
101
0101
10101 (P4 - Appeared 1 Time) (3-7M)

Ans :
<?php
for($i=1; $i<=5; $i++)
{
for($j=$i; $j>=1; $j--)
echo $j % 2;
echo "<br>";
}
?>

Page no - 84 Handcrafted by Engineers | P - Priority

0 0
MODULE-5

Q1. Explain cookies in PHP with examples. (P4 - Appeared 1 Time)


(3-7M)

Ans : A cookie is often used to identify a user.


● A cookie is a small file that the server embeds on the user's
computer.
● Each time the same computer requests a page with a
browser, it will send the cookie too.
● With PHP, you can both create and retrieve cookie values.
● A cookie is created with the setcookie() function.
Syntax
setcookie(name, value, expire, path, domain, secure,
httponly);
● Only the name parameter is required. All other parameters
are optional.
● The following example creates a cookie named "user" with the
value "John Doe". The cookie will expire after 30 days (86400 *
30). The "/" means that the cookie is available on the entire
website (otherwise, select the directory you prefer).
● We then retrieve the value of the cookie "user" (using the
global variable $_COOKIE). We also use the isset() function to
find out if the cookie is set:
Example
<?php
$cookie_name = "user";

Page no - 85 Handcrafted by Engineers | P - Priority

0 0
$cookie_value = "John Doe";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/");
// 86400 = 1 day
?>
<html>
<body>

<?php
if(!isset($_COOKIE[$cookie_name])) {
echo "Cookie named '" . $cookie_name . "' is not set!";
} else {
echo "Cookie '" . $cookie_name . "' is set!<br>";
echo "Value is: " . $_COOKIE[$cookie_name];
}
?>

</body>
</html>

Q2. What is XML? Give purpose and list its features. (P4 -
Appeared 1 Time) (3-7M)

Ans : XML is abbreviation for eXtensible Markup Language whereas


HTML stands for Hypertext Markup Language.
● XML mainly focuses on transfer of data while HTML is focused
on presentation of the data.
● XML is content driven . whereas HTML is format driven ..
● XML is Case sensitive while HTML is Case insensitive.

Page no - 86 Handcrafted by Engineers | P - Priority

0 0
● XML provides namespaces support while HTML doesn't provide
namespaces support.
● XML is strict for closing tags while HTML is not strict.
● XML tags are extensible whereas HTML has limited tags.
● XML tags are not predefined whereas HTML has predefined
tags.

Q3. What PHP can do with the header() function? (P4 - Appeared
1 Time) (3-7M)

Ans : Definition and Usage


● The header() function sends a raw HTTP header to a client.
● It is important to notice that the header() function must be
called before any actual output is sent!
Syntax
● header(header, replace, http_response_code)
Parameter Values

Parameter Description

header Required. Specifies the header string to send

replace Optional. Indicates whether the header should


replace a previous similar header or add a new
header of the same type. Default is TRUE (will
replace). FALSE allows multiple headers of the same
type

Page no - 87 Handcrafted by Engineers | P - Priority

0 0
http_respon Optional. Forces the HTTP response code to
se_code the specified value

Example
Send three HTTP headers to prevent page caching:
<?php
// Date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache");
header("Pragma: no-cache");
?>

<html>
<body>

Page no - 88 Handcrafted by Engineers | P - Priority

0 0
MODULE-6

Q1. Explain index and associative arrays in PHP. (P4 - Appeared 1

Time) (3-7M)

Ans : Indexed arrays - Arrays with a numeric index


● Associative arrays - Arrays with named keys
PHP Indexed Arrays
There are two ways to create indexed arrays:
The index can be assigned automatically (index always starts at 0),
like this:
$cars = array("Volvo", "BMW", "Toyota");
or the index can be assigned manually:
$cars[0] = "Volvo";
$cars[1] = "BMW";
$cars[2] = "Toyota";

The following example creates an indexed array named $cars,


assigns three elements to it, and then prints a text containing the
array values:

Example
<?php
$cars = array("Volvo", "BMW", "Toyota");
echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
?>

Page no - 89 Handcrafted by Engineers | P - Priority

0 0
PHP Associative Arrays
Associative arrays are arrays that use named keys that you assign to
them.
There are two ways to create an associative array:

$age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");


or:
$age['Peter'] = "35";
$age['Ben'] = "37";
$age['Joe'] = "43";

The named keys can then be used in a script:


Example
<?php
$age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");
echo "Peter is " . $age['Peter'] . " years old.";
?>

Q2. Write PHP code to read data from a text file and display it in
the browser. (P4 - Appeared 1 Time) (3-7M)

Ans:
<html>
<body>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>"
method="post" enctype="multipart/form-data">
<input type="file" name="file" size="60" />
<input type="submit" value="Read Contents" />

Page no - 90 Handcrafted by Engineers | P - Priority

0 0
</form>
</body>
</html>

<?php
if ($_FILES) {
//Checking if file is selected or not
if ($_FILES['file']['name'] != "") {

//Checking if the file is plain text or not


if (isset($_FILES) && $_FILES['file']['type'] != 'text/plain') {
echo "<span>File could not be accepted ! Please upload any
'*.txt' file.</span>";
exit();
}
echo "<center><span id='Content'>Contents of
".$_FILES['file']['name']." File</span></center>";

//Getting and storing the temporary file name of the uploaded file
$fileName = $_FILES['file']['tmp_name'];

//Throw an error message if the file could not be open


$file = fopen($fileName,"r") or exit("Unable to open file!");

// Reading a .txt file line by line


while(!feof($file)) {
echo fgets($file). "";
}

Page no - 91 Handcrafted by Engineers | P - Priority

0 0
//Reading a .txt file character by character
while(!feof($file)) {
echo fgetc($file);
}
fclose($file);
} else {
if (isset($_FILES) && $_FILES['file']['type'] == '')
echo "<span>Please Choose a file by click on 'Browse' or 'Choose
File' button.</span>";
}
}
?>

Q3. Explain database connectivity in PHP with examples. (P4 -


Appeared 1 Time) (3-7M)

Ans: Opening Database Connection


● PHP provides a mysql_connect function to open a database
connection.
● This function takes five parameters and returns a MySQL link
identifier on success, or FALSE on failure.
Syntax
connection
mysql_connect(server,user,password,new_link,client_flag);
Example
Try out following example to open and close a database connection

<?php

Page no - 92 Handcrafted by Engineers | P - Priority

0 0
$dbhost = 'localhost:3036';
$dbuser = 'guest';
$dbpass = 'guest123';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);

if(! $conn ) {
die('Could not connect: ' . mysql_error());
}

echo 'Connected successfully';


mysql_close($conn);
?>

Q3. Write a web application code using PHP, HTML and MySql for
Employees that stores employee’s id, name, department,
designation, etc. in a database. Create proper GUI including buttons
that run separate .php files for each database operation like insert,
update, delete etc. (P4 - Appeared 1 Time) (3-7M)

Ans : Index.php :
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<link href = "registration.css" type = "text/css" rel = "stylesheet" />
<h2>Sign Up</h2>

Page no - 93 Handcrafted by Engineers | P - Priority

0 0
<form name = "form1" action="modified.php" method = "post"
enctype = "multipart/form-data" >
<div class = "container">
<div class = "form_group">
<label>First Name:</label>
<input type = "text" name = "fname" value = "" required/>
</div>
<div class = "form_group">
<label>Middle Name:</label>
<input type = "text" name = "mname" value = "" required />
</div>
<div class = "form_group">
<label>Last Name:</label>
<input type = "text" name = "lname" value = "" required/>
</div>
<div class = "form_group">
<label>Password:</label>
<input type = "password" name = "pwd" value = ""
required/>
</div>
</div>
</form>
</body>
</html>

Style.css
.container {
max-width: 1350px;
width: 100%;

Page no - 94 Handcrafted by Engineers | P - Priority

0 0
margin: 50px;
height: auto;
display: block;
}

body {
color: #8A2BE2;
font-size: 20px;
font-family: Verdana, Arial, Helvetica, monospace;
background-color: #F0E8A0;
}
h2 {
text-align: center;
}
.form_group {
padding: 10px;
;
display: block;
}
label {
float: left;
padding-right: 50px;
line-height: 10%;
display: block;
width: 208px;
}

connection.php
<?php

Page no - 95 Handcrafted by Engineers | P - Priority

0 0
$servername = "localhost";
$username = "root";
$password = "";
$conn = mysql_connect ($servername , $username , $password)
or die("unable to connect to host");
$sql = mysql_select_db ('test',$conn) or die("unable to connect
to database");
?>
Listing.php
<?php

include "connection.php";

if(isset($_GET['id'])){
$sql = "delete from registration where id = '".$_GET['id']."'";
$result = mysql_query($sql);
}

$sql = "select * from registration";


$result = mysql_query($sql);
?>
<html>
<body>
<table width = "100%" border = "1" cellspacing = "1" cellpadding =
"1">
<tr>
<td>Id</td>
<td>First Name</td>
<td>Middle Name</td>

Page no - 96 Handcrafted by Engineers | P - Priority

0 0
<td>Last Name</td>
<td>Password</td>
<td>Confirm Password</td>
<td>Email</td>
<td>Contact No.</td>
<td>Gender</td>
<td>Address</td>
<td>Pincode</td>
<td>City</td>
<td>Country</td>
<td>Skills</td>
<td>Files</td>
<td colspan = "2">Action</td>
</tr>
</table>
</body>
</html>

Display.php

<?php
while($row = mysql_fetch_object($result)){
?>
<tr>
<td>
<?php echo $row->id;?>
</td>
<td>
<?php echo $row->fname;?>

Page no - 97 Handcrafted by Engineers | P - Priority

0 0
</td>
<td>
<?php echo $row->mname;?>
</td>
<td>
<?php echo $row->lname;?>
</td>
<td>
<?php echo $row->pwd;?>
</td>
<td>
<?php echo $row->cnf;?>
</td>
<td>
<?php echo $row->mail;?>
</td>
<td>
<?php echo $row->number;?>
</td>
<td>G
<?php echo $row->sex;?>
</td>
<td>
<?php echo $row->address;?>
</td>
<td>
<?php echo $row->code;?>
</td>
<td>

Page no - 98 Handcrafted by Engineers | P - Priority

0 0
<?php echo $row->city;?>
</td>
<td>
<?php echo $row->country;?>
</td>
<td>
<?php echo $row->skills;?>
</td>
<td>
<?php echo $row->attach_file;?>
</td>
<td> <a href="listing.php?id =
<?php echo $row->id;?>" onclick="return confirm('Are You
Sure')">Delete
</a> | <a href="index.php?id =
<?php echo $row->id;?>" onclick="return confirm('Are You
Sure')">Edit
</a> </td>
<tr>
<? php } ?>

Page no - 99 Handcrafted by Engineers | P - Priority

0 0
Q4. Explain cookies in PHP with proper examples. Write a web
application code using PHP, HTML and MySql for Students that stores
student's enrolment no., name, semester, gender, qualification, etc.
in the database. Create a proper GUI including buttons that run
separate .php files for each database operation like insert, update,
delete etc. (P4 - Appeared 1 Time) (3-7M)

Ans: A cookie is often used to identify a user. A cookie is a small file


that the server embeds on the user's computer. Each time the same
computer requests a page with a browser, it will send the cookie too.
With PHP, you can both create and retrieve cookie values.

Create Cookies With PHP


A cookie is created with the setcookie() function.
Syntax
setcookie(name, value, expire, path, domain, secure, httponly);
Only the name parameter is required. All other parameters are
optional.

PHP Create/Retrieve a Cookie


The following example creates a cookie named "user" with the value
"John Doe". The cookie will expire after 30 days (86400 * 30). The "/"
means that the cookie is available on the entire website (otherwise,
select the directory you prefer).
We then retrieve the value of the cookie "user" (using the global
variable $_COOKIE). We also use the isset() function to find out if the
cookie is set:
Example

Page no - 100 Handcrafted by Engineers | P - Priority

0 0
<?php
$cookie_name = "user";
$cookie_value = "John Doe";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/");
// 86400 = 1 day
?>
<html>
<body>

<?php
if(!isset($_COOKIE[$cookie_name])) {
echo "Cookie named '" . $cookie_name . "' is not set!";
} else {
echo "Cookie '" . $cookie_name . "' is set!<br>";
echo "Value is: " . $_COOKIE[$cookie_name];
}
?>

</body>
</html>

Page no - 101 Handcrafted by Engineers | P - Priority

0 0
MODULE-7

Q1. What is a Cascading Style Sheet? Compare inline, embedded


and external style sheets with examples. (P4 - Appeared 1 Time)
(3-7M)

Ans: 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
There are three ways of inserting a style sheet:
● External CSS
● Internal CSS
● Inline CSS

External CSS
● With an external style sheet, you can change the look of an
entire website by changing just one file!
● Each HTML page must include a reference to the external style
sheet file inside the <link> element, inside the head section.

Example
External styles are defined within the <link> element, inside the
<head> section of an HTML page:
<!DOCTYPE html>

Page no - 102 Handcrafted by Engineers | P - Priority

0 0
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

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

</body>
</html>

An external style sheet can be written in any text editor, and must be
saved with a .css extension.
The external .css file should not contain any HTML tags.
Here is how the "mystyle.css" file looks:
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Internal CSS
● An internal style sheet may be used if one single HTML page
has a unique style.

Page no - 103 Handcrafted by Engineers | P - Priority

0 0
● The internal style is defined inside the <style> element, inside
the head section.
Example
Internal styles are defined within the <style> element, inside the
<head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

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

</body>
</html>
Inline CSS
● An inline style may be used to apply a unique style for a single
element.

Page no - 104 Handcrafted by Engineers | P - Priority

0 0
● To use inline styles, add the style attribute to the relevant
element. The style attribute can contain any CSS property.
Example
Inline styles are defined within the "style" attribute of the relevant
element:
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Q2. What do you mean by Meta Tags? List and Explain any three
meta tags with examples. (P4 - Appeared 1 Time) (3-7M)

Ans: The <meta> tag defines metadata about an HTML document.


● Metadata is data (information) about data.
● <meta> tags always go inside the <head> element, and are
typically used to specify character set, page description,
keywords, author of the document, and viewport
● Metadata will not be displayed on the page, but is machine
parsable.
● Metadata is used by browsers (how to display content or
reload page), search engines (keywords), and other web
services.

Page no - 105 Handcrafted by Engineers | P - Priority

0 0
Define keywords for search engines:
● <meta name="keywords" content="HTML, CSS, JavaScript">

Define a description of your web page:


● <meta name="description" content="Free Web tutorials for
HTML and CSS">
Define the author of a page:
● <meta name="author" content="John Doe">

Q3. What is Metadata? Explain with example how Metadata is


included in a document? Also show how the following can be
achieved with the help of Metadata? (P4 - Appeared 1 Time) (3-7M)

Ans: The <meta> tag defines metadata about an HTML document.


● Metadata is data (information) about data.
● <meta> tags always go inside the <head> element, and are
typically used to specify character set, page description,
keywords, author of the document, and viewport settings.
● Metadata will not be displayed on the page, but is machine
parsable.
● Metadata is used by browsers (how to display content or
reload page), search engines (keywords), and other web
services.
● Describe metadata within an HTML document:

<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">

Page no - 106 Handcrafted by Engineers | P - Priority

0 0
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head>

Q4. Design a login form with username and password option


using HTML and JavaScript. Perform following validations. - Module
no. 3 | (7M) (P4 - Appeared 1 Time)
(i) Username field: minimum length 6 characters, it should not have
any special character or digits other than _
(ii) Password field: minimum length 8 characters and maximum
length 12 characters, it must contain at least one digit and at least
one special character from the set {*,#,_} (P4 - Appeared 1 Time)
(3-7M)
Ans : Index.html
<div class="container">
<form action="/action_page.php">
<label for="usrname">Username</label>
<input type="text" id="usrname" name="usrname" required>

<label for="psw">Password</label>
< input type="password" id="psw" name="psw"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at
least one number and one uppercase and lowercase letter, and at
least 8 or more characters" required>

<input type="submit" value="Submit">

Page no - 107 Handcrafted by Engineers | P - Priority

0 0
</form>
</div>

<div id="message">
<h3>Password must contain the following:</h3>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b>
letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>

JavaScript
<script>
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");

// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
document.getElementById("message").style.display = "block";
}

// When the user clicks outside of the password field, hide the
message box
myInput.onblur = function() {
document.getElementById("message").style.display = "none";

Page no - 108 Handcrafted by Engineers | P - Priority

0 0
}

// When the user starts to type something inside the password field
myInput.onkeyup = function() {
// Validate lowercase letters
var lowerCaseLetters = /[a-z]/g;
if(myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("invalid");
letter.classList.add("valid");
} else {
letter.classList.remove("valid");
letter.classList.add("invalid");
}

// Validate capital letters


var upperCaseLetters = /[A-Z]/g;
if(myInput.value.match(upperCaseLetters)) {
capital.classList.remove("invalid");
capital.classList.add("valid");
} else {
capital.classList.remove("valid");
capital.classList.add("invalid");
}

// Validate numbers
var numbers = /[0-9]/g;
if(myInput.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");

Page no - 109 Handcrafted by Engineers | P - Priority

0 0
} else {
number.classList.remove("valid");
number.classList.add("invalid");
}

// Validate length
if(myInput.value.length >= 8) {
length.classList.remove("invalid");
length.classList.add("valid");
} else {
length.classList.remove("valid");
length.classList.add("invalid");
}
}
</script>

Q5. What is the use of the $_REQUEST[] array in PHP? (P4 -

Appeared 1 Time) (3-7M)

Ans :PHP $_REQUEST is a PHP super global variable which is used to


collect data after submitting an HTML form.
● The example below shows a form with an input field and a
submit button. When a user submits the data by clicking on
"Submit", the form data is sent to the file specified in the action
attribute of the <form> tag. In this example, we point to this file
itself for processing form data. If you wish to use another PHP
file to process form data, replace that with the filename of

Page no - 110 Handcrafted by Engineers | P - Priority

0 0
your choice. Then, we can use the super global variable
$_REQUEST to collect the value of the input field:

Example
<html>
<body>

<form method="post" action="<?php echo


$_SERVER['PHP_SELF'];?>">
Name: <input type="text" name="fname">
<input type="submit">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// collect value of input field
$name = $_REQUEST['fname'];
if (empty($name)) {
echo "Name is empty";
} else {
echo $name;
}
}
?>

Page no - 111 Handcrafted by Engineers | P - Priority

0 0
Q6. Difference between DTD and XML Schema.(P4 - Appeared 1
Time) (3-7M)

Ans :

DTD XSD

DTD are the declarations that XSD describes the elements in a


define a document type for XML document.
SGML.

It doesn’t support namespace. It supports namespace.

It is comparatively harder than It is relatively simpler than DTD.


XSD.

It doesn’t support datatypes. It supports data types.

SGML syntax is used for DTD. XML is used for writing XSD.

It is not extensible in nature. It is extensible in nature.

It doesn’t give us much control It gives us more control on the


on the structure of XML structure of XML documents.
documents.

Page no - 112 Handcrafted by Engineers | P - Priority

0 0
Q7. Compare and contrast between HTML and XML.(P4 -
Appeared 1 Time) (3-7M)

Ans :

HTML XML

Is a markup language. Is a standard markup language that


defines other markup languages.

Is not case sensitive. Is case sensitive.

Doubles up as a Is not a presentation language nor a


presentation language. programming language.

Has its own predefined Tags are defined as per the need of
tags. the programmer. XML is flexible as
tags can be defined when needed.

Closing tags are not Closing tags are used mandatorily.


necessarily needed.

White spaces are not Capable of preserving white spaces.


preserved.

Showcases the design of a Enables transportation of data from


web page in the way it is database and related applications.
displayed on client-side.

Page no - 113 Handcrafted by Engineers | P - Priority

0 0
Used for displaying data. Used for transferring data.

Static in nature. Dynamic in nature.

Offers native support. With the help of elements and


attributes, objects are expressed by
conventions.

Null value is natively Xsi:nil on elements is needed in an


recognised. XML instance document.

Extra application code is XML DOM application and


not needed to parse text. implementation code is needed to
map text back into JavaScript
objects.

Page no - 114 Handcrafted by Engineers | P - Priority

0 0
OTHER IMPORTANT QUESTION

MODULE 2
Q2. Write HTML and CSS code for the following: (i) set the
background color for the active link states to "yellow". (ii) Set the list
style for unordered lists to "square". (iii) Set "paper.gif" as the
background image of the page. (P4 - Appeared 1 Time) (3-7M)

Q16. Design a form using HTML and JavaScript that asks the user
to enter his date of birth and on clicking the Calculate Button it calls
the function that calculates how many days are left in your birthday?

MODULE 5
Q4. What is Metadata? Explain with example how Metadata is
included in a document? Also show how the following can be
achieved with the help of Metadata? (i) Stop the page from being
listed. (ii) Set an expiration date (iii) Stop the browser from caching
a page. (iv) Give a context for date so that it can take format
DD-MM-YYYY

MODULE 6
Q1. Write a PHP program to store user registration (user-name,
address, Date of Birth, age, pan card, gender) with mysql database.
Write a PHP script to store user registration details (user-name,

Page no - 115 Handcrafted by Engineers | P - Priority

0 0
address, date of birth, age, pan card, gender) with MySQL database.
(P4 - Appeared 1 Time) (3-7M)

MODULE 7
Q4. Write a form to collect details of a user such as name,
address, radio button to choose the subject of the book he wants to
buy, Dropdown to choose favorite author and comments for the last
book he read. (P4 - Appeared 1 Time) (3-7M)

Page no - 116 Handcrafted by Engineers | P - Priority

0 0

You might also like