Adja hozzá a HTML-feliratokat webes képekhez 9 egyszerű lépésben
A képek életét növelik weboldalaikra, és felhívják a figyelmet a nézők figyelmére. A feliratok további információkat nyújtanak az internetes képekről, de nehéz lehet weboldalakat hozzáadni a fejlett HTML és CSS készségek nélkül. Itt van egy megbízható módszer egy egyszerű, mégis vonzó felirat készítéséhez, amely a képen marad, bárhová helyezi a weboldalon.
9 lépés a HTML képaláíráshoz
Adjon képaláírást egy képhez, és mozgassa őket bárhová is:
- Adjon hozzá egy képet a weboldalához.
- A weboldal HTML-kódjába helyezzen div tagot a kép körül:
- Stílus attribútum hozzáadása a div taghez:
style = "" >- Állítsa be a div szélességét a kép szélességéhez , a szélesség stílus tulajdonságával :
szélesség: kép szélesség px; ">- A környező szöveghez képest valamivel kisebb méretű feliratokhoz adjon hozzá egy font méretű tulajdonságot a div stílushoz:
font-size: 80%; ">- A feliratok legjobban meg vannak jelenítve, ha a kép alatt helyezkednek el, ezért adjon hozzá egy text-align tulajdonságot a stílus attribútumhoz:
text-align: center; "> < img src = "URL" alt = "alternatív szöveg" width = "width" height = "height" />- Végül adjon hozzá egy kis extra helyet a kép és a felirat között, hozzátéve, hogy a képhez stílus-attribútum tartozik egy padding-bottom stílusú tulajdonsággal:
style =" padding-bottom: 0.5em; " /> - Ezután adja hozzá a szövegfeliratot közvetlenül a kép alatt:
Ez az én felirataim Töltse fel a weboldalt a szerverére, és tesztelje böngészőben.
Képzési tippek
- Szélességek : A CSS méretei számos különböző mérésnél rendelkezésre állhatnak, ezért általában tartalmaznia kell a mérési típust. Például: szélesség: 100 px ; A HTML képméretek azonban mindig képpontban vannak, így a mérést ki kell hagynia. width = "100"
- Ha a szél szélességét szélesebbre állítja, mint a kép szélessége, a kép mellett a felirat is megjelenhet. Ha ez az, amit akarsz, akkor adjunk hozzá egy
címkét közvetlenül a felirat és a képcímke után.
- Stílus attribútum hozzáadása a div taghez: