Reference no: EM131564503
XML Authoring Assignment
Rafael Garcia has worked with the stock report you generated and has made a few modifications to the source document. Rafael has added a few more elements providing information on each stock's high and low value over the previous year, the stock's P/E ratio, earnings per share (EPS), dividend, and yield. He's also included the URL to the company's website.
Rafael wants to try a new design, in which these new stock values appear in a table alongside a description of the stock. He also wants to show the current stock value and whether it's rising, falling, or remaining level, which is to be prominently displayed below the company name. Figure 5-38 shows a preview of the revised content and layout of the report.
Rafael has already created the CSS style sheet for this web page, but he needs you to develop the XSLT style sheet, which will generate the HTML code used in the report.
Because creating a style sheet can be complicated, it is strongly recommended that you save your changes and generate the result document as you complete each step below to check on your progress and detect any problems early. Complete the following:
1. Using your text editor, open the portfoliotxt.xml and portfoliotxt.xsl files from the xml05 > review folder. Enter your name and the date in the comment section of each file, and save them as portfolio.xml and portfolio.xsl, respectively.
2. Go to the portfolio.xml file in your text editor. Take some time to review the content of the file and its structure. Add a processing instruction after the comment section that attaches the portfolio.xsl style sheet to this XML document. Close the file, saving your changes.
3. Go to the portfolio.xsl file in your text editor. Below the comment section, set up this document as an XSLT style sheet by adding a stylesheet root element and declaring the XSLT namespace using the namespace prefix xsl.
4. Add an output element to indicate to the XSLT processor that the transformed file should be in HTML5 format.
5. Develop a root template and, within that template, enter the following HTML code:
<html>
<head>
<title>Portfolio Stocks</title>
<link href="portfolio.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
6. Directly after the opening <body> tag in the root template, insert the following code:
<header>
<section>
Last Updated: date at time
</section>
<h1>Chesterton Financial</h1>
<h2>Portfolio Stocks</h2>
</header>
where date and time are the values of the date and time elements from the source document using the XSLT value-of elements.
7. Directly below the closing </header> tag, insert the following HTML code three times, one for each of three categories of stock (Industrials, Utilities, and Transportation):
<section>
<h1>Category</h1>
stock template
</section>
where Category is either Industrials, Utilities, or Transportation, and stock template applies the template for elements from the portfolio/stock location path for stocks of the specified category. Sort the applied templates in alphabetical order by stock name.
8. Develop a template for the today element, and then, within the template, enter the following HTML code:
<table>
<tr>
<th>Current</th>
<th>Open</th>
<th>High</th>
<th>Low</th>
<th>Volume</th>
</tr>
<tr>
<td>current</td>
<td>open</td>
<td>high</td>
<td>low</td>
<td>volume</td>
</tr>
</table>
where current, open, high, low, and volume are the values of the current, open, high, low, and vol attributes using the XSLT value-of element.
9. Develop a template for the summary element, and then, within the template, enter the following HTML code:
<table>
<tr>
<th>Web Address</th>
<td><a href="link">link</a></td>
</tr>
<tr>
<th>52wk. Range</th>
<td>low - high</td>
</tr>
<tr>
<th>P/E</th>
<td>pe_ratio</td>
</tr>
<tr>
<th>EPS</th>
<td>eps</td>
</tr>
<tr>
<th>Div. and Yield</th>
<td>dividend (yield)</td>
</tr>
</table>
where link, low, high, pe_ratio, eps, dividend, and yield are the values of the corresponding elements from the source document using the XSLT value-of element.
10. Develop a template for the stock element and, within the template, enter the following HTML code:
<article>
today
summary
<h1>stock name (symbol)</h1>
</article>
where today and summary apply the today and summary templates, stock name is the name of the stock, and symbol is the value of the symbol attribute using the XSLT value-of element.
11. Directly between the closing </h1> and closing </article> tags in the stock template, use a choose structure to insert the following h2 heading and paragraph:
<h2 class="change">
<img src="change.png" alt="change" />
current
</h2>
<p>description</p>
where change has the value "up", "down", or "same" depending on whether the value of the current attribute is less than, greater than, or equal to the open attribute; current is the value of the current attribute; and description is the value of the description element. Note that the current and open attributes must be referenced from within the today element. Be sure to replace the HTML code with the proper value of expressions.
12. Save your changes to the portfolio.xsl file.
13. Generate your result document using either an XML editor or your web browser. Verify that the layout matches what is shown in Figure 5-38 and that each link in the summary table jumps the user to the corresponding stock's website.