Html ,css,xml


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html ,css,xml

  1. 1. HTML ,CSS,XML HTML 1
  2. 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. 2
  3. 3. HTML <HTML> <!- - main.html - -> <!- -First Program - -> <HEAD> <TITLE>Internet Programming</TITLE> </HEAD> <BODY> <P>Welcome!</P> </BODY> </HTML> 3
  4. 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 4
  5. 5. HTML Contd. <HTML> <!- - Header.html - -> <!- - HTML headers - -> <HEAD> <TITLE>How to program headers</TITLE> </HEAD> <BODY> <!- - Centers everything in the CENTER element - -> <CENTER> 5
  6. 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> 6
  7. 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. 7
  8. 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> 8
  9. 9. HTML <H2> ALIGN = ―center‖ >Have fun with the site </H2> </BODY> </HTML> 9
  10. 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”> 10
  11. 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.yaho</A></P> 11
  12. 12. HTML <P>AltaVista:<A HREF =>http://www.alt</A></P> </CENTER> </BODY> </HTML> 12
  13. 13. HTML <HTML> <!- - Email Hyperlink - -> <HEAD> <TITLE>Contact page</TITLE> </HEAD> <BODY> <P>My email address is <A HREF = ―‖> </A> Click on the address and your browser will open an email message and address it to me. 13
  14. 14. HTML </P> </BODY> </HTML> 14
  15. 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- -> 15
  16. 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. 16
  17. 17. HTML Formatting text with <FONT> <HTML> <HEAD> <TITLE>WELCOME</TITLE> </HEAD> <BODY> <H1 ALIGN = "Center"><U>Welcome to our Website</U></H1> 17
  18. 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</STRON G></U>,and we enjoy the features</FONT> 18
  19. 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> 19
  20. 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> 20
  21. 21. HTML <BODY> <P>My email address is <A HREF = "">shweta</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>&copy;</B>Deitel<B>&amp;</B>A ssociates, 1999.</P> 21
  22. 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>&lt; &frac14;</B>of the information presented here.</P> </BODY> </HTML> 22
  23. 23. HTML <DEL> </DEL> Text can be struck out. <SUB> </SUB> Text can be subscript. <SUP> </SUP> Text can be superscript. 23
  24. 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. 24
  25. 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> 25
  26. 26. HTML Contd. <TITLE>Links</TITLE> </HEAD> <BODY> <CENTER> <H2>Internet Search Engines</H2> <P><B>Click on search engine address</B></P> <UL> 26
  27. 27. HTML Contd. <LI>Yahoo:<A HREF = ""></A></LI> <LI>Alta Vista: <A HREF = ""></A></LI> <LI>Ask Jeeves: <A HREF = ""></A></LI> 27
  28. 28. HTML </UL> </CENTER> </BODY> </HTML> 28
  29. 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> 29
  30. 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- -> 30
  31. 31. HTML Contd. <UL> <LI>New games</LI> <LI>New applications</LI> <UL> <LI>For business</LI> <LI>For pleasure</LI> </UL> 31
  32. 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> 32
  33. 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> 33
  34. 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> 34
  35. 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. 35
  36. 36. HTML Contd. <CAPTION>…</CAPTION>Summarizes the table contents. <HTML> <!- - Table design - -> <HEAD> <TITLE>Tables</TITLE> </HEAD> <BODY> <CENTER> 36
  37. 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> 37
  38. 38. HTML <TR><TD ALIGN = "center">This is the body,</TD></TR> </TBODY> </TABLE> </BODY> </HTML> 38
  39. 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. 39
  40. 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. 40
  41. 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"> 41
  42. 42. HTML Contd. <INPUT TYPE = "hidden" NAME = "recipient" VALUE = ""> <INPUT TYPE = "hidden" NAME = "subject" VALUE = "Feedback Form"> <INPUT TYPE = "hidden" NAME = "redirect" VALUE = "main.html"> <P><B>Name:</B> 42
  43. 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> 43
  44. 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. 44
  45. 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 &lt;link&gt; instead of the &lt;style&gt;. 45
  46. 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. 46
  47. 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 47
  48. 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. 48
  49. 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. 49
  50. 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> 50
  51. 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 51
  52. 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"> 52
  53. 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 - -> 53
  54. 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.- -> 54
  55. 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> 55
  56. 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> 56
  57. 57. CSS </UL></LI> <LI>Rice</LI> <LI>Potatoes</LI> <LI>Pizza <EM>with mushroom</EM></LI> </UL> <P><A CLASS = "nodec" HREF = "">Go to the Grocery store</A></P> </BODY> </HTML> 57
  58. 58. CSS In Internal CSS STYLE tag is used in HEAD tag. 58
  59. 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} 59
  60. 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. 60
  61. 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> 61
  62. 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> 62
  63. 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} 63
  64. 64. CSS LI EM{color:red; font-weight:bold} UL{margin-left:2cm} UL UL {text-decoration:underline; margin-left: .5cm} 64
  65. 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> 65
  66. 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> 66
  67. 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 = "">Go to the Grocery store</A> 67
  68. 68. CSS </BODY> </HTML> 68
  69. 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> 69
  70. 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"> 70
  71. 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> 71
  72. 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> 72
  73. 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- -> 73
  74. 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- -> 74
  75. 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> 75
  76. 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> 76
  77. 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; 77
  78. 78. CSS Contd. width:100px; height:100px; overflow:scroll; } div.hidden { background-color:#00FF00; width:100px; height:100px; overflow:hidden; } 78
  79. 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> 79
  80. 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> 80
  81. 81. CSS Borders <!DOCTYPE html> <html> <head> <style> p { border:5px solid red; } 81
  82. 82. CSS </style> </head> <body> <p>This is some text in a paragraph.</p> </body> </html> 82
  83. 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"> 83
  84. 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‖ 84
  85. 85. CSS </BODY> </HTML> 85
  86. 86. 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
  87. 87. 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
  88. 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 88
  89. 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. 89
  90. 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> 90
  91. 91. XML Contd. <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR> </CD> </CATALOG> HTML File <html> <body> 91
  92. 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"); } 92
  93. 93. XML Contd."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
  94. 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>"); } 94
  95. 95. XML document.write("</table>"); </script> </body> </html> 95
  96. 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. 96
  97. 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. 97
  98. 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) 98
  99. 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> 99
  100. 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> 100
  101. 101. XML <PRICE>9.90</PRICE> <YEAR>1988</YEAR> </CD> </CATALOG> 101
  102. 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(); 102
  103. 103. XML Contd. } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }"GET","cdcatalog.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; 103
  104. 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); 104
  105. 105. 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
  106. 106. XML Contd. { if (i<x.length-1) { i++; displayCD(); } } function previous() { 106
  107. 107. XML Contd. if (i>0) { i--; displayCD(); } } </script> </head> <body onload="displayCD()―> 107
  108. 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> 108
  109. 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: 109
  110. 110. 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 <?xml version="1.0" encoding="ISO-8859- 1"?> <!-- Edited by XMLSpy? --> <CATALOG> 110
  111. 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> 111
  112. 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> 112
  113. 113. XML Create CSS File CATALOG { background-color: #ffffff; width: 100%; } CD { display: block; margin-bottom: 30pt; margin-left: 0; } 113
  114. 114. XML TITLE { color: #FF0000; font-size: 20pt; } ARTIST { color: #0000FF; font-size: 20pt; } COUNTRY,PRICE,YEAR,COMPANY { 114
  115. 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> 115
  116. 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> 116
  117. 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> 117
  118. 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). 118
  119. 119. XML An XML Document XML document called "shiporder.xml― <?xml version="1.0" encoding="ISO-8859- 1"?> <shiporder orderid="889923" xmlns:xsi=" 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
  120. 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> 120
  121. 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 121
  122. 122. XML schema file ("shiporder.xsd") <?xml version="1.0" encoding="ISO-8859- 1" ?> <xs:schema xmlns:xs=" Schema"> < - - xmlns is xml namespace,xs is xml schema- -> <xs:simpleType name="stringtype"> <xs:restriction base="xs:string"/> </xs:simpleType> 122
  123. 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"> 123
  124. 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"/> 124
  125. 125. XML <xs:element name="country" type="stringtype"/> </xs:sequence> </xs:complexType> <xs:element name="shiporder" type="shipordertype"/> </xs:schema> 125
  126. 126. 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
  127. 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. 127
  128. 128. 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
  129. 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. 129
  130. 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 130
  131. 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>") %> 131
  132. 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>"; ?> 132
  133. 133. XML Generating XML From a Database <% response.ContentType = "text/xml" set conn=Server.CreateObject("ADODB.Connection") conn.provider="Microsoft.Jet.OLEDB.4.0;" 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
  134. 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>") %> 134
  135. 135. 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
  136. 136. 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
  137. 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. 137
  138. 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 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
  139. 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. 139
  140. 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: 140
  141. 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. - -> 141
  142. 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. 142
  143. 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> 143
  144. 144. XML <credit_URL></credit_ URL> <image> <url> go.gif</url> <title>NOAA's National Weather Service</title> <link></link> </image> 144
  145. 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> 145
  146. 146. 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
  147. 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> images/fcicons/</icon_url_base> <icon_url_name>nfew.jpg</icon_url_name> <disclaimer_url> .html</disclaimer_url> <copyright_url> r.html</copyright_url> </current_observation> 147
  148. 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() 148
  149. 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. 149
  150. 150. XML The ECMA organization (founded in 1961) is dedicated to the standardization of Information and Communication 150
  151. 151. 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
  152. 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 E4X  E4X is not widely supported. Maybe it offers too little practical functionality not already covered by other solutions: 152
  153. 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. 153