Dado que el propósito principal de HTML es marcar texto plano, la adición de una leyenda bajo una foto en una página web no es difícil. Ahora con HTML5 a cabo, incluso hay una etiqueta de significado para los subtítulos - la etiqueta "<figcaption>". Aun cuando no se utiliza esta nueva etiqueta, es necesario utilizar código CSS con el estilo de la leyenda. Styling podría incluir un cuadro gris alrededor de la leyenda o el texto en cursiva para que los visitantes conocen el texto de los subtítulos no forma parte del contenido principal de la página web.
Instrucciones
1 Abra su archivo HTML en el editor de texto sin formato o código de su elección. Busque la etiqueta "<img>" para la imagen que desea añadir un título bajo. La etiqueta "<img>" contiene al menos el nombre de archivo de la imagen, que se ve así:
<Img etiqueta también puede contener atributos que no sean "src", tales como "ancho" o "clase".
2 Añadir la etiqueta "<figure>" antes de la etiqueta "<img>" y luego cerrarla a cabo mediante la adición de "</ figura>" después de la etiqueta "<img>". Esta es una etiqueta HTML 5 que no será labrada en las versiones de Internet Explorer 8 y siguientes. Si usted está preocupado acerca de la compatibilidad hacia atrás, o bien instalar JavaScript para el sitio para que los navegadores antiguos HTML5 ver o utilizar la etiqueta "<div>" en lugar de la etiqueta "<figure>".
3 Añadir los "<figcaption>" y "</ figcaption>" etiquetas después de la etiqueta "<img>", pero antes de que su "</ figura>" o la etiqueta "</ div>". Si necesita compatibilidad con versiones anteriores y no está utilizando JavaScript para manejar eso, a continuación, utilizar otra etiqueta "<div>" en este punto en lugar de los "<>" figcaption etiquetas. Entre su "<figcaption>" o "<div>" etiquetas aquí, añadir el texto de su título. Si se utiliza "<div>" etiquetas, agregar una clase a ellos de esta manera:
<Div class = "figcaption"> Su subtítulo aquí. </ Div>
Esto le da una forma de apuntar solamente "<div>" etiquetas que contienen subtítulos. El navegador mostrará todos "<div>" etiquetas de la clase "figcaption" de la misma manera.
4 Abre el archivo CSS de su sitio web. Si no existe uno, puede agregar código CSS entre "<style>" y "</ style>" etiquetas en la cabecera de su página web. Utilice el código CSS para estilizar el subtítulo de este modo:
figcaption {background: #eee; color: # 555; frontera: 1px solid # 555; font-style: cursiva;}
Este código de ejemplo estilos del epígrafe con un fondo gris claro, los colores de la fuente y un borde fino de un gris más oscuro y también en cursiva el texto. Puede utilizar el código CSS para el estilo de la leyenda en la forma que desee. Aquí es el mismo estilo, aplicado a la etiqueta "<div>" en su lugar:
div.figcaption {background: #eee; color: # 555; frontera: 1px solid # 555; font-style: cursiva;}