Vaata mis tahes veebileht täna veebis ja märkate, et neil on teatud ühised asjad. Üks neist jagatud tunnustest on pildid. Õiged pildid lisavad veebisaidi esitlusele nii palju. Mõned neist piltidest, näiteks ettevõtte logo, aitavad seda saiti brändida ja ühendavad selle digitaalse üksuse oma füüsilise ettevõttega.
Kuidas lisada veebilehele pilti HTML-i abil
Veebilehele pildi, ikooni või graafika lisamiseks peate lehe HTML-koodis kasutama silti. Sa paned.
IMGoma sildil. HTML täpselt seal, kus soovite graafikat kuvada. Veebibrauser, mis renderdab lehe koodi, asendab selle märgendi sobiva graafikaga, kui leht on vaadatud. Tulles tagasi meie ettevõtte logo näite juurde, saate selle pildi oma saidile lisada järgmiselt:
SRC atribuut
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 saidi renderdamisel kuvaks.
Samuti märkate, et enne seda failinime lisasime lisateavet "/ images /". See on faili tee. Esialgne kaldkriips käsib serveril uurida kataloogi juuri. Seejärel otsib ta kausta nimega "pildid" ja lõpuks faili nimega "logo.png". Kausta "pildid" kasutamine saidi kogu graafika salvestamiseks on üsna tavaline tava, kuid teie faili tee muudetaks teie saidi jaoks asjakohaseks.
Alt-atribuut
Teine nõutav atribuut on tekst "alt". See on "asendustekst", mida näidatakse, kui pilti mingil põhjusel ei õnnestu laadida. Seda teksti, mis meie näites loeb "Ettevõtte logo", kuvatakse, kui pilti ei õnnestu laadida. Miks see juhtuks? Erinevatel põhjustel:
- Vale failitee
- Vale failinimi või õigekirjaviga
- Edastusviga
- Fail kustutati serverist
Need on vaid mõned võimalused, miks meie määratud pilt võib puududa. Sellistel juhtudel kuvatakse selle asemel meie alt-tekst.
Milleks kasutatakse Alt-teksti?
Alt-teksti kasutab ekraanilugeja tarkvara ka pildi "lugemiseks" nägemispuudega külastajale. Kuna nad ei näe pilti nagu meie, annab see tekst neile teada, mis pilt ise on. Sellepärast on vaja alt-teksti ja miks peaks see selgelt välja ütlema, mis pilt on!
Alt-teksti levinud vääritimõistmine on see, et see on mõeldud otsingumootorite jaoks. See ei ole tõsi. Kuigi Google ja muud otsingumootorid loevad seda teksti, et teha kindlaks, mis pilt on (pidage meeles, nad ei näe ka teie pilti), siis ei tohiks kirjutada alternatiivset teksti, et paluda ainult otsingut mootorid. Autori selge alternatiivtekst, mis on mõeldud inimestele. Kui saate sildile lisada ka mõned märksõnad, mis meeldivad otsingumootoritele, on see tore, kuid veenduge alati alt-tekst täidab oma peamist eesmärki, öeldes, milline on pilt kõigile, kes graafikat ei näe faili.
Muud pildiatribuudid
The.
IMG.
märgendil on ka kaks muud atribuuti, mida võite oma veebisaidile graafika lisamisel kasutada - laius ja kõrgus. Näiteks kui kasutate sellist WYSIWYG-redaktorit nagu Dreamweaver, lisab see selle teabe teie jaoks automaatselt. Siin on näide:
The.
LAIUS.
ja.
KÕRGUS.
atribuudid ütlevad brauserile pildi suuruse. Seejärel teab brauser täpselt, kui palju ruumi paigutuses eraldada, ja saab pildi allalaadimise ajal liikuda lehe järgmise elemendi juurde. Selle teabe HTML-is kasutamise probleem on see, et te ei pruugi alati soovida, et teie pilti kuvatakse täpselt selles suuruses. Näiteks kui teil on a.
tundlik veebisait
kelle suurus muutub vastavalt külastajate ekraanile ja seadme suurusele, soovite ka, et teie pildid oleksid paindlikud. Kui ütlete oma HTML-is, milline on fikseeritud suurus, on teil tundlik reageerimisvõimega alistada.
CSS-i meediumipäringud
. Sel põhjusel ning stiili (CSS) ja struktuuri (HTML) lahususe säilitamiseks on soovitatav, et EI lisaks HTML-koodile laiuse ja kõrguse atribuute.
Üks märkus: kui jätate need suuruse määramise juhised välja ja ei määra CSS-is suurust, näitab brauser pilti ikkagi vaikimisi.
Toimetanud Jeremy Girard