WP Notes Web Programming Compress
WP Notes Web Programming Compress
WP Notes Web Programming Compress
Brainheaters Notes
WP | COMPUTER Semester-6
0 0
BH.Index
(Learn as per the Priority to prepare smartly)
1. Introduction to WEB 6 2
2. Web Design 5 26
0 0
MODULE-1
Q1. Explain RSS elements with examples. What are the uses of RSS?
(P4 - Appeared 1 Time) (3-7M)
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.
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.
0 0
Q2. Explain the need and working of web services with diagrams.
(P4 - Appeared 1 Time) (3-7M)
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.
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.
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.
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.
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.
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.
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.
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.
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.
0 0
Q8. Differentiate between “ID” and “Class” using suitable
examples. (P4 - Appeared 1 Time) (3-7M)
No KEY ID CLASS
.
Example of Id vs Class
Id.html
<!DOCTYPE html>
<html>
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>
0 0
</head>
<body style="text-align:center">
<h1>Get element by class</h1>
<p class="classDemo">Demo for class selector</p>
</body>
</html>
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.
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.
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.
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.
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
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.
0 0
Q14. Explain the points which should be considered for planning a
website. (P4 - Appeared 1 Time) (3-7M)
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.
0 0
Q15. List and explain various list tags in HTML with example (P4 -
Appeared 1 Time) (3-7M)
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>
0 0
Example:
<html>
<head>
<title>Title of your web page</title>
</head>
<body>HTML web page contents </body>
</html>
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.
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.
0 0
MODULE-2
<body>
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;
0 0
}
</style>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
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;
}
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>
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
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;
}
}
}
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)
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>
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();
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 {
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>
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
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('<')"/>
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>
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>
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>
0 0
Q5. What is XML? Write XML file to store personal information of
student (P4 - Appeared 1 Time) (3-7M)
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>
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>
(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.
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.
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.
0 0
Q7. Explain XSL and XSLT with examples. (P4 - Appeared 1 Time)
(3-7M)
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
0 0
XSL uses XSLT which uses XPath
XSL Transformations
An Example: Transformation
<xsl:template match="Title">
<H1>
<xsl:apply-templates/>
</H1>
</xsl:template>
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)
Q9. Differentiate following. (1). HTML and XHTML (2). GET and POST
(P4 - Appeared 1 Time) (3-7M)
Ans :
0 0
It was developed by W3C
It was developed by Tim
2. i.e World Wide Web
Berners-Lee.
Consortium.
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”>.
GET POST
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)
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>
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%;
}
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%;
}
}
(3-7M)
Ans : <Html>
<head>
<title>
Registration Page
</title>
</head>
<body bgcolor="Lightskyblue">
<br>
<br>
<form>
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
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>
0 0
Q13. Explain the Document Object Model with example (P4 -
Appeared 1 Time) (3-7M)
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:
0 0
Q14. XHTML is a stricter language than HTML. Justify. (P4 -
Appeared 1 Time) (3-7M)
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.
March 1 2
3 4
Ans :
<!DOCTYPE html>
<html>
<style>
table, th,td{
border:2px solid black;
}
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>
0 0
MODULE-3
Q1. Write Well formed XML file to store student information (P4 -
Appeared 1 Time) (3-7M)
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>
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)
0 0
Q3. Differentiate client side scripting and server side scripting.
(P4 - Appeared 1 Time) (3-7M)
Ans :
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.
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">
<!--
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>
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)
0 0
MODULE-4
Q1. Explain sessions and cookies in PHP with proper examples. (P4
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.
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);
0 0
?>
Syntax
get_browser(user_agent,return_array)
Parameter Values
Parameter Description
Technical Details
0 0
Q4. How to write in PHP? Explain session in PHP with example (P4 -
Appeared 1 Time) (3-7M)
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)
0 0
break;
}
}
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" );
0 0
fclose( $file );
?>
<html>
<head>
<title>Writing a file using PHP</title>
</head>
<body>
<?php
$filename = "newfile.txt";
$file = fopen( $filename, "r" );
fclose( $file );
0 0
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Mouse Event</title>
<style>
body {
text-align:center;
}
.gfg {
font-size:40px;
font-weight:bold;
color:green;
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
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>
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>
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);
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">
0 0
}
<body>
<center>
<h1>GeeksforGeeks</h1>
<hr color="Green">
<form name="myform">
Enter the number:
<input type="text" name=n value="">
<br><br>
0 0
</center>
</body>
</html>
Ans :
<?php
for($i=1; $i<=5; $i++)
{
for($j=$i; $j>=1; $j--)
echo $j % 2;
echo "<br>";
}
?>
0 0
MODULE-5
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)
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)
Parameter Description
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>
0 0
MODULE-6
Time) (3-7M)
Example
<?php
$cars = array("Volvo", "BMW", "Toyota");
echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
?>
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:
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" />
0 0
</form>
</body>
</html>
<?php
if ($_FILES) {
//Checking if file is selected or not
if ($_FILES['file']['name'] != "") {
//Getting and storing the temporary file name of the uploaded file
$fileName = $_FILES['file']['tmp_name'];
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>";
}
}
?>
0 0
$dbhost = 'localhost:3036';
$dbuser = 'guest';
$dbpass = 'guest123';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn ) {
die('Could not connect: ' . mysql_error());
}
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>
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%;
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
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);
}
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;?>
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>
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 } ?>
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)
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>
0 0
MODULE-7
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>
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.
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.
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>
</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)
0 0
Define keywords for search engines:
● <meta name="keywords" content="HTML, CSS, JavaScript">
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
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>
<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>
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";
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 numbers
var numbers = /[0-9]/g;
if(myInput.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
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>
0 0
your choice. Then, we can use the super global variable
$_REQUEST to collect the value of the input field:
Example
<html>
<body>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// collect value of input field
$name = $_REQUEST['fname'];
if (empty($name)) {
echo "Name is empty";
} else {
echo $name;
}
}
?>
0 0
Q6. Difference between DTD and XML Schema.(P4 - Appeared 1
Time) (3-7M)
Ans :
DTD XSD
SGML syntax is used for DTD. XML is used for writing XSD.
0 0
Q7. Compare and contrast between HTML and XML.(P4 -
Appeared 1 Time) (3-7M)
Ans :
HTML XML
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.
0 0
Used for displaying data. Used for transferring data.
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,
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)
0 0