Introduction
This week the questions cover Cascading Style Sheets (CSS) and I will also include small information about AJAX.
CSS is not obligatory however this will enhance and transform the site by adding background colours, changing font-sizes or font-face and positioning divs. The advantage of CSS is that with CSS one has got to only change the style sheet on one page and it will effect all the pages. This CSS file is linked into all HTML pages.
Exchange of information between server side scripting and client side scripting.
Ajax, made out of Javascript and XML. Ajax is a web application, this works as following; Javascript code sends a request to the PHP script which in return sends back XML data. The Javascript code uses that data to update only parts of a website instead of refreshing the whole page. This was introduced when Java applets where introduced in 1995.
Questions
Quick Question
Question 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?
Answer
CSS uses the overwriting method. When there are two rules opposing each other, the last rule which is declared will be considered. Therefore in this case the text will not appear bold.
Question 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?
Answer
Yes, with XPATH it will be able to extract that kind of information. XPATH is another query language and this consists of several different functions one of which is extracting data from a document. This can be done by using the function substring (string,start,len) which will return a substring from the start to the defined position of the string.
substring ("The grand old Duke of York, he had 1000 men.", 35,5)
This means that the position that needs to be extracted starts after the 35th character and is 5 characters long.
Longer Questions
Question 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
Answer
CSS is one file which contains all styles, this is then linked to all other pages. In each technology it has each own way of how it is suppose to be declared. In XML it is declare as following;
<?xml-stylesheet href = "stylesheet01.css" type =text/css"?>
Question 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.
Answer
The below screen shot is the initial result. Where there was no CSS file linked to it.
In Firefox with no styling We than had to create a style of our own with appropriate settings to make it look like a table with content in it. Below is the code for styling this content and presenting a table layout. 1. chemElements 2. { 3. width:900px; 4. } 5. 6. 7. tableHead * 8. { 9. font-weight:bold; 10. font-family:Georgia, "Times New Roman", Times, serif; 11. font-size:14px; 12. width:150px; 13. background-color:#990033; 14. color: #FFFFFF; 15. padding: 5px 5px 5px 5px; 16. border-right: 1px solid #000000; 17. border-bottom: 1px solid #000000; 18. display:block; 19. float:left; 20. height:20px; 21. text-align:center; 22. } 23. 24. element * 25. { 26. font-family:Arial, Helvetica, sans-serif; 27. font-size:12px; 28. width:150px; 29. background-color:#CCCCCC; 30. padding: 5px 5px 5px 5px; 31. border-right:1px solid #000000; 32. border-bottom:1px solid #000000; 33. display:block; 34. float:left; 35. height:20px; 36. text-align:center; 37. } First the root tag was style as seen on line 1. A width for the table was specified. From line 11 to line 22 the another header is specified which is the tableHead, this is the header of the table, first I added some font styles, added a border and a background colour. Float:left on line 23 will allow each column to come side by side instead of having each one beneath the other. Next the "content of the table " is defined. Once again the font-styles where set, a background colour and some borders were added and displayed the text at the centre of each box. Below is the result of the XML containing some CSS styles.  Question 3 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>
Answer a
musicList/*
Answer b
//tracks[@total = 5]
Answer c
/cd/[contains(title,"Penderecki")] <!--cd elements containing title Penderecki-->
or
//title[contains[.,"Penderecki")] <!--title elements containing Pendereck in the text->
Answer d
//title[string-length(.) >11] <!--title is longer than 11 characters-->
Answer e
//cd[1]/*
References:
No comments:
Post a Comment