The previous sample recipe1 page updated to include an image.
Contents
A Sample Recipe Page
You can see how the page looks here.
The Source Code
<!DOCTYPE HTML>
<html>
<head>
<title>Roasted Swordfish</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Roasted Swordfish with Manzanilla Olives, Cherry
Tomatoes, and Capers</h1>
<img src="roasted-swordfish.jpg"
alt="Image of roasted swordfish with olives.">
<h2>Ingredients</h2>
<ul>
<li>4 six-ounce portions of swordfish, each about
one inch thick</li>
<li>1 cup Manzanilla olives</li>
<li>4 cups of peeled cherry tomatoes in juice</li>
<li>4 teaspoons capers, rinsed</li>
<li>2 cloves garlic, sliced</li>
<li>2 lemons juiced</li>
<li>1 cup loosely packed parsley leaves</li>
<li>Olive oil</li>
<li>Salt and pepper</li>
</ul>
<h2>Preparation</h2>
<h3>The Sauce</h3>
<ol>
<li>Heat ¼ cup olive oil in a high sided pot over
medium heat.</li>
<li>Peel and slice the garlic and add it to the
warm oil.</li>
<li>Sauté until the garlic is tender, not browned,
then add the tomatoes and cook until the tomato
liquid has reduce by half, about 20 minutes.</li>
<li>Add the Manzanilla olives, capers, the juice of
one lemon, parsley, and salt and pepper if needed.
</li>
<li>Set aside and keep warm until the swordfish is
cooked.</li>
</ol>
<h3>The Swordfish</h3>
<ol start="6">
<li>Season the swordfish with salt and pepper.</li>
<li>Heat a large sauté pan over medium high heat
and add about 1/4 cup olive oil.</li>
<li>When very hot add the swordfish and cook until
both sides are golden brown, about 3-4 minutes
per side.</li>
<li>Set aside on paper towels to absorb any excess
oil.</li>
</ol>
<h3>To complete</h3>
<ol start="10">
<li>As the swordfish comes out of the sauté pan,
divide the sauce between four warm dinner plates.
</li>
<li>Place one piece of fish on each plate.</li>
<li>Squeeze some lemon on each piece of fish and
serve while hot.</li>
</ol>
</body>
</html>Notes
- An h1 tag was used for the title on the page.
- The content of the document was divided into two sections: Ingredients and Preparation using h2 tags.
- The preparation section was divided into three sections using h3 tags.
- The ingredients were listed using an unordered list.
- The directions were listed using an ordered list.
- For numbering continuity, the start attribute was used.
- An image with alt text was inserted below the main title.
- You can see from the src that the image is located in the same directory as the html file.
Not all the tags we have seen in earlier tutorials were used because they were not needed – just because there are tags doesn’t mean you have to use them.