Listas

Enlaces como una lista

Aunque este paso puede parecer de entrada un tanto contraproducente, algo inútil o un poco estéril, cuando coloquemos el código CSS correspondiente en el siguiente tema comprenderemos su utilidad real.

Convertimos los enlaces en una lista para posteriormente poder maquetarla de una manera mucho más rápida y fácil.

<!doctype html>
<html>

 <head>
    <meta charset="utf-8"/>
    <title>Quiénes somos</title>
 </head>

 <body>
   <header>
 	<img src="img/logo.png" align="center">
 	 Aprende jugando, S.L.
   </header>

   <nav>
     <ul>
       <li><img src="img/icono1.png" align="top"><p>Quiénes somos</li>     
       <li><img src="img/icono2.png" align="top"><p>Servicios</li>
       <li><img src="img/icono3.png" align="top"><p>Contacto</li>
     </ul>
   </nav>

   <section>
 	 <div>
 	      <h2>Quiénes somos</h2>
 	 </div>

 	 <article>
 	   <div>
 	      <img src="img/imagen1.png">
 	   </div>
 	      <h3>Con vocación educativa</h3>
 	      Somos una empresa compuesta por <b>maestros, pedagogos,
 	      guionistas y especialistas en las nuevas tecnologías</b>
 	      aplicadas a la educación para ofrecerle los mejores
 	      servicios.
 	      <br>
 	      Anteponemos la educación a la tecnología.
 	 </article>

 	 <article>
 	    <div>
 	      <img src="img/imagen2.png">
 	    </div>
 	      <h3>Con larga experiencia</h3>
 	      Llevamos <b>desde 1998</b> ofreciendo propuestas
 	      diferentes y acciones educativas concretas a escenarios
 	      diversos.
 	      <br>
 	      Diseñamos una solución educativa creativa a su problema
 	      cotidiano.
 	 </article>

 	 <article>
 	    <div>
 	      <img src="img/imagen3.png">
 	    </div>
 	      <h3>Con entusiasmo y motivación</h3>
 	      La <b>motivación</b> y el <b>entusiasmo personal</b>
 	      mueve montañas y es lo que nos hace diferentes al resto.
 	      <br>
 	      Pruébenos y se convencerá..
 	 </article>
   </section>

   <footer>
 	    <h5>
 	       &copy;2015. Aprende jugando, S.L.<br>
 	       c/ del Álamo rojo, 1, local. Barcelona.
 	    </h5>
   </footer>
 </body>
</html>

La etiqueta <ul> abre la lista.

Cada uno de los elementos que contiene la lista se encuentra dentro de un <li>

Con </ul> cerramos la lista.

En realidad, no se aprecía una gran diferencia respecto a la versión anterior, excepto por la aparición de unas viñetas (bolas) delante de cada enlace. Otro cambio es la colocación de un enlace encima del otro y que tengan una sangría (un espacio en su parte izquierda).

Todos estos aspectos son propios de las listas, pero los vamos a modificar y eliminar cuando entremos en el tema referido al maravilloso mundo en tecnhicolor de CSS.