Established as per the Section 2(f) of the UGC Act,

1956
Approved by AICTE, COA and BCI, New Delhi

B20CIO503
Web Technology & its Application

SCHOOL OF COMPUTING AND INFORMATION

TECHNOLOGY
COURSE FACULTY MEMBER

ASSOCIATE PROFESSOR
Dr. G.ARULKUMARAN,M.E.,Ph.D., School of Computing & Information Technology,
REVA University, Bengaluru.

Contact: g.arul.kumaran@reva.edu.in

Dr.G.Arulkumaran has been teaching since 2004.

His areas of interest are Network Security, Cyber Security,

MANET and Data Visualization
COURSE OUTCOME

 Understand the various steps in designing a creative and dynamic website.

 Describe the hierarchy of objects in HTML and XML.

 Design dynamic and interactive web pages by embedding Java Script code

in HTML.

 Illustrate the advantages and use of different types of CSS.

 Examine the HTML. Know how to use Dynamic HTML.

 Familiarize server side scripting language like Perl & PHP.

TEXT BOOKS
REFERENCE BOOKS
UNIT - 1

Web Essentials
OUTLINE
 Clients, Servers, and Communication.
 The Internet-Basic Internet Protocols -The World Wide Web.
 HTTP request message-response message-
 Web Clients Web Servers-Case Study. Markup Languages: XHTML.
 An Introduction to HTML History-Versions-Basic XHTML Syntax and Semantics-
 Some Fundamental HTML Elements-Relative
 URLs-
 Lists Tables-Frames-Forms-XML
 Creating HTML Documents. Representing
 Web Data: XML-Documents and Vocabularies-Versions and Declaration
 Namespaces JavaScript andXML
Brief Questions
 What is web?

 When they invented computer? Who?

 What is the types of programming languages?

 When they invented internet?

 What is the purpose of internet?

 Write some websites and web browser names which you know.

 What are the types of webpages?

11/29/2024 Reva_5thSem_OE_WT_Unit_I 8
Basic Terminologies
 What is web technology?
Definition 1: Web Technology refers to the various tools and techniques that are
utilized in the process of communication between different types of devices over the
internet. A web browser is used to access web pages. Web browsers can be defined as
programs that display text, data, pictures, animation, and video on the Internet.

Definition 2: Web technology refers to the means by which computers

communicate with each other using markup languages and multimedia packages. It
gives us a way to interact with hosted information, like websites. Web technology
involves the use of hypertext markup language (HTML) and cascading style sheets
(CSS).
11/29/2024 Reva_5thSem_OE_WT_Unit_I 9
Basic Terminologies
 What is the importance of web technology?
Web technologies allow companies to design a certain image and to attract and
generate customers' loyalty. Software applications specialized in customer
relationship management assures an improved relationship with the customers.

 What are web technology tools?

Web development tools allow developers to work with a variety of web
technologies, including HTML, CSS, the DOM, JavaScript, and other components
that are handled by the web browser. Due to increasing demand from web browsers
to do more, popular web browsers have included more features geared for
developers.
11/29/2024 Reva_5thSem_OE_WT_Unit_I 10
Basic Terminologies
 What is the importance of web technology?
Web technologies allow companies to design a certain image and to attract and
generate customers' loyalty. Software applications specialized in customer
relationship management assures an improved relationship with the customers.

 Who introduced web technology?

Mr. Paul Kunz and Mr. Louise Addis, the first Web server in the US came online in
December 1991, once again in a particle physics laboratory: the Stanford Linear
Accelerator Center (SLAC) in California. At this stage, there were essentially only
two kinds of browser.
11/29/2024 Reva_5thSem_OE_WT_Unit_I 11
Basic Terminologies
 How does a web work?
The browser sends an HTTP request message to the server, asking it to send a copy of
the website to the client (you go to the shop and order your goods). This message, and
all other data sent between the client and the server, is sent across your internet
connection using TCP/IP.

 What are all the advantages and disadvantages?

Advantages Disadvantages

Communication Waste Of Time

Access To Resources & Instant Information Money Frauds

E-commerce, Digital Banking & Payments Cyber Crime

Collaboration & Donation And Funding Isolation & Health Problems

