Cómo poner una leyenda bajo una imagen en una página Web

Cuando se diseña una página web, es importante transmitir la mayor cantidad de información posible en un espacio compacto. Poner palabras clave en un título también ayuda con la optimización de motores de búsqueda. Además, tiene subtítulos debajo de una imagen es una forma organizada para proporcionar detalles adicionales sobre un tema. Si ya sabe cómo usar las tablas y los elementos <div> con Hyper Text Markup Language, creando leyendas de imagen eficaces lleva muy poco tiempo.

Instrucciones

Las tablas HTML

1 Crear un elemento <table> en cualquier parte de la página Web en la que desea que aparezca la imagen y el título. La tabla debe tener dos filas - o <tr> elementos - entre las etiquetas de apertura y cierre. Añadir dos celdas de la tabla, o <td> elementos, uno entre las etiquetas de apertura y cierre de cada fila.

La tabla HTML debería tener este aspecto:

<Table>

<Tr> <td> </ td> </ tr>

<Tr> <td> </ td> </ tr>

</ Table>

2 Introduzca su elemento <img /> en la fila superior, entre el primer <td> y </ td>. Especificar el origen de la imagen con el atributo "y" = ancho, "si es diferente de la imagen real. A diferencia de otros elementos, <img /> no utiliza una etiqueta de cierre, sino que incluyen el" / "antes de cumplirse la etiqueta de cierre para que funcione bien.

<Table>

<Tr> <td> <img /> </ td> </ tr>

<Tr> <td> </ td> </ tr>

</ Table>

3 Introduzca su título de texto en la fila inferior entre el segundo <td> y </ td>. Puede formatear el texto todavía más dentro de la célula, cambiando su tamaño de fuente o de su alineación de celdas, con un elemento incrustado <font>.

Su imagen, junto con el subtítulo, ahora debería tener este aspecto:

<Table>

<Tr> <td> <img /> </ td> </ tr>

<Tr> <td> <font face = "Arial" size = "2"> Descripción imagen aquí. </ Font> </ td> </ tr>

</ Table>

Tabla HTML leyendas

4 Crear un <table> con un solo <tr> fila y una sola columna <td>:

<Table>

<Tr> <td> </ td> </ tr>

</ Table>

5 Introduzca el elemento <img /> en la celda individual con su "/> </ td> </ tr>

</ Table>

6 Crear un elemento <caption> dentro de la tabla por encima de su única fila. Agregue su texto del título entre las etiquetas de apertura y cierre de subtítulos. Alinear el título a la imagen con el atributo "align" en la etiqueta del subtítulo se ajusta a "arriba" o "abajo".

Su tabla HTML final se verá así:

<Table>

<Caption align = "fondo"> Descripción imagen aquí. </ Caption>

<Tr> <td> <img /> </ td> </ tr>

</ Table>

El uso de HTML Divs

7 Crear un elemento <div> en cualquier lugar en su página web que desea que la imagen y el título que aparezca:

<Div>

</ Div>

8 Agregue su elemento <img /> dentro del elemento <div>:

<Div>

<Img />

</ Div>

9 Crear un segundo elemento <div> después de que el elemento <img /> pero aún dentro del primer elemento <div>. Esta será su título, por lo que entrar en el texto del título entre las etiquetas de apertura y cierre de la segunda div.

Su imagen HTML con el subtítulo se verá así:

<Div>

<Img />

<Div> Pie de foto aquí. </ Div>

</ Div>

Consejos y advertencias

• Si está familiarizado con Cascading Style Sheets o CSS - - modificar aún más el aspecto de los pies de fotos a través de su página web con una hoja de estilo y atributos específicos de la clase. Para atributos de etiqueta adicionales, consulte la guía de HTML, como la que está disponible a partir W3Schools (ver Recursos).