Hola Piki!
Voy a intentar ser claro y preciso, de forma tal de indicarte qué tipo de modificaciones se pueden llevar a cabo para obtener los resultados deseados.
Para quienes conocen acerca de HTML en la estructuración de documentos, la tarea consiste en crear una clase para aquellas imágenes que deban estar a la izquierda y otra para aquellas que deban estar a la derecha. Mantener márgenes simétricos y lograr que el texto fluya a lo largo y a lo acnho de las mismas.
Finalmente insertar una hoja de estilo en cascada (CSS) para llegar a la maquetación.
Vamos entonces a la primera imagen que está de margen izquierdo (línea 204); vemos que dice:
<img src="familia.jpg" width="236" height="207" hspace="10" vspace="5" align="left">
reemplazamos por:
<img src="familia.jpg" width="236" height="207" class="imagenizquierda">
La siguiente imagen se encuentra en la línea 301, donde dice:
<img src="amanecer.jpg" width="236" height="154" align="right">
reemplazamos por:
<img src="amanecer.jpg" width="236" height="154" class="imagenderecha">
Para las siguientes ediciones hay que mantener la siguiente sintaxis:
Para las que están alineadas a la izquierda
<img scr="nombreimagen.jpg" width="XXX" height="XXX" class="imagenizquierda">
Para las que están alineadas a la derecha
<img scr="nombreimagen.jpg" width="XXX" height="XXX" class="imagenderecha">
Editando y sobreescribiendo el atributo align por el de class (excepto en el primero, que tiene hspace y vspace que sacamos directamente)
Ahora solo resta incluir las líneas de CSS con las cuales obtenemos el diseño. Es importante conocer que el archivo va entre las etiquetas <head></head>, en mi caso decidí ir a la línea 34 y ahí incluir lo siguiente (esto lo podés copiar y pegar directamente):
<style type="text/css" media="screen/print">
.imagenizquierda {
float: left;
margin: 5px 10px 5px 0px;
}
.imagenderecha {
float: right;
margin: 5px 0px 5px 10px;
}
</style>
Como comenté en mi anterior post los valores de margin corresponden a
superior, derecha, inferior e izquierda respectivamente.
Y la unidad px es pixel. Podés jugar con cualquier medida que satisfaga tus necesidades.
Dado que ahora el texto fluye alrededor de las imágenes, podrás considerar eliminar algún salto
de párrafo innecesario (<br>)
Por lo demás, no dudés en acercarte a este foro para cualquier duda. Saludos y suerte!
Daniel Ulczyk
