Las imágenes dan vida a sus páginas web y llaman la atención de los espectadores. Los subtítulos proporcionan información adicional acerca de sus imágenes web, pero pueden ser difíciles de agregar a páginas web sin conocimientos avanzados de HTML y CSS. Este es un método confiable para agregar un título simple pero atractivo a una imagen que permanece con la imagen donde sea que la mueva en la página web.
Pasos para una leyenda de imagen HTML
-
Añade una imagen a tu página web.
-
En el HTML para su página web, coloque una etiqueta div alrededor de la imagen:
-
Agrega un atributo de estilo a la etiqueta div:
estilo = ""> -
Establezca el ancho del div en el mismo ancho que la imagen, con la propiedad de estilo de ancho:
-
Para los títulos que son ligeramente más pequeños que el texto circundante, agregue una propiedad de tamaño de fuente al estilo div:
-
Los subtítulos se ven mejor si están centrados debajo de la imagen, así que agregue una propiedad de alineación de texto al atributo de estilo:
-
Finalmente, agregue un poco de espacio extra entre la imagen y el título, agregando un atributo de estilo a la imagen con una propiedad de estilo de relleno inferior:
style = "padding-bottom: 0.5em;" />
-
Luego agrega la leyenda de texto directamente debajo de la imagen:
Sube la página web a tu servidor y pruébala en un navegador.
Consejos de subtitulación
- Las dimensiones de CSS pueden estar en muchas mediciones diferentes, por lo que generalmente debe incluir el tipo de medición. Por ejemplo:
ancho: 100px; Sin embargo, las dimensiones de la imagen HTML siempre están en píxeles, por lo que deja la medición desactivada.
ancho = "100"
- Si hace que el ancho del div sea más ancho que el ancho de la imagen, el título puede aparecer al lado de la imagen. Si esto es lo que quieres, entonces agrega un
etiqueta directamente antes del título y después de la etiqueta de la imagen.
