Difference between revisions of "AIM Class6"

esse quam videri
Jump to: navigation, search
Line 98: Line 98:
 
and see what happens. Click it again. Why is your document being rendered
 
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.
 
like this? Try opening your XML document with Firefox or another browser.
−
Authored by J. Baxter 2000, last updated 2004
 
 
How is it different?
 
How is it different?
 
4. Move back to your text editor. Copy the entire project node (with child nodes)
 
4. Move back to your text editor. Copy the entire project node (with child nodes)
Line 156: Line 155:
 
Many browsers will display an error message if you reference a DTD that can not
 
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.
 
be found, but not if a CSS file is missing.
 +
 
In the following lines:
 
In the following lines:
 +
<pre>
 
<?xml version="1.0" encoding="iso-8859-1" standalone = "no"?>
 
<?xml version="1.0" encoding="iso-8859-1" standalone = "no"?>
 
<!DOCTYPE portfolio SYSTEM "portfolio.dtd">
 
<!DOCTYPE portfolio SYSTEM "portfolio.dtd">
 
<?xml-stylesheet type="text/css" href="portfolio.css"?>
 
<?xml-stylesheet type="text/css" href="portfolio.css"?>
 +
</pre>
 
The third is a link to a stylesheet. Hopefully you have all created plenty of
 
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
 
stylesheets while working with HTML, but if not don't worry – we'll go through
 
the basics in class.
 
the basics in class.
 +
 
The second line is a document type declaration (!DOCTYPE). It tells us what the
 
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
 
root element for this document is (portfolio), and includes a reference to a DTD
Line 168: Line 171:
 
“the syntax of markup constructs... [that] may include additional
 
“the syntax of markup constructs... [that] may include additional
 
definitions such as character entity references”
 
definitions such as character entity references”
 +
 
Basically that just means that a DTD is sort of like a dictionary – it holds the
 
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
 
definitions of elements used in your XML file, and information on how those
Line 173: Line 177:
 
requesting the “look up” and verification of each of the document's elements to
 
requesting the “look up” and verification of each of the document's elements to
 
make sure that they are valid.
 
make sure that they are valid.
 +
 
Create a new file and type the following:
 
Create a new file and type the following:
 +
<pre>
 
<!ELEMENT portfolio (introduction?, project*)>
 
<!ELEMENT portfolio (introduction?, project*)>
 
