Katso mitä tahansa verkkosivuja verkossa tänään ja huomaat, että he jakavat tiettyjä asioita yhteisesti. Yksi näistä yhteistä piirteistä on kuvat. Oikeat kuvat lisäävät niin paljon verkkosivuston esitystä. Jotkut näistä kuvista, kuten yrityksen logo, auttavat merkitsemään sivuston ja liittämään digitaalisen kokonaisuuden fyysiseen yritykseen.
Jos haluat lisätä kuvan, kuvakkeen tai grafiikan Web-sivulle, sinun on käytettävä tunnistetta sivun HTML-koodissa. Voit sijoittaa IMG-tunnisteen HTML-määritykseen tarkalleen missä haluat grafiikan näyttämisen. Selaimen, joka tekee sivun koodin, korvaa tämän tunnisteen asianmukaisella grafiikalla, kun sivu katsellaan. Palataksemme yrityksen logo-esimerkkiin, tässä on, miten voit lisätä kyseisen kuvan sivustoosi:
Kuvan määritykset
Kun tarkastellaan yllä olevaa HTML-koodia, näet, että elementti sisältää kaksi attribuuttia. Jokainen niistä tarvitaan kuvasta.
Ensimmäinen attribuutti on "src". Tämä on melko kirjaimellisesti kuvatiedosto, jonka haluat näyttää sivulla. Esimerkissämme käytetään tiedostoa "logo.png". Tämä on graafinen esitys, jonka selaimessa näkyisi, kun se renderoi sivuston.
Huomaat myös, että ennen tätä tiedostonimeä lisäsimme lisätietoja "/ images /". Tämä on tiedostopolku. Ensimmäinen lähtöviiva osoittaa palvelimelle, että se tutkii hakemiston juuren. Se etsii sitten nimeltään "kuvat" ja lopuksi tiedoston "logo.png". Sivuston grafiikan tallentaminen nimeltään "kuvat" on melko yleinen käytäntö, mutta tiedostopolku muuttuu sivustosi kannalta merkitykselliseksi.
Toinen vaadittu määritelmä on "alt" -teksti. Tämä on "vaihtoehtoinen teksti", joka näkyy, jos kuva ei lataudu jostain syystä. Tämä teksti, joka esimerkissämme lukee "Company Logo", näytetään, jos kuva ei lataudu. Miksi näin tapahtuisi? Monista syistä:
- Virheellinen tiedostopolku
- Virheellinen tiedostonimi tai kirjoitusvirhe
- Lähetysvirhe
- Tiedosto on poistettu palvelimelta
Nämä ovat vain muutamia mahdollisuuksia, miksi määritelty kuva saattaa puuttua. Näissä tapauksissa meidän tekstin sijaan näyttäisimme.
Seulanlukijaohjelmisto käyttää myös Alt-tekstiä "kuvan lukemiseen" vierailijalle, joka on heikentynyt näkökyvyssä. Koska he eivät näe kuvaa kuin me, tämän tekstin avulla he voivat tietää, mitä kuva itse on. Tästä syystä tekstiä tarvitaan ja miksi sen pitäisi selvästi ilmoittaa, mikä kuva on!
Yleinen väärinkäsitys on, että se on tarkoitettu hakukoneiden tarkoituksiin. Tämä ei ole totta. Vaikka Google ja muut hakukoneet lukevat tämän tekstin selvittääkseen minkälainen kuva on (muistaa, he eivät voi "nähdä" kuvaasi), sinun ei pitäisi kirjoittaa muuta tekstiä pelkästään hakukoneisiin. Tekijä selkeä teksti, joka on tarkoitettu ihmisille. Jos voit lisätä myös joitain avainsanoja hakulaitteisiin kiinnostavaan tunnisteeseen, se on hieno, mutta varmista aina, että alt-teksti palvelee sen ensisijaista tarkoitusta sanomalla mitä kuva on kaikille, jotka eivät näe grafiikkatiedostoa.
Muut ominaisuudet
IMG-tunnisteella on myös kaksi muuta ominaisuutta, joita saatat nähdä käytössä, kun laitat grafiikan web-sivulle - leveyden ja korkeuden. Jos esimerkiksi käytät WYSIWYG-editoriä, kuten Dreamweaveria, se lisää automaattisesti nämä tiedot sinulle. Tässä on esimerkki:
WIDTH- ja HEIGHT-attribuutit kertovat selaimelle kuvan koon. Selain tietää tarkalleen, kuinka paljon tilaa layoutissa jaetaan, ja se voi siirtyä seuraavalle sivulle, kun kuva latautuu. Ongelma näiden tietojen käyttämisessä HTML-koodeissasi on, että et välttämättä halua, että kuvasi näytetään täsmälleen kooltaan. Jos esimerkiksi sinulla on reagoiva verkkosivusto, jonka mitoitusmuutokset perustuvat kävijöiden näyttöön ja laitteen kokoon, haluat myös, että kuvat ovat joustavia. Jos määrität HTML-koodisi, mikä kiinteä koko on, sinun on vaikea ohittaa reagoivien CSS-mediakyselyt . Tästä syystä ja säilyttää tyylin (CSS) ja rakenteen (HTML) erottaminen, suosittelemme, että et lisää leveys- ja korkeusominaisuuksia HTML-koodiin.
Yksi huomautus: Jos jätät nämä mitoitusohjeet pois päältä ja et määritä kokoa CSS: ssä, selaimessa näkyy kuvan oletusarvoinen, alkuperäisen koon mukaan.
Toimittaja Jeremy Girard