The previous sample recipe1 page updated to use hyperlinks.
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>Table of Contents</h2>
<ol>
<li><a href="#ingredients">Ingredients</a></li>
<li><a href="#preparation">Preparation</a></li>
<ol>
<li><a href="#the-sauce">The Sauce</a></li>
<li>
<a href="#the-swordfish">The Swordfish</a>
</li>
<li>
<a href="#assembling-it">Assembling it</a>
</li>
</ol>
</li>
</ol>
<h2 id="ingredients">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 id=preparation>Preparation</h2>
<h3 id="the-sauce">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 id="the-swordfish">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 id="assembling-it">Assembling it</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>
<p>----------</p>
<h2>Credits</h2>
<p>Recipe courtesy of <a href="http://www.foodista.com/recipe/727C67X3/roasted-swordfish-with-manzanilla-olives-cherry-tomatoes-and-capers" target="_blank">Foodista</a> (opens in a new tab).</p>
<p>License: <a href="https://creativecommons.org/licenses/by/3.0/" target ="_blank">CC-BY-3.0</a> (opens in a new tab).</p>
<p><a href="/sample/roasted-swordfish.jpg" download>Download</a> the image.</p>
</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 under the main title.
- You can see from the src that the image is located in the same directory as the html file.
- Hyperlinks were used to create a table of contents for the document.
- To make it easier and minimize errors, the ids for the sections are the same as the name of the section. You don’t have to do this, it is easier to remember that Ingredients has the id ingredients rather than id1
- Two hyperlinks, linking to external sites, were created at the bottom of the document. Clicking them opens them in a new window or tab.
- One hyperlink to allow you to download the image.
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.