AIM Class6
Class Goals
- Reinforce student's understanding of structuring a document and classification (using XML and DTD)
- Introduce XML and DTD syntax
- Walkthrough creating an XML document
- Walkthrough creating a DTD document
- Have students create XML, DTD, and CSS files to reinforce the lecture
- Have students use XML to structure elements of a domain
Contents
Introduction to XML
Walkthrough: Markup and descriptions
Walkthrough a simple XML file and discuss what each line means:
<?xml version="1.0" encoding="iso-8859-1" standalone = "yes"?> <!-- a comment --> <portfolio> <introduction> <artistname>Jack Sack</artistname> <message>Introductory message...welcome to this portfolio...</message> </introduction> <project> <title>Project one</title> <date>June 2001</date> <clientname>Client Name</clientname> <description>Description of the project...goal of the project, and some wonderful information about the project.</description> <media>Flash and ASP</media> </project> </portfolio>
Descriptions:
XML declaration
comment (just like HTML!)
Root element
Node (introduction)
First child node of introduction
Second child node of introduction
Node (project)
First child node of project
Second child node of project
Third child node of project
Fourth child node of project
Fifth child node of project (close of root element)
Notes
XML declaration: states what markup language is being used, the version, and optionally two other properties (in this example the type of encoding and whether the document is a “standalone” document – whether there are other files to download such as a DTD).
Comment: comments are notes or markup that are not interpreted or parsed. Root element: there can be only one root element – it is the element that surrounds or contains all other elements within the document. Also can be referred to as “document element”.
Node: an element that may have attribute/value pairs, and which may contain other elements (child nodes).
Child node: an element that is contained within another element. Children in XML have only one parent.
Create an XML File
1. Create a new folder to hold all of the documents we will be making
2. Type the following example code into HTMLkit (or the editor of your choice) and save it as “example1.xml”. It is important that the file extension is .xml! Feel free to change the default content, but don't change the code.
<?xml version="1.0" encoding="iso-8859-1" standalone = "yes"?> <!-- authored by Your Name --> <portfolio> <introduction> <artistname>Fictional Name (or Your Name) </artistname> <message>Introductory message...welcome to this portfolio...</message> </introduction> <project> <title>Pet Store Plus</title> <date>June 2001</date> <clientname>Pet-o-Matic Corporation</clientname> <description>Description of the project...goal of the project, and some wonderful information about the project.</description> <media>Flash and ASP.Net</media> </project> </portfolio>
3. Open up Internet Explorer and drag your new XML file into the browser window. You should see some minus (-) signs on the left hand side. Click one and see what happens. Click it again. Why is your document being rendered like this? Try opening your XML document with Firefox or another browser. How is it different?
4. Move back to your text editor. Copy the entire project node (with child nodes) and paste it twice below the first node. Make sure you keep the project nodes nested within the root element (portfolio). You should now have three “sets” of projects. Change the information on the two new ones. You want to be able to see that it is three different projects with different content.
5. Save and reload your XML file in a browser to see that there are no new errors.
6. Within your XML declaration, change the value of the standalone attribute to be “no” instead of “yes”.
7. Add the following two lines (see example below for placement):
#<?xml-stylesheet type="text/css" href="portfolio.css"?> #<!DOCTYPE portfolio SYSTEM "portfolio.dtd">
8. Save your document as “example2.xml” - again, be sure it has the .xml file extension! Before you reload the file in your browser, what do you think will happen?
9. Reload the file. Are the results what you expected? Why/why not? Your document should now look similar to this:
<?xml version="1.0" encoding="iso-8859-1" standalone = "no"?> <!DOCTYPE portfolio SYSTEM "portfolio.dtd"> <?xml-stylesheet type="text/css" href="portfolio.css"?> <!-- authored by Your Name --> <portfolio> <introduction> <artistname>Fictional Name (or Your Name) </artistname> <message>Introductory message...welcome to this portfolio...</message> </introduction> <project> <title>Pet Store Plus</title> <date>June 2001</date> <clientname>Pet-o-Matic Corporation</clientname> <description>Description of the project...goal of the project, and some wonderful information about the project.</description> <media>Flash and ASP.Net</media> </project> <project> <title>Stiff Upper Lip</title> <date>May 2001</date> <clientname>Moustaches R Us</clientname> <description>Description...</description> <media>XHTML and CSS</media> </project> <project> <title>Buy More!</title> <date>January 2001</date> <clientname>C. Onsu Mer</clientname> <description>Description...</description> <media>Photoshop</media> </project> </portfolio>
Create a DTD
Many browsers will display an error message if you reference a DTD that can not be found, but not if a CSS file is missing.
In the following lines:
<?xml version="1.0" encoding="iso-8859-1" standalone = "no"?> <!DOCTYPE portfolio SYSTEM "portfolio.dtd"> <?xml-stylesheet type="text/css" href="portfolio.css"?>
The third is a link to a stylesheet. Hopefully you have all created plenty of stylesheets while working with HTML, but if not don't worry – we'll go through the basics in class.
The second line is a document type declaration (!DOCTYPE). It tells us what the root element for this document is (portfolio), and includes a reference to a DTD (“portfolio.dtd”). A DTD (document type definition) is defined by the W3C as: “the syntax of markup constructs... [that] may include additional definitions such as character entity references”
Basically that just means that a DTD is sort of like a dictionary – it holds the definitions of elements used in your XML file, and information on how those elements should be interpreted. So when you include the URI to a DTD, you are requesting the “look up” and verification of each of the document's elements to make sure that they are valid.
Create a new file and type the following:
<!ELEMENT portfolio (introduction?, project*)> <!ELEMENT project (title, date?, clientname?, description?, media?)> <!ELEMENT introduction (artistname?, message?)> <!ATTLIST project rating (5 | 4 | 3 | 2 | 1) #IMPLIED>
Save the file in the same folder as your XML documents and and name it “portfolio.dtd”. Reload your XML file (example2.xml) in your browser to make sure that it can find the DTD and that there are no errors in the new document. Deciphering the DTD
Let's go back and look at what is in our portfolio.dtd document.
To declare an element you start with <!ELEMENT
Then you type in the name of that element. Our DTD defines three elements: portfolio, project, and introduction. Following the name are optional parameters that effect the valid ways in which that element can be used. For example, in the first line the element name is followed by (introduction?, project*). Both “introduction” and “project” elements are listed as children of a “portfolio” element. The question mark and asterisk specify whether the children are mandatory for the portfolio element to be valid, and how many times they should/can appear. If there is a plus sign (+), then the item may occur one or more times. An asterisk (*) signals that the item may or may not occur, and there is no limit on the amount of times it can occur. A (?) signals either no occurrence or only one occurrence. If there is no +, *, or ? symbol, the element must appear once (and only once).
So the first line of our DTD is:
<!ELEMENT portfolio (introduction?, project*)>
And it could be interpreted as:
There could be an element named portfolio. It may or may not have an introduction, but if there is an introduction there will be only one. The portfolio also may or may not have one or more projects. If it does have one or more projects, there is no limit to the number it can have. The second line is:
<!ELEMENT project (title, date?, clientname?, description?, media?)>
And an interpretation of this line could read:
There could be an element named project. It will definitely have a title – and only one title. It may or may not have a date, clientname, description, and/or media, but if there is any occurrence of any of these, there will be only one of each.
Ok, your turn. “Interpret” the last of the element lines:
<!ELEMENT introduction (artistname?, message?)>
There is one more line to this DTD; a definition of an attribute (associating a name/value pair with an element). It starts with the keyword “ATTLIST” (required of an attribute) and then states the name of the element that it can be used with (in this case, project). Following the element name is the name of the attribute itself - “rating”. After the name of the attribute comes a list, separated by pipe bars, of the valid values this attribute can take. Here the attribute rating can be a number between 1 and 5. At the end is an indicator of the default value, and whether or not a value is required. There are three options: #REQUIRED, #IMPLIED, and #FIXED. In this example we are using #IMPLIED which means that no default value is provided.
<!ATTLIST project rating (5 | 4 | 3 | 2 | 1) #IMPLIED>
Linking a Stylesheet
So far you have created a structured document using XML, a DTD to validate the XML, and now we just need to add a little bit of style to finish off the walkthrough.
Note that in XML, elements aren't already "block" or "inline" - you create that with your stylesheet.
Sample Stylesheet
portfolio {
background-color: #ffffff;
margin-left: 20pt;
margin-right: 20pt;
}
introduction {
display: block;
margin-bottom: 30pt;
}
artistname {
color: #999900;
font-size: 40pt;
display: block;
}
message {
color: #626262;
margin-bottom: 30pt;
}
project {
display: block;
background-color: #cccccc;
margin-bottom: 30pt;
}
title {
color: #333333;
font-size: 20pt;
}
date {
color: #666666;
font-size: 12pt;
padding:10px 10px 10px 10px;
}
description, clientname {
display: block;
font-size: 14pt;
}
media {
Display: block;
margin-left: 30pt;
}
Structuring Elements of a Domain
Elements of a domain can be structured in many different ways. The best solution will depend on many factors (such as the domain itself, culture, history, standards, ec.).
Let's look at a simple example. How would you structure a menu?
An unstructured menu (AIM_XML_menu) is just a list of items. Come up with a simple structure for this list.
Translate the structure you created into a DTD and XML file.
Homework
AIM Assignment 5 - Create an XML File with a DTD and style it with css
