Contenido del Curso
HTML Definitivo
HTML Definitivo
Imágenes
Las imágenes son una parte esencial del diseño web. Hacen que una página web resulte atractiva para el visitante. Pueden incluirse fácilmente en un documento HTML mediante la tag <img>
.
index
index
index
src
- atributo obligatorio. Su valor es la ruta a la ubicación de la imagen. La ruta puede ser absoluta y relativa;alt
- atributo obligatorio. Proporciona un texto alternativo que se puede mostrar cuando la imagen no se puede renderizar;width
yheight
- especifica el tamaño de la imagen en píxeles. Sin estos atributos, la imagen se mostrará en su tamaño original.
atributo alt
Hacemos que la descripción de la imagen sea informativa y significativa. Ayuda a describir la imagen para las personas con problemas de visión o que no pueden verla. De esta manera, el navegador leerá el atributo alt
, y un usuario podría entender por qué tenemos esta imagen.
Imaginemos el siguiente ejemplo. Tenemos una fuente sobre carreras de caballos. Queremos mostrar cómo se preparan los competidores para las carreras.
Un mal valor para el atributo alt
sería:
Un buen valor para el atributo alt
sería:
atributo src
El atributo src
puede utilizar tanto rutas absolutas como relativas para especificar la ubicación del archivo de imagen.
Ruta absoluta
Especifica la URL completa del archivo de imagen en el servidor web. Por ejemplo:
Significa que el archivo de imagen se encuentra en el enlace de Internet https://example.com/images/image.jpg
. Cualquiera puede acceder a la imagen utilizando este enlace.
Por favor, inspeccione el siguiente ejemplo real en el CodeSandbox a continuación:
Nota
Para examinar la estructura de carpetas de archivos, arrastre el control deslizante situado en la parte izquierda de la interfaz de CodeSandbox. En la esquina superior izquierda, encontrará un botón de hamburguesa representado por tres rayas. Al hacer clic en este botón, accederá a la organización de carpetas de archivos.
Ruta relativa
Especifica la ubicación del archivo de imagen relativa al documento actual. Por ejemplo
Significa que el archivo image.jpg
se encuentra en el directorio images
.
Por favor, inspeccione el ejemplo real proporcionado en el CodeSandbox a continuación. Encontrará la carpeta images
, que contiene el archivo sun.png
.
Nota
Para resumir la diferencia entre rutas relativas y absolutas, una ruta absoluta representa el enlace real que cualquiera puede utilizar para acceder a una imagen. Por otro lado, una ruta relativa es un enlace dentro del contexto de su propio proyecto. Se refiere a una imagen local y a una ruta a la que cualquiera dentro del proyecto puede acceder.
¡Gracias por tus comentarios!