Quick questions:
1. You have a set of legal documents. Each has four sections: the title, the case, the background, and the judgement, in that order. Each has been made into an XML document by inserting a prolog and suitable tags. You want to write a CSS file that will display these documents using a suitable browser.
a. Can you write the CSS file in such a way that it will display the title, then the judgement, then the background, then the case?
CSS is meant to style your data not arrange the order of the content. But this can be done by using absolute positioning to position the judgement right after the title.
b. Can you write the CSS file in such a way that it will display just the title, and the judgement?
In CSS the "display: none" property can be referenced to hide the unwanted elements.
c. If the CSS file is called legalWrit.css, what processing instruction should you put in the prolog of the XML document(s)?
<?xml-stylesheet type="text/css" href="legalWrit.css"?>
2. What is the difference between a URI and a URL?
A URI defines a resource by location or by name. URI refer to a resource by not specifying it's extension. A URL is a URI but a URI is not a URL. A URL is a subset of URI that defines the network location of a specific representation for a given resource. URIs also define the file extension that indicates what content type is available at the URL.
3. Why does the XML language allow namespaces?
Namespaces are used to identify the context for the elements. An example of this would be: bird wings and aeroplane wings. They are both wings but the context is much different. Namespaces define an ontology.
Example:
<aeroplane:wings></aeroplane:wings>
<bird:wings></bird:wings>
Longer questions:
1. Here is a short XML document. Type it out, as a new file in JCreator. Save it under the name memo1.xml in a suitable directory in your file system. Notice that the JCreator editor picks out the different components in different colours, to aid you in detecting errors.
<?xml version="1.0"?>
<?xml-stylesheet href="stylesheet01.css" type="text/css"?>
<!DOCTYPE memo>
<memo>
<id>Message: 1334</id>
<date>18 November 09</date>
<time>09:30</time>
<from>From: The Managing Director</from>
<to>To: Heads of all Departments</to>
<message>We must increase production. And increasing sales would be no bad thing either.</message>
</memo>
memo {display: block; margin: 1em;}
id {display: block; margin: 1em; font-style: italic; font-size:200%}
date {display: block; margin: 1em;color: "Blue"; text-align: left;}
time {display: block; margin: 1em;color: aqua; text-align: left;}
from, to {display: block; margin: 1em;color: green; text-align: left;}
message {display: block; margin: 1em;color: blue; text-align: left;}
Now use the Mozilla Firefox browser to view the file memo1.xml.
What was the point of putting “display: block” into the CSS file in each of the 6 lines?
"display:block" puts a block around our elements. It specifies whitespace above and below the element and does not allow any elements next to it. This is particularly useful when displaying headers or titles.
2. We want the chapter we were working on last week (“Chapter 2: Volcanic winter”) to be displayed on screen in a web browser. Here are some of the features we would like it to have: the font for the text to be Palatino, or failing that Times New Roman, or failing that any serif face. Type size to be 12 pt. The chapter heading to be the same font, but 24 pt and bold and italic and blue. The poem lines to be the same font, but italic. Background colour to be parchment: use the colour #FCFBC4. Both the chapter heading and the main text are to be indented from the left margin by 1 em. The lines of poetry are to be indented from the left margin by 2 ems.
a) Write a CSS file that will enable the chapter to be displayed in this way. Call it stylesheet4.css
chapter{
background-color: #FCFBC4;
font-family: Palatino, "Times New Roman", Serif;
font-size:12pt;
}
title{
font-weight:bold;
font-size:24pt;
font-style:italic;
color:blue;
margin-left:1em;
display:block;
}
text{
padding-top: 5px;
margin-left:1em;
display:block;
}
verse{
padding-top: 3px;
font-style:italic;
margin-left:2em;
display:block;
margin-top: 5px;
margin-bottom: 5px;
}
b) Type some – not all – of the XML document version of “Chapter 2: Volcanic winter” into a suitable file. Store it in the same folder as the stylesheet4.css document you have just written. View the file, using the Mozilla Firefox browser. See whether it looks as it should. If not, change the CSS file and view it again. Repeat this until you have it right.
c) Right a different CSS file, with different display properties, and adjust your XML file so that it is displayed using this one instead. Use display properties that seem appropriate to you.
chapter{
background-color: #FCFBC4;
font-family: Palatino, "Times New Roman", Serif;
font-size:12pt;
}
title{
font-weight:bold;
font-size:24pt;
font-style:italic;
color:blue;
margin-left:1em;
display:block;
text-align: center;
margin-bottom: 10px;
}
text{
padding-top: 5px;
margin-left:1em;
display:block;
}
verse{
padding-top: 3px;
font-style:italic;
margin-left:2em;
display:block;
margin-top: 5px;
margin-bottom: 5px;
}
poem{
display: block;
margin-top: 15px;
margin-bottom: 15px;
text-align: center;
}
indexEntry{
color:Gray;
}
