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...
http://www.coothead.co.uk/recipes/apple-tart.html
This is the HTML...
<!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>
Nothing too complicated there. ;)
And this is the CSS...
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