XML Assignment
Dylan Henley – Battlefield High School – Class of 2010 Information Technology Portfolio
XML (Extensible Markup Language)
Is a meta language that allows the exchange of data in a document amongst its users
Integrates greater structure and content than HTML
Dylan Henley – Battlefield High School – Class of 2010 Information Technology Portfolio
Unformatted XML Code <?xml version="1.0"?> <Invoices> <title>Sunglasses Invoice</title> <Invoice > <Date>10-10-2006</Date> <Vendor>Oakley</Vendor> <Product>eyewear</Product> <Model>X Metal</Model> <Color>Titanium</Color> <Quantity>50</Quantity> <Price>$100.00</Price> </Invoice> <Credit>Created/Formatted with CSS By Dylan Henley</Credit> </Invoices>
Dylan Henley – Battlefield High School – Class of 2010 Information Technology Portfolio
Unformatted XML Result
Dylan Henley – Battlefield High School – Class of 2010 Information Technology Portfolio
How to fix To format it, you create a separate .css stylesheet This tells the document how to lay out the elements on the page. On the following page is .css document code
Dylan Henley – Battlefield High School – Class of 2010 Information Technology Portfolio
CSS Code
/* CSS Document */ Invoices { background-color: #C0EDFF; width: 100%; cursor: crosshair; } Invoice { display: block; margin-bottom: 30pt; margin-left: 0; }
title { color: #0000B6; font-size: 20pt; display: block; margin-bottom: 10pt; margin-left: 0; } Date { color: #0000B6; font-size: 14pt; display: block; margin-left: 20pt; }
Dylan Henley – Battlefield High School – Class of 2010 Information Technology Portfolio
Vendor { color: #950000; font-size: 14pt; display: block; margin-left: 20pt; }
Product { color: #0000B6; font-size: 14pt; display: block; margin-left: 20pt; }
Model { color: #0000B6; font-size: 14pt; display: block; margin-left: 20pt; }
Color { color: #4D4D4D; font-size: 14pt; display: block; margin-left: 20pt; } Quantity { color: #0000B6; font-size: 14pt; display: block; margin-left: 20pt; } Price { color: #4DAA4D; font-size: 14pt; display: block; margin-left: 20pt; }
How to integrate
To add the .css document to the XML code, simply add the following code before your root code:
<?xml-stylesheet type="text/css" href="XML.css"?>
Where it says XML.css, insert the name of your own .css document
Dylan Henley – Battlefield High School – Class of 2010 Information Technology Portfolio
Final XML Code <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="XML.css"?> <Invoices> <title>Sunglasses Invoice</title> <Invoice > <Date>10-10-2006</Date> <Vendor>Oakley</Vendor> <Product>eyewear</Product> <Model>X Metal</Model> <Color>Titanium</Color> <Quantity>50</Quantity> <Price>$100.00</Price> </Invoice> <Credit>Created/Formatted with CSS By Dylan Henley</Credit> </Invoices>
Dylan Henley – Battlefield High School – Class of 2010 Information Technology Portfolio
Final Result
Final product formatted with the CSS document.
Dylan Henley – Battlefield High School – Class of 2010 Information Technology Portfolio