Cómo publicar un título debajo de una imagen en HTML

El lenguaje de programación web HTML no ofrece una etiqueta específica para agregar un título a una imagen. Si bien tiene una etiqueta, es para agregar una etiqueta a una tabla, no para imágenes. Hay dos formas de crear una imagen con una leyenda que está separada de tu texto. Puede usar una etiqueta, que es liviana y altamente personalizable con CSS, o puede usar una tabla, que requiere más código pero crea un estilo de estructura inmediato.

Usando un

1.

Crea tu etiqueta div y pon tu imagen dentro de ella. Si va a utilizar varias imágenes en su sitio web, use una clase de CSS. Podría verse algo como esto:

2.

Agregue un salto de línea - e ingrese su título debajo de la imagen. Cerrar la div. Tu código HTML debería verse así:

Captura de imagen.

3.

Crea el estilo para la clase de subtítulos en tu CSS. Los conceptos básicos para un título deben incluir un texto más pequeño y centrado debajo de la imagen, así como un margen alrededor de la imagen para que el texto no coincida con el título. Si desea que el texto se ajuste a la imagen y el título, también necesitará un flotador. Tu subtítulo CSS podría verse así:

.caption {margen: 5px; text-align: center; estilo de letra: cursiva; tamaño de fuente: 12px; flotador izquierdo; }

Usando una mesa

1.

Comience una tabla con una fila ( ) con una celda ( ). Comience con su imagen. Esto se vería algo como esto:

2.

Cree otra fila con una celda para su título y cierre su tabla, así:

Captura de imagen.

3.

Agrega una clase a tu tabla completa (

) o a su celda de subtítulos (
). Depende de usted si desea simplemente aplicar un estilo al texto debajo de la imagen o aplicar un estilo a toda la tabla. Aplicaría el mismo estilo CSS al título de la tabla como lo haría con un.

Consejos

  • Si desea que su título sobre la imagen, simplemente coloque el título sobre la imagen.
  • Si desea usar CSS para escalar su imagen, también puede usar CSS para hacer esto. Por ejemplo, si quisieras que todas las imágenes en la clase de "título" tuvieran 200 píxeles de ancho sin afectar a otras imágenes en la página, el CSS se vería así:
  • .caption img {width: 200px; }

Advertencia

  • La etiqueta no funcionará con tu tabla si quieres el título debajo de la imagen; solo aplica el título a la parte superior de la tabla.