Entertainment & Lifestyle Fake News & Spread of illegal And Unethical material
11/29/2024 Reva_5thSem_OE_WT_Unit_I 12
11/29/2024 Reva_5thSem_OE_WT_Unit_I 39
11/29/2024 Reva_5thSem_OE_WT_Unit_I 43
11/29/2024 Reva_5thSem_OE_WT_Unit_I 44
11/29/2024 Reva_5thSem_OE_WT_Unit_I 45
11/29/2024 Reva_5thSem_OE_WT_Unit_I 46
11/29/2024 Reva_5thSem_OE_WT_Unit_I 47
11/29/2024 Reva_5thSem_OE_WT_Unit_I 48
11/29/2024 Reva_5thSem_OE_WT_Unit_I 49
11/29/2024 Reva_5thSem_OE_WT_Unit_I 50
11/29/2024 Reva_5thSem_OE_WT_Unit_I 51
11/29/2024 Reva_5thSem_OE_WT_Unit_I 52
11/29/2024 Reva_5thSem_OE_WT_Unit_I 53
11/29/2024 Reva_5thSem_OE_WT_Unit_I 54
11/29/2024 Reva_5thSem_OE_WT_Unit_I 55
11/29/2024 Reva_5thSem_OE_WT_Unit_I 56
Web Clients
Many possible web clients:

Text-only “browser” (linux)

Mobile phones

Robots (software-only clients, e.g., search engine “crawlers”)

Any web browsers like IE, Chrome, Firebox.

11/29/2024 Reva_5thSem_OE_WT_Unit_I 57
Web Browsers
Standard features

Save web page to disk.

Find string in page.

Fill forms automatically (passwords, CC numbers, …).

Set preferences (language, character set, cache and HTTP parameters).

Modify display style (e.g., increase font sizes).

Display raw HTML and HTTP header info (e.g., Last- Modified).

Choose browser themes (skins).

View history of web addresses visited.

Bookmark favorite pages for easy return.

11/29/2024 Reva_5thSem_OE_WT_Unit_I 58
 Web Servers
Basic functionality:

Receive HTTP request via TCP.

Map Host header to specific virtual host (one of many host names sharing an
IP address).

Map Request-URI to specific resource associated with the virtual host.
 File: Return file in HTTP response.
 Program: Run program and return output in HTTP response.

Map type of resource to appropriate MIME type and use to set Content-Type
header in HTTP response.

Log information about the request and response.

11/29/2024 Reva_5thSem_OE_WT_Unit_I 59
 Types of Web Servers
i. httpd: UIUC, primary Web server c. 1995 (On Linux platform)
ii. Apache: “A patchy” version of httpd, now the most popular server
(esp. on Linux platforms)
iii. IIS: Microsoft Internet Information Server.
iv. Tomcat:
Java-based
Provides container (Catalina) for running Java servlets (HTML-
generating programs) as back-end to Apache or IIS
Can run stand-alone using Coyote HTTP front-end

11/29/2024 Reva_5thSem_OE_WT_Unit_I 60
 Tomcat Web Server
 HTML-based server administration
 Browse to http://localhost:8080 and click on Server Administration
link
 localhost is a special host name that means “this machine”
 Some Connector fields:
o Port Number: port “owned” by this connector.
o Max Threads: max connections processed simultaneously.
o Connection Timeout: keep-alive time.

11/29/2024 Reva_5thSem_OE_WT_Unit_I 61
 Secure Server
 Since HTTP messages typically travel over a public network, private
information (such as credit card numbers) should be encrypted to
prevent eavesdropping
 https URL scheme tells browser to use encryption
 Common encryption standards:
o Secure Socket Layer (SSL)
o Transport Layer Security (TLS)

11/29/2024 Reva_5thSem_OE_WT_Unit_I 62
 Secure Server

11/29/2024 Reva_5thSem_OE_WT_Unit_I 63
11/29/2024 Reva_5thSem_OE_WT_Unit_I 64
11/29/2024 Reva_5thSem_OE_WT_Unit_I 65
11/29/2024 Reva_5thSem_OE_WT_Unit_I 66
11/29/2024 Reva_5thSem_OE_WT_Unit_I 67
11/29/2024 Reva_5thSem_OE_WT_Unit_I 68
 <b> Reva Unversity, Bengaluru </b>

