![Building Project 2
• Putting your XML into HTML requires you to translate it into a table [easiest for our beginner status]
• First, create your table:
<h1>Email Data</h1>
<table border="1">
<tbody>
Add table rows here
</tbody>
</table>
We need the <h1> tag so that our text is colored blue from our Blue.css code](https://image.slidesharecdn.com/bitm3730week5-220914204425-f514608b/85/BITM3730Week5-pptx-31-320.jpg)
BITM3730Week5.pptx
- 1. XML BITM 3730 Developing Web Applications
- 2. Previous Work Review • http://pirate.shu.edu/~marinom6/work.html • Please Note only previously due HW assignments are posted on my pirate.shu.edu web space • Begin organizing your creating files for this course into an easy to find folder on your desktop for easy FTP later on
- 3. XML Basics • Stands for eXtensible Markup Language • Used to define customized markup languages • We are already familiar with XML since we understand HTML
- 4. Interesting XML Notes • XML is a software- and hardware-independent tool for storing and transporting data. • XML was designed to store and transport data • XML was designed to be self-descriptive • Maybe it is a little hard to understand, but XML does not DO anything.
- 5. XML Just Stores Data • XML is just information wrapped in tags. • XML is the parent language to HTML • XML is used to contain data, not to display data • XML tags are custom, defined by the author. • HTML can enrich XML data but neither can replace the other. One is used for storing (XML) and the other is used for displaying (HTML).
- 6. XML Rules • XML elements must follow these rules: • Can contain letters, numbers and other characters • Can’t start with a number or punctuation character • Can’t start with ‘xml’ • Can’t contain spaces
- 7. Writing in XML • XML attributes must be quoted as in: <employee type=‘permanent’> • Alternatively, you can write • <employee> <type>permanent</type> </employee> • Both above examples accomplish the same goal and there are no rules as to which one is right. The second example is easier to read and looks nicer.
- 8. XML vs. HTML • XML was designed to carry data - with focus on what data is • HTML was designed to display data - with focus on how data looks • XML tags are not predefined like HTML tags are
- 9. You Define XML Tags • The XML language has no predefined tags. • Tags are "invented" by the author of the XML document. • HTML works with predefined tags like <p>, <h1>, <table>, etc. • With XML, the author must define both the tags and the document structure.
- 10. Why Use XML? • It simplifies data sharing • It simplifies data transport • It simplifies platform changes • It simplifies data availability
- 11. More Reasons to use XML • XML stores data in plain text format. This provides a software- and hardware- independent way of storing, transporting, and sharing data. • XML also makes it easier to expand or upgrade to new operating systems, new applications, or new browsers, without losing data. • With XML, data can be available to all kinds of "reading machines" like people, computers, voice machines, news feeds, etc.
- 12. In What Ways Can We Use XML? • Create a list of books • Create a list of transactions • Create a news article header • Detail weather service information • And much, much more!
- 13. XML Example Code • <?xml version="1.0" encoding="UTF-8"?> Prolog • <note> Root • <to>Tove</to> • <from>Jani</from> • <heading>Reminder</heading> • <body>Don't forget me this weekend!</body> • </note> notice all have closing tags like HTML!!!!
- 14. XML can use HTML tags • Tags you have previously seen can be used in XML, such as: • <b></b> for bold text • <i></i> for italicized text
- 15. Attributes Must Be Quoted • <note date="12/18/1953"> • <to>Tove</to> • <from>Jani</from> • </note> • In this example our attribute is our date 12/18/1953
- 16. Entity References < < less than > > greater than & & ampersand ' ' apostrophe " " quotation mark Entity references help you to avoid errors
- 17. Comments in XML • <!-- This is a comment --> • This exact structure is required for XML comments
- 18. XML Elements • An element can contain: • Text • Attributes • other elements • or a mix of the above • Examples could be <rate>19.99</rate>
- 19. XML Naming Rules Reminder • XML elements must follow these naming rules: • Element names are case-sensitive • Element names must start with a letter or underscore • Element names cannot start with the letters xml (or XML, or Xml, etc) • Element names can contain letters, digits, hyphens, underscores, and periods • Element names cannot contain spaces • Any name can be used, no words are reserved (except xml).
- 20. Standards Advising Naming Rules • Create descriptive names, like this: <person>, <firstname>, <lastname>. • Create short and simple names, like this: <book_title> not like this: <the_title_of_the_book>. • Avoid "-". If you name something "first-name", some software may think you want to subtract "name" from "first". • Avoid ".". If you name something "first.name", some software may think that "name" is a property of the object "first". • Avoid ":". Colons are reserved for namespaces (more later). • Non-English letters like éòá are perfectly legal in XML, but watch out for problems if your software doesn't support them.
- 21. XLink • <?xml version="1.0" encoding="UTF-8"?> • <homepages xmlns:xlink="http://www.w3.org/1999/xlink"> • <homepage xlink:type="simple" xlink:href="https://www.w3schools.com">Visit W3Schools</homepage> • <homepage xlink:type="simple" xlink:href="http://www.w3.org">Visit W3C</homepage> • </homepages>
- 22. Where Else Can We Use XML? • HTML • JavaScript • PHP
- 23. XSLT • XSLT - eXtensbile Stylesheet Language Transformations • XSLT transform XML into HTML, before it is displayed by a browser • You can transform a XML document into an HTML document just by linking the XML document to the XSLT file by using the following line: • <?xml-stylesheet type="text/xsl" href="xsltexample.xsl"?>
- 24. Another XML Example • <xml> <addressbook> <address> <name>Mark Nazzaro</name> <email>[email protected]</email> </address> <address> <name>David Rosenthal</name> <email>[email protected]</email> </address> </addressbook> </xml>
- 25. Building Assignment 5 <xml> <instructors> <name>Professors</name> <contact> <name>Mark Nazzaro</name> <email>[email protected]</email> </contact> </instructors> </xml>
- 26. Building Assignment 5 • Each new professor’s name and email will require another contact tag <contact> <name>Matt Marino</name> <email>[email protected]</email> </contact>
- 27. Building Assignment 5 • You will need to create as many <contact> tag attributes for name and email as you have professors this semester • In the upcoming example I have listed four professor contacts
- 28. Assignment 5 Example Visual
- 29. Building Project 2 • The easiest way to embed a file is to use a <link> tag in HTML • However, we have not uploaded our files to pirate.shu.edu yet, so we will embed them right into the code • <xml id="cdcat" src="cd_catalog.xml"></xml> • <link rel="stylesheet" href="styles.css">
- 30. Building Project 2 • First, put the following code from your Blue.css file under the title: <style> body { background-color: black; } h1 { color: blue; } p { color: blue; } </style>
- 31. Building Project 2 • Putting your XML into HTML requires you to translate it into a table [easiest for our beginner status] • First, create your table: <h1>Email Data</h1> <table border="1"> <tbody> Add table rows here </tbody> </table> We need the <h1> tag so that our text is colored blue from our Blue.css code
- 32. Building Project 2 • First, we need our table headers: <tr> <th><p>Name</p></th> <th><p>Email</p></th> </tr>
- 33. Building Project 2 • Next, we need our table data: <tr> <td><p>Matt Marino</p></td> <td><p>[email protected]</p></td> </tr> We need the <p> tag so that our text is colored blue from our Blue.css code
- 34. Building Project 2 • Keep adding each professor to the table using the tags and elements provided on the previous slide using the <tr>, <td>, and <p> tags as appropriate
- 35. Project 2 Visually If your code is correct within your HTML file your result should look like this All of our text is blue and our background is black due to our Blue.css code [make sure it is embedded using the <style> tag We also made sure to use the <h1> and <p> tags to see our CSS code in action The names and emails depend on your professors this semester like your XML file