HTML and XML Introduction
What can XML do for you?  <ul><li>How is XML used in this site? </li></ul><ul><ul><li>http:// www.anderson.ucla.edu/events...
Overview of what we will do <ul><li>FTP: get a text file of a bibliography off the server (bib.txt) </li></ul><ul><li>Turn...
Overview Bib.txt Bib.html Bib.xml Bib.dtd Bib.xsl 1 2 3 5 4 6 Xhtml.dtd Bib_xhtml.html
Step 1. Download txt file <ul><li>Open WS_FTP (File Transfer Protocol) </li></ul><ul><ul><li>hostname: dev.cdh.ucla.edu </...
FTP: file transfer protocol http://dev.cdh.ucla.edu/~newmedia/ Bib.txt
FTP <ul><li>F ile  T ransfer  P rotocol,   </li></ul><ul><li>FTP is most commonly used to  download  a file from a server ...
Two modes of FTP <ul><li>ASCII </li></ul><ul><ul><li>.txt files </li></ul></ul><ul><ul><li>ASCII transfer mode  translates...
Step 2: HTML <ul><li>Formats the data for the web </li></ul><ul><li>Open  bib.txt  in Notepad and mark up the text in html...
zoe_bib.html <html> <ul> <li>Castro, Elizabeth. Xml for the World Wide Web. Visual Quickstart Guide.  Berkeley, CA: Peachp...
View the HTML file <ul><li>Open  yourname _bib.html  in IE </li></ul><ul><li>Use FTP to transfer the file to dev server </...
why XML? <ul><li>Extensible Markup Language </li></ul><ul><ul><li>extensible  - can be modified by changing or adding feat...
Html vs XML <ul><li><body> </li></ul><ul><li><h1>Workplan</h1> </li></ul><ul><li><p>This project begins April 16, 2006 and...
 
