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 sobre sus imágenes web, pero puede ser difícil añadirlos a las páginas web sin conocimientos avanzados de HTML y CSS. Este es un método fiable para añadir un título simple, pero atractivo, a una imagen que se mantiene con la imagen dondequiera que la mueva en la página web.
Pasos para un pie de foto HTML
- Añada una imagen a su página web.
- En el HTML de su página web, coloque una etiqueta div alrededor de la imagen:
- Añade un atributo de estilo a la etiqueta div:
- Establezca el ancho del div al mismo ancho que la imagen, con la propiedad width style:
- Para los subtítulos que son ligeramente más pequeños que el texto que los rodea, 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:
- Por último, añada un poco más de espacio entre la imagen y el título, añadiendo un atributo de estilo a la imagen con una propiedad de estilo de relleno en la parte inferior:
- Luego agregue el pie de foto directamente debajo de la imagen:
Este es mi subtítulo
Suba la página web a su servidor y pruébela en un navegador.
Consejos para subtitular
- Las dimensiones de CSS pueden ser en muchas medidas diferentes, por lo que normalmente se debe incluir el tipo de medición. Por ejemplo: width: 100 px ;Sin embargo, las dimensiones de las imágenes HTML siempre están en píxeles, por lo que se debe dejar la medición desactivada. width=»100″
- Si hace que el ancho de la división sea mayor que el ancho de la imagen, el título puede aparecer al lado de la imagen. Si esto es lo que quieres, entonces agrega una etiqueta
directamente antes de la leyenda y después de la etiqueta de la imagen.
