Printable View
I wanna take a recipe i have and make it into a HTML webpage. My problem is i dont know how. Someone told me about HTML tags. The recipe is below, i wanna add these HTML tags, so that way when i click it and it pops up its viewed as a webpage.... Any help would be great.
There isn't really a need to post the recipe/method in the forum so I have removed it from your post.
Assuming that you have somewhere to host your web page, and that you just want help with standalone web page creation and formatting, try KompoZer http://www.kompozer.net/ It is a visual editor so you can type into it like Word. You can also create hyperlinks to other web page documents (the html tags that link web pages together on the web). To find out more information about using hyperlinks, please refer to Google.
If you need further help, please provide more information about your project.
Hi there tarnold4,
and a warm welcome to these forums. ;)
you can see an example of a web page recipe, that I made for someone a little while ago, here...
This is the HTML...
Nothing too complicated there. ;)Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Michel Roux's Apple Tart</title>
<link rel="stylesheet" href="css/page.css">
</head>
<body>
<h1>Michel Roux's Apple Tart</h1>
<div id="ingredients">
<h3>Ingredients:</h3>
<h4>For the tart</h4>
<ul>
<li> 200g/7oz ready-made <a href="http://www.bbc.co.uk/food/puff_pastry">puff pastry</a></li>
<li>2 tbsp stewed apple, or apple <a href="http://www.bbc.co.uk/food/compote">compôte</a></li>
<li>6 <a href="http://www.bbc.co.uk/food/apple">apples</a> (Cox or Granny Smith), peeled, quartered and cored</li>
<li>2 tbsp <a href="http://www.bbc.co.uk/food/caster_sugar">caster sugar</a></li>
<li>40g/1½oz <a href="http://www.bbc.co.uk/food/butter">butter</a>, cubed</li>
<li>1 free-range <a href="http://www.bbc.co.uk/food/egg_yolk">egg yolk</a>, beaten</li>
</ul>
<h4>For the Chantilly cream</h4>
<ul>
<li>250ml/9fl oz <a href="http://www.bbc.co.uk/food/double_cream">double cream</a></li>
<li>1 tbsp <a href="http://www.bbc.co.uk/food/icing_sugar">icing sugar</a></li>
<li>1 <a href="http://www.bbc.co.uk/food/vanilla_pod">vanilla pod</a>, seeds scraped out</li>
</ul>
<h4>To serve</h4>
<ul>
<li>splash <a href="http://www.bbc.co.uk/food/calvados">calvados</a></li>
</ul>
</div>
<div id="vid-container">
<video controls>
<source src="../videos/apple-tart.webm" type="video/webm">
<source src="../videos/apple-tart.mp4" type="video/mp4">
</video>
</div>
<div id="method">
<h3>Method:</h3>
<ol>
<li>Preheat the oven to 200C/400F/Gas 6.</li>
<li>Roll the puff pastry out on a clean work surface to a large sheet, 3mm thick.</li>
<li>Using a bowl or plate, cut a circle about 25cm/10in in diameter.</li>
<li>Crimp the edge before turning the whole sheet over and laying it directly onto a flat baking tray.</li>
<li>Chill in the fridge for at least 10 minutes.</li>
<li>Remove the pastry from the fridge and spread the apple compôte all over the base of pastry, leaving a 1cm/½in border at the edge.</li>
<li>Slice the apples the thickness of a two-pound coin and place them onto the pastry sheet, fanning them out, starting from the outside and working in.</li>
<li>The apples should overlap each other.</li>
<li>Use the largest slices on the outside and place the smallest slices in the middle of the tart.</li>
<li>Once all the apples have been laid out, sprinkle over the caster sugar and dot with the cubed butter.</li>
<li>Brush the border with the beaten egg and bake in the oven for about 30 minutes, or until golden-brown and risen around the edge.</li>
<li>For the Chantilly cream, whisk the cream, icing sugar and seeds from the vanilla pod in a bowl until very soft peaks form and set aside until ready to serve.</li>
<li>When ready to serve, place the tart onto a serving plate. Warm the calvados in a small saucepan.</li>
<li>Ignite the alcohol with a match (be careful of your fingers) and pour over the tart.</li>
<li>Serve with Chantilly cream.
</ol>
</div>
</body>
</html>
And this is the CSS...
Code:
body {
margin:10px;
padding:20px;
background-color:#fc9;
font-size:1em;
color:#420;
box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}
#ingredients {
float:left;
width:440px;
margin-right:20px;
}
#vid-container {
float:left;
width:540px;
margin-top:20px;
border:3px double #000;
box-shadow:10px 10px 10px rgba(0,0,0,0.5);
}
#vid-container video {
display:block;
width:100%;
}
#method {
clear:both;
}
ul,ol {
font-size:0.75em;
}
a {
color:#000080;
}
@media screen and (max-width:1075px) {
h1 {
text-align:center;
}
#vid-container {
float:none;
clear:both;
width:80%;
margin:20px auto;
}
}
@media screen and (max-width:620px) {
#ingredients {
float:none;
width:auto;
margin-right:0;
}
}
@media screen and (max-width:430px) {
body {
margin:4px;
padding:8px;
font-size:0.8em;
box-shadow:inset 0 0 8px rgba(0,0,0,0.8);
}
}
coothead