ara introducir imágenes en el texto, lo primero que tenemos que hacer es crear las clases que necesitemos en la página de estilo, a no ser que queramos la imagen centrada, que ya la tenemos definida en la página de estilos «ilustra» o a toda página, para lo que utilizaremos la clase «cubierta».
Además, para la letra capitular que figura a la izquierda, se ha usado la clase «asangre» en el párrafo (en este y el anterior), para evitar la sangría en el texto y ofrecer una mejor estética.
A modo de ejemplo vamos a crear tres clases:
.capitular { float:left; margin:0 0.5em -0.1em 0.25em; }
.ilustradcha { max-height:50%; max-width:50%; float:right; margin:0.5em 0.5em -0.1em 0.25em; }
.ilustraizda { max-height:50%; max-width:50%; float:left; margin:0.5em 0.5em -0.1em 0.25em; }
Vamos a explicar lo que significa cada atributo: con «float» le decimos en qué lado del texto queremos incrustar la imagen (right o left) y margin son los márgenes a qué se pegará el texto, arriba, izquierda, abajo y derecha.
«Width» y «height» son el ancho y alto respectivamente. Se puede expresar el tamaño en porcentaje, es decir el tamaño proporcional, o en píxeles.
«max» significa que se va a respetar el tamaño original. Si queremos que se ajuste a grande, borramos el «max».
Ahora, vamos a ver el código que hemos puesto para ver las imágenes tal y como las hemos puesto en esta página:
Tras el párrafo del título hemos puesto este párrafo con la primera imagen (Imagenes_im1):
<div class="ilustra"><img alt="" src="../Images/Imagenes_im1.jpg" /></div>
Inmediatamente el párrafo de la letra capitular:
<div class="capitular"><img alt="" src="../Images/Imagenes_P.gif" /></div>
Tras el párrafo en que creábamos las clases en la página de estilo, insertamos la imagen (Imagenes_im2) a la derecha:
<div class="ilustradcha"><img alt="" src="../Images/Imagenes_im2.jpg" /></div>
Después del párrafo en que explicábamos lo que significa «max», ponemos la imagen (Imagenes_im3) a la izquierda:
<div class="ilustraizda"><img alt="" src="../Images/Imagenes_im3.jpg" /></div>
Y, finalmente, a modo de «Fin», ponemos otra imagen (Imagenes_im4) centrada:
<div class="ilustra"><img alt="" src="../Images/Imagenes_im4.jpg" /></div>
