14.5 (Text Shadow) Create a shadow on the phrase "HTML5 Canvas" with an offset-x of 2px,...

14.5 (Text Shadow) Create a shadow on the phrase "HTML5 Canvas" with an offset-x of 2px, an offset-y of 5px, a blur of 6px and a text-shadow color gray.

14.6 (Rounded Rectangle) Generalize the example in Fig. 14.7 into a roundedRect function and call it twice with different arguments to place two different rounded rectangles on the canvas.

15.7 (Nutrition Information XML Document)Create anXML document that marks up the nutrition facts for a package of Grandma White’s cookies. A package of cookies has a serving size of 1 package and the following nutritional value per serving: 260 calories, 100 fat calories, 11 grams of fat, 2 grams of saturated fat, 5 milligrams of cholesterol, 210 milligrams of sodium, 36 grams of total carbohydrates, 2 grams of fiber, 15 grams of sugars and 5 grams of protein. Name this document nutrition.xml. Load the XML document into your web browser. [Hint: Your markup should contain elements describing the product name, serving size/amount, calories, sodium, cholesterol, proteins, etc. Mark up each nutrition fact/ingredient listed above.]

15.9 (Nutrition Information XSL Style Sheet) Write an XSL style sheet for your solution to Exercise 15.7 that displays the nutritional facts in an HTML5 table.

Solutions

Expert Solution

14.5

<!doctype html>
<html>
<head>
<title>HTML5 canvas</title>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");

//Specify the text alignment
ctx.textAlign="start";

// Specify the font size and font type.
ctx.font = "25px verdana";

// Specify the shadow colour.
ctx.shadowColor = "gray";

// Specify the shadow offset.
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 5;

// Display the text with only shadow.
ctx.fillText("HTML5 canvas", 100,20);

// Blur the shadow to create a blur effect.
ctx.shadowBlur = 6;
}
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="900" height="500"></canvas><br>
</body>
</html>

15.7

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="nutrition.xsl"?>

<whitescookie>
<productname>Grandma White's Cookies</productname>
<serving>1 package</serving>
<calories>260 calories</calories>
<fatcals>100 fat calories</fatcals>
<fat>11 g of fat</fat>
<saturatedfat>2 g of saturated fat</saturatedfat>
<cholesterol>5 mg of cholesterol</cholesterol>
<sodium>210 mg of sodium</sodium>
<carbohydrates>36 g of carbs</carbohydrates>
<fiber>2 g of fiber</fiber>
<sugar>15 g of sugar</sugar>
<protein>5 g of protein</protein>
</whitescookie>

venereology answered 1 year ago

Next > < Previous

Related Solutions

Use HTML5 to create a document that contains the following text: Internet and World Wide Web...

Use HTML5 to create a document that contains the following text: Internet and World Wide Web How to Program: Fifth Edition Welcome to the world of Internet programming. We have provided coverage for many Internet-related topics. Use h1 for the title (the first line of text), p for text (the second and third lines of text). Insert a horizontal rule between the h1 element and the p element. Open your new document in a web browser to view the marked-up...

In PowerShell ISE create a script. Use the text file “its3410Users.txt” (found on Canvas) and import...

In PowerShell ISE create a script. Use the text file “its3410Users.txt” (found on Canvas) and import the users into your domain controller. The user file has a first name, last name, and department. Using this information, create users with the following specifications: Username will be first name.last name User Principal Name will be first name.last [email protected] The department signifies the OU that the user will be placed into If the department does not exist, create it Fill in the first...

Subjects