Html ,css,xml

HTML
 A text editor called Notepad is built into
Windows.It can be found inside the
Accessories panel of your Program list,
inside the Start menu.
 All HTML files typically have either the
.htm or the .html file name extension.
 Supporting browsers are Internet
Explorer 9, Google Chrome, Mozilla
Firefox, Opera, Safari.
2

HTML
<HTML>
<!- - main.html - ->
<!- -First Program - ->
<HEAD>
<TITLE>Internet Programming</TITLE>
</HEAD>
<BODY>
<P>Welcome!</P>
</BODY>
</HTML>
3

HTML
Headers are a simple form of text
formatting that vary text size based on
the headers “ level ”. The six header
elements (H1 through H6) are often used
to delineate new sections and subsections
of a page.
Actual size of the text of each header
element is selected by the browser and
can infact vary significantly between
browsers
4

HTML Contd.
<HTML>
<!- - Header.html - ->
<!- - HTML headers - ->
<HEAD>
<TITLE>How to program headers</TITLE>
</HEAD>
<BODY>
<!- - Centers everything in the CENTER
element - ->
<CENTER>
5

HTML
<H1>Level 1 Header</H1>
</CENTER>
</BODY>
</HTML>
6

HTML Contd..
Text Styling In HTML , text can be
highlighted with bold, underlined, and/or
italicized styles.
ALIGN tag is the method by which any
single element of the page can be aligned
. The HTML convention is to enclose the
ALIGN value (left , center , or right) in
quotation marks.
<U>…</U> tags display underlined text.
<P>…</P> tags forms one paragraph.
7

HTML Contd.
<B>…</B> The text becomes Bold.
<I>…</I> The text becomes Italics.
<HTML>
<HEAD>
<TITLE> Text Style </TITLE>
</HEAD>
<BODY>
<H1 ALIGN = “center”> <U>Welcome to our
site!</U></H1>
<P>We have designed this site to teach
<I>HTML</I>We are using HTML since
version <B> 2.0 </B></P>
8

HTML
<H2> ALIGN = “center” >Have fun with
the site </H2>
</BODY>
</HTML>
9

HTML
Linking creates hyperlink to the document
on the server and different servers to
make a world wide network.
Links are inserted using the A(anchor)
element.
To specify the address to link to , insert the
HREF attribute into the anchor tag as
follows: <A HREF = “address”>
10

HTML
<HTML>
<HEAD>
<TITLE> Links </TITLE>
</HEAD>
<BODY>
<CENTER>
<H2>Search Engines</H2>
<P><B>Click on address<B></P>
<P> Yahoo: <A HREF =
http://www.yahoo.com>http://www.yaho
o.com</A></P>
11

HTML
<P>AltaVista:<A HREF =
http://www.altavista.com>http://www.alt
avista.com</A></P>
</CENTER>
</BODY>
</HTML>
12

HTML
<HTML>
<!- - Email Hyperlink - ->
<HEAD>
<TITLE>Contact page</TITLE>
</HEAD>
<BODY>
<P>My email address is <A HREF =
“mailto:shwetaw@rediffmail.com”>
shwetaw@rediffmail.com </A>
Click on the address and your browser will
open an email message and address it to me.
13

HTML
<HTML>
<!- - picture.html- ->
<!- - Adding images with HTML - ->
<HEAD>
<TITLE>Welcome</TITLE>
</HEAD>
<CENTER>
<!- - FORMAT FOR ENTERING IMAGES,
KEEP THE IMAGE IN THE SAME FOLDER
OR CREATE THE FOLDER- ->
15

HTML
<IMG SRC = "images/Winter.jpg" BORDER
= "1" HEIGHT = "144" WIDTH = "200"
ALT = "Harvey and Paul Deitel"/>
</CENTER>
</BODY>
</HTML>
IMG SRC: Is used for the location of Image
file.
16

HTML
Formatting text with <FONT>
<HTML>
<HEAD>
<TITLE>WELCOME</TITLE>
</HEAD>
<BODY>
<H1 ALIGN = "Center"><U>Welcome to
our Website</U></H1>
17

HTML
<P><FONT COLOR = "red" SIZE = "+1"
FACE = "aRIEL">We have designed this
site to teach <B>HTML</B>.</FONT>
<FONT COLOR = "purple" SIZE = "+2"
FACE = "vERDANA">We have been
using<B>HTML</B>
since<U>version<STRONG>2.0</STRON
G></U>,and we enjoy the
features</FONT>
18

HTML
<FONT COLOR = "blue" SIZE = "+1" FACE
= "Helvetica">It seems only a short time
ago<B>HTML</B>book.</FONT>
<H2 ALIGN = "center">Have fun with the
site</H2></P>
</BODY>
</HTML>
19

