Le immagini aggiungono vita alle tue pagine web e attirano l'attenzione degli spettatori. Le didascalie forniscono informazioni aggiuntive sulle immagini Web, ma possono essere difficili da aggiungere alle pagine Web senza competenze HTML e CSS avanzate. Ecco un metodo affidabile per aggiungere una didascalia semplice, ma accattivante a un'immagine che rimane con l'immagine ovunque la sposti sulla pagina web.
Passi a una didascalia immagine HTML
-
Aggiungi un'immagine alla tua pagina web.
-
Nell'HTML della tua pagina web, posiziona un tag div intorno all'immagine:
-
Aggiungi un attributo di stile al tag div:
style = ""> -
Imposta la larghezza del div alla stessa larghezza dell'immagine, con la proprietà style width:
-
Per didascalie leggermente più piccole del testo circostante, aggiungi una proprietà font-size allo stile div:
-
Le didascalie sembrano migliori se sono centrate sotto l'immagine, quindi aggiungi una proprietà text-align all'attributo style:
-
Infine, aggiungi un po 'di spazio in più tra l'immagine e la didascalia, aggiungendo un attributo di stile all'immagine con una proprietà di stile bottom-padding:
style = "padding-bottom: 0.5em;" />
-
Quindi aggiungi la didascalia del testo direttamente sotto l'immagine:
Carica la pagina web sul tuo server e testala in un browser.
Suggerimenti per la didascalia
- Le dimensioni CSS possono essere in molte misure diverse, quindi di solito devi includere il tipo di misurazione. Per esempio:
larghezza: 100px; Tuttavia, le dimensioni dell'immagine HTML sono sempre in pixel, pertanto la misurazione viene disattivata.
width = "100"
- Se la larghezza del div è più ampia della larghezza dell'immagine, la didascalia potrebbe apparire accanto all'immagine. Se questo è quello che vuoi, allora aggiungi un
etichetta direttamente prima della didascalia e dopo il tag immagine.
