Agregar Imágenes en HTML
Las imágenes hacen que las páginas web sean más atractivas. Puedes insertar una imagen usando la etiqueta <img>.
index.html
Atributos clave:
src: obligatorio. Ruta al archivo de imagen (absoluta o relativa);alt: obligatorio. Texto mostrado si la imagen no se puede cargar, también utilizado por lectores de pantalla;width/height: tamaño en píxeles. Sin estos atributos, la imagen se muestra en su tamaño original.
Atributo alt
El texto alt debe describir claramente la imagen y proporcionar un contexto útil.
Imaginemos el siguiente ejemplo. Tienes una fuente sobre carreras de caballos. Quieres mostrar cómo los competidores se preparan para la carrera.
Texto alt deficiente:
index.html
Mejor texto alt:
index.html
La versión mejorada proporciona un contexto real y ayuda a los usuarios con discapacidad visual a comprender lo que muestra la imagen.
Atributo src
El atributo src puede utilizar rutas absolutas y relativas para especificar la ubicación del archivo de imagen.
Ruta absoluta
Una URL completa que apunta a una imagen en línea.
index.html
Cualquier persona puede acceder a la imagen mediante este enlace completo.
Por favor, revisa el siguiente ejemplo real en el sandbox de código a continuación.
Para examinar la estructura de carpetas de archivos, desliza el control deslizante en el lado izquierdo de la interfaz del sandbox de código. En la esquina superior izquierda, encontrarás un botón de menú representado por tres líneas. Al hacer clic en este botón, navegarás a la organización de carpetas de archivos.
Ruta relativa
Hace referencia a una imagen dentro de la carpeta de tu proyecto.
index.html
Esto significa que image.jpg está almacenado en el directorio images cerca de tu archivo HTML.
Por favor, revisa el ejemplo real proporcionado en el sandbox de código a continuación. Encontrarás la carpeta images, que contiene el archivo sun.png.
Rutas absolutas: URLs completas que funcionan desde cualquier lugar en internet.
Rutas relativas: rutas locales del proyecto utilizadas dentro de tu propia estructura de carpetas.
1. ¿Qué etiqueta se puede utilizar para colocar una imagen en un sitio web?
2. ¿Qué atributo es obligatorio especificar para una etiqueta <img/>?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Genial!
Completion tasa mejorada a 2.38Agregar Imágenes en HTML
Desliza para mostrar el menú
Las imágenes hacen que las páginas web sean más atractivas. Puedes insertar una imagen usando la etiqueta <img>.
index.html
Atributos clave:
src: obligatorio. Ruta al archivo de imagen (absoluta o relativa);alt: obligatorio. Texto mostrado si la imagen no se puede cargar, también utilizado por lectores de pantalla;width/height: tamaño en píxeles. Sin estos atributos, la imagen se muestra en su tamaño original.
Atributo alt
El texto alt debe describir claramente la imagen y proporcionar un contexto útil.
Imaginemos el siguiente ejemplo. Tienes una fuente sobre carreras de caballos. Quieres mostrar cómo los competidores se preparan para la carrera.
Texto alt deficiente:
index.html
Mejor texto alt:
index.html
La versión mejorada proporciona un contexto real y ayuda a los usuarios con discapacidad visual a comprender lo que muestra la imagen.
Atributo src
El atributo src puede utilizar rutas absolutas y relativas para especificar la ubicación del archivo de imagen.
Ruta absoluta
Una URL completa que apunta a una imagen en línea.
index.html
Cualquier persona puede acceder a la imagen mediante este enlace completo.
Por favor, revisa el siguiente ejemplo real en el sandbox de código a continuación.
Para examinar la estructura de carpetas de archivos, desliza el control deslizante en el lado izquierdo de la interfaz del sandbox de código. En la esquina superior izquierda, encontrarás un botón de menú representado por tres líneas. Al hacer clic en este botón, navegarás a la organización de carpetas de archivos.
Ruta relativa
Hace referencia a una imagen dentro de la carpeta de tu proyecto.
index.html
Esto significa que image.jpg está almacenado en el directorio images cerca de tu archivo HTML.
Por favor, revisa el ejemplo real proporcionado en el sandbox de código a continuación. Encontrarás la carpeta images, que contiene el archivo sun.png.
Rutas absolutas: URLs completas que funcionan desde cualquier lugar en internet.
Rutas relativas: rutas locales del proyecto utilizadas dentro de tu propia estructura de carpetas.
1. ¿Qué etiqueta se puede utilizar para colocar una imagen en un sitio web?
2. ¿Qué atributo es obligatorio especificar para una etiqueta <img/>?
¡Gracias por tus comentarios!
