Katso mitä tahansa Nettisivu verkossa tänään ja huomaat, että heillä on yhteisiä asioita. Yksi näistä jaetuista piirteistä on kuvat. Oikeat kuvat lisäävät niin paljon verkkosivuston esitykseen. Jotkin näistä kuvista, kuten yrityksen logo, auttavat brändäämään sivustoa ja yhdistämään digitaalisen kokonaisuuden fyysiseen yritykseen.
Kuvan lisääminen verkkosivulle HTML: n avulla
Jos haluat lisätä kuvan, kuvakkeen tai grafiikan verkkosivullesi, sinun on käytettävä tunnistetta sivun HTML-koodissa. Sijoitat.
IMG-tunniste. HTML tarkalleen missä haluat grafiikan näkyvän. Sivun koodia hahmottava verkkoselain korvaa tämän tagin sopivalla kuvalla, kun sivua tarkastellaan. Palataksemme yrityslogomme esimerkkiin, voit lisätä kuvan sivustollesi seuraavasti:
SRC-attribuutti
Tarkastellessasi yllä olevaa HTML-koodia näet, että elementti sisältää kaksi määritettä. Jokainen niistä vaaditaan kuvalle.
Ensimmäinen attribuutti on "src". Tämä on kirjaimellisesti kuvatiedosto, jonka haluat näkyvän sivulla. Esimerkissämme käytämme tiedostoa nimeltä "logo.png". Tämä on kuva, jonka verkkoselain näyttäisi renderöittäessään sivuston.
Huomaat myös, että ennen tätä tiedostonimeä lisäsimme lisätietoja "/ images /". Tämä on tiedostopolku. Alkuperäinen kauttaviiva käskee palvelinta etsimään hakemiston juurta. Sitten se etsii kansion nimeltä "kuvat" ja lopuksi tiedoston nimeltä "logo.png". "Kuvat" -kansion käyttö sivuston kaikkien kuvien tallentamiseen on melko yleinen käytäntö, mutta tiedostopolku muutettaisiin mihin tahansa sivustollesi liittyvään.
Alt-attribuutti
Toinen vaadittu määritte on "alt" -teksti. Tämä on "vaihtoehtoinen teksti", joka näytetään, jos kuvan lataaminen epäonnistuu jostain syystä. Tämä teksti, joka esimerkissämme lukee "Yrityksen logo", näytetään, jos kuvan lataaminen epäonnistuu. Miksi se tapahtuisi? Useista syistä:
- Virheellinen tiedostopolku
- Virheellinen tiedostonimi tai kirjoitusvirhe
- Lähetysvirhe
- Tiedosto poistettiin palvelimelta
Nämä ovat vain muutamia mahdollisuuksia sille, miksi määritetty kuvamme saattaa puuttua. Näissä tapauksissa vaihtoehtoinen teksti näytetään sen sijaan.
Mihin Alt-tekstiä käytetään?
Näytönlukijaohjelmisto käyttää myös vaihtoehtoista tekstiä "lukemaan" kuvaa näkövammaiselle kävijälle. Koska he eivät näe kuvaa kuten me, tämä teksti antaa heille tietää, mikä kuva itse on. Siksi tarvitaan vaihtoehtoista tekstiä ja miksi siinä tulisi selvästi ilmoittaa mikä kuva on!
Alt-tekstin 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, mikä kuva on (muista, he eivät myöskään näe "kuvaa", sinun ei pidä kirjoittaa vaihtoehtoista tekstiä houkutellaksesi pelkästään hakuun moottorit. Kirjoittaja selkeän vaihtoehtoisen tekstin, joka on tarkoitettu ihmisille. Jos voit lisätä tunnisteeseen myös joitain avainsanoja, jotka houkuttelevat hakukoneita, se on hieno, mutta varmista aina alt-teksti palvelee ensisijaista tarkoitustaan ilmoittamalla, mikä kuva on kaikille, jotka eivät näe grafiikkaa tiedosto.
Muut kuvaattribuutit
.
IMG.
tagissa on myös kaksi muuta määritettä, jotka saatat nähdä käytössä, kun laitat grafiikkaa verkkosivullesi - leveys ja korkeus. Jos esimerkiksi käytät WYSIWYG-editoria, kuten Dreamweaver, se lisää nämä tiedot automaattisesti sinulle. Tässä on esimerkki:
.
LEVEYS.
ja.
KORKEUS.
määritteet kertovat selaimelle kuvan koon. Selain tietää sitten tarkalleen, kuinka paljon tilaa asettelussa on jaettava, ja se voi siirtyä seuraavaan sivun elementtiin kuvan lataamisen aikana. Ongelma näiden tietojen käyttämisessä HTML-koodissasi on, että et aina halua, että kuvasi näytetään tarkassa koossa. Esimerkiksi, jos sinulla on.
reagoiva verkkosivusto
joiden koko muuttuu kävijänäytön ja laitteen koon perusteella, haluat myös kuviesi olevan joustavia. Jos ilmoitat HTML-koodissasi kiinteän koon, sinun on erittäin vaikea ohittaa reagoivaa.
CSS-mediakyselyt
. Tästä syystä ja tyylin (CSS) ja rakenteen (HTML) erottamisen ylläpitämiseksi on suositeltavaa, ettet lisää leveys- ja korkeusmääritteitä HTML-koodiin.
Yksi huomautus: Jos jätät nämä mitoitusohjeet pois päältä etkä määritä kokoa CSS: ssä, selain näyttää kuvan oletusarvoisesti.
Toimittaja Jeremy Girard