Nwlapcug.com


Come inserire una didascalia sotto un'immagine in una pagina Web

Come inserire una didascalia sotto un'immagine in una pagina Web


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).