Código HTML para envolver el texto alrededor de la imagen

¿Necesita el código para envolver el texto alrededor de una imagen? Normalmente, cuando se crea una página HTML, todo fluye linealmente, es decir, un bloque directamente después de otro. Todos mis mensajes anteriores son un ejemplo de esto, es decir, texto, luego imagen, luego texto, etc.

A veces puede que quieras incluir el texto junto a una imagen en lugar de debajo de ella. Esto se llama envolver el texto alrededor de la imagen. En realidad, es bastante fácil de envolver el texto usando HTML. Ten en cuenta que no tienes que usar CSS para envolver el texto.

/p>

Sin embargo, hoy en día el W3C recomienda usar CSS en lugar de HTML para este tipo de tareas. Mencionaré ambos métodos a continuación, pero si puedes, es mejor usar CSS ya que es más adaptable a los diseños de sitios web sensibles.

Envolver el texto alrededor de la imagen usando HTML

pc clipart

Para que el texto se envuelva a lo largo del lado derecho de la imagen, tienes que alinear la imagen a la izquierda:

<img  src="IMAGE URL" /><p>Su texto va aquí.

Si quiere que el texto aparezca a la izquierda y la imagen a la derecha, cambie el parámetro de alineación a “derecha”.

pc clipart

<img  src="IMAGE URL" /><p>Su texto va aquí.

Eso es todo! Bastante fácil, ¿verdad? El único momento en el que querrías usar CSS es si quieres añadir márgenes a las imágenes, para que haya algún espacio entre el texto y la imagen.

Puede añadir márgenes a una imagen usando el siguiente código de estilo CSS:

<img  src="IMAGE URL" /><p>Su texto va aquí.

El código anterior utiliza el elemento MARGIN CSS para añadir 10 píxeles de espacio en blanco en el lado derecho de la imagen. Ya que hemos alineado la imagen a la izquierda, queremos añadir el espacio blanco a la derecha.

Básicamente, los cuatro números representan la parte superior derecha, la parte inferior izquierda. Así que si quieres añadir el espacio blanco a una imagen alineada a la derecha, harías esto:

<img  src="IMAGE URL" /><p>Su texto va aquí.

Así que es bastante simple usar HTML para realizar esta tarea, pero una vez más, puede que no funcione bien para los sitios que responden.

Envolver el texto alrededor de la imagen usando CSS

La mejor manera de envolver el texto alrededor de una imagen es usar CSS. Te da un control más fino del grano sobre la posición de los elementos y funciona mejor con los estándares de codificación modernos.

<img  src="IMAGE URL" alt="A photo" left" />

Aunque incluí el CSS directamente en la etiqueta de la imagen en el ejemplo HTML, realmente no deberías hacer eso nunca más tampoco. En su lugar, deberías tener un archivo separado llamado hoja de estilos que contenga todo tu código CSS.

En la etiqueta IMG, simplemente le asignas una clase a la etiqueta y le das un nombre. En mi ejemplo, nombré a la clase left. En mi hoja de estilo, todo lo que tengo que hacer es añadir el siguiente código:

.izquierda {
 flotar: izquierda;
 acolchado: 0 10px 0 0;}

Como pueden ver, añadí 10px de relleno al lado derecho de la imagen alineada a la izquierda. También usé la propiedad de flotación para mover la imagen fuera del flujo normal del documento y ponerla a la izquierda del contenedor padre.

Como puedes ver, es mucho más limpio que añadir todo ese código a la propia etiqueta IMG. También es más fácil de administrar y puedes usar muchas más propiedades CSS para personalizar el aspecto de tu página web. Si tiene alguna pregunta, no dude en comentarla. ¡Disfruta!

Fundador del Help Desk Geek y editor gerente. Empezó a escribir en el blog en 2007 y dejó su trabajo en 2010 para escribir a tiempo completo. Tiene más de 15 años de experiencia en la industria de la tecnología de la información y posee varias certificaciones técnicas. Lea la biografía completa de Aseem.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *