Poiché lo scopo principale di HTML è testo di mark-up, l'aggiunta di una didascalia sotto una foto su una pagina Web non è difficile. Ora con HTML5 fuori, c'è anche un tag significato per le didascalie..--il tag "< figcaption >". Indipendentemente dal fatto che si utilizza questo nuovo tag, è necessario utilizzare codice CSS per lo stile della didascalia. Lo styling potrebbe includere una casella grigia che racchiude la didascalia o testo in corsivo per permettere ai visitatori di conoscere il testo della didascalia non è parte del contenuto principale della pagina Web.

Istruzioni

1

Aprire il file HTML in testo normale o codice editor di tua scelta. Trovare il tag "< img >" per l'immagine che si desidera aggiungere una didascalia sotto. Il tag "< img >" contiene almeno il nome del file dell'immagine, che assomiglia a questo:

< img tag può contenere anche gli attributi diversi da "src" come "width" o "classe".

2

Aggiungere il tag "< figura >" prima il tag "< img >" e quindi chiuderlo aggiungendo "< / figure >" dopo il tag "< img >". Si tratta di un tag di HTML5 che non ottenere in stile nelle versioni di Internet Explorer 8 e sotto. Se siete preoccupati circa indietro compatibilità, sia installare JavaScript al sito per rendere il browser meno recenti Vedi HTML5 o utilizzare il tag "< div >" anziché il tag "< figura >".

3

Aggiungere il "< figcaption >" e "< / figcaption >" tag dopo il tag "< img >" ma prima il tuo "< / figure >" o "< / div >" tag. Se bisogno di compatibilità all'indietro e non utilizza JavaScript per gestire questo, quindi utilizzare un altro tag "< div >" in questo posto invece il tag "< figcaption >". Tra il tuo "< figcaption >" o "< div >" tag qui, aggiungere il testo per la didascalia. Se si utilizza il tag "< div >", è possibile aggiungere una classe a loro come questo:

< div class = "figcaption" > qui tua didascalia. < / div >

Questo ti dà un modo di indirizzare solo "< div >" tag contenenti didascalie. Il browser visualizzerà tutti i tag "< div >" della classe "figcaption" nello stesso modo.

4

Aprire il file CSS del tuo sito Web. Se non esiste, è possibile aggiungere codice CSS tra stile"< >" e "< / stile >" tag nell'intestazione del tuo sito Web. Utilizzare il codice CSS per definire lo stile della didascalia come segue:

figcaption {background: #eee; color: #555; border: 1px solid #555; font-style: italic;}

Stili di esempio questo codice la didascalia con uno sfondo grigio chiaro, colori il tipo di carattere e un sottile bordo grigio scuro e italicizes anche il testo. È possibile utilizzare codice CSS stile la didascalia in qualsiasi modo che tu voglia. Qui è lo stesso stile, applicato al tag "< div >" invece:

div.figcaption {background: #eee; color: #555; border: 1px solid #555; font-style: italic;}