Skip to content

Kuvien lisääminen verkkosivuille HTML: n avulla

20 de maaliskuu de 2021

Katso mitä tahansa verkkosivua tänään verkossa ja huomaat, että niillä on yhteisiä asioita. Yksi näistä jaetuista piirteistä on kuvat. Oikeat kuvat lisäävät niin paljon verkkosivuston esitykseen. Jotkut 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

tag HTML-koodissasi 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.

Huomaa myös, että ennen tätä tiedostonimeä lisäsimme lisätietoja ”/ images /”. Tämä on tiedostopolku. Alkuperäinen eteenpäin viiva käskee palvelinta etsimään hakemiston juuria. Sitten se etsii kansion nimeltä ”kuvat” ja lopuksi tiedoston nimeltä ”logo.png”. ”Kuvat” -kansioiden käyttö kaiken sivuston grafiikan tallentamiseen on melko yleinen käytäntö, mutta tiedostopolku muutettaisiin mihin tahansa sivustollesi sopivaan.

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 alt-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, että myöskään he eivät ”näe” kuvaa), sinun ei pidä kirjoittaa vaihtoehtoista tekstiä valitaksesi vain hakukoneille. 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, että alt-teksti palvelee ensisijaista tarkoitustaan ​​ilmoittamalla, mikä kuva on kaikille, jotka eivät näe grafiikkatiedostoa.

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:

WIDTH

>

ja

HEIGHT

>

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