11/29/2024 Reva_5thSem_OE_WT_Unit_I 69
 <HTML>
<HEAD>
</HEAD>

<BODY>
</BODY>
</HTML>
11/29/2024 Reva_5thSem_OE_WT_Unit_I 70
11/29/2024 Reva_5thSem_OE_WT_Unit_I 71
<!Doc Type HTML>
<HTML>
<HEAD>
<Title> my first web page
</Title>
</HEAD>

<BODY> HTML is a Non case

Welcome all sensitive language – It can
</BODY> accept both upper case and
</HTML> lower case letters. It will not
show any error.
11/29/2024 Reva_5thSem_OE_WT_Unit_I 72
11/29/2024 Reva_5thSem_OE_WT_Unit_I 73
 heading.html
<html> Output
<head>
<title>Heading Example </title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<h7>This is heading 6</h7>
<h8>This is heading 6</h8>
</body>
11/29/2024 Reva_5thSem_OE_WT_Unit_I 74
</html>
11/29/2024 Reva_5thSem_OE_WT_Unit_I 75
11/29/2024 Reva_5thSem_OE_WT_Unit_I 76
11/29/2024 Reva_5thSem_OE_WT_Unit_I 77
11/29/2024 Reva_5thSem_OE_WT_Unit_I 78
11/29/2024 Reva_5thSem_OE_WT_Unit_I 79
 • An example of a URL is
https://www.reva.edu.in/academics/computer-science-
engineering.html
which is the URL for Reva University, Bengaluru website.

11/29/2024 Reva_5thSem_OE_WT_Unit_I 80
11/29/2024 Reva_5thSem_OE_WT_Unit_I 81
11/29/2024 Reva_5thSem_OE_WT_Unit_I 82
11/29/2024 Reva_5thSem_OE_WT_Unit_I 83
11/29/2024 Reva_5thSem_OE_WT_Unit_I 84
11/29/2024 Reva_5thSem_OE_WT_Unit_I 85
11/29/2024 Reva_5thSem_OE_WT_Unit_I 86
11/29/2024 Reva_5thSem_OE_WT_Unit_I 87
11/29/2024 Reva_5thSem_OE_WT_Unit_I 88
11/29/2024 Reva_5thSem_OE_WT_Unit_I 89
11/29/2024 Reva_5thSem_OE_WT_Unit_I 90
11/29/2024 Reva_5thSem_OE_WT_Unit_I 91
11/29/2024 Reva_5thSem_OE_WT_Unit_I 92
11/29/2024 Reva_5thSem_OE_WT_Unit_I 93
11/29/2024 Reva_5thSem_OE_WT_Unit_I 94
11/29/2024 Reva_5thSem_OE_WT_Unit_I 95
11/29/2024 Reva_5thSem_OE_WT_Unit_I 96
11/29/2024 Reva_5thSem_OE_WT_Unit_I 97
11/29/2024 Reva_5thSem_OE_WT_Unit_I 98
11/29/2024 Reva_5thSem_OE_WT_Unit_I 99
11/29/2024 Reva_5thSem_OE_WT_Unit_I 100
11/29/2024 Reva_5thSem_OE_WT_Unit_I 101
11/29/2024 Reva_5thSem_OE_WT_Unit_I 102
11/29/2024 Reva_5thSem_OE_WT_Unit_I 103
11/29/2024 Reva_5thSem_OE_WT_Unit_I 104
11/29/2024 Reva_5thSem_OE_WT_Unit_I 105
11/29/2024 Reva_5thSem_OE_WT_Unit_I 106
11/29/2024 Reva_5thSem_OE_WT_Unit_I 107
11/29/2024 Reva_5thSem_OE_WT_Unit_I 108
11/29/2024 Reva_5thSem_OE_WT_Unit_I 109
11/29/2024 Reva_5thSem_OE_WT_Unit_I 110
11/29/2024 Reva_5thSem_OE_WT_Unit_I 111
11/29/2024 Reva_5thSem_OE_WT_Unit_I 112
eXtensible Markup Language
 Although HTML is widely used for formatting and structuring
Web documents, it is not suitable for specifying structured data
that is extracted from databases
 A new language—namely XML has emerged as the standard
