Módulo 4: Enlaces e imágenes
En esta lección aprenderás a crear enlaces (hipervínculos) y a insertar imágenes en tus páginas HTML, usando las etiquetas y atributos esenciales.
Hipervínculos en HTML
Etiqueta <a>
Los enlaces se crean con la etiqueta <a>. Pueden llevar a páginas internas (dentro del mismo sitio) o externas.
El atributo href define la URL de destino.
Atributos importantes de <a>
target: define cómo abrir el enlace._self(por defecto): abre en la misma pestaña._blank: abre en una nueva pestaña.
title: muestra un texto flotante al pasar el cursor.
Imágenes en HTML
Etiqueta <img>
La etiqueta <img> inserta una imagen en la página. No tiene cierre.
src indica la ruta del archivo y alt muestra una descripción si la imagen no carga o para lectores de pantalla.
Atributos de imagen
width: ancho de la imagen (px o %).height: alto de la imagen.alt: texto alternativo (muy importante para accesibilidad).
Buenas prácticas
- Usa
alten todas las imágenes para mejorar la accesibilidad. - Optimiza el tamaño de las imágenes para que tu web cargue más rápido.
- Enlaces claros: usa textos descriptivos como “Leer más” o “Descargar PDF”.
Preguntas de Repaso
Pregunta 1
¿Qué atributo de la etiqueta <a> abre el enlace en una nueva pestaña?
- A) title
- B) href
- C) target="_blank"
- D) alt
Pregunta 2
¿Qué atributo de <img> es esencial para la accesibilidad?
- A) src
- B) title
- C) width
- D) alt
Pregunta 3
¿Cuál es la etiqueta correcta para crear un enlace?
- A) <link>
- B) <a>
- C) <href>
- D) <url>
Pregunta 4
¿Qué atributo define la ruta de la imagen en <img>?
- A) alt
- B) src
- C) href
- D) title
Pregunta 5
¿Cuál de estas prácticas es correcta al usar imágenes?
- A) No usar alt porque es opcional
- B) Usar imágenes enormes sin optimización
- C) Poner alt en todas las imágenes
- D) No usar width ni height
Esta lección forma parte del curso básico de HTML. En la siguiente, aprenderás sobre tablas en HTML para organizar datos.
No hay comentarios:
Publicar un comentario