Html ,css,xml

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>

http://www.yahoo.com/

12

HTML

<P>AltaVista:<A HREF = http://www.altavista.com>http://www.altavista.com</A></P>

</CENTER></BODY></HTML>

http://www.altavista.com/

13

HTML

<HTML><!- - Email Hyperlink - -><HEAD><TITLE>Contact page</TITLE></HEAD><BODY><P>My email address is <A HREF =

“mailto:[email protected]”> [email protected] </A>

Click on the address and your browser will open an email message and address it to me.

mailto:[email protected]%[email protected]%3C/A%3EClick

mailto:[email protected]

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:[email protected]">[email protected]</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 = "[email protected]"><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">



<HTML><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


<HTML><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}<!- - 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.

<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.


<HTML><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


<HTML><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>

<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


<HTML>



<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


<HTML><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

http://w3schools.com/xml/cd_catalog.xml

89

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.

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.

http://www.quackit.com/css/

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"?><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"?><CATALOG>

http://w3schools.com/xml/cd_catalog.xml

http://w3schools.com/xml/cd_catalog.txt

http://w3schools.com/xml/cd_catalog_with_css.xml

http://w3schools.com/xml/cd_catalog_with_css.xml

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"?><?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.

http://www.w3schools.com/html/html_xhtml.asp

http://www.w3schools.com/dom/default.asp

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.

http://www.w3schools.com/xsl/xsl_languages.asp

http://www.w3schools.com/xsl/default.asp

http://www.w3schools.com/xslfo/default.asp

http://www.w3schools.com/xpath/default.asp

http://www.w3schools.com/xquery/default.asp

http://www.w3schools.com/xquery/default.asp

http://www.w3schools.com/dtd/default.asp

http://www.w3schools.com/schema/default.asp

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.

http://www.w3schools.com/xlink/default.asp




http://www.w3schools.com/soap/default.asp

http://www.w3schools.com/wsdl/default.asp

http://www.w3schools.com/rdf/default.asp

http://www.w3schools.com/rss/default.asp

http://www.w3schools.com/svg/default.asp

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.

http://www.w3schools.com/dom/default.asp

http://www.w3schools.com/xpath/default.asp

http://www.w3schools.com/json/default.asp

http://www.w3schools.com/jquery/default.asp

Html ,css,xml

Technology

Transcript of Html ,css,xml