Web Technologies

Chanderprabhu Jain College of Higher Studies & School of Law
Plot No. OCF, Sector A-8, Narela, New Delhi – 110040
(Affiliated to Guru Gobind Singh Indraprastha University and Approved by Govt of NCT of Delhi & Bar Council of India)
BCA IV
WEB TECHNOLOGIES
Paper Code 204

HTML
HTML stands for Hypertext Markup Language It’s a markup language
used to structure text and multimedia documents and to set up hypertext
links between documents, used extensively on the World Wide Web.
HTML was invented in 1990 by a scientist called Tim Berners-Lee
Different versions of HTML:-
• HTML 2.0(1995)
• HTML 3.2(1997)
• HTML 4.0(1998)
• HTML 4.0.1(1999)
• HTML 5 (2008)

What is needed?
• A web browser- Microsoft IE, Google Chrome,
Mozilla Firefox etc.
• A Text Editor- Notepad(Microsoft Windows) or
TextEdit(MAC.)
HTML file extension - .htm or .html

Basic structure of an HTML
document
<html>
<head>
<title>Page Title</title>
</head>
<body>
The main part of the document goes here.
</body>
</html>

Comment Tag

 text within this tag will not be displayed or processed by your
browser
 comments may be one or multiple lines long (HTML is free-form)
 comments do not nest! No comments inside comments!
Attributes
Tags can also have attributes, which are extra bits of information.
Attributes appear inside the opening tag and their values sit inside
quotation marks. They look something like <tag
attribute="value">Margarine</tag>

Rules regarding attributes:
• Any attributes in an HTML tag need to appear
after the HTML tag name.
• The attribute name must be followed
immediately by an equal sign (=).
• The attribute value needs to come immediately
after the equal sign.
• The attribute value must always be enclosed in
quotes, either single or double.

Meta tag
• Meta tags contain information about the page
that does not need to be displayed, but it still
used by search engines and other web
crawlers. They are typically used to give search
engines a brief description of the page, as well
as the important keywords on it. Meta tags
must appear within the head section of the
html, and have usually have two of the
following attributes:
• name="?" - The name of the meta tag, such
as description, keywords or author.
• .

Examples
• <meta name="Author" content="Jhon Doe" />
• <meta name="keywords" lang="en" content="car, rental, rent" />
• <meta name="keywords" lang="es" content="autos, alquiler, alquila" />
• <meta name="description" lang="en" content="Car rental in New York." />
• <meta http-equiv="expires" content="Mon, 20 Sep 2006 11:09:00 GMT" />
• <meta http-equiv="pragma" content="no-cache" />
• <meta http-equiv="refresh" content="3; URL=http://www.google.com" />

HTML <body> Tag
• Attributes
Example:-
<body alink="red" vlink="maroon" link="blue" text="black"
bgcolor="white" background="title.jpg">
Attributes value
background url
bgcolor color
text color
link color
vlink color
alink color

Text Formatting Tags
• Header - <h?> </h?>There are 6 levels of headings available,
from h1 for the largest and most important heading, down to h6 for
the smallest heading.
• Bold - <b> </b>The text in between the tags will be bold, and stand
out against text around it, the same as in a word processor.
• Italic - <i> </i>Also working the same way as a word processor,
italics displays the text at a slight angle.
• Underline - <u> </u>Again, the same as underline in a word
processor. Note that html links are already underlined and don't
need the extra tag.
• Strike-out - <strike> </strike>Puts a line right through the centre of
the text, crossing it out. Often used to show that text is old and no
longer relevant. Also works by using <s> </s> instead.

• Preformatted Text - <pre> </pre>Any text between the pre tags,
including spaces, carriage returns and punctuation, will appear in
the browser as it would in a text editor (normally browsers ignore
multiple spaces)
• Source Code - <code> </code>Similar to tt the text is displayed in a
fixed-width font, and is commonly used to show source code. I have
used it on this site, along with stylesheets, to show all tags.
• Typewriter Text - <tt> </tt>The text appears to have been typed by
a typewriter, in a fixed-width font. For example: This text is written
using the <tt></tt> tags.

