Mire cualquier página web y verá una combinación de contenido de texto e imágenes. Ambos elementos son ingredientes esenciales para el éxito de un sitio web. El contenido del texto es lo que los visitantes del sitio leerán y lo que los motores de búsqueda usarán como parte de sus algoritmos de clasificación. Las imágenes añadirán interés visual al sitio y ayudarán a acentuar el contenido del texto.

Añadir texto e imágenes a los sitios web es fácil. El texto se añade con etiquetas HTML estándar como párrafos, encabezados y listas, mientras que las imágenes se colocan en una página con el elemento . Sin embargo, una vez que haya añadido una imagen a su página web, es posible que desee que el texto fluya junto a la imagen, en lugar de alinearse debajo de ella (que es la forma predeterminada en que una imagen añadida al código HTML se renderizará en el navegador). Técnicamente, hay dos maneras de lograr este aspecto, ya sea utilizando CSS (recomendado) o añadiendo las instrucciones visuales directamente en el HTML (no recomendado, ya que desea mantener la separación de estilo y estructura para su sitio web).

Uso de CSS

La forma correcta de cambiar la forma en que el diseño de texto e imágenes de una página y cómo aparecen sus estilos visuales en el navegador es con CSS. Sólo recuerda, ya que estamos hablando de un cambio visual en la página (hacer que el texto fluya alrededor de una imagen), esto significa que es el dominio de las Hojas de Estilo en Cascada.

1. Primero, agregue su imagen a su página web. Recuerde excluir cualquier característica visual (como los valores de ancho y alto) de ese HTML. Esto es importante, especialmente para un sitio web con capacidad de respuesta, donde el tamaño de la imagen variará en función del navegador. Ciertos programas, como Adobe Dreamweaver, añadirán información de anchura y altura a las imágenes que se insertan con esa herramienta, así que asegúrese de eliminar esta información del código HTML. Sin embargo, asegúrese de incluir el texto alternativo apropiado. Aquí hay un ejemplo de cómo puede verse su código HTML:

2. Por motivos de estilo, también puede añadir una clase a una imagen. Este valor de clase es el que usaremos en nuestro archivo CSS. Nótese que el valor que usamos aquí es arbitrario, aunque, para este estilo en particular, tendemos a usar valores de «izquierda» o «derecha», dependiendo de la dirección en la que queramos alinear nuestra imagen. Encontramos que esa simple sintaxis funciona bien y es fácil de entender para otros que tengan que administrar un sitio en el futuro, pero usted puede darle el valor que desee a esta clase.

   Por sí mismo, este valor de clase no hará nada. La imagen no se alineará automáticamente a la izquierda del texto. Para ello, ahora tenemos que volver a nuestro archivo CSS.

3. En su hoja de estilo, ahora puede agregar el siguiente estilo:

   .left {

    float: left;

    padding: 0 20px 20px 0;

   }

   Lo que ha hecho aquí es utilizar la propiedad «float» de CSS, que sacará la imagen del flujo normal de documentos (de la forma en que se mostraría normalmente, con el texto alineado debajo de ella) y la alineará al lado izquierdo de su contenedor. El texto que viene después en la marcación HTML con ahora envolverlo. También hemos añadido algunos valores de relleno para que este texto no se encuentre directamente contra la imagen. En cambio, tendrá un espacio agradable que será visualmente atractivo en el diseño de la página. En la abreviatura CSS para relleno, añadimos 0 valores a la parte superior e izquierda de la imagen, y 20 píxeles a su izquierda e inferior. Recuerde, usted necesita agregar un poco de relleno en el lado derecho de una imagen alineada a la izquierda. Una imagen alineada a la derecha (que miraremos en un momento) tendría un acolchado aplicado en su lado izquierdo.

4. Si usted ve su página web en un navegador, ahora debería ver que su imagen está alineada al lado izquierdo de la página y que el texto la envuelve bien. Otra forma de decir esto es que la imagen «flota a la izquierda».

5. Si quisieras cambiar esta imagen para alinearla a la derecha (como en el ejemplo de la foto que la acompaña), sería sencillo. Primero, debe asegurarse de que, además del estilo que acabamos de añadir a nuestro CSS para el valor de clase «left», también tenemos uno para la alineación a la derecha. Se vería así:

   .right {

    float: right;

    relleno: 0 0 20px 20px 20px;

   }

   Puedes ver que esto es casi idéntico al primer CSS que escribimos. La única diferencia es el valor que usamos para la propiedad «float» y los valores de relleno que usamos (añadiendo algunos a la izquierda de la imagen en lugar de a la derecha).

6. Finalmente, cambiaría el valor de la clase de la imagen de «izquierda» a «derecha» en su HTML:

7. Mire su página en el navegador ahora y su imagen debe estar alineada a la derecha con un texto que la envuelva claramente. Tendemos a añadir ambos estilos, «izquierda» y «derecha» a todas nuestras hojas de estilo para que podamos usar estos estilos visuales cuando los necesitemos al crear páginas web. Estos dos estilos se convierten en características agradables y reutilizables a las que podemos recurrir siempre que necesitemos cambiar el estilo de las imágenes con texto envolviéndolas.

Uso de HTML en lugar de CSS (y por qué no debería hacer esto)

Aunque es posible envolver el texto alrededor de una imagen con HTML, los estándares web dictan que CSS (y los pasos presentados anteriormente) es el camino a seguir para que podamos mantener una separación de estructura (HTML) y estilo (CSS). Esto es especialmente importante si se tiene en cuenta que, para algunos dispositivos y diseños, es posible que el texto no tenga que fluir alrededor de la imagen. Para pantallas más pequeñas, el diseño de un sitio web con capacidad de respuesta puede requerir que el texto se alinee realmente debajo de la imagen y que la imagen se extienda a todo lo ancho de la pantalla. Esto se hace fácilmente con las consultas de medios si sus estilos están separados de su marcado HTML. En el mundo multidispositivo de hoy, donde las imágenes y el texto aparecerán de forma diferente para los diferentes visitantes y en diferentes pantallas, esta separación es esencial para el éxito y la gestión a largo plazo de una página web.