You will create several files related to a recipe web site for a fictional pie company named Granny's Pies. You need to turn in the following files:
·index.html, the first of two web pages (with an optional CSS style sheet file)
·pie.html, the second of two web pages
·recipe.css, the style sheet for pie.html
The first part of your task is to create a front page (README)
for this web site, stored in a file named index.html. Your front page must contain a link to pie.html. The file must also be at least 20 lines long and must contain at least 4 different XHTML elements in its body. It also may not significantly borrow content from your pie.
html. Otherwise, this front page can have any appearance you like. If you like, you may use an optional CSS style sheet with this
page named index.css and submit it with your other files.
The second (and more substantial) part of the assignment is to recreate a specific web page describing a recipe for lemon meringue pie, stored in a file named pie.html. Unlike index.html, this page is rigidly specified and must exactly match the appearance specified in this
document. For full credit, your files must be uploaded to our web server and must match several stylistic guidelines, all specified in the following sections.
·index.html, the first of two web pages (with an optional CSS style sheet file)
·pie.html, the second of two web pages
·recipe.css, the style sheet for pie.html
The first part of your task is to create a front page (README)
for this web site, stored in a file named index.html. Your front page must contain a link to pie.html. The file must also be at least 20 lines long and must contain at least 4 different XHTML elements in its body. It also may not significantly borrow content from your pie.
html. Otherwise, this front page can have any appearance you like. If you like, you may use an optional CSS style sheet with this
page named index.css and submit it with your other files.
The second (and more substantial) part of the assignment is to recreate a specific web page describing a recipe for lemon meringue pie, stored in a file named pie.html. Unlike index.html, this page is rigidly specified and must exactly match the appearance specified in this
document. For full credit, your files must be uploaded to our web server and must match several stylistic guidelines, all specified in the following sections.
Copy Code From Here:
MainPage.html
<html>
<head>
<title>Q.11</title>
<style>
h1{color:green;}
</style>
</head>
<body bgcolor="#ABCCD">
<center><h1>STRAWBERRY CAKES</h1></center>
<div>
Strawberry-scented cake is simply irresistible slathered with your favorite frosting
or layered in whipped cream and strawberries.
</div>
<h3>Nutrition Facts</h3>
<p><b>Amount Per</b> 100 grams</p>
<p><b>Calories</b> 371</p>
<p>% Daily Value*</p>
<ul>
<li><b>Total Fat 15 g</b> 23%</li>
<li><b>Saturated fat 5 g</b> 25%
</li>
<li><b>Polyunsaturated fat 2.8 g</b> </li>
<li><b>Monounsaturated fat </b>6 g </li>
<li><b>Cholesterol 58 mg</b> 19%</li>
<li><b>Sodium 315 mg </b>13%</li>
<li><b>Potassium 140 mg</b> 4%</li>
<li><b>Total Carbohydrate 53 g</b> 17%</li>
<li><b>Dietary fiber 1.6 g</b> 6%</li>
<li><b>Protein 5 g</b> 10%</li>
<li><b>Vitamin A</b> 2%</li>
<li><b>Vitamin C</b> 0%</li>
<li><b>Calcium</b> 6% </li>
<li><b>Iron</b> 8%</li>
<li><b>Vitamin D</b> 0% </li>
<l><b>Vitamin B-6</b> 0%</li>
<li><b>Vitamin B-12</b> 3% </li>
<li><b>Magnesium</b> 8%</li>
</ul>
<div>*Per cent Daily Values are based on a 2,000 calorie diet. Your daily
values may be higher or lower depending on your calorie needs.</div>
<p>
<a href="pie.html"> Click here for the recipe </a></p>
</body>
</html>
Pie.html
<html>
<head>
<title>CAKE</title>
<link href="recipe.css" rel="stylesheet" type="text/css">
<style>
h1{color:green;}
#d{float:right;width:400px;height:300px;background-color:red;margin-right:460px;}
</style>
<script type="text/javascript" src="slider.js">
</script>
</head>
<body bgcolor="#abcdd" onLoad="myFunction()">
<center><h1>STRAWBERRY CAKE</h1></center>
<img src="chef2.png" width="250" height="200"/>
<div id="d"><img src="s.jpg" id="slide"/></div>
<p><b>Preparation Time : </b>16-20 minutes</p>
<p><b>Cooking time :</b> 21-25 minutes</p>
<p><b>Servings :</b> 4</p>
<hr/>
<h2>INGREDIENTS</h2>
<ul>
<li>1 1/2 cup(s) sifted cake flour</li>
<li>1 1/2 teaspoon(s) baking powder</li>
<li>1/4 teaspoon(s) salt</li>
<li>1/2 cup(s) (1 stick) unsalted butter, softeneds</li>
<li>1 cup(s) sugar</li>
<li>2 large eggs, room temperature</li>
<li>1/2 teaspoon(s) vanilla extract</li>
<li>Milk 3/4 cup</li>
<li>1/2 cup(s) whole milk </li>
</ul>
<hr/>
<h2>DIRECTIONS</h2>
<ol type="1">
<li>
<h3>Step 1:</h3>
<ul type="circle">
<li>Grate strawberry.</li>
<li>Cut the butter into cubes.</li>
<li> Grease a Microwave proof dish.</li>
<li>Melt butter and strawberry in a Microwave proof bowl in the Microwave
oven for one minute on Microwave HIGH (100%).</li>
</ul>
</li>
<li>
<h3>Step 2:</h3>
<ul type="circle">
<li>In another bowl sieve refined flour and baking powder.</li>
<li> Mix the melted butter and strawberry well.</li>
</ul>
</li>
<li>
<h3>Step 3:</h3>
<ul type="circle">
<li>Add powdered sugar, strawberry essence and mix.</li>
<li> Add the flour mixture and mix. </li>
<li>Correct the consistency by adding milk.</li>
<li>Add walnuts and mix gently.</li>
</ul>
</li>
<li>
<h3>Step 4:</h3>
<ul type="circle">
<li>Transfer the mixture into the greased Microwave proof dish. </li>
<li>Bake in the Microwave at HIGH (100%) for seven minutes.</li>
</ul>
</li>
<li>
<h3>Step 5:</h3>
<ul type="circle">
<li>Allow standing time of five minutes.</li>
<li> Cool, slice and serve.</li>
</ul>
</li>
</ol>
<hr/>
<h2><u>USER COMMENTS</u></h2>
<i>This is a very good recipe to follow as it is sweet and simple.
This delicious cake can be enjoyed by the vegeterians too.</i>
<p><b>-Sujata Kumari</p>
<h2>LINKS</h2>
<p><a href=""http://programmingwithbasics.blogspot.in/" alt="Wait!!"> Another simple
recipe with step by step pictures</a></p>
<p><a href="MainPage.html">Home</a></p>
</body>
</html>
<head>
<title>Q.11</title>
<style>
h1{color:green;}
</style>
</head>
<body bgcolor="#ABCCD">
<center><h1>STRAWBERRY CAKES</h1></center>
<div>
Strawberry-scented cake is simply irresistible slathered with your favorite frosting
or layered in whipped cream and strawberries.
</div>
<h3>Nutrition Facts</h3>
<p><b>Amount Per</b> 100 grams</p>
<p><b>Calories</b> 371</p>
<p>% Daily Value*</p>
<ul>
<li><b>Total Fat 15 g</b> 23%</li>
<li><b>Saturated fat 5 g</b> 25%
</li>
<li><b>Polyunsaturated fat 2.8 g</b> </li>
<li><b>Monounsaturated fat </b>6 g </li>
<li><b>Cholesterol 58 mg</b> 19%</li>
<li><b>Sodium 315 mg </b>13%</li>
<li><b>Potassium 140 mg</b> 4%</li>
<li><b>Total Carbohydrate 53 g</b> 17%</li>
<li><b>Dietary fiber 1.6 g</b> 6%</li>
<li><b>Protein 5 g</b> 10%</li>
<li><b>Vitamin A</b> 2%</li>
<li><b>Vitamin C</b> 0%</li>
<li><b>Calcium</b> 6% </li>
<li><b>Iron</b> 8%</li>
<li><b>Vitamin D</b> 0% </li>
<l><b>Vitamin B-6</b> 0%</li>
<li><b>Vitamin B-12</b> 3% </li>
<li><b>Magnesium</b> 8%</li>
</ul>
<div>*Per cent Daily Values are based on a 2,000 calorie diet. Your daily
values may be higher or lower depending on your calorie needs.</div>
<p>
<a href="pie.html"> Click here for the recipe </a></p>
</body>
</html>
Pie.html
<html>
<head>
<title>CAKE</title>
<link href="recipe.css" rel="stylesheet" type="text/css">
<style>
h1{color:green;}
#d{float:right;width:400px;height:300px;background-color:red;margin-right:460px;}
</style>
<script type="text/javascript" src="slider.js">
</script>
</head>
<body bgcolor="#abcdd" onLoad="myFunction()">
<center><h1>STRAWBERRY CAKE</h1></center>
<img src="chef2.png" width="250" height="200"/>
<div id="d"><img src="s.jpg" id="slide"/></div>
<p><b>Preparation Time : </b>16-20 minutes</p>
<p><b>Cooking time :</b> 21-25 minutes</p>
<p><b>Servings :</b> 4</p>
<hr/>
<h2>INGREDIENTS</h2>
<ul>
<li>1 1/2 cup(s) sifted cake flour</li>
<li>1 1/2 teaspoon(s) baking powder</li>
<li>1/4 teaspoon(s) salt</li>
<li>1/2 cup(s) (1 stick) unsalted butter, softeneds</li>
<li>1 cup(s) sugar</li>
<li>2 large eggs, room temperature</li>
<li>1/2 teaspoon(s) vanilla extract</li>
<li>Milk 3/4 cup</li>
<li>1/2 cup(s) whole milk </li>
</ul>
<hr/>
<h2>DIRECTIONS</h2>
<ol type="1">
<li>
<h3>Step 1:</h3>
<ul type="circle">
<li>Grate strawberry.</li>
<li>Cut the butter into cubes.</li>
<li> Grease a Microwave proof dish.</li>
<li>Melt butter and strawberry in a Microwave proof bowl in the Microwave
oven for one minute on Microwave HIGH (100%).</li>
</ul>
</li>
<li>
<h3>Step 2:</h3>
<ul type="circle">
<li>In another bowl sieve refined flour and baking powder.</li>
<li> Mix the melted butter and strawberry well.</li>
</ul>
</li>
<li>
<h3>Step 3:</h3>
<ul type="circle">
<li>Add powdered sugar, strawberry essence and mix.</li>
<li> Add the flour mixture and mix. </li>
<li>Correct the consistency by adding milk.</li>
<li>Add walnuts and mix gently.</li>
</ul>
</li>
<li>
<h3>Step 4:</h3>
<ul type="circle">
<li>Transfer the mixture into the greased Microwave proof dish. </li>
<li>Bake in the Microwave at HIGH (100%) for seven minutes.</li>
</ul>
</li>
<li>
<h3>Step 5:</h3>
<ul type="circle">
<li>Allow standing time of five minutes.</li>
<li> Cool, slice and serve.</li>
</ul>
</li>
</ol>
<hr/>
<h2><u>USER COMMENTS</u></h2>
<i>This is a very good recipe to follow as it is sweet and simple.
This delicious cake can be enjoyed by the vegeterians too.</i>
<p><b>-Sujata Kumari</p>
<h2>LINKS</h2>
<p><a href=""http://programmingwithbasics.blogspot.in/" alt="Wait!!"> Another simple
recipe with step by step pictures</a></p>
<p><a href="MainPage.html">Home</a></p>
</body>
</html>
OUTPUT:-
where is slider.js ?
ReplyDeletewhere is receip.css ?