Web Technologies 2073
Group A
Attempt any Two questions: (2x10=20)
1. Differentiate between 2-Tier, 3-Tier and n-Tier.
2-Tier Architecture
2-tier architecture is used to describe client/server systems where the client requests resources and the server responds directly to the request, using its own resources. This means that the server does not call on another application in order to provide part of the service. It runs the client processes separately from the server processes, usually on a different computer.
3-Tier Architecture
In 3-tier architecture, there is an intermediary level, meaning the architecture is generally split up between:
– A client, i.e. the computer, which requests the resources, equipped with a user interface (usually a web browser) for presentation purposes
– The application server (also called middleware), whose task it is to provide the requested resources, but by calling on another server
– The data server, which provides the application server with the data it requires.
N-Tier Architecture (multi-tier)
N-tier architecture (with N more than 3) is really 3 tier architectures in which the middle tier is split up into new tiers. The application tier is broken down into separate parts. These parts are differs from system to system. The primary advantage of N-tier architectures is that they make load balancing possible. Since the application logic is distributed between several servers, processing can then be more evenly distributed among those servers. N-tiered architectures are also more easily scalable, since only servers experiencing high demand, such as the application server, need be upgraded. The primary disadvantage of N-tier architectures is that it is also more difficult to program and test an N-tier architecture due to its increased complexity.
2. Explain the client tier with example.
3. Explain about XML and how to create HTML document with the help of XML.
XML stands for Extensible Markup Language. It is a text-based markup language derived from Standard Generalized Markup Language (SGML).
XML tags identify the data and are used to store and organize the data, rather than specifying how to display it like HTML tags, which are used to display the data.
There are three important characteristics of XML that make it useful in a variety of systems and solutions −
- XML is extensible − XML allows you to create your own self-descriptive tags, or language, that suits your application.
- XML carries the data, does not present it − XML allows you to store the data irrespective of how it will be presented.
- XML is a public standard − XML was developed by an organization called the World Wide Web Consortium (W3C) and is available as an open standard.
We can create HTML document from XML using XSLT.
XSLT (Extensible Stylesheet Language Transformations) is a language for transforming XML documents into other XML documents, or other formats such as HTML for web pages, plain text or XSL Formatting Objects, which may subsequently be converted to other formats, such as PDF, Postscript and PNG.
The original document is not changed; rather, a new document is created based on the content of an existing one. Typically, input documents are XML files, but anything from which the processor can build an XQuery and XPath Data Model can be used, such as relational database tables or geographical information system.
Creating Students.xml as:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl "href="student.xsl" ?>
<student>
<s>
<name> Jayanta </name>
<branch> CS</branch>
<age>20</age>
<city> Kathmandu </city>
</s>
<s>
<name> Sabina </name>
<branch> IT </branch>
<age> 20</age>
<city> Pokhara </city>
</s>
</student>
Now, equivalent XSLT of the above XML for rendering as a HTML document in a browser is given below:
// student.xsl
<?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>
<h1 align="center">Students' Basic Details</h1>
<table border="3" align="center" >
<tr>
<th>Name</th>
<th>Branch</th>
<th>Age</th>
<th>City</th>
</tr>
<xsl:for-each select="student/s">
<tr>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="branch"/></td>
<td><xsl:value-of select="age"/></td>
<td><xsl:value-of select="city"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Group B
Attempt any Eight questions: (8x5=40)
4. Explain with example the basic concept of cascading and inheritance in CSS.
5. What are the two traditional ways of assigning event handlers in DOM? Explain.
Event handlers refer to specific, user imitated actions within the webpage, such as the moving of your mouse over a link, the clicking on a link, or submission of a form.
The 2 traditional ways of assigning event handlers in DOM are: via HTML, or scripting. In both cases, a function or code is attached at the end, which is executed when the handler detects the specified event.
1) Via HTML, using attributes
We can define an event handler directly inside the relevant HTML tag, by embedding it as a attribute. A piece of JavaScript is also included to tell the browser to perform something when the event occurs. For example,
<a href="https://collegenote.pythonanywhere.com/" onMouseover="window.status='Click here for CSIT note';return true" onMouseout="window.status=''">CollegeNote</a>
2) Via scripting
You can also assign and set up event handlers to elements using scripting, and inside your script . This allows for the event handlers to be dynamically set up, without having to mess around with the HTML codes on the page.
When setting up event handlers for an element directly inside your script, the code to execute for the events must be defined inside a function.
E.g.
<a ID="test" href="https://collegenote.pythonanywhere.com/">CollegeNote</a>
<script type="text/javascript">
function changestatus(){
window.status="Click here for CSIT note"
return true
}
function changebackstatus(){
window.status=''
}
document.getElementById("test").onmouseover=changestatus
document.getElementById("test").onmouseout=changebackstatus
</script>
6. Explain about to charge an HTML element with the help of DOM.
7. How to transform XML documents to others forms? Explain.
XML document can be transformed into into other forms using XSLT.
XSLT (Extensible Stylesheet Language Transformations) is a language for transforming XML documents into other XML documents, or other formats such as HTML for web pages, plain text or XSL Formatting Objects, which may subsequently be converted to other formats, such as PDF, Postscript and PNG.
The original document is not changed; rather, a new document is created based on the content of an existing one. Typically, input documents are XML files, but anything from which the processor can build an XQuery and XPath Data Model can be used, such as relational database tables or geographical information system.
E.g.
Creating Students.xml as:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl "href="student.xsl" ?>
<student>
<s>
<name> Jayanta </name>
<branch> CS</branch>
<age>20</age>
<city> Kathmandu </city>
</s>
<s>
<name> Manoj </name>
<branch> IT </branch>
<age> 20</age>
<city> Pokhara </city>
</s>
</student>
Now, equivalent XSLT of the above XML for rendering as a HTML document in a browser is given below:
// student.xsl
<?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>
<h1 align="center">Students' Basic Details</h1>
<table border="3" align="center" >
<tr>
<th>Name</th>
<th>Branch</th>
<th>Age</th>
<th>City</th>
</tr>
<xsl:for-each select="student/s">
<tr>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="branch"/></td>
<td><xsl:value-of select="age"/></td>
<td><xsl:value-of select="city"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
8. How to represent data types in XML schema? Explain.
One of the greatest strength of XML Schemas is the support for data types. Using XML schema it is easier to describe allowable document content; it is easier to validate the correctness of data; it is easier to convert data between different data types.
Built in data types supported by XML schema:
XML Schema has a lot of built-in data types. The most common types are:
xs:string
xs:decimal
xs:integer
xs:boolean
xs:date
xs:time
XML schema defines in the namespace http://www.w3.org/2001/XMLschema that contains built in data types. There are two classes of XML schema data types:
Complex type is a data type is represented using markup.
Simple type is a data type whose values are represented in XML doc by character data. XML markup such as <types> is known as XML schema that conforms to W3C defined XML schema vocabulary which defines all or part of the vocabulary for another XML document. The <schema> is the root element for any XML schema document. The child elements of schema define the data types.
Example for writing a simple XML Schema:
<?xml version=”1.0”?>
<xs:schema xmlns:xs=” http://www.w3.org/2001/XMLSchma”>
<xs:element name=”student” >
<xs:complexType>
<xs:sequence>
<xs:element name=”name” value=”xs:string” />
<xs:element name=”regno” value=”xs:string” />
<xs:element name=”dept” value=”xs:string” />
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
9. Explain about domain name and domain name system.
Domain Name: There is a massive number of websites available in the WWW. It is necessary to have a domain name to make a website visible to the user. A domain name is a piece of string that helps to identify a website. For example, the domain of this website is “collegenote.pythonanywhere.com”. The domain name contains an extension to represent the type of the website or the company the website belongs too. The .com refers to a global company while .gov represents a government organization. Similarly, .org represents a non-government organization.
Domain Name System(DNS): Devices and services in the WWW use IP addresses. It is not possible for the users to type each IP address. DNS is the solution to this issue. When the user enters the domain in the web browser, the DNS server converts the domain name to the corresponding IP addresses.
Fig: DNS
10. How you can create dynamic content? Explain.
11. Explain about client side programming with example?
Client-side Uses:
- Makes interactive web pages
- Make stuff work dynamically
- Interact with temporary storage
- Works as an interface between user and server
- Sends requests to the server
- Retrieval of data from Server
- Interact with local storage
- Provides remote access for client-server program
- JavaScript
- VBScript
- HTML (Structure)
- CSS (Designing)
- AJAX
- jQuery etc.
Client-side Example:
// sample HTML code
<html>
<head>
<title>Client Side </title>
</head>
<body>
<h1>
Hello Guys!!
</h1>
</body>
</html>
12. Discuss about normal flow box layout in CSS and also discuss about positioning in CSS.