Adăugați subtitrări HTML în imagini web în 9 pași simpli
Imaginile adaugă viață paginilor dvs. web și atrage atenția spectatorilor. Subtitrările oferă informații suplimentare despre imaginile dvs. web, dar pot fi dificil de adăugat la paginile web fără abilități avansate în HTML și CSS. Iată o metodă fiabilă pentru adăugarea unei subtiri simple, dar atrăgătoare la o imagine care rămâne cu imaginea oriunde o mutați pe pagina web.
9 Pași către o imagine HTML
Adăugați o subtitrare la o imagine și mutați-o împreună oriunde doriți:
- Adăugați o imagine pe pagina dvs. web.
- În HTML pentru pagina dvs. web, plasați o etichetă div în jurul imaginii:
- Adăugați un atribut de stil tagului div:
- Setați lățimea divului la aceeași lățime ca imaginea, cu proprietatea stilului de lățime :
width: image width " ;- Pentru subtitrări care sunt puțin mai mici decât textul înconjurător, adăugați o proprietate a dimensiunii fontului în stilul div:
font size: 80%; ">- Titlurile arată cel mai bine dacă sunt centrate sub imaginea, deci adăugați o proprietate text-aliniată la atributul de stil:
text-align: img src = "URL" alt = "text alternativ" width = "width" height = "height" />- În cele din urmă, adăugați un mic spațiu suplimentar între imagine și caption, adăugând un atribut de stil imaginii cu o proprietate de stil de umplutură :
style =" /> - Apoi adăugați legenda textului direct deasupra imaginii: Aceasta este subtitrarea mea
Încărcați pagina web pe server și testați-o într-un browser.
Legendă Sfaturi
- Lățimi : Dimensiunile CSS pot fi în mai multe măsurători diferite, de aceea trebuie să includeți de obicei tipul de măsurare. De exemplu: lățimea: 100 px ; Cu toate acestea, dimensiunile imaginii HTML sunt întotdeauna în pixeli, deci lăsați măsurarea oprită. width = "100"
- Dacă faceți lățimea div mai mare decât lățimea imaginii, legenda poate să apară lângă imagine. Dacă aceasta este ceea ce doriți, adăugați o etichetă
directă înaintea legendei și după eticheta imaginii.
- Adăugați un atribut de stil tagului div: