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.

   1. 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?

      Generally in an XML document, XSL (eXtensible Stylesheet Language) is used for styling. XSL is used to show how the XML document will be presented. However CSS can be used to style both the XML and HTML document. To display the title, judgement, background and the case in that order, absolute positioning can be used.

   2. Can you write the CSS file in such a way that it will display just the title, and the judgement?

      To have only the title and the judgement to be displayed one can use the property "display" and the value "none", that is display:none;. Using this declaration, nothing will be displayed.

   3. 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?

   URI stands for Uniform Resource Identifier and consists of a number of characters that determines an Internet Resource. On the other hand, URL stands for Uniform Resource Locator and is a subset of URI. It determines the address of an Internet domain.^[1]

3. Why does the XML language allow namespaces?

   In an XML document, namespaces are used so that there would be no conflicts in the element names.^[1] Therefore in XML, a prefix is used inside the element tag, like the following:
   

    1: <root>   
    2:  <s:student xmlns:s="http://student_research.com/name">   
    3:   <s:name>Stephanie Vella</s:name>   
    4:  </s:student>   
    5:  <m:module xmlns:m="http://student_research.com/module">   
    6:   <m:name>Advanced Web Technologies</m:name>   
    7:  </m:module>   
    8: </root>   
   

   Since there is <name> in both <student> and <module>, namespaces have been included.

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>

   Now open another tab in JCreator and type the following style sheet out. Save it under the name stylesheet01.css in the same folder as memo1.xml. Notice that, this time, the editor does not pick out the different components in different colours.
     memo {display: block; margin: 1em;}
  id {display: block; margin: 1em; font-style: italic; font-size:200%}
  date {display: block; margin: 1em;color: "dark 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?

   The point of putting "display:block" is such that the element will be presented as a heading or a paragraph. This means that the element will have a space above and below.^[2]
   

   memo.xml and using CSS

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.

   1. Write a CSS file that will enable the chapter to be displayed in this way. Call it stylesheet4.css

       1:  chapters{   
       2:   font-family: Palatino, "Times New Roman", serif;   
       3:   font-size: 12pt;   
       4:   margin-left: 1em;   
       5:   background-color:#FCFBC4;   
       6:  }   
       7:  chapterHead{   
       8:   font-size:24pt;   
       9:   font-style:italic;   
       10:  font-weight:bold;   
       11:  color:blue;   
       12:  }   
       13: line{   
       14:  font-style:italic;   
       15:  margin-left: 2em;   
       16: }   
      

   The above CSS wil produce the following:
   

   2. Write 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.

       1:  chapters{   
       2:   font-family:Palatino, "Times New Roman", serif;   
       3:   font-size: 12pt;   
       4:   margin-left: 1em;   
       5:   background-color:#FCFBC4;   
       6:   display:block;   
       7:  }   
       8:  chapterHead{   
       9:   font-size:24pt;   
       10:  font-style:italic;   
       11:  font-weight:bold;   
       12:  color:blue;   
       13:  display:block;   
       14:  }   
       15: line{   
       16:  font-style:italic;   
       17:  margin-left: 2em;   
       18:  display:block;   
       19: }   
      

      The above CSS will produce the following:
      
   

Question Sheet:

Sources: