Web Technology KCS 602 ST-1 Solution
Q1. (a) Discuss the application of XML. Also compare XSD and DTD.
Ans: Extensible Markup Language (XML) is the underlying technology in thousands
of applications, ranging from common productivity tools like word processing to book
publishing software and even complex application configuration systems.
Data transfer
You can use XML to transfer data between two systems that store the same data in
different formats. For example, your website stores dates in MM/DD/YYYY format,
but your accounting system stores dates in DD/MM/YYYY format. You can transfer
the data from the website to the accounting system by using XML. Your developers
can write code that automatically converts the following:
Website data to XML format
XML data to accounting system data
Accounting system data back to XML format
XML data back to website data
Web applications
Documentation
Data type
Difference between XSD and DTD
S. DTD XSD
No.
1) DTD stands for Document XSD stands for XML Schema Definition.
Type Definition.
2) DTDs are derived XSDs are written in XML.
from SGML syntax.
3) DTD doesn't support XSD supports datatypes for elements
datatypes. and attributes.
4) DTD doesn't support XSD supports namespace.
namespace.
5) DTD doesn't define order for XSD defines order for child elements.
child elements.
6) DTD is not extensible. XSD is extensible.
7) DTD is not simple to learn. XSD is simple to learn because you
don't need to learn new language.
8) DTD provides less control on XSD provides more control on XML
XML structure. structure.
Q1. (b) Describe CSS box model with block diagram. Explain the difference
between id and class selector in css?
Ans: The CSS Box Model
In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It
consists of: content, padding, borders and margins. The image below illustrates the
box model:
Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space
between elements.
Example
Demonstration of the box model:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Difference between id and class selector in css
The difference between ID and Class is. ID is unique. Throughout the html page,
there will be only one ID attribute with a unique name. That id name cannot be
repeated on the HTML page, whereas the class is not unique. We can use the same
class name in multiple elements and several classes on the same element.
ID Class
Assignment of id attribute to the HTML Assignment of class attribute to number
tag to apply styling or interactivity to a of HTML tag to apply styling or interactivity
specific HTML tag to a group of HTML tag
Id selector uses ID name to select It uses the CSS class name to select
elements elements.
A selector in CSS that styles the A selector in CSS that styles the selected
elements with a specified id elements with specified class.
Id selector uses # character The class selector uses “.” character.
Syntax is #id{ css styling;} Syntax is .class{ css styling;}
Q2.(a) What are HTML entities? Explain with Example. What is the difference
between cell padding and cell spacing?
Ans: Entities are character sequences placed in the text of an HTML document to
print out reserved characters which may otherwise be interpreted as HTML code by
a browser, or other special characters that would be difficult to generate with a
typical keyboard. In fact, using reference numbers, an entity can represent any
Unicode character. When parsing the HTML, a browser replaces the entity’s
character sequence with the character it represents.
Syntax
Entities are case-sensitive and can take one of three forms.
The first form references an entity by name:
&name;
The second form references it by the decimal Unicode number:
&#number;
The third represents it with the hexadecimal Unicode number, often with leading
zeros:
&#xnumber;
So the copyright entity (©) can be represented as ©, © or ©.
Difference between Cellpadding and Cellspacing
Cellpadding: Cellpadding specifies the space between the border of a table cell and
its contents (i.e) it defines the whitespace between the cell edge and the content of
the cell.
Syntax:
<table cellpadding="value" >.....</table>
where, value determines the padding
(space between the border of a table and its content)
Cellspacing: Cellspacing specifies the space between cells (i.e) it defines the
whitespace between the edges of the adjacent cells.
Syntax:
<table cellspacing="value" >.....</table>
where, value determines the padding
(space between adjacent cells)
Q2.(b) Discuss about the property used for image scroll controlling? What are
pseudo classes? Explain with example.
Ans: To set the scrolling of an image in the background, use the background-
attachment property.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/[Link]');
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment:scroll;
}.
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>
pseudo-class is used to define a special state of an element.
For example, it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus
Q3. (a) (i) What is XML?Create a valid XML document of 10 students of third
year. Add their roll numbers, marks obtained in 5 subjects, total marks and
percentage.
Ans: XML is a software- and hardware-independent tool for storing and transporting
data.
XML stands for eXtensible Markup Language
XML is a markup language much like HTML
XML was designed to store and transport data
XML was designed to be self-descriptive
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE students SYSTEM “[Link]”>
<students>
<student>
<roll_number>1</roll_number>
<name>John Doe</name>
<subject1>90</subject1>
<subject2>80</subject2>
<subject3>70</subject3>
<subject4>60</subject4>
<subject5>50</subject5>
<total_marks>450</total_marks>
<percentage>90%</percentage>
</student>
<student>
<roll_number>2</roll_number>
<name>Jane Doe</name>
<subject1>85</subject1>
<subject2>75</subject2>
<subject3>65</subject3>
<subject4>55</subject4>
<subject5>45</subject5>
<total_marks>425</total_marks>
<percentage>85%</percentage>
</student>
</students>
[Link] file
<! ELEMENT students (student+)>
<! ELEMENT student(roll_number, name, subject1, subject2, subject3, subject4,
subject5, total_marks, percentage>
<! ELEMENT roll_number (#PCDATA)>
<! ELEMENT name (#PCDATA)>
<! ELEMENT subject1 (#PCDATA)>
<! ELEMENT subject2 (#PCDATA)>
<! ELEMENT subject3 (#PCDATA)>
<! ELEMENT subject4 (#PCDATA)>
<! ELEMENT subject5 (#PCDATA)>
<! ELEMENT total_marks (#PCDATA)>
<! ELEMENT percentage (#PCDATA)>
(ii) Create a CSS rule that makes all the text 2 times larger than the base font of
the system. Mention how many ways can you integrate CSS on a web page?
Ans: CSS rule that makes all the text 2 times larger than the base font of the system:
body {
font-size: 2em;
}
There are three ways to integrate CSS on a web page:
Inline CSS: Inline CSS is the most basic way to add CSS to a web page. It is done
by adding the style attribute to an HTML element. The value of the style attribute is a
CSS declaration. For example, the following code would make the text in the p
element 2 times larger than the base font size:
Code
<p style="font-size: 2em;">This is some text.</p>
Internal CSS: Internal CSS is a more efficient way to add CSS to a web page. It is
done by adding a <style> element to the <head> section of the HTML document.
The <style> element contains all the CSS declarations for the page. For example,
the following code would make all the text on the page 2 times larger than the base
font size:
Code
<head>
<style>
body {
font-size: 2em;
}
</style>
</head>
External CSS: External CSS is the most efficient way to add CSS to a web page. It is
done by creating a separate CSS file and linking to it in the <head> section of the
HTML document. For example, the following code would link to a CSS file called
[Link]:
Code
<head>
<link rel="stylesheet" href="[Link]">
</head>
3 (b) Create an HTML page names “[Link]” to display your class time table.
(i) Provide the title as Time Table.
(ii) Provide various color options to the cells(Highlight the lab hours and
elective hours with different colors.)
(Note: Create time table only for 2 days)
Ans-
[Link]
<html>
<head>
<title>time table</title>
</head>
<body bgcolor="skyblue">
<table border="2" cellspacing="3" align="center">
<caption><H1><FONT COLOR="DARKCYAN"><CENTER>COLLEGE TIME
TABLE</FONT></H1></caption>
<tr>
<td>
<td>8:30-9:30
<td>9:30-10:30
<td>10:3-11:30
<td>11:30-12:30
<td>12:30-2:00
<td>2:00-3:00
<td>3:00-4:00
<td>4:00-5:00
</tr>
<tr>
<td>MONDAY
<td>---<td><font color="blue">SUB1<br>
<td><font color="pink">SUB2<br>
<td><font color="red">SUB3<br>
<td rowspan="2">L<br>U<br>N<br>C<br>H
<td><font color="maroon">SUB4<br>
<td><font color="brown">SUB5<br>
<td>counselling class
</tr>
<tr>
<td>TUESDAY
<td><font color="blue">SUB1<br>
<td><font color="red">SUB2<br>
<td><font color="pink">SUB3<br>
<td>---
<td colspan="2"><font color="orange">Sub Lab<BR>
<td>library
</tr>
Output-
4.(a) Design a JavaScript program to display the current day and time in the
following format.
Today is: Monday.
Current time is : 11 AM : 50 : 58
Solution:
<!DOCTYPE html>
<html>
<head>
<script>
function displayDateTime() {
var date = new Date();
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday",
"Saturday"];
var day = days[[Link]()];
var hours = [Link]();
var minutes = [Link]();
var seconds = [Link]();
var ampm = hours >= 12 ? "PM" : "AM";
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
var currentTime = hours + " " + ampm + " : " + minutes + " : " + seconds;
[Link]("day").innerHTML = "Today is: " + day + ".";
[Link]("time").innerHTML = "Current time is: " + currentTime;
}
</script>
</head>
<body onload="displayDateTime();">
<p id="day"></p>
<p id="time"></p>
</body>
</html>
4.(b) What are scripting languages and why java script is used? Write a
JavaScript function for validating form data like Mandatory Fields and Email
field?
Solution:
A script or scripting language is a computer language that does not need the
compilation step and is rather interpreted one by one at runtime. It is where the script
is written and where instructions for a run-time environment are written.
Scripts are often utilized to create dynamic web applications nowadays because they
are linked to web development. Server-Side Scripting Languages and Client-Side
Scripting Languages are the two types of scripting languages.
Python, PHP, and Perl are examples of server-side scripting languages.
JavaScript is a light-weight object-oriented programming language that is used by
several websites for scripting the webpages. JavaScript enables dynamic interactivity
on websites when it is applied to an HTML document.
JavaScript helps the users to build modern web applications to interact directly without
reloading the page every time. JavaScript is commonly used to dynamically
modify HTML and CSS to update a user interface by the DOM API. It is mainly used
in web applications.
JavaScript function for validating form data:
<script>
function validateform(){
var name=[Link];
var password=[Link];
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if([Link]<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="[Link]" onsubmit="return
validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
JavaScript function for validating email
<script>
function validateemail()
{
var x=[Link];
var atposition=[Link]("@");
var dotposition=[Link](".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=[Link]){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n
dotposition:"+dotposition);
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="#" onsubmit="return
validateemail();">
Email: <input type="text" name="email"><br/>
<input type="submit" value="register">
</form>
Question 5:
(a) Explain the working of AJAX along with its applications. Mention a suitable
example.
Solution:
AJAX = Asynchronous JavaScript And XML. AJAX is not a programming language.
AJAX allows web pages to be updated asynchronously by exchanging data with a
web server behind the scenes. This means that it is possible to update parts of a
web page, without reloading the whole page.
AJAX just uses a combination of:
A browser built-in XMLHttpRequest object (to request data from a web server)
JavaScript and HTML DOM (to display or use the data)
AJAX is a misleading name. AJAX applications might use XML to transport data, but
it is equally common to transport data as plain text or JSON text.
Working of AJAX:
AJAX communicates with the server using XMLHttpRequest object. Let's try to
understand the flow of ajax or how ajax works by the image displayed below.
As we can see in the above example, XMLHttpRequest object plays an important
role.
1 User sends a request from the UI and a javascript call goes to
XMLHttpRequest object.
2 HTTP Request is sent to the server by XMLHttpRequest object.
3 Server interacts with the database using JSP, PHP, Servlet, [Link] etc.
4 Data is retrieved.
5 Server sends XML data or JSON data to the XMLHttpRequest callback
function.
6 HTML and CSS data is displayed on the browser.
Applications of AJAX:
Updating a webpage without reloading the page.
Requesting data from the server after the page has been loaded.
Receiving data from the server after the page has been loaded.
Sending data to the server in the background without disturbing UI or other
processes.
(b) Explain and demonstrate 5 different types of objects in javascript with
example.
4. User-defined Objects in JavaScript
User-defined objects in JavaScript are custom objects created by the programmer
for specific programming tasks. They are associated with properties and methods.
In JavaScript, there are three ways to create user-defined objects to manage
enormous tasks and data sets within an application. They are:
By object literal
By creating an instance of Object directly (using new keyword)
Using object constructor