Avaa sen Web-sivun HTML-tiedosto, johon haluat lisätä kuvan, tekstieditorissa, kuten Muistiossa tai Web-kehitysohjelmistossa.
Lisää tiedostoon tunniste. Sijoita tunniste sen elementin perään, jonka alla haluat kuvan näkyvän, kun HTML-tiedosto avataan selaimessa. Tunnisteella ei ole erillistä lopputunnistetta. Tagin sisällä sinun on määritettävä näytettävän kuvan lähde kirjoittamalla kuvan sijainti Internetissä src attribuutti. Jos kuva on tallennettu samaan kansioon kuin HTML-tiedosto, kirjoita kuvan nimi ja tunniste. Jos kuva on tallennettu muualle, kirjoita kuvan koko URL-osoite.
Lisää alt attribuutti tunnisteeseesi. HTML5:ssä alt-attribuutti vaaditaan. Käytä tätä attribuuttia kuvaamaan kuvaa siltä varalta, että sitä ei voi ladata. Jos kuvaa ei voi ladata, selain näyttää kirjoittamasi tekstin alt-attribuutin jälkeen. Lisäksi alt-attribuutti on tärkeä näkövammaisten käyttämille näytönlukuohjelmille. Ohjelmisto lukee alt-attribuutissa olevan tekstin, jotta näkövammainen, joka katselee verkkosivustoasi, kuulee, mitä kuvassa on, vaikka hän ei näe sitä.
Määritä kuvan mitat pikseleinä -painikkeilla korkeus ja leveys attribuutteja. Jos et määritä mittoja, selain ei tiedä kuinka paljon tilaa jättää kuvalle sivun latautuessa. Tämä johtaa siihen, että sivu latautuu katkonaisesti, kun teksti latautuu ensin, jättäen kuvalle pienen tilan, minkä jälkeen se hyppää erilleen kuvan latautuessa ja saa tilan laajenemaan. Määritetyillä mitoilla selain jättää tarkalleen oikean määrän tilaa sivun muiden elementtien väliin, jotta kuva täyttyy, kun se on latautunut.
Testaa koodisi ja varmista, että kuva näkyy oikeassa paikassa avaamalla HTML-tiedosto selaimessa.
Käytä CSS: ää kuvan siirtämiseen näytön vasemmalle tai oikealle puolelle tai tekstin kiertämiseen sen ympärille. Voit esimerkiksi käyttää style="float: left;" or style="float: right;" tagin sisällä.
Jos et tiedä kuvan korkeutta ja leveyttä, on hyvä käyttää joko korkeus- tai leveysmääritettä yksinään. Voit myös määrittää korkeuden ja leveyden CSS: n avulla. esimerkiksi 100 x 100 pikselin kuvassa käytä style-attribuuttia: style="height: 100px; leveys: 100 pikseliä."
Tee kuvasta klikattava linkki asettamalla tunniste "a href" -tunnistepariin. Jos esimerkiksi haluat kuvan linkitettävän Facebookiin, kirjoita seuraava.
Älä käytä alt-attribuuttia yrittääksesi tehostaa sivusi hakukoneoptimointia. Hakukoneet ovat pitkään olleet tietoisia siitä, että jotkut web-suunnittelijat yrittävät täyttää alt-attribuuttia ylimääräisillä avainsanoja, ja siksi he jättävät huomioimatta alt-attribuutin tekstin.