<!ELEMENT project (title, date?, clientname?, description?,
 
<!ELEMENT project (title, date?, clientname?, description?,
Line 179: Line 185:
 
<!ELEMENT introduction (artistname?, message?)>
 
<!ELEMENT introduction (artistname?, message?)>
 
<!ATTLIST project rating (5 | 4 | 3 | 2 | 1) #IMPLIED>
 
<!ATTLIST project rating (5 | 4 | 3 | 2 | 1) #IMPLIED>
 +
</pre>
 
Save the file in the same folder as your XML documents and and name it
 
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
 
“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.
 
sure that it can find the DTD and that there are no errors in the new document.
 
Deciphering the DTD
 
Deciphering the DTD
 +
 
Let's go back and look at what is in our portfolio.dtd document.
 
Let's go back and look at what is in our portfolio.dtd document.
 +
 
To declare an element you start with <!ELEMENT
 
To declare an element you start with <!ELEMENT
 +
 
Then you type in the name of that element. Our DTD defines three elements:
 
Then you type in the name of that element. Our DTD defines three elements:
 
portfolio, project, and introduction. Following the name are optional parameters
 
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
 
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
 
first line the element name is followed by (introduction?, project*). Both
−
“introduction” and “project” elements are listed as children of a “portfolio”
+
“introduction” and “project” elements are listed as children of a “portfolio” element. The question mark and asterisk specify whether the children are
−
Authored by J. Baxter 2000, last updated 2004
 
−
element. The question mark and asterisk specify whether the children are
 
 
mandatory for the portfolio element to be valid, and how many times they
 
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
 
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
 
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
 
limit on the amount of times it can occur. A (?) signals either no occurrence or
−
only one occurrence. If ther is no +, *, or ? symbol, the element must appear once
+
only one occurrence. If there is no +, *, or ? symbol, the element must appear once
 
(and only once).
 
(and only once).
 +
 
So the first line of our DTD is:
 
So the first line of our DTD is:
−
<!ELEMENT portfolio (introduction?, project*)>
+
<pre><!ELEMENT portfolio (introduction?, project*)></pre>
 
And it could be interpreted as:
 
And it could be interpreted as:
 +
 
There could be an element named portfolio. It may or may not have an
 
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
 
introduction, but if there is an introduction there will be only one. The
Line 206: Line 216:
 
one or more projects, there is no limit to the number it can have.
 
one or more projects, there is no limit to the number it can have.
 
The second line is:
 
The second line is:
−
<!ELEMENT project (title, date?, clientname?, description?, media?)>
+
<pre><!ELEMENT project (title, date?, clientname?, description?, media?)></pre>
 
And an interpretation of this line could read:
 
And an interpretation of this line could read:
 +
 
There could be an element named project. It will definitely have a title –
 
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 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
 
and/or media, but if there is any occurrence of any of these, there will be
 
only one of each.
 
only one of each.
 +
 
Ok, your turn. “Interpret” the last of the element lines:
 
Ok, your turn. “Interpret” the last of the element lines:
−
<!ELEMENT introduction (artistname?, message?)>
+
 
 +
<pre><!ELEMENT introduction (artistname?, message?)></pre>
 +
 
 
There is one more line to this DTD; a definition of an attribute (associating a
 
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”
 
name/value pair with an element). It starts with the keyword “ATTLIST”
Line 221: Line 235:
 
pipe bars, of the valid values this attribute can take. Here the attribute rating can
 
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
 
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,
+
whether or not a value is required. There are three options: #REQUIRED, #IMPLIED, and #FIXED. In this example we are using #IMPLIED which means
−
#IMPLIED, and #FIXED. In this example we are using #IMPLIED which means
 
 
that no default value is provided.
 
that no default value is provided.
−
<!ATTLIST project rating (5 | 4 | 3 | 2 | 1) #IMPLIED>
+
 
−
Linking a Stylesheet
+
<pre><!ATTLIST project rating (5 | 4 | 3 | 2 | 1) #IMPLIED></pre>
 +
 
 +
==Linking a Stylesheet==
 
So far you have created a structured document using XML, a DTD to validate the
 
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
 
XML, and now we just need to add a little bit of style to finish off the
−
walkthrough. For today, just type the sample CSS in the next section (in a new
+
walkthrough.  
−
Authored by J. Baxter 2000, last updated 2004
+
 
−
text file) and save it in the same folder as your XML and DTD documents. Name
+
Note that in XML, elements aren't already "block" or "inline" - you create that with your stylesheet.
−
it “portfolio.css”. We'll get into the specifics of creating CSS files next week.
+
 
−
When you are finished making the CSS file, reload your XML document to see
+
===Sample Stylesheet===
−
what it looks like.
 
−
Sample Stylesheet
 
 
portfolio {
 
portfolio {
 
background-color: #ffffff;
 
background-color: #ffffff;
Line 275: Line 288:
 
margin-left: 30pt;
 
margin-left: 30pt;
 
}
 
}
−
Authored by J. Baxter 2000, last updated 2004
+
 
  
 
==Homework==
 
==Homework==

Revision as of 21:41, 30 June 2006


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; }


Homework

AIM Assignment 5 - Create and XML File with a DTD and style it with css

AIM Midterm Review

Reading

http://www.w3schools.com/xml/xml_whatis.asp

http://www.w3schools.com/xsl/xsl_languages.asp

Retrieved from "http://imamp.colum.edu/mediawiki/index.php?title=AIM_Class6&oldid=2963"