Quando si progetta una pagina Web, è importante trasmettere quante più informazioni possibili in uno spazio compatto. Mettere parole chiave in una didascalia aiuta anche con search engine optimization. Inoltre, avendo le didascalie sotto un'immagine è un modo organizzato per fornire dettagli aggiuntivi su un argomento. Se comprendete già come utilizzare tabelle ed elementi < div > con Hyper Text Markup Language, creazione di didascalie immagine efficace non richiede nessun tempo affatto.
Istruzioni
Tabelle HTML
1
Creare un elemento < table > ovunque sulla tua pagina Web in cui si desidera l'immagine e la didascalia da visualizzare. La tabella deve avere due righe..--o gli elementi < tr >--tra i tag di chiusura e apertura. Aggiungere due celle della tabella, o elementi < td >, uno tra ogni riga di apertura e chiusura tag.
La tabella HTML dovrebbe assomigliare a questo:
< table >
< tr >< td >< /td >< /tr >
< tr >< td >< /td >< /tr >
< / tabella >
2
Inserisci il tuo < img / > elemento nella riga superiore, tra il primo < td > e < /td >. Specificare l'origine dell'immagine con l'attributo "e" larghezza =, "se differente dall'immagine reale. A differenza di altri elementi, < img / > non utilizza una chiusura tag, ma includono la "/" prima della chiusura tag contrassegnare per farlo funzionare bene.
< table >
< tr >< td >< img / >< /td >< /tr >
< tr >< td >< /td >< /tr >
< / tabella >
3
Inserire la didascalia di testo nella riga inferiore tra il secondo < td > e < /td >. È ulteriormente possibile formattare il testo all'interno della cellula, cambiando la dimensione del font o l'allineamento delle cellule, con un elemento < font > incorporato.
L'immagine, completa con didascalia, ora dovrebbe assomigliare a questo:
< table >
< tr >< td >< img / >< /td >< /tr >
< tr >< td >< proprietà font face = "Arial" size = "2" > didascalia immagine qui. < / font >< /td >< /tr >
< / tabella >
Didascalie di tabella HTML
4
Creare una tabella di < > con solo una riga singola < tr > e una colonna singola < td >:
< table >
< tr >< td >< /td >< /tr >
< / tabella >
5
Immettere il < img / > elemento nella singola cella con il tuo "/ >< /td >< /tr >
< / tabella >
6
Creare un elemento < caption > all'interno della tabella sopra la sua unica riga. Aggiungi il tuo testo di didascalia tra i tag di apertura e di chiusura didascalia. Allineare la didascalia per l'immagine con l'attributo "allineare" nel tag didascalia impostata su "superiore" o "inferiore".
La tabella HTML finale sarà simile a questo:
< table >
< caption align = "bottom" > didascalia immagine qui. < / caption >
< tr >< td >< img / >< /td >< /tr >
< / tabella >
Utilizzando HTML div
7
Creare un elemento < div > ovunque sulla tua pagina Web che si desidera l'immagine e la didascalia da visualizzare:
< div >
< / div >
8
Aggiungi il tuo < img / > all'interno dell'elemento < div >:
< div >
< img / >
< / div >
9
Creare un secondo elemento < div > dopo il < img / > elemento ma ancora all'interno del primo elemento < div >. Questo sarà il tuo titolo, quindi immettere il testo della didascalia tra del secondo div apertura e chiusura tag.
L'immagine HTML con didascalia sarà simile a questo:
< div >
< img / >
< Div > immagine qui la didascalia. < / div >
< / div >
Consigli & Avvertenze
- Se si ha familiarità con Cascading Style Sheets..--o CSS - modificare ulteriormente l'aspetto le didascalie di immagine in tutta la pagina Web con un foglio di stile e classe-specifici attributi. Per gli attributi aggiuntivi del tag, consultare una guida HTML come quello disponibile da W3Schools (Vedi risorse).