Fundamentos de HTML: visualización de imágenes

• Mayo 14, 2024

Una vez que tenga el texto de su sitio web publicado y formateado a su gusto, es hora de darle vida a la página con algunas imágenes. Las imágenes no solo pueden agregar color y vida a sus páginas, sino que también puede usarlas para generar efectos de texto que serían difíciles o imposibles de hacer con el texto y el formato normales. Por ejemplo, sus opciones de fuente generalmente se limitarán al pequeño número de fuentes que puede estar seguro de que están instaladas en las computadoras de los visitantes, ya que si no tienen la fuente instalada, ¡no pueden verla en su sitio! Cada vez que publique texto en una fuente no disponible, las computadoras de los visitantes lo mostrarán en cualquier fuente disponible que tenga el estilo más cercano, lo que a menudo puede causar estragos en el diseño de su sitio web.

Por otro lado, si usa un programa de edición de imágenes para capturar texto en una fuente elegante y publicarlo como un GIF o JPEG en su sitio, cualquier visitante lo verá exactamente como lo esperaba, ya que ahora es una imagen de texto en lugar de texto en sí. Esto puede liberarlo para usar fuentes fantásticas en sus encabezados y agruparlas de formas inusuales.

La etiqueta básica utilizada para mostrar imágenes es la siguiente:



El código anterior funcionará perfectamente en HTML. Si está utilizando XHTML o desea asegurarse de que su sitio esté preparado para XHTML, debe agregar una barra para cerrar la etiqueta, ya que en XHTML no puede usar etiquetas abiertas:



'Src' es la abreviatura de fuente, y lo usará para especificar la ruta del archivo a su imagen; en otras palabras, para decirle a su navegador dónde se puede encontrar la imagen en su sitio. Si mantiene sus imágenes en la misma carpeta que sus páginas web, no necesita incluir la carpeta en el texto 'src'; simplemente puede escribir el nombre del archivo de la imagen.

Una vez que haya especificado su fuente de imagen, puede mejorar este marco básico con varios atributos opcionales para aprovechar al máximo sus imágenes. Un atributo que casi siempre debe usar es el atributo 'alt'. Esto le permite especificar qué texto debe mostrar el navegador si no puede mostrar su imagen por algún motivo. El texto 'alt' se prepara de la siguiente manera:



Otro conjunto útil de atributos son las etiquetas 'ancho' y 'alto'. Estos le permiten mostrar imágenes en un tamaño diferente al tamaño real de la imagen. Puede usarlos para ajustar su imagen para que encaje perfectamente en el diseño general de su página. Sin embargo, generalmente es preferible cambiar el tamaño real de la imagen usando programas de edición de imágenes y luego publicar la imagen en línea, por dos razones. Primero, el software de edición de imágenes casi siempre le dará un mejor resultado que ajustar el tamaño a mano. En segundo lugar, cambiar las etiquetas de 'ancho' y 'altura' no cambia el tamaño real del archivo de la imagen, por lo que si tiene una imagen enorme que muestra como una miniatura, la imagen tardará tanto tiempo en cargarse y se masticará como mucho ancho de banda como si lo hubiera mostrado a tamaño completo.

Al especificar el tamaño de una imagen, puede enumerar la altura, el ancho o ambos. Los tamaños se especifican por píxel, como puede ver a continuación:



También puede 'alinear' sus imágenes para trabajarlas sin problemas con el flujo de su texto. Si elige la alineación izquierda, el texto comenzará a la derecha de la imagen. Si elige la alineación correcta, la imagen se mostrará en el lado derecho de la página, y su texto aparecerá en el lado izquierdo de la imagen y luego saltará a una nueva línea.

La alineación de la imagen se establece de la siguiente manera:



También puede establecer la alineación en "arriba", "abajo" o "centro" para que la imagen se alinee con la parte superior o inferior de la línea de texto. Si no especifica la alineación, la imagen pasará por defecto a "abajo".

Como nota al margen, puede incluir los atributos de su imagen (src, align, alt, etc.) en cualquier orden dentro de las etiquetas de imagen. Mi preferencia personal es enumerar primero el atributo 'src', ya que es el atributo más básico y debe incluirse en cada etiqueta de imagen, pero puede usar cualquier secuencia que le parezca más natural.

Instrucciones De Vídeo: Clase 006 - CSS - Posicionamiento y Visualización - Estilos a Enlaces - Imágenes (Mayo 2024).