Introducción
La etiqueta HTML <figcaption> se utiliza para proporcionar leyendas para el contenido dentro del elemento <figure>. En este laboratorio, aprenderás cómo utilizar la etiqueta <figcaption> para agregar leyendas a tus imágenes.
Nota: Puedes practicar la codificación en
index.htmly aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.
Agregando la imagen y la leyenda
Abra el archivo index.html en su editor de texto preferido y escriba la estructura básica de HTML. Agregue la declaración <DOCTYPE>, las etiquetas <html>, <head> y <body>.
- Dentro de la etiqueta
<body>, cree un elemento<figure>con una etiqueta de imagen dentro. Puede usar cualquier imagen que desee. Por ejemplo:
<figure>
<img src="your-image-url-here" alt="Your image description" />
</figure>
- Ahora, agregue una etiqueta
<figcaption>inmediatamente después de la etiqueta<img>para proporcionar una leyenda para la imagen. Por ejemplo:
<figure>
<img src="your-image-url-here" alt="Your image description" />
<figcaption>Image caption goes here</figcaption>
</figure>
- Guarde los cambios en el archivo
index.htmly abra it en su navegador web. Ahora debería ver la imagen con su leyenda debajo de ella.
Estilando la leyenda
Por defecto, la etiqueta
<figcaption>es un elemento de nivel de bloque que ocupa todo el ancho del elemento padre. Puedes estilar la leyenda utilizando CSS para ajustar su posición, fuente, color, etc.Agrega el siguiente código CSS a la sección
<head>de tu archivoindex.htmlpara cambiar la fuente, el tamaño de fuente y el color de la leyenda:
figcaption {
font-family: Arial, sans-serif;
font-size: 18px;
color: #555;
}
- También puedes cambiar la posición de la leyenda utilizando CSS para ajustar las propiedades de márgen y relleno de la etiqueta
<figcaption>. Por ejemplo:
figcaption {
margin-top: 10px;
padding: 5px;
}
Agregando múltiples imágenes y leyendas
Puedes agregar múltiples imágenes y leyendas a una sola página web repitiendo los pasos anteriores. Simplemente crea un nuevo elemento
<figure>con una etiqueta<img>y una etiqueta<figcaption>para cada imagen.Guarda los cambios en el archivo
index.htmly actualiza la página web. Ahora deberías ver todas tus imágenes con sus leyendas debajo de ellas.
Resumen
La etiqueta HTML <figcaption> es una herramienta poderosa para proporcionar leyendas a las imágenes en tus páginas web. Al utilizar esta etiqueta, puedes hacer que tus imágenes sean más accesibles y amigables para tu audiencia. ¡No olvides estilar tus leyendas con CSS para que se vean geniales también!