HTML
Special Characters We insert special
character and symbol by using the form
&code.
<HEAD>
<!- - INSERTING SPECIAL CHARACTERS- -
>
<HEAD>
<TITLE>Contact Page</TITLE>
</HEAD>
20

HTML
<BODY>
<P>My email address is <A HREF =
"mailto:shwetaw@rediffmail.com">shweta
w@rediffmail.com</A>.Click on the
address and your browser will open an
email message and address it to my
address,</P>
<P>All information on this site
is<B>©</B>Deitel<B>&</B>A
ssociates, 1999.</P>
21

HTML
<DEL><P>You may copy up to 3.14 *
10<SUP>2</SUP>characters worth of
information from this
site.</P></DEL><BR>Just make sure
you<SUB> do not copy more
information</SUB>than is allowable.
<P>No permission is needed if you only
need to use<B>< ¼</B>of the
information presented here.</P>
</BODY>
</HTML>
22

HTML
<DEL> </DEL> Text can be struck out.
<SUB> </SUB> Text can be subscript.
<SUP> </SUP> Text can be superscript.
23

HTML
Line Breaks and Horizontal rule
<HR> inserts a horizontal rule, indicated
by the <HR> tag.
WIDTH attribute adjust the width of the
horizontal rule.
SIZE attribute determines the height of the
horizontal rule.
ALIGN can be left center or right.
NOSHADE eleminates shading effect and
displays horizontal rule as a solid color
bar.
24

HTML
Unordered Lists Here the unordered list
element creates a list in which every line
begins with a bullet mark.<UL>…</UL>
opens and close the unordered list.
<LI>..</LI>Inserts a new entry in the
List.
<HTML>
<!- - Unordered Lists- ->
<HEAD>
25

HTML Contd.
<TITLE>Links</TITLE>
</HEAD>
<BODY>
<CENTER>
<H2>Internet Search Engines</H2>
<P><B>Click on search engine
address</B></P>
<UL>
26

HTML Contd.
<LI>Yahoo:<A HREF =
"http://www.yahoo.com">
http://www.yahoo.com</A></LI>
<LI>Alta Vista: <A HREF =
"http://www.altavista.com">
http://www.altavista.com</A></LI>
<LI>Ask Jeeves: <A HREF =
"http://www.askjeeves.com">
http://www.askjeeves.com</A></LI>
27

HTML
</UL>
</CENTER>
</BODY>
</HTML>
28

HTML Contd.
Ordered and Nested List
<OL>..</OL>tag is for ordered list, the
list is defined by the TYPE attribute. The
default type is “1”,”I”,”i”,”A”,”a”.
<HTML>
<!- - Nested and ordered list- ->
<HEAD>
<TITLE>LIST</TITLE>
</HEAD>
29

HTML Contd.
<BODY>
<CENTER>
<H2><U>The best feature of the
Internet</U></H1>
</CENTER>
<UL>
<LI>You can meet new people from
countries around the world.</LI>
</LI>You have access to new media as it
becomes public:</LI>
<!- - Nested List- ->
30

HTML Contd.
<UL>
<LI>New games</LI>
<LI>New applications</LI>
<UL>
<LI>For business</LI>
<LI>For pleasure</LI>
</UL>
31

HTML Contd.
<LI>Around the clock news</LI>
<LI>Search engines</LI>
<LI>Shopping</LI>
<LI>Programming</LI>
<UL>
<LI>HTML</LI>
<LI>Java</LI>
<LI>Dynamic HTML</LI>
32

HTML Contd.
<LI>Scripts</LI>
<LI>New languages</LI>
</UL>
</UL>
<LI>Links</LI>
<LI:Keeping in touch with old friends</LI>
<LI>It is technology of the future</LI>
</UL>
33

HTML
<BR><CENTER><H2>My favourite 3
<I>CEO</I></H2></CENTER>
<OL>
<LI>Bill Gates</LI>
<LI>Steve Jobs</LI>
<LI>Michael Dell</LI>
</OL>
</BODY>
</HTML>
34

HTML
HTML Tables The table organizes data into
rows and columns.
<THEAD> is used to format table header
area.
<TH>.. </TH>
Inserts a header cell and displays bold text
<TR>..</TR>
Inserts a table row.
<TD>..</TD>
Inserts a data cell.
35

HTML Contd.
<CAPTION>…</CAPTION>Summarizes
the table contents.
<HTML>
<!- - Table design - ->
<HEAD>
<TITLE>Tables</TITLE>
</HEAD>
<BODY>
<CENTER>
36

HTML Contd.
<H2>Table example</H2>
</CENTER>
<TABLE BORDER = "1" ALIGN = "center"
WIDTH = "40%">
<CAPTION>Here is a sample
table.</CAPTION>
<THEAD>
<TR><TH>This is head.</TH></TR>
</THEAD>
<TBODY>
37

HTML
<TR><TD ALIGN = "center">This is the
body,</TD></TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
38