• Small - <small> </small>Instead of having to set a font size, you can
use the small tag to render text slightly smaller than the text around
it. Useful for displaying the 'fine-print'.
• Font Colour - <font color="#??????"> </font>Change the colour of
a few words or a section of text.
• Font Size - <font size="?"> </font>Replace the ? with a number
from 1 to 7 to change the size of the font. One being the smallest
and seven the largest.
• Font Size Change - <font size="+/-?"> </font>For an immediate
change of font size with respect to the font size preceding it, this tag
increase or decreases the size of the font by the number you
specify. Eg: <font size="-1">Some Text</font>

• Change Font Face - <font face="?"> </font>To show text in a
particular font, use the font name such "Helvetica" or "Arial" or
"Courier". Be aware that using some fancy font from your computer
means that the person viewing that page must also have that font
installed on their computer too, otherwise it will look totally different
to them.
• Centre - <center> </center>A useful tag, as it says, it makes
everything in between the tags centered (in the middle of the page).
• Emphasis - <em> </em>Used to emphasize text, which usually
appears in italics, but can vary according to your browser.
• Strong Emphasis - <strong> </strong>Used to emphasize text
more, which usually appears in bold, but can vary according to your
browser.

Special HTML Characters
• Tag Start - < - <
Less-Than symbol, usually used to define the start of an actual
HTML tag.
• Tag End - > - >
Greater-Than symbol, used to declare the end of each tag.
• Quotation Marks - " - “
As the name says: to mark a quote, or in html terms: to
declare the value of a tag attribute.
• Ampersand - & - &
It is used to define the start of all special character tags, so it
needs a special charachter tag itself.

• Non Breaking Space -  
A space, a plain ordinary space (like when you press
the spacebar). The non-breaking part is relevant
because multiple spaces in HTML will only show
up as one space on your web page. This tag can
be used many times in a row to force the web
browser to display many spaces on the web page.
• Copyright - © - ©
Copyright indicates ownership of intellectual property.
• Trademark - ™ - ™
Declares a product name or images as
business trademark that is not yet registered.

• Registered - ® - ®
Used to indicate that a product or business trademark
that is officially registered.
• One Half - ½ - ½
Fraction symbol for One Half (0.5) of some other
value.
• Degree - ° - °
The degree symbol is used to represent temperature
or angular measurements.

