After writing some articles about XAML, I have decided to go a little deeper in XML. Actually going deeper into XML is quite a challenge, due to the fact that XML is considered a meta-language and thus it is quite simple with straight forward logic. Thus, I have decided to present a simple XML example, with the usage of CSS. So, I need 2 files – a XML file and a CSS file. In the XML file I put the data, within tabs as I would like it to be structured. In the CSS file I put information about how it should look like. So, this is the XML file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet href="VitoshEducation.css" type="text/css"?> <universities> <university> <name>Univesity of Groningen</name> <country>Netherlands</country> <degree>Master</degree> <major>Business Administration - Supply Chain and Operations</major> <years>2</years> </university> <university> <name>Univesity of Sofia</name> <country>Bulgaria</country> <degree>Master</degree> <major>Business Administration - Strategic Management</major> <years>2.5</years> </university> <university> <name>Univesity of Sofia</name> <country>Bulgaria</country> <degree>Bachelor</degree> <major>Greek Philology</major> <years>4</years> </university> <university> <name>Univesity of Sofia</name> <country>Bulgaria</country> <degree>Specialist</degree> <major>Company Management</major> <years>2</years> </university> </universities> |
As you notice, we have four universities. In order to present it in XML, I have put the information for each university between tags <university></university>. The four universities are put between tags <universities></universities>. The good thing about XML is that you understand the idea of the content really quickly, if the format is done correctly. Thus, you need just a quick look to understand the essence of the code and what does it present. A quick note – on the second line, you notice immediately that this file uses something from a file, named “VitoshEducation.css”. What does it use? It takes information about the styles from this file. This is the CSS file content:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ font-family:Verdana,Tahoma, sans-serif; font-size:1em; } universities { display:block; margin:20px; } universities:before { display:block; content:"The Universities of Vitosh"; font-size:1.2em; text-decoration:underline; } universities:after { display:block; content:"www.vitoshacademy.com"; font-style:italic; margin-top:15px;} university *:before { display:inline; font-weight:bold; font-size:0.8em; } name:before { content:"Name: "; } country:before { content:"Country: "; } degree:before { content:"Degree: "; } major:before { content:"Major: "; } years:before { content:"Duration: "; } university { display:list-item; border-bottom:solid 2px gray; margin-top:15px; margin-left:25px; list-style-type:decimal; } name, country, degree, major, years { display:block; } |
What does it do? It simply tells the browser what to do, when it sees some of the XML elements. Thus, Whenever it sees “major” tag, the browser writes “Major: ” as in the file. At the closing of the tag <universities></universities> it writes “www.vitoshacademy.com” in italic. This is achieved through on line 4.
Here is how the XML file looks at your browser.
Enjoy the code!