P2PU: HTML 5 Introduction – Task #3: Lists and Links

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

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:

  1. Unload your shopping basket
  2. Greet the cashier
  3. Smile at the cute baby next to you in line
  4. Pay the cashier
  5. 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&gt;
<li><a href=”http://en.wikipedia.org/wiki/Serra_da_Estrela_cheese”>Cheese</a></li&gt;
<li><a href=”http://www.all-about-portugal.com/to-eat/to-eat-lisbon-region/mafra-bread-a-sweetish-taste/”>Bread</a></li&gt;
<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&gt;
</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>

Sobre Julio Garcia

Interessado em comportamento humano, marketing social, redes sociais, inteligência coletiva e como o design afeta o comportamento. Interest in human behavior, social marketing, social networks, collective intelligence and how the design affects human behavior.
Esta entrada foi publicada em P2PU com as etiquetas , , , , , . ligação permanente.

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s