for structuring and exchanging data over the Web.
 A markup language is used to provide information about a
document.
 Tags are added to the document to provide the extra
information.
 XML tags give a reader some idea what some of the data
means
 XML and HTML have a similar syntax … both derived from
113
SGML
11/29/2024
.
Reva_5thSem_OE_WT_Unit_I
 The Basic Rules
 XML is case sensitive.
 All start tags must have end tags.
 Elements must be properly nested.
 XML declaration is the first statement.
 Every document must contain a root element.
 Attribute values must have quotation marks.
 Certain characters are reserved for parsing.

114
11/29/2024 Reva_5thSem_OE_WT_Unit_I
Encoding

 XML uses Unicode to encode characters.

 Unicode comes in many flavors.
 The most common one used in West is UTF-8.
 UTF-8 is a variable length code. Characters are
encoded in 1 byte, 2 bytes, or 4 bytes.

11/29/2024 Reva_5thSem_OE_WT_Unit_I 115

Example
<?xml version = “1.0” ?>
<address>
<name>
<first>AMU</first>
<last>MCA</last>
</name>
<email>csdamu@gmail.com</email>
<phone>123-45-6789</phone>
<birthday>
<year>1920</year>
<month>01</month>
<day>09</day>
</birthday>
</address>
11/29/2024 Reva_5thSem_OE_WT_Unit_I 116
XML Files are Trees
An XML document has a single root node.
Preorder traversal are usually used.
Address

Name email Phone Birthday

First Last Year month Day

11/29/2024 Reva_5thSem_OE_WT_Unit_I 117

 HTML vs XML
• Fixed set of tags • Extensible set of tags
• Presentation oriented • Content orientated
• No data validation • Standard Data infrastructure
capabilities • Allows multiple output forms
• Single presentation
• Tags are used to describe
• Tags are used for display.
documents and data.
11/29/2024 Reva_5thSem_OE_WT_Unit_I 118
Validation
• A well-formed document has a tree structure and obeys all
the XML rules.
• A particular application may add more rules in either a DTD
(document type definition) or in a schema.
• Many specialized DTDs and schemas have been created to
describe particular areas.
• DTDs were developed first, so they are not as
comprehensive as schema.
11/29/2024 Reva_5thSem_OE_WT_Unit_I 119
DTD : Document Type Definitions
• A DTD describes the tree structure of a document and
something about its data.

• There are two data types, PCDATA and CDATA.

• PCDATA is parsed character data.
• CDATA is character data, not usually parsed.

• A DTD determines how many times a node may appear,

and how child nodes are ordered.

11/29/2024 Reva_5thSem_OE_WT_Unit_I 120

