Kuvat lisäävät elämää Web-sivuillesi ja vetävät katsojien huomion. Kuvatekstit tarjoavat lisätietoa web-kuville, mutta niitä voi olla vaikea lisätä verkkosivuille ilman kehittyneitä HTML- ja CSS-taitoja. Tässä on luotettava tapa lisätä yksinkertainen, mutta houkutteleva kuva kuvasta, joka pysyy kuvassa aina, kun siirrät sen verkkosivulle.
Vaiheet HTML-kuvaesitykseen
-
Lisää kuva verkkosivuusi.
-
Aseta verkkosivun HTML-muotoon div-tunniste kuvan ympärille:
-
Lisää tyylin attribuutti div-tunnisteeseen:
style = ""> -
Aseta divin leveys kuvan leveyteen leveysominaisuusominaisuudella:
-
Tekstityksiä, jotka ovat hieman ympäröivää tekstiä pienempiä, lisää fontin kokoinen ominaisuus div-tyyliin:
-
Kuvatekijät näyttävät parhaiten, jos ne sijaitsevat kuvan alapuolella, joten lisää tekstin kohdistusominaisuus tyyliattribuuttiin:
-
Lopuksi lisätään hieman ylimääräistä tilaa kuvan ja kuvatekstin välille lisäämällä tyyli-attribuutti kuvaan, jossa on padding-bottom tyyliominaisuus:
style = "padding-bottom: 0.5em;" />
-
Lisää sitten tekstin otsikko suoraan kuvan alapuolelle:
Lähetä verkkosivusi palvelimelle ja testaa se selaimessa.
Kuvausvihjeitä
- CSS-mittasuhteet voivat olla monessa eri mittauksessa, joten yleensä on sisällytettävä mittaustyyppi. Esimerkiksi:
leveys: 100px; Kuitenkin HTML-kuvamitat ovat aina pikseleinä, joten mittaukset jätetään pois.
width = "100"
- Jos teet leveyden div suuremmaksi kuin kuvan leveys, kuvateksti saattaa näkyä kuvan vieressä. Jos tämä on mitä haluat, lisää sitten a
merkitä suoraan otsikon alla ja kuvamerkin jälkeen.