HTML
HTML Forms to collect the information on
site we use forms.
<FORM METHOD = “POST” ACTION =
“/cgi-bin/formmail”>
Form is the element, Method attribute
indicates the way the web server will
organize and send you the form output.
METHOD = “post” causes changes to
server data.METHOD = “get” should be
used when your form does not cause
any changes in server-side data.
39

HTML
The INPUT element always requires the
TYPE attribute.Two other attributes are
NAME which provides a unique
identification for the INPUT element, and
VALUE which indicates the value that the
INPUT element sends to the server upon
submission.
URL /cgi-bin/formmail for making
database request.
40

HTML Contd.
<HTML>
<!- -Form design- ->
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<H2>Feedback Form</H2>
<P>Please fill out this form to help us
improve our site.</P>
<FORM METHOD = "POST" ACTION = "/cgi-
bin/formmail">
41

HTML Contd.
<INPUT TYPE = "hidden" NAME =
"recipient"
VALUE = "shwetaw@rediffmail.com">
<INPUT TYPE = "hidden" NAME = "subject"
VALUE = "Feedback Form">
<INPUT TYPE = "hidden" NAME = "redirect"
VALUE = "main.html">
<P><B>Name:</B>
42

HTML Contd.
<INPUT NAME = "name" TYPE = "text"
SIZE = "25"></P>
<INPUT TYPE = "submit" VALUE = "Submit
your entries">
<INPUT TYPE = "reset" VALUE = "Clear
your entries">
</FORM>
</BODY>
</HTML>
43

CSS
Cascading Style Sheets (CSS) allow
you to specify the style of your page
elements (spacing, margins, etc)
separately from the structure of your
document (section headers, body text ,
links etc.)This separation of structure
from content allows greater manageability
and makes changing the style of your
document easier.
Save the file with extension .css and to
see the display save it with .html
extension.
44

CSS
.css ext is used for embedding the css file
into html code. The file with the .css file
extension can be created and saved using
the Notepad. When saving, however,
make sure you are not saving the file as a
text with the .txt file extension but as a
file with the .css file extension. External
CSS files contain only the CSS code
and are saved with the CSS file
extension. The file with the .css file
extension is then referenced in your HTML
by using the <link> instead of the
<style>.
45

CSS
Internal CSS
Cascading Style Sheets come in three
flavors: internal, external, and inline. We
will cover internal and external, as they
are the only flavors a designer should
utilize. In this lesson, we cover the basics
of the easier type, internal. When using
internal CSS, you must add a new tag,
<style>, inside the <head> tag.
46

CSS
External CSS is a file that contains only
CSS code and is saved with a ".css" file
extension. This CSS file is then referenced
in your HTML using the <link> instead of
<style>.
Why Use External CSS?
1) It keeps your website design and
content separate.
2) It's much easier to reuse your CSS
code if you have it in a separate file.
Instead of typing the same CSS code on
47

CSS
every web page you have, simply have
many pages refer to a single CSS file with
the "link" tag.
3) You can make drastic changes to your
web pages with just a few changes in a
single CSS file.
CSS Inline
It is possible to place CSS right in the
thick of your HTML code, and this method
of CSS usage is referred to as inline css.
48

CSS
Inline CSS has the highest priority out of
the three ways you can use CSS:
external, internal, and inline. This means
that you can override styles that are
defined in external or internal by using
inline CSS. However, inline CSS detracts
from the true purpose of CSS, to separate
design from content, so please use it
sparingly.
49

CSS Contd.
Example on Inline CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD
HTML 5.0 Transitional//EN">

<HTML>

<HEAD><TITLE>Inline
Styles</TITLE></HEAD>
<BODY>
<P>Here is some text</P>
50

CSS
<P >Here is some more text</P>
<!- - Style attribute allows you to declare
inline, it specifies a style for an element,
semicolon specifies two properties - ->
<P STYLE = "font-size: 20pt; color:
#0000FF">Even more text</P>
</BODY>
<HTML>
Save the file with .html extension and
it is declared using STYLE attribute
51

CSS Contd.
Example on Internal CSS
<HTML>

<HEAD>
<TITLE>More Styles</TITLE>
<!- - This begins the style sheet section - -
>
<STYLE TYPE = "text/css">
52

CSS
A.nodec {text-decoration:none}
<!- - Applies the text decoration property
to all A elements whose class attribute is
set to nodec.Default browser rendering of
an A element is to underline,but here it is
set to none.The text-decoration property
applies decorations to text within an
element.Other possible values are
overline(line above),line-through(strike)
and blink.The .nodec appended to A is an
extension of class styles - ->
53

