WDD : UNIT III
XML & DHTML: Cascading style sheet (CSS)-what is CSS-Why we use
CSS-adding CSS to your web pages-Grouping styles-extensible
markup language (XML).
Dynamic HTML: Document object model (DCOM)-Accessing HTML &
CSS through DCOM Dynamic content styles & positioning-Event
bubbling-data binding.
WDD:
Web design and development is an umbrella term that describes the
process of creating a website.
● It involves two major skill sets: 1. web design 2. web
development.
● Web design determines the look and feel of a website.
● Web development determines how it functions.
What is CSS?
● Cascading Style Sheets (CSS)
● Used to format the layout of a webpage.
● It controls the color, font, size of text, spacing between
elements, how elements are positioned and laid out, what
background images or background colors are to be used,
different displays for different devices and screen sizes, etc.
CSS:
● CSS stands for Cascading Style Sheets.
● CSS describes how HTML elements are to be displayed on
screen, paper, or in other media.
● CSS saves a lot of work. It can control the layout of multiple web
pages all at once.
CSS Syntax:
A CSS rule consists of a selector and a declaration block.
● The selector points to the HTML element you want to style.
● The declaration block contains one or more declarations
separated by semicolons.
● Each declaration includes a CSS property name and a value,
separated by a colon.
● Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.
Example
In this example all <p> elements will be center-aligned, with a red text
color:
p{
color: red;
text-align: center;
}
● p is a selector in CSS (it points to the HTML element you want to
style: <p>).
● color is a property, and red is the property value
● text-align is a property, and center is the property value
How To Add CSS:
● CSS can be added to HTML elements in 3 ways:
● There are three ways of inserting a style sheet:
1. Inline CSS
2. Internal CSS
3. External CSS
1. Inline CSS
● An inline style may be used to apply a unique style for a single
element.
● 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>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Output:
This is a heading
This is a paragraph.
2. Internal CSS
● An internal style sheet may be used if one single HTML page has
a unique style.
● 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>
Output:
This is a heading
This is a paragraph.
3. 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>
<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:
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Output:
This is a heading
This is a paragraph.
CSS Selectors:
● Divide CSS selectors into five categories:
1. CSS element Selector
● The element selector selects HTML elements based on the
element name.
Example
Here, all <p> elements on the page will be center-aligned, with a red
text color:
p{
text-align: center;
color: red;
}
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output:
Every paragraph will be affected by the style.
Me too!
And me!
2. CSS id Selector
● The id selector uses the id attribute of an HTML element to select
a specific element.
● The id of an element is unique within a page, so the id selector is
used to select one unique element!
● To select an element with a specific id, write a hash (#) character,
followed by the id of the element.
Example
The CSS rule below will be applied to the html element with
id=”para1”:
#para1 {
text-align: center;
color: red;
}
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Output:
Hello World!
This paragraph is not affected by the style.
3. CSS class Selector
● The class selector selects HTML elements with a specific class
attribute.
● To select elements with a specific class, write a period (.)
character, followed by the class name
Example
In this example all HTML elements with class="center" will be red and
center-aligned:
.center {
text-align: center;
color: red;
}
We can also specifies that only specific HTML elements should be
affected by a class.
Example
In this example only <p> elements with class="center" will be red and
center-aligned:
p.center {
text-align: center;
color: red;
}
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned,
and in a large font-size.</p>
</body>
</html>
Output:
This heading will not be affected
This paragraph will be red and center-aligned.
This paragraph will be
red, center-aligned, and
in a large font-size.
4. CSS Universal Selector
● The universal selector (*) selects all HTML elements on the page.
Example
The CSS rule below will affect every HTML element on the page:
*{
text-align: center;
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output :
Hello world!
Every element on the page will be affected by the style.
Me too!
And me!
5. CSS Grouping Selector
● The grouping selector selects all the HTML elements with the
same style definitions.
● The following CSS code (the h1, h2, and p elements have the
same style definitions):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
It will be better to group the selectors, to minimize the code.
● To group selectors, separate each selector with a comma.
Example
In this example we have grouped the selectors from the code above:
h1, h2, p {
text-align: center;
color: red;
}
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Output:
Hello World!
Smaller heading!
This is a paragraph.
Introduction
XML is a software- and hardware-independent tool for storing and
transporting data.
What is XML?
● 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 is a W3C Recommendation
INTRODUCTION: 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.
● XML is not going to replace HTML in the near future, but it
introduces new possibilities by adopting many successful
features of HTML.
CHARACTERISTICS OF XML:
● There are three important characteristics of XML that make it
useful in a variety of systems and solutions
1. XML is extensible − XML allows you to create your own
self-descriptive tags, or language, that suits your application.
2. XML carries the data, does not present it − XML allows you to
store the data irrespective of how it will be presented.
3. 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.
XML Usage :
● XML can work behind the scene to simplify the creation of HTML
documents for large web sites.
● XML can be used to exchange the information between
organizations and systems.
● XML can be used for offloading and reloading of databases.
● XML can be used to store and arrange the data, which can
customize your data handling needs.
● XML can easily be merged with style sheets to create almost any
desired output.
● Virtually, any type of data can be expressed as an XML
document.
Example:
<message>
<text>Hello, world!</text>
</message>
This snippet includes the markup symbols, or the tags such as
<message>...</message> and <text>... </text>. The tags <message>
and </message>
XML - Syntax
NThe simple syntax rules to write an XML document.
<?xml version = "1.0"?>
<contact-info>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</contact-info>
COMPONENTS OF XML (or) SYNTAX RULES:
1. XML Declaration
The XML document can optionally have an XML declaration.
It is written as follows −
<?xml version = "1.0" encoding = "UTF-8"?>
Where version is the XML version and encoding specifies the
character encoding used in the document.
Syntax Rules for XML Declaration
● The XML declaration is case sensitive and must begin with
"<?xml>" where "xml" is written in lower-case.
● If a document contains an XML declaration, then it strictly needs
to be the first statement of the XML document.
● The XML declaration strictly needs to be the first statement in
the XML document.
● An HTTP protocol can override the value of encoding that you
put in the XML declaration.
2. Tags and Elements:
● An XML file is structured by several XML-elements, also called
XML-nodes or XML-tags.
● The names of XML-elements are enclosed in triangular brackets
< > . Eg: <element>
Syntax Rules for Tags and Elements
● Element Syntax − Each XML-element needs to be closed either
with start or with end elements.
<element>....</element> or <element/>
1. Nesting of Elements − An XML-element can contain multiple
XML-elements as its children, but the children elements must
not overlap. i.e., an end tag of an element must have the same
name as that of the most recent unmatched start tag.
● The Following example shows incorrect nested tags −
<?xml version = "1.0"?>
<contact-info>
<company>TutorialsPoint
</contact-info>
</company>
● The Following example shows correct nested tags −
<?xml version = "1.0"?>
<contact-info>
<company>TutorialsPoint</company>
<contact-info>
2. Root Element :
● An XML document can have only one root element.
● For example, following is not a correct XML document, because
both the x and y elements occur at the top level without a root
element −
<x>...</x>
<y>...</y>
● The Following example shows a correctly formed XML document
<root>
<x>...</x>
<y>...</y>
</root>
3. Case Sensitivity :
● The names of XML-elements are case-sensitive. That means the
name of the start and the end elements need to be exactly in the
same case.
● For example, <contact-info> is different from <Contact-Info>
3. XML Attributes:
● An attribute specifies a single property for the element, using a
name/value pair.
● An XML-element can have one or more attributes. For example −
<a href = "http://www.tutorialspoint.com/">Tutorialspoint!</a>
● Here href is the attribute name and
http://www.tutorialspoint.com/ is attribute value.
Syntax Rules for XML Attributes
● Attribute names in XML (unlike HTML) are case sensitive. That
is, HREF and href are considered two different XML attributes.
● Same attribute cannot have two values in a syntax. The
following example shows incorrect syntax because the attribute
b is specified twice
<a b = "x" c = "y" b = "z">....</a>
● Attribute names are defined without quotation marks, whereas
attribute values must always appear in quotation marks.
● Following example demonstrates incorrect xml syntax
− <a b = x>....</a>
In the above syntax, the attribute value is not defined in quotation
marks.
4. XML References:
● References usually allow you to add or include additional text or
markup in an XML document. References always begin with the
symbol "&" which is a reserved character and end with the
symbol ";". XML has two types of references −
● Entity References − An entity reference contains a name
between the start and the end delimiters. For example &
where amp is the name. The name refers to a predefined string
of text and/or markup.
● Character References − These contain references, such as
A, contains a hash mark (“#”) followed by a number. The
number always refers to the Unicode code of a character. In this
case, 65 refers to alphabet "A".
5. XML Text:
● The names of XML-elements and XML-attributes are
case-sensitive, which means the name of start and end elements
need to be written in the same case. To avoid character
encoding problems, all XML files should be saved as Unicode
UTF-8 or UTF-16 files.
● Whitespace characters like blanks, tabs and line-breaks between
XML-elements and between the XML-attributes will be ignored.
● Some characters are reserved by the XML syntax itself. Hence,
they cannot be used directly. To use them, some
replacement-entities are used, which are listed below −
Not Allowed Replacement Entity Character
Character Description
< < less than
> > greater than
& & ampersand
' ' apostrophe
" " quotation mark
● An XML document is a basic unit of XML information composed
of elements and other markup in an orderly package.
● An XML document can contains wide variety of data. For
example, database of numbers, numbers representing molecular
structure or a mathematical equation.
XML Document Example
A simple document is shown in the following example −
<?xml version = "1.0"?>
<contact-info>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</contact-info>
XML declaration contains details that prepare an XML processor to
parse the XML document. It is optional, but when used, it must appear
in the first line of the XML document.
Syntax
Following syntax shows XML declaration −
<?xml
version = "version_number"
encoding = "encoding_declaration"
standalone = "standalone_status"
?>
Each parameter consists of a parameter name, an equals sign (=), and
parameter value inside a quote.
Parameter Parameter_value Parameter_description
Version 1.0 Specifies the version of the XML
standard used.
Encoding UTF-8, UTF-16, It defines the character encoding
ISO-10646-UCS-2, used in the document. UTF-8 is
ISO-10646-UCS-4, the default encoding used.
ISO-8859-1 to
ISO-8859-9,
ISO-2022-JP,
Shift_JIS, EUC-JP
Standalone yes or no It informs the parser whether the
document relies on the
information from an external
source, such as external
document type definition (DTD),
for its content. The default value is
set to no. Setting it to yes tells the
processor there are no external
declarations required for parsing
the document.
Rules:
1. If the XML declaration is present in the XML, it must be placed as
the first line in the XML document.
2. If the XML declaration is included, it must contain version
number.
3. The Parameter names and values are case-sensitive. The names
are always in lowercase.
4. The order of placing the parameters is important. The correct
order is: version, encoding and standalone.
5. Either single or double quotes may be used.
6. The XML declaration has no closing tag i.e. </?xml>
XML Declaration Examples
XML declaration with no parameters − <?xml >
XML declaration with version definition − <?xml version = "1.0">
XML declaration with all parameters defined −
<?xml version = "1.0" encoding = "UTF-8" standalone = "no" ?>
XML declaration with all parameters defined in single quotes −
<?xml version = '1.0' encoding = 'iso-8859-1' standalone = 'no' ?>
XML - DTDs
● The XML Document Type Declaration, commonly known as DTD,
is a way to describe XML language precisely.
● DTDs check vocabulary and validity of the structure of XML
documents against grammatical rules of appropriate XML
language.
An XML DTD can be either specified inside the document, or it can be
kept in a separate document and then liked separately.
Syntax
● Basic syntax of a DTD is as follows −
<!DOCTYPE element DTD identifier
[
declaration1
declaration2
........
]>
In the above syntax,
● The DTD starts with <!DOCTYPE delimiter.
● An element tells the parser to parse the document from the
specified root element.
● DTD identifier is an identifier for the document type definition,
which may be the path to a file on the system or URL to a file on
the internet.
● If the DTD is pointing to external path, it is called External
Subset.
● The square brackets [ ] enclose an optional list of entity
declarations called Internal Subset.
1. Internal DTD
● A DTD is referred to as an internal DTD if elements are declared
within the XML files.
● To refer it as internal DTD, standalone attribute in XML
declaration must be set to yes.
● This means, the declaration works independent of an external
source.
Syntax
Following is the syntax of internal DTD −
<!DOCTYPE root-element [element-declarations]>
where root-element is the name of root element and
element-declarations is where you declare the elements.
Example
Following is a simple example of internal DTD −
<?xml version = "1.0" encoding = "UTF-8" standalone = "yes" ?>
<!DOCTYPE address [
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
]>
<address>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>
Let us go through the above code −
Start Declaration − Begin the XML declaration with the following
statement.
<?xml version = "1.0" encoding = "UTF-8" standalone = "yes" ?>
DTD − Immediately after the XML header, the document type
declaration follows, commonly referred to as the DOCTYPE −
<!DOCTYPE address [
The DOCTYPE declaration has an exclamation mark (!) at the start of
the element name. The DOCTYPE informs the parser that a DTD is
associated with this XML document.
DTD Body − The DOCTYPE declaration is followed by body of the
DTD, where you declare elements, attributes, entities, and notations.
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone_no (#PCDATA)>
Several elements are declared here that make up the vocabulary of
the <name> document. <!ELEMENT name (#PCDATA)> defines the
element name to be of type "#PCDATA". Here #PCDATA means
parse-able text data.
End Declaration − Finally, the declaration section of the DTD is closed
using a closing bracket and a closing angle bracket (]>). This
effectively ends the definition, and thereafter, the XML document
follows immediately.
Rules
The document type declaration must appear at the start of the
document (preceded only by the XML header) − it is not permitted
anywhere else within the document.
Similar to the DOCTYPE declaration, the element declarations must
start with an exclamation mark.
The Name in the document type declaration must match the element
type of the root element.
External DTD
In external DTD elements are declared outside the XML file. They are
accessed by specifying the system attributes which may be either the
legal .dtd file or a valid URL. To refer it as external DTD, standalone
attribute in the XML declaration must be set as no. This means,
declaration includes information from the external source.
Syntax
Following is the syntax for external DTD −
<!DOCTYPE root-element SYSTEM "file-name">
where file-name is the file with .dtd extension.
Example
The following example shows external DTD usage −
<?xml version = "1.0" encoding = "UTF-8" standalone = "no" ?>
<!DOCTYPE address SYSTEM "address.dtd">
<address>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>
The content of the DTD file address.dtd is as shown −
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
Types
You can refer to an external DTD by using either system identifiers or
public identifiers.
System Identifiers
A system identifier enables you to specify the location of an external
file containing DTD declarations. Syntax is as follows −
<!DOCTYPE name SYSTEM "address.dtd" [...]>
As you can see, it contains keyword SYSTEM and a URI reference
pointing to the location of the document.
Public Identifiers
Public identifiers provide a mechanism to locate DTD resources and
is written as follows −
<!DOCTYPE name PUBLIC "-//Beginning XML//DTD Address
Example//EN">
As you can see, it begins with keyword PUBLIC, followed by a
specialized identifier. Public identifiers are used to identify an entry in
a catalog. Public identifiers can follow any format, however, a
commonly used format is called Formal Public Identifiers, or FPIs.
2. XML Schema is commonly known as XML Schema Definition
(XSD).
● It is used to describe and validate the structure and the
content of XML data.
● XML schema defines the elements, attributes and data
types.
● Schema element supports Namespaces. It is similar to a
database schema that describes the data in a database.
Syntax
You need to declare a schema in your XML document as follows −
Example
<?xml version = "1.0" encoding = "UTF-8"?>
<xs:schema xmlns:xs = "http://www.w3.org/2001/XMLSchema">
<xs:element name = "contact">
<xs:complexType>
<xs:sequence>
<xs:element name = "name" type = "xs:string" />
<xs:element name = "company" type = "xs:string" />
<xs:element name = "phone" type = "xs:int" />
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
The basic idea behind XML Schemas is that they describe the
legitimate format that an XML document can take.
Elements
As we saw in the XML - Elements chapter, elements are the building
blocks of XML document. An element can be defined within an XSD as
follows −
<xs:element name = "x" type = "y"/>
Definition Types
You can define XML schema elements in the following ways −
Simple Type
● Simple type element is used only in the context of the text. Some
of the predefined simple types are: xs:integer, xs:boolean,
xs:string, xs:date.
For example −
<xs:element name = "phone_number" type = "xs:int" />
Complex Type
● A complex type is a container for other element definitions. This
allows you to specify which child elements an element can
contain and to provide some structure within your XML
documents. For example −
<xs:element name = "Address">
<xs:complexType>
<xs:sequence>
<xs:element name = "name" type = "xs:string" />
<xs:element name = "company" type = "xs:string" />
<xs:element name = "phone" type = "xs:int" />
</xs:sequence>
</xs:complexType>
</xs:element>
In the above example, Address element consists of child elements.
This is a container for other <xs:element> definitions, that allows to
build a simple hierarchy of elements in the XML document.
Global Types
● With the global type, you can define a single type in your
document, which can be used by all other references. For
example, suppose you want to generalize the person and
company for different addresses of the company. In such case,
you can define a general type as follows −
<xs:element name = "AddressType">
<xs:complexType>
<xs:sequence>
<xs:element name = "name" type = "xs:string" />
<xs:element name = "company" type = "xs:string" />
</xs:sequence>
</xs:complexType>
</xs:element>
Now let us use this type in our example as follows −
<xs:element name = "Address1">
<xs:complexType>
<xs:sequence>
<xs:element name = "address" type = "AddressType" />
<xs:element name = "phone1" type = "xs:int" />
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name = "Address2">
<xs:complexType>
<xs:sequence>
<xs:element name = "address" type = "AddressType" />
<xs:element name = "phone2" type = "xs:int" />
</xs:sequence>
</xs:complexType>
</xs:element>
Instead of having to define the name and the company twice (once for
Address1 and once for Address2), we now have a single definition.
This makes maintenance simpler, i.e., if you decide to add "Postcode"
elements to the address, you need to add them at just one place.
Attributes
● Attributes in XSD provide extra information within an element.
Attributes have name and type property as shown below −
<xs:attribute name = "x" type = "y"/>
