Imágenes

Utilización de imágenes

En este tema vamos a enlazar las imágenes (únicos formatos válidos: *.jpg, *.png, *.gif o *.svg).

siguiendo estos sencillos pasos:

En la misma carpeta donde se encuentra el fichero index.html creamos una carpeta a la que voy a llamar 'img'.

A esta carpeta le puedes poner cualquier nombre, siempre que no lleve espacios ni acentos.

Lo que está de color de color verde son las etiquetas HTML que se han añadido para colocar las imágenes.
Las líneas de código HTML de color de color rojo son las etiquetas que sirven para crear cajas (div) que contendrán las imágenes.

<!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>
 	 <img src="img/icono1.png" align="top"><p>Quiénes somos<br>
 	 <img src="img/icono2.png" align="top"><p>Servicios<br>
 	 <img src="img/icono3.png" align="top"><p>Contacto<br>
     </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>

AVISO:
Hemos eliminado los encabezados <h1> y </h1> del <header> para poder alinear la imagen del logo con el texto que lo sigue (los encabezados introducen un espacio antes y después).

En la etiqueta img, primero se indica el nombre de la carpeta 'img/' y posteriormente el nombre de la imagen, indicando obligatoriamente el formato.

El atributo align nos permite alinear la imagen con el texto que lo acompaña (dentro de la misma caja), y <p> los separa verticalmente.

Las imágenes de los 3 apartados las introducimos dentro de un <div> (una caja), para posteriormente poderlas maquetar correctamente.

En todos los casos es aconsejable dar a la imagen el tamaño final con Photoshop (o programas similares).

Pero si se quiere indicar el tamaño desde el propio código html, se debería añadir al final de la etiqueta img (antes del > final) su tamaño en píxeles: width="300" o height="300", ya se quiera indicar la anchura o la altura. Se desaconseja utilizar ambas propiedades a la vez.

Como podemos apreciar el resultado sigue siguiendo igualmente horroroso, aunque un poco más colorido.

En el siguiente bloque de este tema 3 (Imágenes, listas y enlaces) vamos a convertir los enlaces en listas para posteriormente crear más eficazmente los enlaces del <nav>.