Vaadake veebisaiti täna igal veebisaidil ja märkate, et neil on ühised kindlad asjad. Üks neist jagatud tunnustest on pilt. Õiged pildid lisavad veebisaidi esitusele nii palju. Mõned neist piltidest, nagu ettevõtte logo, aitavad saidil kaubamärki luua ja ühendada selle digitaalse üksuse oma füüsilise ettevõttega.
Pildi, ikooni või graafika lisamiseks oma veebilehele peate kasutama märgendit lehe HTML-koodis. Asetage IMG-i sild HTML-i täpselt sellesse, kuhu soovite graafikat kuvada. Veebibrauser, mis muudab lehe koodi, asendab selle märgendi vastava graafikuga, kui lehekülg on vaadatud. Meie ettevõtte logo kuvamise juurde naasmiseks on siin võimalik lisada see pilt oma saidile:
Kujutise atribuudid
Vaadates ülaltoodud HTML-koodi, näete, et element sisaldab kahte atribuuti. Igaüks neist on pildi jaoks vajalik.
Esimene atribuut on "src". See on sõna otseses mõttes pildifail, mida soovite lehel kuvada. Meie näites kasutame faili nimega "logo.png". See on graafika, mida veebibrauser kuvab saidi kujundamisel.
Märkate ka seda, et enne selle faili nime lisasime lisateavet "/ images /". See on faili tee. Esialgne kaldkriips annab serverile ülevaate kataloogi juurest. Seejärel otsitakse kausta nimega "pilte" ja lõpuks faili "logo.png". Saidi graafika salvestamiseks mõeldud kausta nimega "pilte" on üsna tavaline praktika, kuid teie faili tee muudetakse nii, et see oleks teie saidil asjakohane.
Teine nõutav atribuut on alt tekst. See on "alternatiivne tekst", mis kuvatakse siis, kui pilt mingil põhjusel ei laadita. Kui pilt ei laadita, kuvatakse see tekst, mis meie näites loeb "Ettevõtte logo". Miks see nii juhtub? Erinevad põhjused:
- Vigane faili tee
- Vale failinimi või valesti kirjutamine
- Edastusviga
- Fail kustutati serverist
Need on vaid mõned võimalused, miks meie määratud pilt võib puududa. Sellistel juhtudel kuvatakse selle asemel alt tekst.
Alt teksti kasutatakse ka ekraanilugeja tarkvara abil, et "lugeda" pilti nägemisega seotud külastajatele. Kuna nad ei näe pilti nagu me teeme, võimaldab see tekst neile teada, mis kujutis ise on. Sellepärast on alt tekst vajalik ja miks peaks see selgelt märkima, mis kujutis on!
Alt-teksti tavaline väärarusaam on see, et see on mõeldud otsingumootori eesmärkidel. See ei ole tõsi. Kuigi Google ja teised otsingumootorid loevad selle teksti, et määrata, milline pilt on (meeles, et nad ei saa ka teie pilti "näha"), ei tohiks sa kirjutada alt teksti, et vaid otsimootoritele edasi kaevata. Autor selge alt tekst, mis on mõeldud inimestele. Kui saate lisada ka otsingumootoritele pöördumiseks mõne märksõna, siis peate alati veenduma, et alt tekst teenib peamist eesmärki, märkides, milline pilt on mõeldud kõigile, kes ei näe graafika faili.
Muud atribuudid
IMG-sildil on ka kaks muud atribuuti, mida võite näha, kui kasutate oma veebilehel graafikat - laiust ja kõrgust. Näiteks kui kasutate WYSIWYG-redaktorit nagu Dreamweaver, lisab see automaatselt teile selle teabe. Siin on näide:
Atribuudid WIDTH ja HEIGHT näitavad brauseri kujutise suurust. Seejärel teab brauseris täpselt, kui palju paigutust paigutada, ja see võib pilti allalaadimise ajal edasi liikuda järgmisele lehele. Selle teabe kasutamine HTML-is on see, et te ei pruugi alati soovida, et teie pilt kuvataks selle täpse suurusega. Näiteks kui teil on reageeriv veebisait, mille suuruse muutused põhinevad külastajate ekraanil ja seadme suurusel, siis soovite, et teie pildid oleksid paindlikud. Kui märkate oma HTML-is, et kindlaksmääratud suurus on, siis on teil raske vastata CSS-i meediumipäringutega . Sel põhjusel ja säilitamaks stiili (CSS) ja struktuuri (HTML) eraldamist, on soovitatav, et te ei lisa HTML-koodi laiuse ja kõrguse atribuute.
Üks märkus: kui te jätate need suuruse juhised ära ja ei määra CSS-i suurust, näitab brauser ikkagi vaikimisi vaikimisi pilti.
Redigeeris Jeremy Girard