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 de texto es lo que los visitantes del sitio leerán y lo que los motores de búsqueda utilizarán como parte de sus algoritmos de clasificación. Las imágenes agregarán interés visual al sitio y ayudarán a acentuar el contenido del texto.
Añadir texto e imágenes a sitios web es fácil. El texto se agrega 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 agregado una imagen a su página web, es posible que desee que el texto fluya junto a la imagen, en lugar de alinearla debajo (que es la forma predeterminada en que una imagen agregada al código HTML se representará en el navegador). Técnicamente, hay dos formas de lograr este aspecto, ya sea utilizando CSS (recomendado) o agregando las instrucciones visuales directamente en el HTML (no recomendado, ya que desea mantener la separación de estilo y estructura para su sitio web).
Usando CSS
La forma correcta de cambiar la forma en que aparece el diseño de texto e imágenes de una página y cómo sus estilos visuales aparecen en el navegador es con CSS. Solo recuerde, ya que estamos hablando de un cambio visual en la página (haciendo que el texto fluya alrededor de una imagen), esto significa que es el dominio de las Hojas de Estilo en Cascada.
-
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 receptivo donde el tamaño de la imagen variará según el navegador. Cierto software, como Adobe Dreamweaver, agregará información de ancho y alto 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:
-
Para propósitos de estilo, también puede agregar una clase a una imagen. Este valor de clase es lo que usaremos en nuestro archivo CSS. Tenga en cuenta que el valor que usamos aquí es arbitrario, aunque, para este estilo en particular, tendemos a usar los valores de "izquierda" o "derecha", según la forma en que queremos que se alinee nuestra imagen. Encontramos que la sintaxis simple funciona bien y es fácil de entender para otras personas que tengan que administrar un sitio en el futuro, pero puede darle a este el valor de clase que desee.
Por sí mismo, este valor de clase no hará nada. La imagen no se alineará automáticamente a la izquierda del texto. Para esto, ahora tenemos que recurrir a nuestro archivo CSS.
-
En su hoja de estilo, ahora puede agregar el siguiente estilo:
.izquierda {
flotador izquierdo;
relleno: 0 20px 20px 0;
}
Lo que hizo aquí es usar la propiedad CSS "float", que extraerá la imagen del flujo de documentos normal (la forma en que normalmente se mostraría la imagen, con el texto alineado debajo) y la alineará con el lado izquierdo de su contenedor . El texto que viene después de él en el formato HTML ahora lo envuelve. También agregamos algunos valores de relleno para que este texto no sea sino directamente contra la imagen. En su lugar, tendrá un espaciado agradable que será visualmente atractivo en el diseño de la página. En la abreviatura de CSS para el relleno, agregamos 0 valores a la parte superior e izquierda de la imagen, y 20 píxeles a su izquierda e inferior. Recuerde, debe agregar un poco de relleno en el lado derecho de una imagen alineada a la izquierda. Una imagen alineada a la derecha (que veremos en un momento) tendría un relleno aplicado en su lado izquierdo.
-
Si ve su página web en un navegador, ahora debería ver que su imagen está alineada con el lado izquierdo de la página y que el texto se ajusta muy bien alrededor de ella. Otra forma de decir esto es que la imagen está "flotando a la izquierda".
-
Si quisiera cambiar esta imagen para alinearla a la derecha (como en el ejemplo de foto que acompaña a este artículo), sería sencillo. Primero, debe asegurarse de que, además del estilo que acabamos de agregar a nuestro CSS para el valor de clase de "izquierda", también tengamos uno para alineación a la derecha. Se vería así:
.derecho {
flotar derecho;
relleno: 0 0 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 "flotante" y los valores de relleno que usamos (agregando algo al lado izquierdo de nuestra imagen en lugar del derecho).
-
Finalmente, cambiaría el valor de la clase de la imagen de "izquierda" a "derecha" en su HTML:
-
Mire su página en el navegador ahora y su imagen debe estar alineada a la derecha con el texto que la rodea. Tendemos la tendencia de agregar ambos estilos, "izquierda" y "derecha" a todas nuestras hojas de estilo para que podamos usar estos estilos visuales según sea necesario cuando estamos creando páginas web. Estos dos estilos se convierten en características agradables y reutilizables a las que podemos recurrir siempre que necesitemos un estilo de imágenes con texto alrededor de ellas.
Usar HTML en lugar de CSS (y por qué no deberías hacer esto)
A pesar de que es posible envolver 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 cuando considera que, para algunos dispositivos y diseños, ese texto podría no Necesito fluir alrededor de la imagen. Para pantallas más pequeñas, el diseño de un sitio web sensible puede requerir que el texto se alinee debajo de la imagen y que la imagen se extienda por todo el ancho de la pantalla. Esto se hace fácilmente con consultas de medios si sus estilos están separados de su marca HTML.En el mundo de dispositivos múltiples de hoy, donde las imágenes y el texto aparecerán de manera diferente para 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.
