Advanced Web Technologies

Blog posts as part of the BSc Internet Application Development programme to discuss my experience while working on the tasks that will be given during the Advanced Web Technologies module.

QUICK QUESTIONS

  1. Suppose that a CSS file is used to determine how an XML document will appear when viewed in a browser. Suppose that the CSS file contains two rules, one dictating that a particular piece of text will appear in bold type, the other dictating that it will not. What will happen?

    If the CSS is written as specified, that is, the first one dictating that a particular piece of text will appear in bold type and the second one dictating that it will not; the text will not be bold. This is because the latest definition will be applied.
  2. An XML document contains the sentence "The grand old Duke of York, he had 10000 men." Would XPath be able to extract the piece of data "10000" from such a document?

    XPath is used to select nodes from the XML documents using path expressions[1], and therefore could not extract data inside the elements. One possible way to extract the piece of data "10000" is by using the substring() function.[2]
      substring(source-string, start-position, number-of-characters)
      substring("The grand old Duke of York, he had 10000 men.", 35, 5)

LONGER QUESTIONS

  1. Download the following file from the OasisPlus CMT3315 web page for Unit 10 Learning Materials: 'chemElements2.xml'
    However, the file is supposed to be displayed as a table, with five columns. The top row of the table is supposed to be headings for the 5 columns: this row is supposed to have a distinctive background colour. The next 99 rows are supposed to show details of 99 of the chemical elements – these rows are also supposed to have a distinctive background colour, different from the heading.

    1. Open JCreator and open the chemElements2.xml file in it. Add a line to the document that will cause it to be viewed (in the browser) in conjunction with a CSS file called stylesheet01.css

      <?xml-stylesheet href="stylesheet01.css" type="text/css"?>
    2. Write the file, stylesheet01.css, and store it in the same folder. The content of this CSS file should cause the table to appear in the Mozilla Firefox browser, as described above. Make your own decisions about suitable typefaces, borders, background colours, alignment, etc.

      1:  chemElements {text-align:center;display:table; border: thin dotted black; width:50%; margin-left:25%; margin-top:5px; font-family:Arial; font-size: 12px; color:#181818;}  
      2:  tableHead {display:table-row;font-weight:bold;}  
      3:  anumHead, nameHead, symbolHead, mptHead, bptHead{display:table-cell; padding: 5px; border: thin dotted black; background-color:#666633;}  
      4:  element {display:table-row; background-color: #E0E0E0;}  
      5:  anum, name, symbol, mp, bp{display:table-cell; padding: 5px; border: thin dotted black;}  
      
      The above CSS will produce the following table:
    3. chemElements2.xml

  2. Consider the following XML document:
    <?xml version= "1.0" ?>
    <!DOCTYPE book SYSTEM "musicList.dtd">
    <?xml-stylesheet href="stylesheet04.css" type="text/css"?>
    <musicList
    number="2" title="miscellaneous CDs"
    xmlns:cdlist="http://middlesex_press.co.uk/CDcollection ">
      <cd number="711">
       <title>The Best of Ivor Cutler</title >
       <artist>Ivor Cutler</artist >
       <tracks total="19"/>
       <cdlist:refnum> POL767 </ cdlist:refnum >
      </cd>
      <cd number="712">
       <title>Penderecki’s First Symphony</title >
       <artist>Middlesex Symphony Orchestra</artist >
       <tracks total="5"/>
       <cdlist:refnum> DGM987 </ cdlist:refnum >
      </cd>
      <cd number="713">
       <title>Penderecki’s Last Symphony</title >
       <artist>Middlesex Symphony Orchestra</artist >
       <cdlist:refnum> DGM988 </ cdlist:refnum >
       <tracks total="5"/>
      </cd>
      <cd number="714">
       <title>Boris the Spider Rides Again</title >
       <artist>The Renegades</artist >
       <cdlist:refnum> CHR328 </ cdlist:refnum >
       <tracks total="19"/>
      </cd>
    </musicList>

    Provide XPath expressions which will do the following:

    1. Select all the elements subordinate to the root node.
    2. musicList

    3. Select all track elements that have a total attribute with the value of 5.
    4. //tracks[@total=5]

    5. Select all elements that contain the word "Penderecki" in their title.
    6. /musicList/cd/title[contains(., 'Penderecki')]

    7. Select any elements that have titles with greater than 11 characters.
    8. /musicList/cd/title[string-length() > 11]

    9. Select all the siblings of the first cd element
    10. /musicList/cd[1]/*

Question Sheet:

Question Sheet: Lab 9

Sources:

[1] http://www.w3schools.com/xpath/xpath_syntax.asp
[2] XPath: navigating XML with XPath 1.0 and 2.0 : kick start - Pg 119

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: }   
      
    2. The above CSS wil produce the following:
    3. 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:

Question Sheet: Lab 8

Sources:

[1] http://www.w3schools.com/XML/xml_namespaces.asp
[2] http://www.quirksmode.org/css/display.html

QUICK QUESTIONS

  1. People who prepare XML documents sometimes put part of the document in a CDATA section.

    1. Why would they do that?

    2. The text inside the XML document is parsed by the parser. However text inside the CDATA section will be ignored by the parser.[1] That is, the symbols '&' and '>' can be inserted inside the CDATA section.
    3. How is the CDATA section indicated?

    4. A CDATA section will start with " <![CDATA[ " and will end with " ]]> ".[1]
    5. If CDATA sections hadn’t been invented, would there be any other way to achieve the same effect?

    6. If CDATA sections hadn't been invented, one could insert '&amp;' instead of '&' or 'gt;' instead of '>'. One can also put comments inside the XML document because, comments are also ignored by the parser.
  2. What is a parser and what does it have to do with validity?

    An XML parser converts the XML document into an XML Document Object Model (DOM).[2] If the XML document will not be valid, the parsing will not occur.
  3. You write a .dtd file to accompany a class of XML documents. You want one of the elements, with the tag <trinity>, to appear exactly three times within the document element of every document in this class. Is it possible for the .dtd file to specify this?

    No, one cannot specify this in a .dtd file. For the element to be shown:
    • One or more times - (+);
    • Zero or more times - (*);
    • Zero or one time - (?).

LONGER QUESTIONS

  1. The following (found in the question sheet) is one of the documents that featured in last week’s exercises. As mentioned before, this is to be "Chapter 2: Volcanic winter" in a book.

    1. Write a suitable prolog for this document.

    2. 1:  <?xml version="1.0" encoding="UTF-8"?>   
      2:  <!DOCTYPE chapter2 SYSTEM "chapter2.dtd">   
      
    3. Write a .dtd file to act as the Document Type Description for this document. Or modify the one you wrote last week, if you wrote one.

    4. 1:  <!DOCTYPE chapters[   
       2:  <!ELEMENT chapters (chapter+)>   
       3:  <!ELEMENT chapter (text)>   
       4:  <!ELEMENT text (paragraph+)>   
       5:  <!ELEMENT paragraph (index*, poem?)>   
       6:  <!ELEMENT index (#PCDATA)>   
       7:  <!ELEMENT poem (line+)>   
       8:  <!ELEMENT line (#PCDATA)>   
       9:  <!ATTLIST chapter num CDATA #REQUIRED>   
       10: <!ATTLIST chapter title CDATA #REQUIRED>   
       11: ]>   
      
    5. Put tags into the document. Obviously, there must be a document element. But also, the poem needs special treatment (because of the way it will be displayed) and, in fact, each line of the poem needs special treatment (you can spot the places where the lines start, by the capital letters). The mention of the poets at Geneva needs to be identified, because it will feature in the index, and so do the pyroclastic flows and Mount Tambora and Sumbawa and the year without a summer and the famines.

    6.  1:  <?xml version="1.0" encoding="UTF-8"?>   
       2:  <!DOCTYPE chapters SYSTEM "chapter2.dtd">   
       3:  <chapters>   
       4:   <chapter num="2" title="Volcanic Winter">   
       5:    <text>   
       6:     <paragraph>   
       7:     A volcanic winter is very bad news. The worst eruption in recorded history happened at <index>Mount Tambora</index> in 1815. It killed about 71 000 people locally, mainly because the <index>pyroclastic flows</index> killed everyone on the island of <index>Sumbawa</index> and the tsunamis drowned the neighbouring islands, but also because the ash blanketed many other islands and killed the vegetation. It also put about 160 cubic kilometres of dust and ash, and about 150 million tons of sulphuric acid mist, into the sky, which started a volcanic winter throughout the northern hemisphere. The next year was <index>the year without a summer</index>. No spring, no summer – it stayed dark and cold all the year round. This had its upside. In due course, all that ash and mist in the upper atmosphere made for some lovely sunsets, and Turner was inspired to paint this. The Lakeland poets took a holiday at Lake <index>Geneva</index>, and the weather was so horrible that Lord Byron was inspired to write this.   
       8:     </paragraph>   
       9:     <paragraph>   
       10:     <poem>   
       11:     <line>The bright sun was extinguish'd, and the stars</line>   
       12:     <line>Did wander darkling in the eternal space,</line>   
       13:     <line>Rayless, and pathless, and the icy earth</line>   
       14:     <line>Swung blind and blackening in the moonless air;</line>   
       15:     <line>Morn came and went – and came, and brought no day.</line>   
       16:     </poem>   
       17:     </paragraph>   
       18:    <paragraph>   
       19:    Mary Shelley was inspired to write Frankenstein. The downside was that there were <index>famines</index> throughout Europe, India, China and North America, and perhaps 200 000 people died of starvation in Europe alone.   
       20:    </paragraph>   
       21:   </text>   
       22:  </chapter>   
       23: </chapters>   
      

  2. This chapter obviously needs some pictures. You have available the following, and you decide to include them in the chapter, at appropriate places:
    • a picture of Sumbawa, after the volcanic eruption. It’s in a file sumbawa.jpg. Caption: "Sumbawa, after the volcanic eruption".
    • a picture of Lake Geneva, in 1816. It’s in a file Geneva1816.jpg. Caption: "Lake Geneva, during the summer of 1816".
    • a picture of Mary Shelley. It’s in a file MaryShelley.jpg. Caption: "Mary Shelley, author of Frankenstein".
    Amend your two files so that they can cope with these pictures and captions.The following is the DTD file:
     1:  <!DOCTYPE chapter2[   
     2:  <!ELEMENT chapters (chapter+)>   
     3:  <!ELEMENT chapter (text)>   
     4:  <!ELEMENT text (paragraph+)>   
     5:  <!ELEMENT paragraph (index*, poem?, image*)>   
     6:  <!ELEMENT index (#PCDATA)>   
     7:  <!ELEMENT poem (line+)>   
     8:  <!ELEMENT image EMPTY>   
     9:  <!ELEMENT line (#PCDATA)>   
     10: <!ATTLIST chapter num CDATA #REQUIRED>   
     11: <!ATTLIST chapter title CDATA #REQUIRED>   
     12: <!ATTLIST image source CDATA #REQUIRED>   
     13: <!ATTLIST image caption CDATA #REQUIRED>   
     14: <!NOTATION jpg PUBLIC "image/jpeg">   
     15: <!ENTITY sumbawa SYSTEM "sumbawa.jpg" NDATA jpg>   
     16: <!ENTITY geneva SYSTEM "sumbawa.jpg" NDATA jpg>   
     17: <!ENTITY maryShelley SYSTEM "sumbawa.jpg" NDATA jpg>   
     18: ]>   
    
    The following is the XML file:
     1:  <?xml version="1.0" encoding="UTF-8"?>   
     2:  <!DOCTYPE chapter2 SYSTEM "chapter2.dtd">   
     3:  <chapters>   
     4:   <chapter num="2" title="Volcanic Winter">   
     5:    <text>   
     6:     <paragraph>   
     7:     A volcanic winter is very bad news. The worst eruption in recorded history happened at <index>Mount Tambora</index> in 1815. It killed about 71 000 people locally, mainly because the <index>pyroclastic flows</index> killed everyone on the island of <index>Sumbawa</index><image source="sumbawa" caption="Sumbawa, after the volcanic eruption"/> and the tsunamis drowned the neighbouring islands, but also because the ash blanketed many other islands and killed the vegetation. It also put about 160 cubic kilometres of dust and ash, and about 150 million tons of sulphuric acid mist, into the sky, which started a volcanic winter throughout the northern hemisphere. The next year was <index>the year without a summer</index>. No spring, no summer – it stayed dark and cold all the year round. This had its upside. In due course, all that ash and mist in the upper atmosphere made for some lovely sunsets, and Turner was inspired to paint this. The Lakeland poets took a holiday at Lake <index>Geneva</index><image source="geneva" caption="Lake Geneva, during the summer of 1816"/>, and the weather was so horrible that Lord Byron was inspired to write this.   
     8:     </paragraph>   
     9:     <paragraph>   
     10:     <poem>   
     11:     <line>The bright sun was extinguish'd, and the stars</line>   
     12:     <line>Did wander darkling in the eternal space,</line>   
     13:     <line>Rayless, and pathless, and the icy earth</line>   
     14:     <line>Swung blind and blackening in the moonless air;</line>   
     15:     <line>Morn came and went – and came, and brought no day.</line>   
     16:     </poem>   
     17:    </paragraph>   
     18:    <paragraph>   
     19:    Mary Shelley <image source="maryShelley" caption="Mary Shelley, author of Frankenstein"/>was inspired to write Frankenstein. The downside was that there were <index>famines</index> throughout Europe, India, China and North America, and perhaps 200 000 people died of starvation in Europe alone.   
     20:    </paragraph>   
     21:   </text>   
     22:  </chapter>   
     23: </chapters>  
    
    The following were added:
    <image source="sumbawa" caption="Sumbawa, after the volcanic eruption"/>
    <image source="geneva" caption="Lake Geneva, during the summer of 1816"/>
    <image source="maryShelley" caption="Mary Shelley, author of Frankenstein"/>

Question Sheet:

Question Sheet: Lab 7

Sources:

[1] http://www.w3schools.com/xml/xml_cdata.asp
[2] http://www.w3schools.com/xml/xml_parser.asp

QUICK QUESTIONS

  1. What exactly does a DTD do in XML?

    In XML, DTD is used to define the structure of the XML document[1]. In order to have a valid XML document, it should follow the restrictions which have been specified in the DTD.[2]
  2. You’ve written an XML document, with the XML declaration <?xml version= "1.0"?> at the start. You realize that the text contains some arabic characters. Which of the following should you do:
    1. change the XML declaration to <?xml version= "1.0" encoding="ISO 8859-6"?>
    2. change the XML declaration to <?xml version= "1.0" encoding="UTF-8"?>
    3. do nothing: the declaration is fine as it is.

    Do nothing, the declaration is fine as it is. This is because if the encoding attribute is left out, by default it will be UTF-8.
  3. Can you use a binary graphics file in an XML document?

    Yes binary graphics can be used in an XML document. This will be done by using the NDATA keyword and the format code (gif, jpeg etc). Example:[3] <!ENTITY colliepic SYSTEM "lassie.jpg" NDATA JPEG>

LONGER QUESTIONS

  1. I decide to produce a book called "Toba: the worst volcanic eruption of all". I ask 3 colleagues to write three text files entitled: "Chapter 1: The mystery of Lake Toba’s origins". "Chapter 2: Volcanic winter". "Chapter 3: What Toba did to the human race". All three text files are placed into a folder c:\bookproject\chapters on the hard drive on my computer. I insert at the start of each file, and at the end. I name the three files chap1.xml, chap2.xml, and chap3.xml respectively. I draw up the title page, title page verso and contents page of the book like this:


    Toba: the worst volcanic eruption of all

         John Platts

         Jack Brilliant

         Jill Bright

         Joe Clever

    STC Press

    Malta

    Copyright © 2010

    STC Press



    Published by STC Press Ltd., Malta

    ISBN: 978-0-596-52722-0
    Contents

    Chapter 1: The mystery of Lake Toba’s origins

    Chapter 2: Volcanic winter

    Chapter 3: What Toba did to the human race

    Then I construct an XML document that encompasses the whole book.
    1. Provide this XML document
    2. Provide the accompanying .dtd file

    To avoid conflicts on element names, namespaces have been used. The following is the XML file:
    1:   <?xml version="1.0" ?>  
    2:   <!DOCTYPE b:book SYSTEM "book.dtd">  
    3:   <b:book xmlns:b="http://middlesex_press.co.uk/book">  
    4:   <tp:titlePage xmlns:tp="http://middlesex_press.co.uk/title_page">  
    5:     <tp:title>Toba: the worst volcanic eruption of all</tp:title>  
    6:     <tp:authors>  
    7:       <tp:author>  
    8:        <tp:firstName>John</tp:firstName>  
    9:        <tp:lastName>Platts</tp:lastName>  
    10:      </tp:author>  
    11:      <tp:author>  
    12:       <tp:firstName>Jack</tp:firstName>  
    13:       <tp:lastName>Brlliant</tp:lastName>  
    14:      </tp:author>  
    15:      <tp:author>  
    16:       <tp:firstName>Jill</tp:firstName>  
    17:       <tp:lastName>Bright</tp:lastName>  
    18:      </author>  
    19:      <tp:author>  
    20:       <tp:firstName>Joe</tp:firstName>  
    21:       <tp:lastName>Clever</tp:lastName>  
    22:      </tp:author>  
    23:    </tp:authors>  
    24:    <tp:publisher>STC Press</tp:publisher>  
    25:    <tp:location>Malta</tp:location>  
    26:  </tp:titlePage>  
    27:  <tps:titlePageVerso xmlns:tpv="http://middlesex_press.co.uk/title_page_verso>  
    28:    <tps:copyright>Copyright &copy; 2010</tps:copyright>  
    29:    <tps:publisher>STC Press</tps:publisher>  
    30:    <tps:publishedBy>STC Press Ltd, Malta</tps:publishedBy>  
    31:    <tps:ISBN>978-0-596-52722-0</tps:ISBN>  
    32:  </tps:titlePageVerso>  
    33:  <c:contents xmlns:c="http://middlesex_press.co.uk/conents>  
    34:   <c:chapter num="1" title="The mystery of Lake Toba's origins"/>  
    35:   <c:chapter num="2" title="Volcanic winter"/>  
    36:   <c:chapter num="3" title="What Toba did to the human race"/>  
    37:  </c:contents>  
    38:  <ch:chapters xmlns:ch="http://middlesex_press.co.uk/chapters  
    39:   <ch:chapter num="1" title="The mystery of Lake Toba's origins"> &ch1; <ch:chapter>  
    40:   <ch:chapter num="2" title="Volcanic winter"/> &ch2; </ch:chapter>  
    41:   <ch:chapter num="3" title="What Toba did to the human race"/> &ch3; </ch:chapter>  
    42:  </ch:chapters>  
    43:  </b:book>  
    
    The following is the DTD file:
    1:   <!DOCTYPE b:book [  
    2:   <!ELEMENT b:book (tp:titlePage, tpv:titlePageVerso, c:contents)>  
    3:   <!ELEMENT tp:titlePage (tp:title, tp:authors, tp:publisher, tp:location)>  
    4:   <!ELEMENT tpv:titlePageVerso (tpv:copyright, tpv:publisher, tpv:publishedBy, tpv:ISBN)  
    5:   <!ELEMENT c:contents (c:chapter+)>  
    6:   <!ELEMENT ch:chapters(c:chapter+)>  
    7:   <!ELEMENT tp:title (#PCDATA)>  
    8:   <!ELEMENT tp:authors (tp:author+)>  
    9:   <!ELEMENT tp:publisher (#PCDATA)>  
    10:  <!ELEMENT tp:location (#PCDATA)>  
    11:  <!ELEMENT tp:author (tp:firstName, tp:lastName)>  
    12:  <!ELEMENT tp:firstName (#PCDATA)>  
    13:  <!ELEMENT tp:lastName (#PCDATA)>  
    14:  <!ELEMENT tpv:copyright (#PCDATA)>  
    15:  <!ELEMENT tpv:publisher (#PCDATA)>  
    16:  <!ELEMENT tpv:publishedBy (#PCDATA)>  
    17:  <!ELEMENT tpv:ISBN (#PCDATA)>  
    18:  <!ELEMENT c:chapter (#PCDATA)>  
    19:  <!ELEMENT ch:chapter (#PCDATA)>  
    20:  <!ATTLIST b:book xmlns:b CDATA #FIXED "http://middlesex_press.co.uk/book">  
    21:  <!ATTLIST tp:titlePage xmlns:tp CDATA #FIXED "http://middlesex_press.co.uk/title_page">  
    22:  <!ATTLIST tpv:titlePageVerso xmlns:tpv CDATA #FIXED "http://middlesex_press.co.uktitle_page_verso/">  
    23:  <!ATTLIST c:contents xmlns:c CDATA #FIXED "http://middlesex_press.co.uk/contents">  
    24:  <!ATTLIST ch:chapters xmlns:ch CDATA #FIXED "http://middlesex_press.co.uk/chapters">  
    25:  <!ATTLIST c:chapter num CDATA #REQUIRED>  
    26:  <!ATTLIST c:chapter title CDATA #REQUIRED>  
    27:  <!ATTLIST ch:chapter num CDATA #REQUIRED>  
    28:  <!ATTLIST ch:chapter title CDATA #REQUIRED>  
    29:  <!ENTITY ch1 SYSTEM "chap1.xml">  
    30:  <!ENTITY ch2 SYSTEM "chap2.xml">  
    31:  <!ENTITY ch3 SYSTEM "chap3.xml">  
    32:  ]>  
    

Question Sheet:

Question Sheet: Lab 6

Sources:

[1] http://www.w3schools.com/xml/xml_dtd.asp
[2] http://www.informit.com/guides/content.aspx?g=xml&seqNum=223
[3] http://xml.silmaril.ie/graphics.html

QUICK QUESTIONS

  1. This is a smiley. Is it also a well-formed XML document? Say why.
    <:-/>

    Element names can start with a colon ":", therefore the above smiley is well-formed. However, it is better to avoid using the colon because a colon is used for namespaces. Preferably element names should start with letters (A-Z) or (a-z).
  2. What is the difference between well-formed and valid XML?

    An XML document is well-formed, when it follows the XML rules such as: [1]
    • XML should have a root element;
    • Proper nesting in tags;
    • Tags are case sensitive;
    • Element should have closing tags;
    • Attributes should be quoted.
    A valid document should be well-formed and also should follow the restrictions which have been specified in the Document Type Definition (DTD). [2]
  3. Is it a good idea to start an XML document with a comment, explaining what the document is and what it’s for? Say why.

    No, because the XML declaration should be allowed only at the start of the XML document. This is because the comments are not interpreted by the parser. Comments can then be inserted after the XML declaration before the root element, explaining what the document is and what it's for.

LONGER QUESTIONS

  1. A set of documents is to be constructed as follows. The type of document is a college textbook. Every college textbook has a title page, on which is a title and an author and the publisher; optionally, there may be an aphorism. Every college textbook has a title page verso, on which is a publisher’s address, a copyright notice, an ISBN; there may be a dedication, or there may be more than one. Every college textbook has several chapters, and each chapter has several sections, and each section has several bodies of text. A chapter is identified by a chapter number and a chapter title. A section is identified by a section number and a section title. The name of the publisher will always be Excellent Books Ltd. The address of the publisher will always be 21 Cemetry Lane, SE1 1AA, UK. The application that will process the documents can accept Unicode.
    Write a .dtd file for this specification.

    1:   <?xml version="1.0" encoding="UTF-8"?>
    2:   <!DOCTYPE collegeTextbooks [  
    3:   <!ELEMENT collegeTextbooks (textbook+)>  
    4:   <!ELEMENT textbook (titlePage, titlePageVerso, chapters)>  
    5:   <!ELEMENT titlePage (title, author, publisher, aphorism?)>  
    6:   <!ELEMENT title (#PCDATA)>  
    7:   <!ELEMENT author (#PCDATA)>   
    8:   <!ELEMENT publisher (#PCDATA)>  
    9:   <!ELEMENT aphorism (#PCDATA)>  
    10:  <!ELEMENT titlePageVerso (publisherAddress, copyright, ISBN, dedication*)>  
    11:  <!ELEMENT publisherAddress (#PCDATA)>  
    12:  <!ELEMENT copyright (#PCDATA)>  
    13:  <!ELEMENT ISBN (#PCDATA)>  
    14:  <!ELEMENT dedication (#PCDATA)>  
    15:  <!ELEMENT chapters (chapter+)>  
    16:  <!ELEMENT chapter (ctitle, section+)>  
    17:  <!ELEMENT ctitle (#PCDATA)>  
    18:  <!ELEMENT section (body+)>  
    19:  <!ELEMENT body (#PCDATA)>  
    20:  <!ATTLIST chapter cnum ID #REQUIRED>  
    21:  <!ATTLIST section snum ID #REQUIRED>  
    22:  <!ENTITY publisher "Excellent Books Ltd.">  
    23:  <!ENTITY publisherAddress "21 Cemetry Lane, SE1 1AA, UK">  
    24:  ]>  
    
  2. Write an XML document that contains the following information: the name of a London tourist attraction. The name of the district it is in. The type of attraction it is (official building, art gallery, park etc). Whether it is in-doors or out-doors. The year it was built or founded [Feel free to make this up if you don’t know]. Choose appropriate tags. Use attributes for the type of attraction and in-doors or out-doors status.

    1:  <?xml version="1.0" encoding="UTF-8"?>
    2:  <attractions>  
    3:       <attraction type="castle" status="in-doors">  
    4:         <name>Tower of London</name>  
    5:         <district>Central London</district>  
    6:         <founded>1066</founded>  
    7:       </attraction>  
    8:  </attractions>  
    
  3. The following (found in the question sheet below) is the document element (root element) of an XML document.

    1. It’s clear that it’s concerned with English phrases and their Russian translations. One of the start tags is <targLangPhrase> with </targLangPhrase> as its end tag. Why do you suppose this isn’t <russianPhrase> with </russianPhrase>?

      So that the attribute targLang="Russian" can be changed into another language for example "French" in <phraseBook>
    2. Write a suitable prolog for this document.

      <?xml version="1.0" encoding="UTF-8"?>
    3. Write a .dtd file to act as the Document Type Description for this document

      1:   <!DOCTYPE phraseBook[  
      2:   <!ELEMENT phraseBook (section+)>  
      3:   <!ELEMENT section (sectionTitle, phaseGroup+)>  
      4:   <!ELEMENT phaseGroup (engPhrase, translitPhrase, targLangPhrase)>  
      5:   <!ELEMENT engPhrase (gloss?)>  
      6:   <!ELEMENT translitPhrase (gloss?)>  
      7:   <!ELEMENT targLangPhrase (#PCDATA)>  
      8:   <!ELEMENT gloss (#PCDATA)>  
      9:   <!ATTLIST phraseBook targLang CDATA #REQUIRED>  
      10:  ]>  
      
    4. The application that is to use this document runs on a Unix system, and was written some years ago. Is that likely to make any difference to the XML declaration?

      The Cyrillic alphabet, that is, Russian, can be represented on a Linux computer using KOI8-R, ISO 8859-5, Windows 1251 Codepage, and ISO 10646-1 UTF-8 Unicode 3.0. Therefore, it should not make any difference.[3]

Question Sheet:

Question Sheet: Lab 5

Sources:

[1] http://www.w3schools.com/xml/xml_dtd.asp
[2] http://www.informit.com/guides/content.aspx?g=xml&seqNum=223
[3] https://www.ibm.com/developerworks/linux/library/l-u-cyr/

QUICK QUESTIONS

  1. What does XML stand for? And CSS?

    XML stands for eXtensible Markup Language while CSS stands for Cascading Style Sheets. XML is a markup language designed to carry data and not to present data, while CSS is used to style and HTML (HyperText Markup Language) document.
  2. Is this XML line well-formed? Say why.
    <b><i>This text is bold and italic</b></i>

    The above XML document is not well-formed because </i> should be placed before </b>. Therefore it should look like:
    <b><i>This text is bold and italic</i></b>
  3. Is this XML document well-formed? Say why.
    <?xml version= "1.0" ?>
    <greeting> Hello, world! </greeting>
    <greeting> Hello Mars too! </greeting>

    The above XML document is not well-formed because it should have a root element. Therefore it should look like:
    1:  <?xml version= "1.0" ?>  
    2:  <greetings>  
    3:    <greeting>Hello, world!</greeting>  
    4:    <greeting>Hello Mars too!</greeting>  
    5:  </greetings>  
    

LONGER QUESTIONS

  1. Write an XML document that contains the following information: the name of this course. The name of this building. The name of this room. The start and end times of this session. Choose appropriate tags. Use attributes for the start and end times.

    1:   <?xml version="1.0" ?>   
    2:   <course>  
    3:   <cname>Internet Application Development</cname>  
    4:       <modules>  
    5:       <module code="CMT 3315" start="18:00" end="21:00">  
    6:       <mname>Advanced Web Technologies</mname>  
    7:       <building>STC Training</building>  
    8:       <room>Room 5</room>  
    9:   </module>       
    10:  </modules>       
    11:  </course>  
    
  2. Have a look at the XML document below. Identify all the syntax errors.

    • The root element of the DOCTYPE declaration "bookStock" is not the same as the root element of the XML document "bookstore";
    • No closing tag for the root element <bookstore>;
    • Tags should not start with a number <1stEdition> and <2ndEdition>;
    • The attribute currency="pounds sterling" in <price>19.99</price currency="pounds sterling>, should be inside the opened tag not the close tag;
    • Inside the comment, there should not be a -- between 'year' and '2009';
    • Attributes should be enclosed in quotation marks <title lang="en">;
    • Comments should not be written inside a tag <author <!--other authors not listed-->>;
    • <book category="Children’> should be <book category=“Children”>;
    • <price>29.99</Price> should be <price>29.99</price>;
    • <price>9.95</discount><discount>15%</price> should be <price>9.95</price><discount>15%</discount>.
    The following is the corrected XML document:
    1:   <?xml version= "1.0" ?>  
    2:   <!DOCTYPE bookStock SYSTEM "bookstock.dtd">  
    3:   <bookStock>   
    4:    <book category="Cooking">  
    5:     <title lang="en">Everyday Italian</title>  
    6:     <author>Giada De Laurentiis</author>  
    7:     <firstEdition>2005</firstEdition >  
    8:     <secondEdition>2007</secondEdition >  
    9:     <price currency="pounds sterling">19.99</price >  
    10:   </book>  
    11:   <book category="Children">  
    12:    <title lang="en">Harry Potter and the enormous pile of money</title>  
    13:    <!--best selling children’s book of the year 2009 -->  
    14:    <author>J K. Rowling</author>  
    15:    <firstEdition>2005</firstEdition>  
    16:    <price>29.99</price>  
    17:   </book>  
    18:   <book category="Web">  
    19:    <title lang="en">Learning XML</title>  
    20:    <author>Erik T. Ray</author>  
    21:    <firstEdition>2003</firstEdition>  
    22:    <secondEdition >2008</secondEdition >  
    23:    <price>29.95</price>  
    24:    <discount>15%</discount>  
    25:   </book>  
    26:   <book category="Computing">  
    27:    <title lang="en">Insanely great – the life and times of Macintosh, the computer that changed everything </title>  
    28:    <author><!--other authors not listed -->Steven Levy</author>  
    29:    <firstEdition>1994</firstEdition>  
    30:    <price>9.95</price>  
    31:    <discount>15%</discount>  
    32:   </book>  
    33:  </bookStock>   
    
  3. You are asked to produce a Document Type Declaration for a class of XML documents called "memo". You come up with this .dtd file:
    <!DOCTYPE memo
    [
    <!ELEMENT memo (to,from,heading,body)>
    <!ELEMENT to (#PCDATA)>
    <!ELEMENT from (#PCDATA)>
    <!ELEMENT heading (#PCDATA)>
    <!ELEMENT body (#PCDATA)>
    ]>

    Your client says "That’s all very well, but every memo has to have a date. And some of them have to have a security classification too (you might want to write "Secret" at the top). And a memo has a serial number – I think that’s what you’d call an attribute, isn’t it?" How would you amend this .dtd file so that it did what the client wanted?

    1:   <!DOCTYPE memo  
    2:   [  
    3:   <!ELEMENT memo (to,from,heading,body)>  
    4:   <!ELEMENT to (#PCDATA)>  
    5:   <!ELEMENT from (#PCDATA)>  
    6:   <!ELEMENT heading (#PCDATA)>  
    7:   <!ELEMENT body (#PCDATA)>  
    8:   <!ATTLIST memo date CDATA #REQUIRED>  
    9:   <!ATTLIST memo classification CDATA #IMPLIED>  
    10:  <!ATTLIST memo serialNo ID #REQUIRED>  
    11:  ]>  
    

Question Sheet:

Question Sheet: Lab 4

  1. Write an XML document that contains the following information: your name. Your email address. Your student number. Your home town. Your date of birth. Choose appropriate tags. Use Attributes for the date of birth.

    The .dtd file will be as follows:
    1:   <!DOCTYPE students [  
    2:   <!ELEMENT students (student*)  
    3:   <!ELEMENT student (firstName, lastName, email, homeTown)>  
    4:   <!ELEMENT firstName (#PCDATA)>  
    5:   <!ELEMENT lastName (#PCDATA)>  
    6:   <!ELEMENT email (#PCDATA)>  
    7:   <!ELEMENT homeTown (#PCDATA)>
    8:   <!ATTLIST student studentNo ID #REQUIRED>
    9:   <!ATTLIST dob CDATA #REQUIRED> 
    10:  ]>  
    
    The XML file will be:
    1:   <?xml version="1.0" ?>  
    2:   <!DOCTYPE students SYSTEM "students.dtd">  
    3:   <students>  
    4:      <student studentNo="M00362929" dob="1989-04-30">  
    5:         <firstName>Stephanie</firstName>  
    6:         <lastName>Vella</lastName>  
    7:         <email>vella.steve@gmail.com</email>  
    8:         <homeTown>San Gwann</homeTown>  
    9:      </student>  
    10:  </students>  
    
  2. Have a look at the XML document found in the question sheet below. Identify all the syntax errors.

    • The root element in the DTD declaration is "countryCollection", while in the XML document is "CountryList";
    • There is no end tag for "CountryList";
    • There should not be a -- between CIA and Year Book <!--Data from CIA --Year Book -->
    • XML tags are case sensitive, therefore <Label> is different from <label>. This applies to all the document;
    • A tag should not be started with a number such as <2ndCity>;
    • It is not well formed <Label>Capital:</capital> <Capital cityNum="1">Washington, D.C. </label>. It should be <Label>Capital:</Label> <Capital cityNum="1">Washington, D.C. </Capital>;
    • The line <MajorCity cityNum="5'> should be <MajorCity cityNum="5">;
    • The attribute cityNum="1" should be inside the opened tag not the close tag <Capital>Tokyo</capital cityNum="1">;
    • You can't have the same attributes in one tag such as <MajorCity cityNum='6' cityNum='7'>;
    • Comments cannot be written inside a tag such as <BorderingBodyOfWater <!--Also Lake Victoria --> >.

Question Sheet:

Question Sheet: Lab 3

  1. Have a look at the documents below. Some are XML documents, some are HTML documents, some may be neither. See if you can decide which are which.
  2. Make a list of the distinctive characteristics of an XML document, in terms of things that you can spot when looking at the code.
  3. Assume that (with suitable changes) all these documents could become XML documents. Imagine, and describe, applications that could use these documents.
  4. NB I’ve removed one or more lines from each document to stop it being too easy.

Document 1

  1. This document is an HTML document which also contains javascript inside.
  2. It is an HTML document because it has tags such as "head", "title", "body", "table" and "meta". An HTML document, the root element should be <html>. In this case, inline styling is used instead of an external CSS file.
  3. This could be used to read data. In this case, a set of symptoms can be taken and a range of diagnoses will be offered.

Document 2

  1. This document is an XML document.
  2. The DTD is declared externally, wrapped in a DOCTYPE definition. The second line consists of and XSL declaration, which is used to style the XML document. In this document, "advertising" is the root element.
  3. This could be used to display adverts and contact information as regards to the advert.

Document 3

  1. This document is an HTML document containing javascript code.
  2. In this HTML document, a form is created, and when the button is clicked, the loadFile() function will be called.
  3. This applications could be used for spots analysts to load a list of the countries, and depending on the country, the list of players will be appear.

Document 4

  1. This document is an XML document.
  2. The DTD is declared externally, wrapped in a DOCTYPE definition. In this document, "story" is the root element.
  3. This could be used to load a book in the web browser.

Document 5

  1. This document is an XML document.
  2. The DTD is declared internally, that is, inside the XML document. This XML file is not valid because there are missing end tags for "title", "stanza", "line" and "poem".
  3. This may be used to store a number of poems for educational purposes, such as English literature.

Document 6

  1. This document is an XML document.
  2. The DTD is declared externally. The syntax for a DTD declaration is:
    <!DOCTYPE root-element [element-declarations]>
    Therefore, this XML document contains an error in the root element because the root element in the DTD declaration is "countryCollecton", while in the XML is "countryList".
  3. This may be used to display basic information about a country, for a geography test.

Document 7

  1. This document is an HTML document.
  2. This document does not contain the "title" tag. This file also consists of javascript where the global variable contains an XML string.

Question Sheet:

Question sheet: Lab 2

The document tree is the structure of an HTML or an XHTML document. The elements within the HTML and XHTML document will be linked together and will form a document tree. Apart from the root node, every element has only one parent.[1] A document tree consists of:
  • Ancestor
  • Descendant
  • Parent
  • Child
  • Sibling
In XML, a tree starts at the root node and branches to leaves.[2] The following is an example of an XML document:
1:  <?xml version="1.0" encoding="ISO-8859-1"?>  
2:  <book>  
3:     <author>Sara Shepard</author>  
4:     <title>Pretty Little Liars</title>  
5:     <genre>Young-adult fiction</genre>  
6:  </book>  

In the above example, the root element is book and the child elements of the root are author, title and genre.

Sources:

[1] http://www.guistuff.com/css/css_doctree.html
[2] http://www.w3schools.com/xml/xml_tree.asp

Both CSS and XSL both refers to stylesheets. CSS can be used to style bith the HTML and XML documents, while XSL is a transformation language used to transform only XML documents.[1]

In order to choose which one to use, W3C recommends the following rule; "Use CSS when you can, use XSL when you must".[2]

The following are the advantages of CSS:[3]
  • The change to the style of the document is easier when using CSS, that is, making changes to only one CSS file instead of going through many HTML files;
  • The CSS file will only be downloaded once, and therefore the requirement of the bandwidth will be reduced;
  • Layout will be consistent in the entire website;
  • It is easier for visitors who would like to view only the web page content, since it separates style from content.
On the other hand CSS also have some disadvantages:[4]
  • CSS layout is rendered differently and therefore CSS will not work consistently when using different browsers;
  • CSS does not have any variables;
  • CSS is a style language rather than a layout language and therefore poor layout controls for flexible layouts.
XSL has the following advantages on CSS:[5]
  • XSLT and XSL-FO are combined and therefore a much more complex and powerful styling language is created;
  • XSLT is turing complete;
  • XSLT is capable of creating content and capable of generating multiple contents.
A disadvantage of XSL is that:
  • XSL-FO is complex and therefore it is very difficult to implement an FO processor.

Sources:

[1] http://www.w3.org/Style/
[2] http://www.w3.org/Style/CSS-vs-XSL
[3] http://www.vordweb.co.uk/css/advantages-of-css.htm
[4]http://www.articlesbase.com/web-design-articles/advantages-and-disadvantages-of-using-css-833019.html
[5] http://www.pubarticles.com/article-the-difference-between-css-and-xsl-1240385227.html

Extensible Stylesheet Language (XSL), currently version 2.0 [1], is used to transform the XML documents. XSL consists of the following three parts: [2]

  • Extensible Stylesheet Language Transformation (XSLT) is a W3C recommendation used to transform XML documents to other XML documents or into XHTML documents; [3]
  • Extensible Stylesheet Language Formatting Objects (XSL-FO) is used to format the XML data for output; [2]
  • XML Path Language (XPath) is used to go through the elements and attributes of an XML document. [4]

Sources:

[1] http://www.w3.org/TR/xslfo20/
[2] http://www.w3schools.com/xslfo/xslfo_intro.asp
[3] http://www.w3schools.com/xsl/xsl_intro.asp
[4] http://www.w3schools.com/xpath/default.asp

Cascading Style Sheets (CSS), released on 17th December 1996, are used in conjunction with HTML, to define how the HTML elements will be displayed in a web page. [1]
The following are the levels of CSS:

  • CSS Level 1 - is the first specification published on the 17th of December 1996; [2]
  • CSS Level 2 - is the second specification published on the 12th of May 1998 and later revised on the 11th of April 2008. CSS level 2 included a number of new features; [3]
  • CSS Level 2 Revision 1 - is an update to fix the errors that have been found in the second specification. It have been published as a Recommendation on the 7 of June 2011; [4]
  • CSS Level 3 - is the latest standard of CSS, still under development, where new features have been added, to make the styling of the web page more interesting. [5]

Sources:

[1] http://w3schools.com/css/css_intro.asp
[2] http://www.w3.org/TR/2008/REC-CSS1-20080411/
[3] http://www.w3.org/TR/2008/REC-CSS2-20080411/
[4] http://www.w3.org/2011/05/css-pr.html.en
[5] http://www.w3schools.com/css3/css3_intro.asp

XML stands for eXtensible Markup Language.  It is a markup language designed to carry data and not to present data. [1]

Microsoft Internet Explorer 4 was the first web browser to support XML, it had the following features: [2]

  • An XML parser which have been used to read XML files and hand them off to applications such as viewers for processing;
  • XML Object Model (XML OM) uses the Document Object Model (DOM).  Using the XML parsers, XML OM allow access to the structured data. This gave the developers power to interact on the data;
  • XML Data Source Object (XML DSO) uses dynamic HTML’s (DHTML) data binding features to connect the XML data and add it to the HTML page.

In Microsoft Internet Explorer 5 Beta, there have been alot of updates to the XML features that have been offered in Internet Explorer 4. [3]

Sources:

[1] http://www.w3schools.com/xml/xml_whatis.asp
[2] http://xml.coverpages.org/msXMLFAQ200006.html#xmlfaq_topic11
[3] http://www.cme-ch.com/span/span4_xml_tools.htm