Step 3: Create an XML document <ul><li>Open the  bib.txt  file in Notepad </li></ul><ul><li>Use the following tags: </li><...
<book> <author>Castro, Elizabeth.</author> <title> Xml for the World Wide Web. Visual Quickstart Guide.</title> <place> Be...
Elements & Tags <ul><li>An element is used to describe a piece of information </li></ul><ul><li>Opening tag <book> </li></...
5 Rules of XML = well-formed <ul><li>Tag names are case sensitive </li></ul><ul><li>Every opening tag must have a correspo...
Building Blocks of XML <ul><li>Elements - containers of info </li></ul><ul><li>Tags  </li></ul><ul><li>Attributes - labels...
Our document <ul><li>Root element <bib> (starts and ends the document) </li></ul><ul><li>NB: xml is case sensitive, so <bi...
Attributes <ul><li>Tie small pieces of information to an element </li></ul><ul><li>Several attributes can be used describe...
zoe_bib.xml <ul><li>Add the prologue: </li></ul><ul><ul><li><?xml version=&quot;1.0&quot; encoding=“utf-8&quot; ?>  </li><...
zoe_bib.xml <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <bib> <book> <author>Castro, Elizabeth.</author> <t...
Step 4: Making a DTD <ul><li>Document Type Definition </li></ul><ul><ul><li>defines the legal building blocks of an XML do...
Why use a DTD? <ul><li>independent groups of people can agree to use a common DTD for interchanging data.  </li></ul><ul><...
DTD <ul><li><!DOCTYPE bib [ </li></ul><ul><li><!ELEMENT bib (book+)> </li></ul><ul><li><!ELEMENT book (author, title, plac...
DTD: hierarchical book author title place publisher year parent children
PCDATA vs CDATA <ul><li>PCDATA </li></ul><ul><ul><li>text that will be parsed by a parser . Tags inside the text will be t...
Internal and External DTD <ul><li>Cut the dtd code and paste it into  yourname_ bib.xml  file </li></ul><ul><li>Save as  y...
DTD <ul><li><!DOCTYPE bib [ </li></ul><ul><li><!ELEMENT bib (book+)> </li></ul><ul><li><!ELEMENT book (author, title, plac...
Step 5: XHTML <ul><li>http://www.w3.org/TR/xhtml1/ </li></ul><ul><li>A reformulation of HTML 4 in XML 1.0 </li></ul><ul><l...
XHTML uses external dtd  <ul><li>Allows you to validate html </li></ul><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&...
XHTML <ul><li>Cut and paste this code into  yourname _bib.html   </li></ul><ul><li>Create well-formed html </li></ul><?xml...
5 Rules of XML = well-formed <ul><li>Tag names are case sensitive </li></ul><ul><li>Every opening tag must have a correspo...
Screenshot of html and xhtml side by side
Validating XHMTL <ul><li>http://validator.w3.org/ </li></ul><ul><li>Cut and paste contents of xhtml into this site </li></...
Step 6: XSL <ul><li>Extensible Stylesheet Language </li></ul><ul><li>XSLT = XSL Transformation </li></ul><ul><li>XSLT tran...
Create an XSL file <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?><xsl:stylesheet version=&quot;1.0&quot; xmlns...
How to link XSL to XML  <ul><li>Open  yourname_ bib_dtd.xml </li></ul><ul><li>Insert link to xsl style sheet </li></ul><ul...
XSL <ul><li>Can be combined with CSS </li></ul><ul><li>Allows you to use logic when displaying xml as an html document </l...
Why bother? <ul><li>XML allows you to store your data in a non-proprietary format </li></ul><ul><ul><li>If you think that ...
Upcoming SlideShare
Loading in …5
×

Xml Zoe

714 views

Published on

New Media course

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
714
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Xml Zoe

    1. 1. HTML and XML Introduction
    2. 2. What can XML do for you? <ul><li>How is XML used in this site? </li></ul><ul><ul><li>http:// www.anderson.ucla.edu/events.xml </li></ul></ul><ul><li>How could XML be used in the site below? </li></ul><ul><ul><li>http:// www.archbase.com/fayum / </li></ul></ul>
    3. 3. Overview of what we will do <ul><li>FTP: get a text file of a bibliography off the server (bib.txt) </li></ul><ul><li>Turn it into HTML and upload to server (bib.html) </li></ul><ul><li>XML: take the text file and mark it up as xml (bib.xml): check if it is well-formed </li></ul><ul><ul><li>Create a DTD for bib.xml: validate bib.xml </li></ul></ul><ul><li>XHTML: using bib.html, mark it up as xhtml and validate against external DTD. </li></ul><ul><li>XSL: using bib.xml, attach a style sheet that formats xml as html. </li></ul>
    4. 4. Overview Bib.txt Bib.html Bib.xml Bib.dtd Bib.xsl 1 2 3 5 4 6 Xhtml.dtd Bib_xhtml.html
    5. 5. Step 1. Download txt file <ul><li>Open WS_FTP (File Transfer Protocol) </li></ul><ul><ul><li>hostname: dev.cdh.ucla.edu </li></ul></ul><ul><ul><li>Username: newmedia </li></ul></ul><ul><ul><li>Password: newmedia0506 </li></ul></ul><ul><li>Navigate to “firstclass” </li></ul><ul><li>Download bib.txt </li></ul><ul><li>What is actually happening? </li></ul>
    6. 6. FTP: file transfer protocol http://dev.cdh.ucla.edu/~newmedia/ Bib.txt
    7. 7. FTP <ul><li>F ile T ransfer P rotocol, </li></ul><ul><li>FTP is most commonly used to download a file from a server using the Internet or to upload a file to a server (e.g., uploading a Web page file to a server). </li></ul>
    8. 8. Two modes of FTP <ul><li>ASCII </li></ul><ul><ul><li>.txt files </li></ul></ul><ul><ul><li>ASCII transfer mode translates the end-of-line characters during transfer so that the file can be read on the destination system. </li></ul></ul><ul><li>Binary: </li></ul><ul><ul><li>Anything but .txt files </li></ul></ul><ul><ul><li>graphics files, and sound files—no translation </li></ul></ul>Usually your ftp software detects the file type automatically
    9. 9. Step 2: HTML <ul><li>Formats the data for the web </li></ul><ul><li>Open bib.txt in Notepad and mark up the text in html </li></ul><ul><ul><li><html>, <ul>, <li> </li></ul></ul><ul><li>Save as yourname_ bib.html </li></ul>
    10. 10. zoe_bib.html <html> <ul> <li>Castro, Elizabeth. Xml for the World Wide Web. Visual Quickstart Guide. Berkeley, CA: Peachpit Press, 2001. <li>Oliver, Dick. Sams Teach Yourself Html and Xhtml in 24 Hours. 5th ed. Indianapolis, Ind.: Sams, 2001. <li>Watt, Andrew H. Sams Teach Yourself Xml in 10 Minutes. Indianapolis, IN: Sams Pub., 2003. </ul> </html>
    11. 11. View the HTML file <ul><li>Open yourname _bib.html in IE </li></ul><ul><li>Use FTP to transfer the file to dev server </li></ul><ul><li>Now, view the html file again: </li></ul><ul><li>http:// dev.cdh.ucla.edu/~newmedia/firstclass/ yourname _bib.html </li></ul><ul><li>Now anyone with this URL can find your file </li></ul>
    12. 12. why XML? <ul><li>Extensible Markup Language </li></ul><ul><ul><li>extensible - can be modified by changing or adding features </li></ul></ul><ul><li>Builds toward a semantic web, </li></ul><ul><ul><li>we can create “meaningful tags” e.g. <author>, <book> </li></ul></ul><ul><ul><li>relationships between pieces of information </li></ul></ul><ul><li>Client hardware and web browsers are becoming more sophisticated </li></ul><ul><li>Makes documents transportable across systems and applications. </li></ul>
    13. 13. Html vs XML <ul><li><body> </li></ul><ul><li><h1>Workplan</h1> </li></ul><ul><li><p>This project begins April 16, 2006 and ends June 18, 2006.</p> </li></ul><ul><li><p>Costs of this proposal are expected to be $150-$200,000</p> </li></ul><ul><li></body> </li></ul><ul><li><proposal> </li></ul><ul><li><scope><head>Workplan</head> </li></ul><ul><li><schedule>This project begins <startdate>April 16, 2006</startdate> and ends on <enddate>June 18, 2006</enddate>.</schedule> </li></ul><ul><li><fees>Costs of this proposal are expected to be <range>$150-$200,000</range></fees> </li></ul><ul><li></scope> </li></ul><ul><li></proposal> </li></ul>
    14. 15. Step 3: Create an XML document <ul><li>Open the bib.txt file in Notepad </li></ul><ul><li>Use the following tags: </li></ul><ul><li><book>, <author>, <title>,<place> <publisher>, <year> </li></ul><ul><li>Close each tag <book></book> </li></ul><ul><li>Nest the tags--like boxes that open and close within boxes </li></ul>
    15. 16. <book> <author>Castro, Elizabeth.</author> <title> Xml for the World Wide Web. Visual Quickstart Guide.</title> <place> Berkeley, CA:</place> <publisher>Peachpit Press</publisher> <year>2001.</year> </book>
    16. 17. Elements & Tags <ul><li>An element is used to describe a piece of information </li></ul><ul><li>Opening tag <book> </li></ul><ul><li>Closing tag </book> </li></ul>
    17. 18. 5 Rules of XML = well-formed <ul><li>Tag names are case sensitive </li></ul><ul><li>Every opening tag must have a corresponding closing tag (unless it is abbreviated as an empty tag) </li></ul><ul><li>A nested tag pair cannot overlap another tag </li></ul><ul><li>Attribute values must appear within quotes </li></ul><ul><li>Every document must have a root element </li></ul><ul><ul><li>Ex. bib </li></ul></ul>
    18. 19. Building Blocks of XML <ul><li>Elements - containers of info </li></ul><ul><li>Tags </li></ul><ul><li>Attributes - labels on the containers </li></ul><ul><li>Entities: declared in the dtd </li></ul><ul><li>PCDATA </li></ul><ul><li>CDATA </li></ul>
    19. 20. Our document <ul><li>Root element <bib> (starts and ends the document) </li></ul><ul><li>NB: xml is case sensitive, so <bib> is different from <Bib> (stick to lower-case) </li></ul>
    20. 21. Attributes <ul><li>Tie small pieces of information to an element </li></ul><ul><li>Several attributes can be used describe an element </li></ul><ul><li>Example: <?xml version=“1.0” encoding=“UTF-8”?> </li></ul>
    21. 22. zoe_bib.xml <ul><li>Add the prologue: </li></ul><ul><ul><li><?xml version=&quot;1.0&quot; encoding=“utf-8&quot; ?> </li></ul></ul><ul><li>Save your file as yourname_ bib.xml </li></ul><ul><li>Open in IE—it will show you any errors </li></ul><ul><li>Is your document well-formed ? </li></ul>
    22. 23. zoe_bib.xml <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <bib> <book> <author>Castro, Elizabeth.</author> <title> Xml for the World Wide Web. Visual Quickstart Guide.</title> <place> Berkeley, CA:</place> <publisher>Peachpit Press</publisher> <year>2001.</year> </book> <book> <author>Watt, Andrew H.</author> <title> Sams Teach Yourself Xml in 10 Minutes.</title> <place>Indianapolis, IN:</place> <publisher> Sams .,</publisher> <year> 2003.</year> </book> </bib>
    23. 24. Step 4: Making a DTD <ul><li>Document Type Definition </li></ul><ul><ul><li>defines the legal building blocks of an XML document. </li></ul></ul><ul><ul><li>A DTD can be declared inline in your XML document, or as an external reference </li></ul></ul>
    24. 25. Why use a DTD? <ul><li>independent groups of people can agree to use a common DTD for interchanging data. </li></ul><ul><li>use a standard DTD to verify that the data you receive from the outside world is valid. </li></ul><ul><ul><li>Some are already defined: TEI (Text Encoding Initiative) http://www.tei-c.org/Applications / </li></ul></ul><ul><li>validate you document: make sure it conforms to the dtd </li></ul>
    25. 26. DTD <ul><li><!DOCTYPE bib [ </li></ul><ul><li><!ELEMENT bib (book+)> </li></ul><ul><li><!ELEMENT book (author, title, place?, publisher?, year?)> </li></ul><ul><li><!ELEMENT author (#PCDATA)> </li></ul><ul><li><!ELEMENT title (#PCDATA)> </li></ul><ul><li><!ELEMENT place (#PCDATA)> </li></ul><ul><li><!ELEMENT publisher (#PCDATA)> </li></ul><ul><li><!ELEMENT year (#PCDATA)> </li></ul><ul><li>]> </li></ul><ul><li>!DOCTYPE bib defines that this is a document of the type bib . </li></ul><ul><li>!ELEMENT bib defines the bib element as having at least one book element </li></ul><ul><ul><li>+ means at least one </li></ul></ul><ul><li>!ELEMENT book defines its sub elements as a sequence. </li></ul><ul><ul><li>? indicates optional elements </li></ul></ul><ul><li>!ELEMENT author defines the author element to be of the type &quot;#PCDATA&quot; </li></ul><ul><ul><li>#PCDATA indicates that the characters will be parsed. </li></ul></ul>
    26. 27. DTD: hierarchical book author title place publisher year parent children
    27. 28. PCDATA vs CDATA <ul><li>PCDATA </li></ul><ul><ul><li>text that will be parsed by a parser . Tags inside the text will be treated as markup and entities will be expanded .  </li></ul></ul><ul><li>CDATA </li></ul><ul><ul><li>text that will NOT be parsed by a parser . Tags inside the text will NOT be treated as markup and entities will not be expanded. </li></ul></ul>
    28. 29. Internal and External DTD <ul><li>Cut the dtd code and paste it into yourname_ bib.xml file </li></ul><ul><li>Save as yourname_ bib_dtd.xml </li></ul><ul><li>Open in IE –view source </li></ul><ul><li>How do we know this xml is valid? </li></ul><ul><li>Copy and paste here: http://www.w3schools.com/dom/dom_validate.asp </li></ul><ul><li>Check whether Dreamweaver has validation </li></ul>
    29. 30. DTD <ul><li><!DOCTYPE bib [ </li></ul><ul><li><!ELEMENT bib (book+)> </li></ul><ul><li><!ELEMENT book (author, title, place?, publisher?, year?)> </li></ul><ul><li><!ELEMENT author (#PCDATA)> </li></ul><ul><li><!ELEMENT title (#PCDATA)> </li></ul><ul><li><!ELEMENT place (#PCDATA)> </li></ul><ul><li><!ELEMENT publisher (#PCDATA)> </li></ul><ul><li><!ELEMENT year (#PCDATA)> </li></ul><ul><li>]> </li></ul>
    30. 31. Step 5: XHTML <ul><li>http://www.w3.org/TR/xhtml1/ </li></ul><ul><li>A reformulation of HTML 4 in XML 1.0 </li></ul><ul><li>Documents written in XHMTL can be validated against the xhtml DTD </li></ul><ul><ul><li>Strict </li></ul></ul><ul><ul><li>Transitional </li></ul></ul><ul><ul><li>Frameset </li></ul></ul>
    31. 32. XHTML uses external dtd <ul><li>Allows you to validate html </li></ul><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Enter the title of your XHTML document here</title> </head> <body> <p>Enter the body text of your XHTML document here</p> </body> </html>
    32. 33. XHTML <ul><li>Cut and paste this code into yourname _bib.html </li></ul><ul><li>Create well-formed html </li></ul><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Enter the title of your XHTML document here</title> </head> <body> <p>Enter the body text of your XHTML document here</p> </body> </html>
    33. 34. 5 Rules of XML = well-formed <ul><li>Tag names are case sensitive </li></ul><ul><li>Every opening tag must have a corresponding closing tag (unless it is abbreviated as an empty tag) </li></ul><ul><li>A nested tag pair cannot overlap another tag </li></ul><ul><li>Attribute values must appear within quotes </li></ul><ul><li>Every document must have a root element </li></ul>
    34. 35. Screenshot of html and xhtml side by side
    35. 36. Validating XHMTL <ul><li>http://validator.w3.org/ </li></ul><ul><li>Cut and paste contents of xhtml into this site </li></ul><ul><li>Save as yourname _bib_xhtml.html </li></ul><ul><li>You can now upload yourname _bib_xhtml.html to dev server </li></ul>
    36. 37. Step 6: XSL <ul><li>Extensible Stylesheet Language </li></ul><ul><li>XSLT = XSL Transformation </li></ul><ul><li>XSLT transforms XML to HTML </li></ul><ul><li>XSL is XML (a dtd is not) </li></ul>
    37. 38. Create an XSL file <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?><xsl:stylesheet version=&quot;1.0&quot; xmlns:xsl=&quot;http://www.w3.org/1999/XSL/Transform&quot;><xsl:template match=&quot;/&quot;> <html> <body> <h2>Zoe's XML Bibliography</h2> <table border=&quot;1&quot;> <tr bgcolor=&quot;#9acd32&quot;> <th align=&quot;left&quot;>Author</th> <th align=&quot;left&quot;>Title</th> <th align=&quot;left&quot;>Year</th> </tr> <xsl:for-each select=&quot;bib/book&quot;> <tr> <td><xsl:value-of select=&quot;author&quot;/></td> <td><xsl:value-of select=&quot;title&quot;/></td> <td><xsl:value-of select=&quot;year&quot;/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template></xsl:stylesheet> Copy and paste this to a file called yourname _bib.xsl
    38. 39. How to link XSL to XML <ul><li>Open yourname_ bib_dtd.xml </li></ul><ul><li>Insert link to xsl style sheet </li></ul><ul><ul><li>Eg. </li></ul></ul><ul><li>Save the file as yourname_ bib_xsl.xml </li></ul><ul><li>Validate the file: </li></ul>
    39. 40. XSL <ul><li>Can be combined with CSS </li></ul><ul><li>Allows you to use logic when displaying xml as an html document </li></ul><ul><ul><li>Filter out content </li></ul></ul><ul><ul><li>Sort </li></ul></ul><ul><ul><li>Select </li></ul></ul>
    40. 41. Why bother? <ul><li>XML allows you to store your data in a non-proprietary format </li></ul><ul><ul><li>If you think that you could be using a database, start with xml—it’s more flexible as you are defining what you want </li></ul></ul><ul><li>That data can be updated, referenced, imported, displayed in many different formats </li></ul><ul><li>Many applications (especially databases) now allow you to import and export data as xml </li></ul><ul><li>New technologies, e.g. RSS feeds, webservices, etc., all use XML </li></ul>

    ×