Freelance Web Developer & Freelance Web Developer London & Freelance Web Developer United Kingdom

In this tutorial I will explain XML and how to properly construct valid XML documents. This tutorial is a solid foundation for anyone who is interested in this important technology, which is becoming increasingly important as the web evolves with technologies such as AJAX.

Transcript:

Hi there I’m Abdi Gulaid a professional freelance web developer at bestcoder.co.uk I've put this video together in order to explain demonstrate and show you how to create your own XML documents.

XML is a topic of frequent discussion amongst web developers, and will become more and more important as the web evolves. XML is an easy way of structuring and sharing information across the web and across computers in general. If you are a novice or an experienced web developer and want to learn XML then this video tutorial is for you. This tutorial will be as clear and as concise as possible in order to make the learning process easy and fun.

In this tutorial I will explain what XML is I will then demonstrate how to write your own XML documents. The topic will then end with examples of how XML is used.

So what is XML you ask?

XML is short for extensible mark-up language; it’s essentially a set of rules for encoding documents electronically.

XML is a flexible way to create and make common information formats available on the web, intranet and elsewhere including computers handhelds and mobiles etc.

The greatest thing about XML is that it’s extensible, and unlike HTML the mark-up symbols are unlimited and are defined by you the person who creates the XML document. This makes XML incredibly easy to learn.

Ok that's the introduction finished, let’s begin the learning process.

Every XML document must start with a tag called an XML declaration. This tag starts with a less than sign, followed by a question mark. I’m now going to write our declaration block. The version type must be declared within the XML declaration block, we’ve used version 1 as it’s the original and most widely used version and has all of the features that we need for the purposes of this tutorial. We've also used UTF-8 as the encoding type for the purposes of this tutorial.

XML documents mainly comprise of many sets of opening and closing tags called elements, which are defined by you the developer. You can name these elements whatever you want, but they must follow certain naming rules which I'll show you in a moment.

We'll first start by creating an element, and we'll call it element in order to demonstrate how you should go about creating them.

All opening elements are enclosed by a less than sign and a greater than sign, like this. The closing tag is nearly the same but has a preceding forward slash before the element name. The opening and closing tags match, they must also be the same in case sensitivity. For instance this is an invalid opening and closing element, as the first letter in the opening element is in upper case whilst the closing element is all in lowercase. This is a valid version of what we've just created, as the element match in how they are spelt, they also match in case. XML element names cannot begin with a number, in fact element names can only begin with a letter or the underscore character.

That makes this element name invalid. This element name is also invalid. This element name begins with the underscore character which is perfectly valid. The other characters within the element tag can consist of other characters and this is perfectly valid. This is also a perfectly valid element name.

Ok, so now that we know how to correctly name our elements let’s begin constructing our XML document. XML document must have exactly one root element which is the parent of all other elements. All other created elements must fall within the opening and closing tag of the root element.

I’m just going to quickly create our root element; we'll call it movie collection. That’s the root element done, now I'll begin creating the child elements that we need in order to store our movie data.

We'll create an element and name it title, in order to record the title of each of our movies. We'll also need a genre element in order to record the genre of our movies; our films were made available at different times so we'll add a year tag to record the year that they were made available. The language of the movie would be a good piece of information to know, so we'll create a language tag. We also want to know who the cast is for the movie; the movie has multiple actors so we'll create multiples of this element. Let's also add the crew to our data, we want to differentiate the crew roles so we'll create sub elements within the crew element in order to differentiate between the crew roles; particularly the director.

Our XML document structure is nearly complete. We've created tags for a single movie, but our small collection consists of three movies so we'll create two other instances of these sets of tags in order to record the data for our three movies. So I'll just copy and paste the already created tags.

That’s now done, what I'll now do is begin populating the elements with actual movie data. Now what we want is a way of uniquely differentiating our movies from each other, so we'll create something called an attribute in order to do this. Attributes can be added to elements, and should be seen as a way of adding information that enhances or adds to the actual data that is being described. Attributes shouldn't be seen as actual data, but merely a way of adding to or defining data that is already written.

Attributes are essentially written like this, you have control over what you wish to name your attribute; we've just called it ‘ID’ as that’s what it is it’s an identifier. You can enclose the actual attributes within either double quotes or single quotes; I prefer double quotes for no particular reason. Let's just quickly create a gender attribute to identify Dustin Hoffman as a male. We will now add the other ID attributes to our other title elements.

Comments can be added to XML documents in the same way that they are added to HTML documents. Just like HTML comments, the comment will begin with the less than sign, and end with the greater than sign. You can also use comments to comment out sections of XML code, just like you would in HTML.

Element values can contain many special characters, there are certain characters which are either not allowed or are not recommended as actual element values. These characters include the less than sign, ampersand sign, and the greater than symbol, the single quote symbol, and finally the double quote symbol. You should replace all of these symbols with their HTML entity versions, the less than and ampersand symbols must always be converted otherwise your XML document will be invalid. The others don’t have to be converted, but it’s recommended that you convert them.

Let's convert the less than sign into its HTML entity version. Let's also change the ampersand symbol into its HTML entity version as it’s an absolute requirement. Ok the special characters have been explained so I’m now going to delete them as we don’t need them for our XML document. I’m now going to explain a little change to normal elements and how they can be written. Elements don’t have to contain data; there are times in which you might want to create an element which only has attribute data instead of actual data. So I'm now going to show you how you can shorten them, I’m just going to create an empty element for rating our movie, the actual rating will be written within an attribute field. I've now highlighted the completed empty element which has an attribute; you are probably asking what the point is in having an element which contains no data. Why would you have a closing tag in place if it doesn't contain any data, well what we can do is delete the closing tag and convert the opening tag into a self closing tag which simplifies things and shortens the tag, all we do is add a forward slash before the greater than symbol. That’s the essence of self closing elements they are short and allow for you to use attributes when actual data isn't required.

Let’s view our XML document within our browser. The document doesn't contain any styling and some web browsers will display it in a tree like structure like you see here. XML is a brilliant way to share data, you can also style XML documents in a similar way to which you would style HTML documents. XSLT which stands for Extensible Style-sheet Language Transformations is the preferred styling method for XML. XSLT is an entire subject on its own and will be a topic of a future tutorial which I'll put together. For the purposes of this tutorial we will use CSS to style our XML document.

I’ve already created a CSS document for speed, and we will use it to style our XML documents. You can see that all of the styling points to our XML element names. Now, let’s attach our CSS document to our XML file. We'll use the XML style sheet tag to attach the document to our XML file. Let’s save and view our XML file in order to view how the CSS has changed its appearance and that’s our XML file complete and displayed with some simple styling.

Ok, now that we’ve learnt how to write up an XML document lets discuss some of the ways in which XML is used in the real world. As mentioned earlier XML is primarily used to share data across the web, computers, and devices such as mobile devices.

Price comparison websites are an example of how XML can be used. Price comparison websites use data provided by companies like EBay and Amazon, the data is usually provided in an XML format which is then computed and compared during the price comparison process.

XML can also be used to provide data to search engines about your website's structure and content. Search engines will then use this information to crawl updated web pages or web pages you specifically specify in the XML file. It allows for search engines to easily crawl your website, which can result in improved search engine rankings.

XML is also a major part of AJAX; it's in fact the 'X' in the AJAX acronym which is a framework that allows for developers to create dynamic fast loading web pages.

That’s XML explained and demonstrated, you should now know how to write your own XML documents. Thanks for watching and if you like my videos don't forget to subscribe.