CSS Contd.
A:hover {text-decoration: underline;
color: red;
background-color: #CCFFCC}

<!- - hover is a pseudo-class.Pseudo-
classes give the author access to content
not specifically declared in the
document.The hover pseudo-class is
dynamically activated when the user
moves the mouse cursor over an A
element.- ->
54

CSS
<!–- CSS is a powerful tool for universal formatting,
each rule body begins and ends with curly braces-->
LI EM {color:red;
font-weight:bold}
<!- - declare a style for all EM(stress emphasis)
elements that are children of LI elements,Mushrooms
will be red and bold, to apply style for both LI and EM
separate the elements with comma.- ->
UL {margin-left: 75px}
UL UL{text-decoration: underline;
margin-left:15px }
</STYLE>
</HEAD>
55

CSS Contd.
<BODY>
<H1>Shopping list for
<EM>Monday</EM>:</H1>
<UL>
<L1>Milk</LI>
<LI>Bread
<UL>
<LI>White bread</LI>
<LI>Rye bread</LI>
<LI>Whole wheat bread</LI>
56

CSS
</UL></LI>
<LI>Rice</LI>
<LI>Potatoes</LI>
<LI>Pizza <EM>with
mushroom</EM></LI>
</UL>
<P><A CLASS = "nodec" HREF =
"http://food.com">Go to the Grocery
store</A></P>
</BODY>
</HTML>
57

CSS
In Internal CSS STYLE tag is used in
HEAD tag.
58

CSS Contd.
Example on External CSS
Create a CSS file with the STYLE tag as
below and save it with .css extension.

EM{background-color:
#8000FF;color:white}
H1{font-family: Arial, sans-serif}
59

CSS
P{ font-size: 18pt}
.blue{ color: blue}
</STYLE>
Now create an HTML file with .html
extension having a Link tag for linking
.css file, the advantage is as such that we
can call the . css file as many times as we
want in html file just like macros.
60

CSS Contd.
<HTML>

<HEAD>
<TITLE>Style Sheets</TITLE>
<link rel="stylesheet" type="text/css"
href="Stylesheet.css" media="screen" />
<!- - link rel is linking relationship- ->
</HEAD>
<BODY>
61

CSS
<H1 CLASS = "blue">A Heading</H1>
<P >Here is some text . Here is some text .
Here is some text.
<H1>Another Heading</H1>
<P CLASS = "blue">Here is some more
text<EM>more</EM>text . Here is some
more text.</P>
</BODY>
</HTML>
62

CSS Contd.
Linking External Style sheets
Create styles.css file as below
A{text-decoration:none}
A:hover{text-decoration: underline;
color: red;
background: #CCFFCC}
63

CSS
LI EM{color:red;
font-weight:bold}
UL{margin-left:2cm}
UL UL {text-decoration:underline;
margin-left: .5cm}
64

CSS Contd.
Create styles.html file with below code
<HTML>

<HEAD>
<TITLE>
Importing style sheets</TITLE>
65

CSS Contd.
<LINK REL = "stylesheet" TYPE =
"text/css" HREF = "styles.css">
</HEAD>
<BODY>
<H1>Shopping list for
<I>Monday</I>:</H1>
<UL>
<LI>Milk</LI>
<LI>Bread</LI>
<UL>
66

CSS Contd.
<LI>White bread</LI>
<LI>Rye bread</LI>
<LI>Whole wheat bread<LI>
</UL></LI>
<LI>Rice</LI>
<LI>Potatoes</LI>
<LI>Pizza <I>with mushrooms</I> </LI>
</UL>
<A HREF = "http://food.com">Go to the
Grocery store</A>
67

CSS
Positioning Elements
HTML, 5.0 Transitional//EN">
<HTML>

<HEAD>
<TITLE>Absolute Positioning</TITLE>
</HEAD>
69

CSS
<BODY>
<IMG SRC = "images/Winter.jpg STYLE =
"position: absolute; top; 0px;
left: 0px; z-index: 1>
<H1 STYLE = "position: absolute; top:
50px; left: 50px;
z-index: 3">Positioned Text</H1>
<IMG SRC = "images/Winter.jpg" STYLE =
"position: absolute; top:;25px;
left: 100px; z-index: 2">
70

CSS
<!- - position absolute removes normal
flow of the document and gives greater
control over how the document is
displayed , position relative gives normal
flow to the document - ->
<!- - z-index attribute allows you to
properly layer overlapping elements .
higher z-index value are displayed in front
like 3 in front 1 at back- ->
</BODY>
</HTML>
71

CSS Contd.
Backgrounds
<HTML>

<HEAD>
<TITLE>Background Images</TITLE>
72

CSS Contd.
BODY { background-image:
url(images/Sunset.jpg);
background-position:bottom right;
background-repeat: no-repeat;
background-attachment: fixed}
P { font-size: 2em;
color: #AA5588;
text-indent: lem;
<!—(lem)web page read more like a novel,first
line of every paragraph is indented- ->
73

CSS
<!- - Position can be top, bottom, center,
left, right. - ->
<!- - Background repeat controls the
tiling of the background image,no repeat
only one copy of image is placed on
screen,x-repeat tile horizontal image,y-
repeat tile the vertical image - ->
<!- - Background-attachment:fixed fixes
the image, scroll-moves the image- ->
74

CSS Contd.
font-family: Arial,sans-serif}
.dark { font-weight: bold}
<!—bold and normal-->
</STYLE>
</HEAD>
<BODY>
<P>
This is sample text to fill in the page.
<SPAN CLASS = "dark">This is some
sample text to fill in the page</SPAN>
75

CSS
<!—SPAN is to apply styles or ID attributes
to a block of text, with no line breaks,it is
similar to DIV
This is some sample text to fill in the page.
</P>
</BODY>
</HTML>
76

CSS Contd.
Element Dimensions
The dimensions of each element on the
page can be set using CSS.
<!DOCTYPE html>
<html>
<head>
<style>
div.Scroll
{
background-color:#00FFFF;
77

CSS Contd.
width:100px;
height:100px;
overflow:scroll;
}
div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
78

CSS
</style>
</head>
<body>
<p>The overflow property specifies what to do
if the content of an element exceeds the size
of the element's box.</p>
<p>overflow:scroll</p>
<!—This adds scroll bar to the text
<div class="scroll">You can use the overflow
property when you want to have better
control of the layout. The default value is
visible.</div>
79

CSS
<p>overflow:hidden</p>
<div class="hidden">You can use the
overflow property when you want to have
better control of the layout. The default
value is visible.</div>
</body>
</html>
80

CSS
Borders
<!DOCTYPE html>
<html>
<head>
<style>
p
{
border:5px solid red;
}
81

CSS
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>
82

CSS Contd.
User Style sheets
<HTML>

<HEAD>
<TITLE>User Styles</TITLE>
83

CSS Contd.
.note{font-size:1.5em}
</STYLE>
</HEAD>
</BODY>
<P>Thanks for visiting my website<P/>
<P CLASS = "note">Please Note:This site
will be moving soon.Please check
periodically for updates.</P>
<!—we multiply by 1.5 the font size of all
elements with CLASS = “note”
84

XML
XML
What is XML?
 XML stands for EXtensible Markup
Language
 XML is a markup language much like
HTML
 XML was designed to carry data, not to
display data
 XML tags are not predefined. You must
define your own tags
 XML is designed to be self-descriptive
 XML is a W3C Recommendation
86

XML
The Difference Between XML and HTML
 XML is not a replacement for HTML.
 XML and HTML were designed with
different goals:
 XML was designed to transport and store
data, with focus on what data is
 HTML was designed to display data, with
focus on how data looks
 HTML is about displaying information,
while XML is about carrying information.
87

XML Contd.
Display XML Data in an HTML Page
In the following example, we open an XML
file ("cdcatalog.xml"), then we loop
through each CD element, and display the
value of the ARTIST element and the
TITLE element in an HTML table:
XML File
88

XML Contd.
<?xml version="1.0" encoding="ISO-8859-
1"?>

<CATALOG> //Root element
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
//Child elements.
89

XML Contd.
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
//Sub child elements
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
90

XML Contd.
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
</CATALOG>
HTML File
<html>
<body>
91

XML Contd.
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera,
Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new
ActiveXObject("Microsoft.XMLHTTP");
}
92

XML Contd.
xmlhttp.open("GET","cdcatalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<table border='1'>");
var
x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
93

XML Contd.
{
document.write("<tr><td>");
document.write(x[i].getElementsByTagName(
"ARTIST")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName(
"TITLE")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
94

XML
document.write("</table>");
</script>
</body>
</html>
95

XML
XML and XSL
 XML also has it's own styles language -
XSL. XSL stands for Extensible Styles
Language and is a very powerful language
for applying styles to XML documents.
XSL has two parts - a formatting
language and a transformation
language.
 The formatting language allows you to
apply styles similar to what CSS does.
Browser support for the XSL formatting
language is limited at this stage.
96

XML
 The transformation language is known as
XSLT (XSL Transformations). XSLT allows
you to transform your XML document into
another form. For example, you could use
XSLT to dynamically output some (or all)
of the contents of your XML file into an
HTML document containing other content.
97

XML
XSL (Extensible Style Language)
XSL defines the layout of an XML
document much like CSS defines the
layout of an HTML document-although
XSL is much more powerful. An XSL style
sheets provides the rules for displaying or
organizing an XML documents data. The
XML document that uses only HTML
elements and attributes.This part of XSL
concerned with transformation is called
XSL Transformation(XSLT)
98

xml
Navigate through XML nodes
Create the cdcatalog xml file
1"?>
<CATALOG>
<CD>
99

XML
<YEAR>1985</YEAR>
</CD>
<CD>
100

XML
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
</CATALOG>
101

XML Contd.
Create HTML file of cdcatalog.html
<!DOCTYPE html>
<html>
<head>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome,
Opera, Safari
xmlhttp=new XMLHttpRequest();
102

XML Contd.
}
else
{// code for IE6, IE5
xmlhttp=new
ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","cdcatalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
103

XML Contd.
x=xmlDoc.getElementsByTagName("CD");
i=0;
function displayCD()
{
artist=(x[i].getElementsByTagName("ARTIS
T")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")
[0].childNodes[0].nodeValue);
104

XML Contd.
year=(x[i].getElementsByTagName("YEAR")
[0].childNodes[0].nodeValue);
txt="Artist: " + artist + "<br>Title: " +
title + "<br>Year: "+ year;
document.getElementById("showCD").inner
HTML=txt;
}
function next()
105

XML Contd.
{
if (i<x.length-1)
{
i++;
displayCD();
}
}
function previous()
{
106

XML Contd.
if (i>0)
{
i--;
displayCD();
}
}
</script>
</head>
<body onload="displayCD()“>
107

XML
<div id='showCD'></div><br>
<!--The <div> tag defines a division or a
section in an HTML document.
The <div> tag is used to group block-
elements to format them with CSS.
<input type="button" onclick="previous()"
value="<<" />
<input type="button" onclick="next()"
value=">>" />
</body>
</html>
108

XML
Displaying your XML Files with CSS
 It is possible to use CSS to format an XML
document.
 Below is an example of how to use a CSS
style sheet to format an XML document:
109

XML Contd.
 Take a look at this XML file: The CD
catalog
 Then look at this style sheet: The CSS file
 Finally, view: The CD catalog formatted
with the CSS file
XML FILE
1"?>
<CATALOG>
110

XML Contd.
<CD>
<YEAR>1985</YEAR>
</CD>
111

XML Contd.
<CD>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
</CATALOG>
112

XML
Create CSS File
CATALOG
{
background-color: #ffffff;
width: 100%;
}
CD
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
113

XML
TITLE
{
color: #FF0000;
font-size: 20pt;
}
ARTIST
{
color: #0000FF;
font-size: 20pt;
}
COUNTRY,PRICE,YEAR,COMPANY
{
114

XML Contd.
display: block;
color: #000000;
margin-left: 20pt;
}
HTML File to implement
1"?>
<?xml-stylesheet type="text/css"
href="cdcatalog.css"?>
<CATALOG>
115

XML Contd.
<CD>
<YEAR>1985</YEAR>
</CD>
116

XML
<CD>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
</CATALOG>
117

XML
XML Schema
An XML Schema describes the structure of
an XML document.A schema is Microsofts
expansion of the DTD is written in a
format dis-similar to the format of
XML.The W3C is currently developing a
schema format called Document Content
Description.(DCD).
118

XML
An XML Document
XML document called "shiporder.xml“
1"?>
<shiporder orderid="889923"
xmlns:xsi="http://www.w3.org/2001/XML
Schema-instance"
xsi:noNamespaceSchemaLocation="shipor
der.xsd">
<!– xsd is xml schema definition file,ns is
Namespaces provide a method to avoid
element name conflicts. 
119

XML
<orderperson>John Smith</orderperson>
<shipto>
<name>Ola Nordmann</name>
<address>Langgt 23</address>
<city>4000 Stavanger</city>
<country>Norway</country>
</shipto>
<item>
<title>Empire Burlesque</title>
<note>Special Edition</note>
<quantity>1</quantity>
120

XML
<price>10.90</price>
</item>
<item>
<title>Hide your heart</title>
<quantity>1</quantity>
<price>9.90</price>
</item>
</shiporder>
Create an XML Schema
121

XML
schema file ("shiporder.xsd")
1" ?>
<xs:schema
xmlns:xs="http://www.w3.org/2001/XML
Schema">
< - - xmlns is xml namespace,xs is xml
schema- ->
<xs:simpleType name="stringtype">
<xs:restriction base="xs:string"/>
</xs:simpleType>
122

XML
<xs:simpleType name="inttype">
<xs:restriction base="xs:positiveInteger"/>
</xs:simpleType>
<!- - The restriction element defines
restrictions on a simpleType, simpleContent,
or complexContent definition. - ->
<xs:simpleType name="dectype">
<xs:restriction base="xs:decimal"/>
</xs:simpleType>
<xs:simpleType name="orderidtype">
<xs:restriction base="xs:string">
123

XML
<xs:pattern value="[0-9]{6}"/>
</xs:restriction>
</xs:simpleType>
<xs:complexType name="shiptotype">
<xs:sequence>
<xs:element name="name"
type="stringtype"/>
<xs:element name="address"
type="stringtype"/>
<xs:element name="city"
type="stringtype"/>
124

XML
<xs:element name="country"
type="stringtype"/>
</xs:sequence>
</xs:complexType>
<xs:element name="shiporder"
type="shipordertype"/>
</xs:schema>
125

XML
Why Use XML Schemas?
XML Schemas Support Data Types
 One of the greatest strength of XML Schemas is
the support for data types.
 With support for data types:
 It is easier to describe allowable document
content
 It is easier to validate the correctness of data
 It is easier to work with data from a database
 It is easier to define data facets (restrictions on
data)
 It is easier to define data patterns (data formats)
 It is easier to convert data between different
data types
126

XML
XML Schemas Secure Data
Communication
 When sending data from a sender to a
receiver, it is essential that both parts
have the same "expectations" about the
content.
 With XML Schemas, the sender can
describe the data in a way that the
receiver will understand.
127

XML
XML Schemas are Extensible
 XML Schemas are extensible, because
they are written in XML.
 With an extensible Schema definition you
can:
 Reuse your Schema in other Schemas
 Create your own data types derived from
the standard types
 Reference multiple schemas in the same
document
128

XML
XML Advanced
XML on the Server
 XML files are plain text files just like HTML
files.
 XML can easily be stored and generated
by a standard web server.
129

XML
XML files can be stored on an Internet
server exactly the same way as HTML
files.
1"?>
<note>
<from>Jani</from>
<to>Tove</to>
<message>Remember me this
weekend</message>
</note> // Save with note.xml
130

XML
Generating XML with ASP
<%
response.ContentType="text/xml"
response.Write("<?xml version='1.0'
encoding='ISO-8859-1'?>")
response.Write("<note>")
response.Write("<from>Jani</from>")
response.Write("<to>Tove</to>")
response.Write("<message>Remember me
this weekend</message>")
response.Write("</note>")
%>
131

XML
Generating XML with PHP
<?php
header("Content-type: text/xml");
echo "<?xml version='1.0'
encoding='ISO-8859-1'?>";
echo "<note>";
echo "<from>Jani</from>";
echo "<to>Tove</to>";
echo "<message>Remember me this
weekend</message>";
echo "</note>";
?>
132

XML
Generating XML From a Database
<%
response.ContentType = "text/xml"
set
conn=Server.CreateObject("ADODB.Connection")
conn.provider="Microsoft.Jet.OLEDB.4.0;"
conn.open server.mappath("/db/database.mdb")
sql="select fname,lname from tblGuestBook"
set rs=Conn.Execute(sql)
response.write("<?xml version='1.0'
encoding='ISO-8859-1'?>")
response.write("<guestbook>")
while (not rs.EOF)
133

XML
response.write("<guest>")
response.write("<fname>" & rs("fname") &
"</fname>")
response.write("<lname>" & rs("lname") &
"</lname>")
response.write("</guest>")
rs.MoveNext()
wend
rs.close()
conn.close()
response.write("</guestbook>")
%>
134

XML
Transforming XML with XSLT on the Server
<%
'Load XML
set xml = Server.CreateObject("Microsoft.XMLDOM")
xml.async = false
xml.load(Server.MapPath("simple.xml"))
'Load XSL
set xsl = Server.CreateObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load(Server.MapPath("simple.xsl"))
'Transform file
Response.Write(xml.transformNode(xsl))
%>
135

XML
 Example explained
 The first block of code creates an instance of
the Microsoft XML parser (XMLDOM), and
loads the XML file into memory.
 The second block of code creates another
instance of the parser and loads the XSL file
into memory.
 The last line of code transforms the XML
document using the XSL document, and
sends the result as XHTML to your browser.
Nice!
136

XML
XML Related Technologies
 Below is a list of XML technologies.
 XHTML (Extensible HTML)
A stricter and cleaner XML based version
of HTML.
 XML DOM (XML Document Object Model)
A standard document model for accessing
and manipulating XML.
137

XML
 XSL (Extensible Style Sheet Language) XSL
consists of three parts:
 XSLT (XSL Transform) - transforms XML into
other formats, like HTML
 XSL-FO (XSL Formatting Objects)- for formatting
XML to screen, paper, etc
 XPath - a language for navigating XML
documents
 XQuery (XML Query Language)
An XML based language for querying XML data.
 DTD (Document Type Definition)
A standard for defining the legal elements in an
XML document.
 XSD (XML Schema)
An XML-based alternative to DTD.
138

XML
 XLink (XML Linking Language)
A language for creating hyperlinks in XML documents.
 XPointer (XML Pointer Language)
Allows the XLink hyperlinks to point to more specific parts
in the XML document.
 SOAP (Simple Object Access Protocol)
An XML-based protocol to let applications exchange
information over HTTP.
 WSDL (Web Services Description Language)
An XML-based language for describing web services.
 RDF (Resource Description Framework)
An XML-based language for describing web resources.
 RSS (Really Simple Syndication)
A format for syndicating news and the content of news-like
sites.
 SVG (Scalable Vector Graphics)
Defines graphics in XML format.
139

XML
XML in Real Life
 XMLNews is a specification for exchanging
news and other information.
 Using such a standard makes it easier for
both news producers and news consumers
to produce, receive, and archive any kind
of news information across different
hardware, software, and programming
languages.
 An example XMLNews document:
140

XML
<?xml version="1.0" encoding="ISO-8859-1"?>
<nitf>
<head>
<title>Colombia Earthquake</title>
</head>
<body>
<headline>
<hl1>143 Dead in Colombia Earthquake</hl1>
</headline>
<byline>
<!- - Solves the co/multi-author problem without
modifying the theme. Uses a custom taxonomy,
"Byline," that replaces the Display Author. - ->
141

XML
<bytag>By Jared Kotler, Associated Press
Writer</bytag>
<!-- Provide sidebar widgets that can be used to
display posts from a set of tags in the sidebar. 
</byline>
<dateline>
<location>Bogota, Colombia</location>
<date>Monday January 25 1999 7:28 ET</date>
</dateline>
</body>
</nitf>
<!-- NITF. News Industry Text Format instance. Holds
head and body.
142

XML
XML Weather Service
An example of an XML national weather
service from NOAA (National Oceanic and
Atmospheric Administration):
1" ?>
<current_observation>
<credit>NOAA's National Weather
Service</credit>
143

XML
<credit_URL>http://weather.gov/</credit_
URL>
<image>
<url>http://weather.gov/images/xml_lo
go.gif</url>
<title>NOAA's National Weather
Service</title>
<link>http://weather.gov</link>
</image>
144

XML
<location>New York/John F. Kennedy Intl
Airport, NY</location>
<station_id>KJFK</station_id>
<latitude>40.66</latitude>
<longitude>-73.78</longitude>
<observation_time_rfc822>Mon, 11 Feb
2008 06:51:00 -0500 EST
</observation_time_rfc822>
<weather>A Few Clouds</weather>
<temp_f>11</temp_f>
145

XML
<temp_c>-12</temp_c>
<relative_humidity>36</relative_humidit
y>
<wind_dir>West</wind_dir>
<wind_degrees>280</wind_degrees>
<wind_mph>18.4</wind_mph>
<wind_gust_mph>29</wind_gust_mph>
<pressure_mb>1023.6</pressure_mb>
<pressure_in>30.23</pressure_in>
<dewpoint_f>-11</dewpoint_f>
146

XML
dewpoint_c>-24</dewpoint_c>
<windchill_f>-7</windchill_f>
<windchill_c>-22</windchill_c>
<visibility_mi>10.00</visibility_mi>
<icon_url_base>http://weather.gov/weather/
images/fcicons/</icon_url_base>
<icon_url_name>nfew.jpg</icon_url_name>
<disclaimer_url>http://weather.gov/disclaimer
.html</disclaimer_url>
<copyright_url>http://weather.gov/disclaime
r.html</copyright_url>
</current_observation>
147

XML
XML - E4X
E4X adds direct support for XML to JavaScript.
XML As a JavaScript Object
E4X is an official JavaScript standard that adds
direct support for XML.
With E4X, you can declare an XML object variable
the same way as you declare a Date or an Array
object variable:
var x = new XML()
var y = new Date()
var z = new Array()
148

XML
E4X is an ECMAScript (JavaScript)
Standard
ECMAScript (European Computer
Manufacturers Association Script)
ECMAScript is the official name for
JavaScript. ECMA-262 (JavaScript 1.3)
was standardized in December 1999.
E4X is an extension of JavaScript that adds
direct support for XML. ECMA-357 (E4X)
was standardized in June 2004.
149

XML
The ECMA organization (founded in 1961)
is dedicated to the standardization of
Information and Communication
150

XML
Technology (ICT) and Consumer
Electronics (CE). ECMA has developed
standards for:
JavaScript
C# Language
International Character Sets
Optical Disks
Magnetic Tapes
Data Compression
Data Communication
and much more...
151

XML
Browser Support
Firefox is currently the only browser with
relatively good support for E4X.
There are currently no support for E4X in
Opera, Chrome, or Safari.
So far there is no indication for of E4X
support in Internet Explorer.
 The Future of E4X
 E4X is not widely supported. Maybe it
offers too little practical functionality not
already covered by other solutions:
152

XML
 For full XML processing, you still need the
XML DOM and XPath
 For accessing XMLHttpRequests, JSON is
the preferred format.
 For easy document handling, JQuery
selectors are easier.
153

Html ,css,xml

More Related Content

What's hot (17)

Viewers also liked (12)

Similar to Html ,css,xml (20)

Recently uploaded (20)

Html ,css,xml