Dal momento che lo scopo principale di HTML è di mark-up di testo, aggiungendo 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>". O se non si utilizza questo nuovo tag, è necessario utilizzare il codice CSS per lo stile della didascalia. Styling potrebbe includere un riquadro grigio attorno alla didascalia o corsivo per consentire ai visitatori di conoscere il testo della didascalia non fa parte del contenuto principale della pagina web.

istruzione

1 Aprire il file HTML in testo o il codice editor di pianura 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 di immagine, che appare così:

<Tag img può anche contenere attributi diversi "src" come "larghezza" o "classe".

2 Aggiungere il tag "<figure>" prima del tag "<img>" e quindi chiuderlo con l'aggiunta di "</ figure>" dopo il tag "<img>". Si tratta di un tag HTML5 che non andranno in stile nelle versioni di Internet Explorer 8 e sotto. Se siete preoccupati per la compatibilità all'indietro, installare JavaScript al sito per fare i vecchi browser HTML5 vedere o utilizzare il tag "<div>" al posto del tag "<figure>".

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

<Div class = "figcaption"> La vostra voce qui. </ Div>

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

4 Aprire file CSS del tuo sito web. Se uno non esiste, è possibile aggiungere codice CSS tra "<style>" e "</ style>" tag nell'intestazione del tuo sito web. Usa il codice CSS per lo stile della didascalia in questo modo:

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

Questo codice di esempio stili la voce con uno sfondo grigio chiaro, i colori dei caratteri e un bordo sottile di un grigio più scuro e in corsivo anche il testo. È possibile utilizzare il codice CSS per lo stile della voce in qualsiasi modo tu voglia. Ecco lo stesso stile, applicato al tag "<div>" invece:

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