Quando si progetta una pagina Web, è importante trasmettere quante più informazioni possibile in uno spazio compatto. Mettere le parole chiave in una didascalia aiuta anche con l'ottimizzazione dei motori di ricerca. Inoltre, avendo didascalie sotto un'immagine è un modo organizzato per fornire ulteriori dettagli su un argomento. Se già capire come usare le tabelle e <div> elementi con Hyper Text Markup Language, creando efficaci didascalie delle immagini richiede pochissimo tempo.

istruzione

Le tabelle HTML

1 Creare un <table> elemento in qualsiasi punto della pagina Web in cui si desidera che l'immagine e la didascalia a comparire. La tabella dovrebbe avere due file - o <tr> elementi - tra l'apertura e chiusura tag. Aggiungere due celle di una tabella, o <td> elementi, uno tra i tag di apertura e di chiusura di ogni riga.

La tabella HTML dovrebbe essere simile a questo:

<Table>

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

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

</ Table>

2 Inserisci il tuo <img /> elemento nella riga in alto, tra il primo <td> e </ td>. Specificare l'origine della vostra immagine con l'attributo "e" = larghezza, "se diversa da l'immagine reale. A differenza di altri elementi, <img /> non utilizza un tag di chiusura, ma includere il" / "prima che il marchio tag di chiusura per farlo funzionare bene.

<Table>

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

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

</ Table>

3 Inserire il titolo del testo nella riga inferiore tra il secondo <td> e </ td>. È possibile formattare ulteriormente il testo all'interno della cellula, modificarne la dimensione del carattere o l'allineamento delle cellule, con un <font> elemento incorporato.

La tua immagine, completa di titolo, dovrebbe apparire come questo:

<Table>

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

<Tr> <td> <font face = "Arial" size = "2"> Immagine caption qui. </ Font> </ td> </ tr>

</ Table>

HTML Tabella didascalie

4 Creare un <table> con un solo <tr> riga e una sola <td> Colonna:

<Table>

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

</ Table>

5 Inserire l'elemento <img /> nella singola cellula con il "/> </ td> </ tr>

</ Table>

6 Creare un <caption> elemento all'interno della tabella sopra la sua unica fila. Aggiungere il testo della didascalia tra i tag di apertura e di chiusura didascalia. Allineare la didascalia all'immagine con l'attributo "align" nel tag titolo impostato su "alto" o "basso".

La vostra tabella HTML finale sarà simile a questa:

<Table>

<Caption align = "bottom"> Immagine caption qui. </ Caption>

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

</ Table>

Utilizzando div HTML

7 Creare un elemento <div> in qualsiasi punto della pagina Web che si desidera che l'immagine e la didascalia a comparire:

<Div>

</ Div>

8 Aggiungi il tuo <img /> elemento all'interno dell'elemento <div>:

<Div>

<Img />

</ Div>

9 Creare un secondo elemento <div> dopo l'elemento <img /> ma comunque entro il primo elemento <div>. Questo sarà il tuo titolo, in modo da inserire il testo della didascalia tra il tag di apertura e di chiusura del secondo div.

La tua immagine HTML con didascalia sarà simile a questa:

<Div>

<Img />

<Div> Immagine caption qui. </ Div>

</ Div>

Consigli e avvertenze

• Se si ha familiarità con Cascading Style Sheets - o CSS - modificare ulteriormente l'aspetto delle vostre didascalie delle immagini durante la vostra pagina Web con un foglio di stile e attributi specifici della classe. Per gli attributi tag aggiuntivo, consultare una guida HTML come quello disponibile da W3Schools (vedi Risorse).