DTD for address Example
<!ELEMENT address (name, email, phone, birthday)>
<!ELEMENT name (first, last)>
<!ELEMENT first (#PCDATA)>
<!ELEMENT last (#PCDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
<!ELEMENT birthday (year, month, day)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT month (#PCDATA)>
<!ELEMENT
11/29/2024 day (#PCDATA)>
Reva_5thSem_OE_WT_Unit_I 121
Schemas
• Schemas are themselves XML documents.
• They were standardized after DTDs and provide more
information about the document.
• They have a number of data types including string,
decimal, integer, boolean, date, and time.
• They divide elements into simple and complex types.
• They also determine the tree structure and how many
children a node may have.
11/29/2024 Reva_5thSem_OE_WT_Unit_I 122
Schema for First address Example
<?xml version="1.0" encoding="ISO-8859-1" ?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="address">
<xs:complexType>
<xs:sequence>
<xs:element name="name" type="xs:string"/>
<xs:element name="email" type="xs:string"/>
<xs:element name="phone" type="xs:string"/>
<xs:element name="birthday" type="xs:date"/>
</xs:sequence>
</xs:complexType>
</xs:element>
11/29/2024 Reva_5thSem_OE_WT_Unit_I 123
</xs:schema>
XSLT - Extensible Stylesheet Language Transformations
• XSLT is used to transform one xml document into another,
often an html document.
• The Transform classes are now part of Java 1.4.
• A program is used that takes as input one xml document and
produces as output another.
• If the resulting document is in html, it can be viewed by a
web browser.
• This is a good way to display xml data.
11/29/2024 Reva_5thSem_OE_WT_Unit_I 124
A Style Sheet to Transform address.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="address">
<html><head><title>Address Book</title></head>
<body>
<xsl:value-of select="name"/>
<br/><xsl:value-of select="email"/>
<br/><xsl:value-of select="phone"/>
<br/><xsl:value-of select="birthday"/>
</body>
</html>
</xsl:template>
</xsl:stylesheet> Output:
AMU MCA
csdamu@gmail.com
123-45-6789
1920-01-09

11/29/2024 Reva_5thSem_OE_WT_Unit_I 125

Advantages of XML
• XML is text (Unicode) based.
• Takes up less space.
• Can be transmitted efficiently.
• One XML document can be displayed differently in
different media.
• Html, video, CD, DVD,
• You only have to change the XML document in order
to change all the rest.
• XML documents can be modularized. Parts can be
reused.

11/29/2024 Reva_5thSem_OE_WT_Unit_I 126

Disadvantages of XML
• More difficult ,demanding and precise than HTML.

• Lack of browser support / end user applications.

• Still experimental / not solidified.

11/29/2024 Reva_5thSem_OE_WT_Unit_I 127

 What is JavaScript?
•Browsers have limited functionality
• Text, images, tables, frames
•JavaScript allows for interactivity
•Browser/page manipulation
• Reacting to user actions
•A type of programming language
• Easy to learn
• Developed by Netscape
• Now a standard exists –
www.ecma-international.org/publications/
standards/ECMA-262.HTM

11/29/2024 Reva_5thSem_OE_WT_Unit_I 128

Introduction

• JavaScript scripting language

• Originally created by Netscape
• Facilitates disciplined approach to designing
computer programs
• Enhances functionality and appearance of Web pages

• Jscript
• Microsoft’s version of JavaScript

11/29/2024 Reva_5thSem_OE_WT_Unit_I 129

 Uses
•Browser Detection - Detecting the browser used by a visitor at
your page. Depending on the browser, another page specifically
designed for that browser can then be loaded.

•Cookies - Storing information on the visitor's computer, then

retrieving this information automatically next time the user
visits your page. This technique is called "cookies".
•Control Browsers - Opening pages in customized windows,
where you specify if the browser's buttons, menu line, status line
or whatever should be present.
•Validate Forms - Validating inputs to fields before submitting a
form.An example would be validating the entered email address
to see if it has an @ in it, since if not, it's not a valid address.
11/29/2024 Reva_5thSem_OE_WT_Unit_I 130
JavaScript Statements

<html>
<head><title>My Page</title></head>
<body>
<script language="JavaScript">

document.write('This is my first 
JavaScript Page');

</script> Note the symbol for

</body> line continuation
</html>

11/29/2024 Reva_5thSem_OE_WT_Unit_I 131

JavaScript Statements

<html>
<head><title>My Page</title></head>
<body>
<script language=“JavaScript">

document.write('<h1>This is my first 
JavaScript Page</h1>');

</script>
</body> HTML written
</html> inside JavaScript

11/29/2024 Reva_5thSem_OE_WT_Unit_I 132

JavaScript Statements

<html>
<head><title>My Page</title></head>
<body>
<p>
<a href="myfile.html">My Page</a>
<br />
<a href="myfile.html"
onMouseover="window.alert('Hello');">
My Page</A>
</p>
</body> JavaScript written
</html> An Event
inside HTML

11/29/2024 Reva_5thSem_OE_WT_Unit_I 133

HTML Forms and JavaScript
• JavaScript is very good at processing user input in the
web browser
• HTML <form> elements receive input
• Forms and form elements have unique names
• Each unique element can be identified
• Uses JavaScript Document Object Model (DOM)
<form name="addressform">
Name: <input name="yourname"><br />
Phone: <input name="phone"><br />
Email: <input name="email"><br />
</form>

11/29/2024 Reva_5thSem_OE_WT_Unit_I 134

Using Form Data

Personalising an alert box

<form name="alertform">
Enter your name:
<input type="text" name="yourname">
<input type="button" value= "Go"
onClick="window.alert('Hello ' + 
document.alertform.yourname.value);">
</form>

11/29/2024 Reva_5thSem_OE_WT_Unit_I 135