Task number 3:
Build two lists, an unordered and ordered. As this task also calls for the creation of links, I used the list of groceries to suggest a good wine, excellent cheese and typical Portuguese bread for a tasting.
The diagram for the links:
Link Diagram
The result:
P2PU: HTML 5 Introduction – Task #3: List and Links
First: unorder list
Grocery list:
Second: order list
The 5 steps to checkout:
- Unload your shopping basket
- Greet the cashier
- Smile at the cute baby next to you in line
- Pay the cashier
- Gather your groceries and leave
And the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>List and Links by Julio Garcia</title>
</head>
<body>
<h1>P2PU: HTML 5 Introduction – Task #3: List and Links</h1>
<h2> First: unorder list</h2>
<h3>Grocery list:</h3>
<ul>
<li><a href=”http://www.adegga.com/wine/AVIN9848940177571-herdade-de-sao-miguel-reserva-2007″>Wine</a></li>
<li><a href=”http://en.wikipedia.org/wiki/Serra_da_Estrela_cheese”>Cheese</a></li>
<li><a href=”http://www.all-about-portugal.com/to-eat/to-eat-lisbon-region/mafra-bread-a-sweetish-taste/”>Bread</a></li>
<li><a href=”http://simplyrecipes.com/recipes/meyer_lemon_sorbet/”>Lemon Sorbet</a></li>
<li><a href=”http://coffeegeek.com/opinions/cafestage/05-04-2006″>Coffee</a></li>
</ul>
<h2> Second: order list</h2>
<h3>The 5 steps to checkout:</h3>
<ol type=”1″ start=”1″>
<li>Unload your shopping basket</li>
<li>Greet the cashier</li>
<li>Smile at the cute baby next to you in line</li>
<li>Pay the cashier</li>
<li>Gather your groceries and leave</li>
</ol>
</body>
</html>
Julio Garcia 