html ,css,xml
Post on 13-Jan-2015
3.661 Views
Preview:
DESCRIPTION
TRANSCRIPT
1
HTML ,CSS,XMLHTML
2
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.
3
HTML
<HTML><!- - main.html - -><!- -First Program - -><HEAD><TITLE>Internet Programming</TITLE></HEAD><BODY><P>Welcome!</P></BODY></HTML>
4
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
5
HTML Contd.
<HTML><!- - Header.html - -><!- - HTML headers - -><HEAD><TITLE>How to program headers</TITLE></HEAD><BODY><!- - Centers everything in the CENTER
element - -><CENTER>
6
HTML
<H1>Level 1 Header</H1><H2>Level 2 Header</H2><H3>Level 3 Header</H3><H4>Level 4 Header</H4><H5>Level 5 Header</H5><H6>Level 6 Header</H6></CENTER></BODY></HTML>
7
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.
8
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>
9
HTML
<H2> ALIGN = “center” >Have fun with the site </H2>
</BODY></HTML>
10
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”>
11
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.yahoo.com</A></P>
12
HTML
<P>AltaVista:<A HREF = http://www.altavista.com>http://www.altavista.com</A></P>
</CENTER></BODY></HTML>
13
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.
14
HTML
</P></BODY></HTML>
15
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- ->
16
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.
17
HTML
Formatting text with <FONT>
<HTML><HEAD><TITLE>WELCOME</TITLE></HEAD><BODY><H1 ALIGN = "Center"><U>Welcome to
our Website</U></H1>
18
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</STRONG></U>,and we enjoy the features</FONT>
19
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>
20
HTML
Special Characters We insert special character and symbol by using the form &code.
<HEAD><!- - INSERTING SPECIAL CHARACTERS- -><HEAD><TITLE>Contact Page</TITLE></HEAD>
21
HTML
<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 my address,</P>
<P>All information on this site is<B>©</B>Deitel<B>&</B>Associates, 1999.</P>
22
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>
23
HTML
<DEL> </DEL> Text can be struck out.<SUB> </SUB> Text can be subscript.<SUP> </SUP> Text can be superscript.
24
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.
25
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>
26
HTML Contd.
<TITLE>Links</TITLE></HEAD><BODY><CENTER><H2>Internet Search Engines</H2><P><B>Click on search engine
address</B></P><UL>
27
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>
28
HTML
</UL></CENTER></BODY></HTML>
29
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>
30
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- ->
31
HTML Contd.
<UL><LI>New games</LI><LI>New applications</LI>
<UL><LI>For business</LI><LI>For pleasure</LI></UL>
32
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>
33
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>
34
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>
35
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.
36
HTML Contd.
<CAPTION>…</CAPTION>Summarizes the table contents.
<HTML><!- - Table design - -><HEAD><TITLE>Tables</TITLE></HEAD><BODY><CENTER>
37
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>
38
HTML
<TR><TD ALIGN = "center">This is the body,</TD></TR>
</TBODY></TABLE></BODY></HTML>
39
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.
40
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.
41
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">
42
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>
43
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>
44
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.
45
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>.
46
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.
47
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
48
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.
49
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.
50
CSS Contd.
Example on Inline CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">
<!-- The EN stands for the language used in the DTD-->
<HTML><!--Inline styles--><HEAD><TITLE>Inline
Styles</TITLE></HEAD><BODY><P>Here is some text</P>
51
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
52
CSS Contd.
Example on Internal CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">
<HTML><!--Advanced style sheets--><HEAD><TITLE>More Styles</TITLE><!- - This begins the style sheet section - -><STYLE TYPE = "text/css">
53
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 - ->
54
CSS Contd.
A:hover {text-decoration: underline; color: red; background-color: #CCFFCC}<!-- Property is followed by colon (:) and
multiple properties by semicolon--><!- - 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.- ->
55
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>
56
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>
57
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>
58
CSS
In Internal CSS STYLE tag is used in HEAD tag.
59
CSS Contd.
Example on External CSS
Create a CSS file with the STYLE tag as below and save it with .css extension.
<!-- This begins the stylesheet--><STYLE TYPE = "text/css">EM{background-color:
#8000FF;color:white}H1{font-family: Arial, sans-serif}
60
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.
61
CSS Contd.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><!--Style sheet in the header section.--><HEAD><TITLE>Style Sheets</TITLE><link rel="stylesheet" type="text/css"
href="Stylesheet.css" media="screen" /><!- - link rel is linking relationship- -></HEAD><BODY>
62
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>
63
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}
64
CSS
LI EM{color:red; font-weight:bold}
UL{margin-left:2cm}
UL UL {text-decoration:underline; margin-left: .5cm}
65
CSS Contd.
Create styles.html file with below code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">
<HTML><!--Linking external style sheets--><HEAD><TITLE>Importing style sheets</TITLE>
66
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>
67
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>
68
CSS
</BODY></HTML>
69
CSS
Positioning Elements
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML, 5.0 Transitional//EN">
<HTML>
<!--Absolute positioning of elements--><HEAD><TITLE>Absolute Positioning</TITLE></HEAD>
70
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">
71
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>
72
CSS Contd.
Backgrounds
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">
<HTML>
<!-- Adding background images and identation-->
<HEAD><TITLE>Background Images</TITLE>
73
CSS Contd.
<STYLE TYPE = "text/css">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- ->
74
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- ->
75
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>
76
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.This is some sample text to fill in the page.This is some sample text to fill in the page.</P></BODY></HTML>
77
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;
78
CSS Contd.
width:100px;height:100px;overflow:scroll;}
div.hidden {background-color:#00FF00;width:100px;height:100px;overflow:hidden;}
79
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>
80
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>
81
CSS
Borders
<!DOCTYPE html><html><head><style>p{border:5px solid red;}
82
CSS
</style></head>
<body><p>This is some text in a paragraph.</p></body></html>
83
CSS Contd.
User Style sheets
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">
<HTML><!--User styles--><HEAD><TITLE>User Styles</TITLE><STYLE TYPE = "text/css">
84
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”
85
CSS
</BODY></HTML>
86
XML
XML What is XML?XML stands for EXtensible Markup
LanguageXML is a markup language much like HTMLXML was designed to carry data, not to
display dataXML tags are not predefined. You must
define your own tagsXML is designed to be self-descriptiveXML is a W3C Recommendation
87
XML
The Difference Between XML and HTMLXML 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 isHTML was designed to display data, with
focus on how data looksHTML is about displaying information, while
XML is about carrying information.
88
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
89
XML Contd.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy? --><CATALOG> //Root element
<CD><TITLE>Empire Burlesque</TITLE><ARTIST>Bob Dylan</ARTIST><COUNTRY>USA</COUNTRY>
//Child elements.
90
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>
91
XML Contd.
<COMPANY>CBS Records</COMPANY><PRICE>9.90</PRICE><YEAR>1988</YEAR>
</CD></CATALOG>
HTML File
<html><body>
92
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"); }
93
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++)
94
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>"); }
95
XML
document.write("</table>");</script>
</body></html>
96
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.
97
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.
98
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)
99
xml
Navigate through XML nodes
Create the cdcatalog xml file
<?xml version="1.0" encoding="ISO-8859-1"?><!-- Edited by XMLSpy? --><CATALOG><CD>
<TITLE>Empire Burlesque</TITLE><ARTIST>Bob Dylan</ARTIST><COUNTRY>USA</COUNTRY>
100
XML
<COMPANY>Columbia</COMPANY><PRICE>10.90</PRICE><YEAR>1985</YEAR>
</CD><CD>
<TITLE>Hide your heart</TITLE><ARTIST>Bonnie Tyler</ARTIST><COUNTRY>UK</COUNTRY><COMPANY>CBS Records</COMPANY>
101
XML
<PRICE>9.90</PRICE><YEAR>1988</YEAR>
</CD>
</CATALOG>
102
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();
103
XML Contd.
}else {// code for IE6, IE5 xmlhttp=new
ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.open("GET","cdcatalog.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXML;
104
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);
105
XML Contd.
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt="Artist: " + artist + "<br>Title: " + title + "<br>Year: "+ year;
document.getElementById("showCD").innerHTML=txt;
}
function next()
106
XML Contd.
{if (i<x.length-1) { i++; displayCD(); }}function previous(){
107
XML Contd.
if (i>0) { i--; displayCD(); }}</script></head><body onload="displayCD()“>
108
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>
109
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:
110
XML Contd.
Take a look at this XML file: The CD catalog
Then look at this style sheet: The CSS fileFinally, view:
The CD catalog formatted with the CSS file
XML FILE<?xml version="1.0" encoding="ISO-8859-
1"?><!-- Edited by XMLSpy? --><CATALOG>
111
XML Contd.
<CD><TITLE>Empire Burlesque</TITLE><ARTIST>Bob Dylan</ARTIST><COUNTRY>USA</COUNTRY><COMPANY>Columbia</COMPANY><PRICE>10.90</PRICE><YEAR>1985</YEAR>
</CD>
112
XML Contd.
<CD><TITLE>Hide your heart</TITLE><ARTIST>Bonnie Tyler</ARTIST><COUNTRY>UK</COUNTRY><COMPANY>CBS Records</COMPANY><PRICE>9.90</PRICE><YEAR>1988</YEAR>
</CD>
</CATALOG>
113
XML
Create CSS FileCATALOG{background-color: #ffffff;width: 100%;}CD{display: block;margin-bottom: 30pt;margin-left: 0;}
114
XML
TITLE{color: #FF0000;font-size: 20pt;}ARTIST{color: #0000FF;font-size: 20pt;}COUNTRY,PRICE,YEAR,COMPANY{
115
XML Contd.
display: block;color: #000000;margin-left: 20pt;}
HTML File to implement<?xml version="1.0" encoding="ISO-8859-1"?><!-- Edited by XMLSpy? --><?xml-stylesheet type="text/css"
href="cdcatalog.css"?><CATALOG>
116
XML Contd.
<CD><TITLE>Empire Burlesque</TITLE><ARTIST>Bob Dylan</ARTIST><COUNTRY>USA</COUNTRY><COMPANY>Columbia</COMPANY><PRICE>10.90</PRICE><YEAR>1985</YEAR>
</CD>
117
XML
<CD><TITLE>Hide your heart</TITLE><ARTIST>Bonnie Tyler</ARTIST><COUNTRY>UK</COUNTRY><COMPANY>CBS Records</COMPANY><PRICE>9.90</PRICE><YEAR>1988</YEAR>
</CD></CATALOG>
118
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).
119
XML
An XML DocumentXML document called "shiporder.xml“<?xml version="1.0" encoding="ISO-8859-
1"?><shiporder orderid="889923"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="shiporder.xsd">
<!– xsd is xml schema definition file,ns is Namespaces provide a method to avoid element name conflicts.
120
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>
121
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
122
XML
schema file ("shiporder.xsd")<?xml version="1.0" encoding="ISO-8859-
1" ?><xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
< - - xmlns is xml namespace,xs is xml schema- -><xs:simpleType name="stringtype"> <xs:restriction base="xs:string"/></xs:simpleType>
123
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">
124
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"/>
125
XML
<xs:element name="country" type="stringtype"/> </xs:sequence></xs:complexType>
<xs:element name="shiporder" type="shipordertype"/></xs:schema>
126
XML
Why Use XML Schemas?
XML Schemas Support Data TypesOne 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 contentIt is easier to validate the correctness of dataIt is easier to work with data from a databaseIt 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
127
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.
128
XML
XML Schemas are ExtensibleXML Schemas are extensible, because
they are written in XML.With an extensible Schema definition you
can:Reuse your Schema in other SchemasCreate your own data types derived from
the standard typesReference multiple schemas in the same
document
129
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.
130
XML
XML files can be stored on an Internet server exactly the same way as HTML files.
<?xml version="1.0" encoding="ISO-8859-1"?><note> <from>Jani</from> <to>Tove</to> <message>Remember me this weekend</message></note> // Save with note.xml
131
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>")%>
132
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>";?>
133
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)
134
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>")%>
135
XML
Transforming XML with XSLT on the Server
<%'Load XMLset xml = Server.CreateObject("Microsoft.XMLDOM")xml.async = falsexml.load(Server.MapPath("simple.xml"))
'Load XSLset xsl = Server.CreateObject("Microsoft.XMLDOM")xsl.async = falsexsl.load(Server.MapPath("simple.xsl"))
'Transform fileResponse.Write(xml.transformNode(xsl))%>
136
XML
Example explainedThe 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!
137
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.
138
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 documentsXQuery (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.
139
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.
140
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:
141
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. - ->
142
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.
143
XML
XML Weather Service An example of an XML national weather
service from NOAA (National Oceanic and Atmospheric Administration):
<?xml version="1.0" encoding="ISO-8859-1" ?><current_observation>
<credit>NOAA's National Weather Service</credit>
144
XML
<credit_URL>http://weather.gov/</credit_URL>
<image> <url>http://weather.gov/images/xml_logo.gif</url> <title>NOAA's National Weather Service</title> <link>http://weather.gov</link></image>
145
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>
146
XML
<temp_c>-12</temp_c><relative_humidity>36</relative_humidity><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>
147
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/disclaimer.html</copyright_url>
</current_observation>
148
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()
149
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.
150
XML
The ECMA organization (founded in 1961) is dedicated to the standardization of Information and Communication
151
XML
Technology (ICT) and ConsumerElectronics (CE). ECMA has developed
standards for:JavaScriptC# LanguageInternational Character SetsOptical DisksMagnetic TapesData CompressionData Communicationand much more...
152
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 E4XE4X is not widely supported. Maybe it offers
too little practical functionality not already covered by other solutions:
153
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.
top related