Enlaces

Aunque dentro del <nav> existen tres elementos, únicamente vamos a crear dos enlaces, ya que el primero hace referencia a la página que estamos creando ahora, por lo que no tiene que funcionar como enlace.

Al mismo tiempo, los iconos que acompañan a los enlaces NO funcionarán como enlaces, sólo se mostrarán como adornos.

<!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>
              <a href="servicios.html">Servicios</a></li>
          <li><img src="img/icono3.png" align="top"><p>
              <a href="contacto.html">Contacto</a></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>

Hemos eliminado el <br> que había al final de 'Quiénes somos' de la versión anterior.

El texto que está coloreado de color rojo, es el fichero al que se accederá cuando el usuario haga clic sobre el enlace (que está en color negro) 'Servicios' o 'Contacto'.

La única diferencia con la versión anterior son los dos últimos elementos, que ahora son enlaces (que todavía no llevan a ningún sitio ya que tanto servicios.html y contacto.html no existen).

En el siguiente tema vamos a empezar a introducir código CSS para maquetar cada uno de los elementos y apartados que hemos introducido hasta la fecha.