HTML Linking Tags
• Basic Link - <a href="url">link text</a>There are two main parts to a link tag: the
text a user can click, and the web address they go to if they click it. The bit
between the <a> and </a> tags is the link text, and is generally displayed in blue
and underlined by web browsers. The href="url" part is the web address,
where url can be set in several ways:
href="example.html" - another page in the current
• Link to a Fragment - <a href="#fragment">link</a>It is often usefull to link to
other places on the same webpage, such as other sections or chapters further
down the page. The technical term for this is linking to a Fragment, where
browsers will automatically try and scroll to that part of the page. Fragments first
need to be defined somewhere in a webpage by giving them a name, for
example <a name="fragment_name">, then links to this fragment are created by
using the hash (#) character:<a href="#fragment_name">Link</a>. To link to a
fragment on another page you would simply append the fragment name to the
address, for example: href="example.html#fragment_name".

• Target Window - <a href="url" target="???">link</a>You may not always
want to link to a page and have it load up over the one you are currently
viewing. Thats where the target attribute comes in handy. By setting
the target="_BLANK" the page you link to will load up in a new window (or
new tab in some newer browsers). Similary,"_self", "_parent", or "_top" will
open the link in the current window, the parent window.
• Image as a Link - <a href="url"><img ...></a>By placing an image
tag between the <a> and </a> tags, you can turn an image into a link, and
clicking on that image will then load the referenced page. You may notice
that the image gets a blue border just as link text became underlined. This
can be resolved by setting the border="0"attribute of the image, or
using css.

• Email Link - <a href="mailto:email"></a>A special kind of
link, the mailto notation link instructs the browser to compose
and email to the specified address using the default email
program. It but does not actually send any emails
automatically. You can also set a subject for the email by
using
<a href="mailto:pramod.pandey@jagannath.org?Subject=Linking">email
me</a>

 <img> (no closing tag needed)
 used to display graphics (.jpeg, .png, .gif) in your web pages
 you must specify the URL for the image source, and an alt= text
 the basic attributes of <img> are:
 src=”string” - the absolute or relative location of the image file
 alt=”string” - Alternate Text for people who don't see images
 height=”string” - image height, percent or absolute pixels (optional)
 width=”string” - image width, percent or absolute pixels (optional)
 title=”string” - mouse-over title of the image (optional)
Image tag

INTRODUCTION TO
JAVASCRIPT

JAVASCRIPT
JavaScript is used in millions of Web pages to improve the
design, validate forms, detect browsers, create cookies, and
much more.
JavaScript is the most popular scripting language on the
internet, and works in all major browsers, such as Internet
Explorer, Mozilla, Firefox, Netscape, Opera.

WHAT IS JAVASCRIPT?
JavaScript was designed to add interactivity to HTML
pages
JavaScript is a scripting language (a scripting
language is a lightweight programming language)
A JavaScript consists of lines of executable computer
code
A JavaScript is usually embedded directly into HTML
pages
JavaScript is an interpreted language (means that
scripts execute without preliminary compilation)

Are Java and JavaScript the Same?
Java and JavaScript are two completely different languages in
both concept and design!
Java (developed by Sun Microsystems) is a powerful and
much more complex programming language - in the same
category as C and C++.

How to Put a JavaScript Into an HTML
Page?
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>

Ending Statements With a
Semicolon?With traditional programming languages, like C++ and Java,
each code statement has to end with a semicolon (;).
Many programmers continue this habit when writing
JavaScript, but in general, semicolons are optional!
However, semicolons are required if you want to put more
than one statement on a single line.

JavaScript Variables
Variables are used to store data.
A variable is a "container" for information you want to
store. A variable's value can change during the
script. You can refer to a variable by name to see
its value or to change its value.
Rules for variable names:
Variable names are case sensitive
They must begin with a letter or the underscore character
strname – STRNAME (not same)

JavaScript Operators
Operator Description Example Result
+ Addition x=2 4
y=2
x+y
- Subtraction x=5 3
y=2
x-y
* Multiplication x=5 20
y=4
x*y
/ Division 15/5 3
5/2 2,5
% Modulus (division remainder) 5%2 1
10%8 2
10%2 0
++ Increment x=5 x=6
x++
-- Decrement x=5 x=4
x--

JavaScript Operators – 2
Assignment Operators
(
Operator Example Is The Same As
= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y

JavaScript Operators - 3
Comparison Operators
Operator Description Example
== is equal to 5==8 returns false
=== is equal to (checks for both value and type) x=5
y="5"
x==y returns true
x===y returns false
!= is not equal 5!=8 returns true
> is greater than 5>8 returns false
< is less than 5<8 returns true
>= is greater than or equal to 5>=8 returns false
<= is less than or equal to 5<=8 returns true

JavaScript Operators - 4
Logical Operators
Operator Description Example
&& and x=6
y=3
(x < 10 && y > 1) returns true
|| or x=6
y=3
(x==5 || y==5) returns false
! not x=6
y=3
!(x==y) returns true

JavaScript Basic Examples
<script>
document.write("Hello World!")
</script>  format text with HTML code - heading
<script>
alert("Hello World!")
</script>

Example
<script>
x=“Hello World!”
document.write(x)
</script>
<script>
x=“İsminizi Yazın….”
document.write(“Merhaba” +x)
</script>  use line break html code

JavaScript Popup Boxes
Alert Box
An alert box is often used if you want to make sure
information comes through to the user.
When an alert box pops up, the user will have to click "OK"
to proceed.
<script>
alert("Hello World!")
</script>

JavaScript Popup Boxes - 2
Confirm Box
A confirm box is often used if you want the user to verify or
accept something.
When a confirm box pops up, the user will have to click
either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user
clicks "Cancel", the box returns false.

JavaScript Popup Boxes - 3
Prompt Box
A prompt box is often used if you want the user to input a
value before entering a page.
When a prompt box pops up, the user will have to click
either "OK" or "Cancel" to proceed after entering an input
value.
If the user clicks "OK“, the box returns the input value. If
the user clicks "Cancel“, the box returns null.

Prompt Box Example
<script>
x=prompt (“Adınızı Yazınız”, “ ”)
document.write(“Merhaba <br>”,+x)
</script>

Examples -2
<script>
s1=12
s2=28
toplam=s1+s2
document.write("Sayıların toplamı: "+toplam)
</script>

Conditional Statements
Very often when you write code, you want to perform different actions for
different decisions. You can use conditional statements in your code to
do this.
In JavaScript we have the following conditional statements:
if statement - use this statement if you want to execute some code only if a
specified condition is true
if...else statement - use this statement if you want to execute some code if
the condition is true and another code if the condition is false
if...else if....else statement - use this statement if you want to select one of
many blocks of code to be executed
switch statement - use this statement if you want to select one of many
blocks of code to be executed

What is DHTML?
DHTML is the combination of several built-in browser features in
fourth generation browsers that enable a web page to be more
dynamic.
DHTML is NOT a scripting language (like JavaScript or VBscript), but
a browser feature- or enhancement- that makes the browser dynamic
It uses a host of different technologies - JavaScript, VBScript, the
Document Object Model (DOM), layers, cascading stylesheets - to
create HTML that can change even after a page has been loaded into
a browser

What is DHTML?
It is considered to be made up of
–HTML
–Cascading Style Sheets (CSS)
–Scripting language
All three of these components are linked via Document Object Model
(DOM)
DOM is the interface that allows scripting languages to access the
content, style, and structure of the web documents and change them
dynamically

Tools of DTHML
HTML and XML
–Partitions and Organizes the content
CSS
–Defines the Presentation of the content
Scripting - JavaScript, JScript, VBScript
–Adds interactivity to the page
DOM- Document Object Model
–Defines what and how elements are exposed for script access

Components of DHTML
DHTML requires four independent components to work: HTML, Cascading Style
Sheets, Scripting and the Document Object Model. The section provides a
brief description of each component.
1. HTML:
HTML defines the structure of a Web page, using such basic elements as
headings, forms, tables, paragraphs and links. On December 18, 1997,
HTML 4.0 attained "recommended" status at the W3C. Changes and
enhancements introduced in HTML 4.0 made DHTML possible.
2. Cascading Style Sheets (CSS): Similar to a template in a word-
processing document, a style sheet controls the formatting of HTML
elements. Like in traditional desktop publishing, one can use style sheet
to specify page margins, point sizes and leading. Cascading Style
Sheets is a method to determine precedence and to resolve conflicts
when multiple styles are used.

3. Scripting:
Scripting provides the mechanisms to interpret user actions and produce
client-side changes to a page. For example, scripts can interpret mouse
actions (such as the mouse passing over a specified area of a page
through the event model) and respond to the action by using a set of
predefined instructions (such as highlighting the text activated by the
mouse action). Although DHTML can communicate with several scripting
languages, JavaScript is the de facto standard for creating cross-browser
DHTML pages.
4. Document Object Model (DOM):
The DOM outlines Web page content in a way that makes it possible for
HTML elements, style sheets and scripting languages to interact with
each other. The W3C defines the DOM as "a platform- and language-
neutral interface that will allow programs and scripts to dynamically
access and update the content, structure, and style of documents. The
document can be further processed and the results of that processing
can be incorporated back into the presented stage."

DOM – Document Object Model

DOM Introduction
Dynamic HTML object model
“The Document Object Model (DOM) is an application
programming interface (API) for HTML and XML
documents. It defines the logical structure of
documents and the way a document is accessed and
manipulated.”
Great control over presentation of pages
Access to all elements on the page
Whole web page (elements, forms, frames, tables, etc.)
represented in an object hierarchy
“Anything found in an HTML or XML document can be
accessed, changed, deleted, or added using the
Document Object Model, with a few exceptions.”

DOM Introduction – cont’d
HTML elements treated as objects
Attributes of these elements treated as properties of those
objects
Objects identified with an ID attribute can be scripted with
languages like JavaScript and VBScript.
Elements on the page can be supported by scripting that can
interact with user events and change the page content
dynamically.
The DOM dictates how the written scripting language controls the
elements on the screen, such as graphics and text.

DOM-Document Object Model …
The Document Object Model is a platform- and language-neutral
interface that will allow programs and scripts to dynamically access and
update the content, structure and style of the document
The DOM details the characteristic properties of each element of a
Web page, thereby detailing how we might manipulate these
components and, in turn, manipulate the page

Document Object Model is not a "part" of Scripting languages. The
DOM stands alone, able to be interfaced with any programming
language designed to do so
The W3C DOM is the recommended standard to be exposed by
each browser
Microsoft Internet Explorer and Netscape do not share the same
DOM.
DOM-Document Object Model…

 Both (IE and Netscape) DOMs break down Web pages into roughly
four types of components
–Objects, Properties, Events and Methods
Objects :
–Container which reflects a particular element of a page
–objects "contain" the properties and methods which apply to that
element

 Properties:
–Characteristics of an object
–Example: the ‘document’ object possesses a ‘bgColor’ property
which reflects the background color of the page.
–Using a programming language (e.g. JavaScript) you may, via
this property, read or modify the background color of a page

Methods:
–A method typically executes an action which acts upon the object by
which it is owned
Events:
–Used to trap actions related to its owning object
–Typically, these actions are caused by the user

DOM
• DOM = Document Object Model
Defines a hierarchical model of the document structure
through which all document elements may be accessed
• Nodes
The W3C DOM defines element of a document is a node
of a particular type
Node Types
Common types are: document node, element node, text
node, attribute node, comment node, document-type node

DOM Example
document node
Document_type node
<!DOCTYPE>
element node
<HTML>
element node
<HEAD>
element node
<TITLE>
text node
"Sample"
element node
<BODY>
element node
<P>
text node
"This is a..."

Netscape DOM
DOM "begins" at the window object;
Other objects are below the window object in the hierarchy
Exception is the navigator object, (whose properties provide
information about the browser version,) which is a peer object of
window rather than a child

Microsoft DOM
Microsoft indexes an additional topic called as collections. A
"collection," is an array-based object
The observable difference between the two is the syntax. Netscape
supports a treelike hierarchical syntax
On the other hand, Internet Explorer exposes all HTML objects as a
flat collection and lets you modify the style object

window
document
history
navigator
applets
all
anchors
body
embeds
forms
filters
images
links
plugins
styleSheets
scripts
location
screen
event
document
document
plugins
object
collection
Key
frames

15.3 Collections all and children
Collections are basically arrays of related objects on a
page
all
Collection of all the HTML elements in a document in the order
in which they appear
length property
Specifies the number of elements in the collection
tagName property of an element
Determines the name of the element
Every element has its own all collection, consisting of
all the elements contained within that elementChanderprabhu Jain College of Higher Studies & School of Law

Advantage
Robust API for DOM tree
Relatively simple to modify data structure and
extract data
Disadvantage Store entire document in memoryAs
DOM was written for any language method naming
not follow the standard VB programming conventions

What is XML
XML stands for eXtensible Markup Language.
A markup language is used to provide information
about a document.
Tags are added to the document to provide the extra
information.
HTML tags tell a browser how to display the
document.
XML tags give a reader some idea what some of the
data means.

What is XML Used For?
XML documents are used to transfer data from one place to
another often over the Internet.
XML subsets are designed for particular applications.
One is RSS (Rich Site Summary or Really Simple Syndication
). It is used to send breaking news bulletins from one web
site to another.
A number of fields have their own subsets. These include
chemistry, mathematics, and books publishing.
Most of these subsets are registered with the W3Consortium
and are available for anyone’s use.

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.

Example of an HTML Document
<html>
<head><title>Example</title></head.
<body>
<h1>This is an example of a page.</h1>
<h2>Some information goes here.</h2>
</body>
</html>

Example of an XML Document
<?xml version=“1.0”/>
<address>
<name>Alice Lee</name>
<email>alee@aol.com</email>
<phone>212-346-1234</phone>
<birthday>1985-03-22</birthday>
</address>

Difference Between HTML and XML
HTML tags have a fixed meaning and browsers know what it
is.
XML tags are different for different applications, and users
know what they mean.
HTML tags are used for display.
XML tags are used to describe documents and data.

XML Rules
Tags are enclosed in angle brackets.
Tags come in pairs with start-tags and end-tags.
Tags must be properly nested.
<name><email>…</name></email> is not allowed.
<name><email>…</email><name> is.
Tags that do not have end-tags must be terminated by a ‘/’.
<br /> is an html example.

More XML Rules
Tags are case sensitive.
<address> is not the same as <Address>
XML in any combination of cases is not allowed as
part of a tag.
Tags may not contain ‘<‘ or ‘&’.
Tags follow Java naming conventions, except that a
single colon and other characters are allowed.
They must begin with a letter and may not contain
white space.
Documents must have a single root tag that begins
the document.

Encoding
XML (like Java) uses Unicode to encode characters.
Unicode comes in many flavors. The most common one
used in the West is UTF-8.
UTF-8 is a variable length code. Characters are encoded
in 1 byte, 2 bytes, or 4 bytes.
The first 128 characters in Unicode are ASCII.
In UTF-8, the numbers between 128 and 255 code for
some of the more common characters used in western
Europe, such as ã, á, å, or ç.
Two byte codes are used for some characters not listed in
the first 256 and some Asian ideographs.
Four byte codes can handle any ideographs that are left.
Those using non-western languages should investigate
other versions of Unicode.

Well-Formed Documents
An XML document is said to be well-formed if it
follows all the rules.
An XML parser is used to check that all the rules
have been obeyed.
Recent browsers such as Internet Explorer 5 and
Netscape 7 come with XML parsers.
Parsers are also available for free download over the
Internet. One is Xerces, from the Apache open-
source project.
Java 1.4 also supports an open-source parser.

XML Example Revisited
<?xml version=“1.0”/>
<address>
<name>Alice Lee</name>
<phone>212-346-1234</phone>
<birthday>1985-03-22</birthday>
</address>
Markup for the data aids understanding of its purpose.
A flat text file is not nearly so clear.
Alice Lee
alee@aol.com
212-346-1234
1985-03-22
The last line looks like a date, but what is it for?Chanderprabhu Jain College of Higher Studies & School of Law

Expanded Example
<?xml version = “1.0” ?>
<address>
<name>
<first>Alice</first>
<last>Lee</last>
</name>
<phone>123-45-6789</phone>
<birthday>
<year>1983</year>
<month>07</month>
<day>15</day>
</birthday>
</address>

XML Files are Trees
address
name email phone birthday
first last year month day

XML Trees
An XML document has a single root node.
The tree is a general ordered tree.
A parent node may have any number of children.
Child nodes are ordered, and may have siblings.
Preorder traversals are usually used for getting information out
of the tree.

Validity
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.
These range from disseminating news bulletins
(RSS) to chemical formulas.
DTDs were developed first, so they are not as
comprehensive as schema.

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.

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 day (#PCDATA)>

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.

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>
</xs:schema>

Explanation of Example Schema
<?xml version="1.0" encoding="ISO-8859-1" ?>
ISO-8859-1, Latin-1, is the same as UTF-8 in the first 128 characters.
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
www.w3.org/2001/XMLSchema contains the schema standards.
<xs:element name="address">
<xs:complexType>
This states that address is a complex type element.
<xs:sequence>
This states that the following elements form a sequence and must come
in the order shown.
<xs:element name="name" type="xs:string"/>
This says that the element, name, must be a string.
<xs:element name="birthday" type="xs:date"/>
This states that the element, birthday, is a date. Dates are always of the
form yyyy-mm-dd.

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.

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>

Parsers
There are two principal models for parsers.
SAX – Simple API for XML
Uses a call-back method
Similar to javax listeners
DOM – Document Object Model
Creates a parse tree
Requires a tree traversal

Web Technologies

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Web Technologies

Similar to Web Technologies (20)

More from cpjcollege

More from cpjcollege (20)

Recently uploaded

Recently uploaded (20)

Web Technologies