Pažvelk į bet kurį tinklo puslapis šiandien internete ir pastebėsite, kad jie dalijasi tam tikrais dalykais. Vienas iš tų bendrų bruožų yra vaizdai. Tinkami vaizdai prideda tiek daug svetainės pristatymo. Kai kurie iš šių vaizdų, pavyzdžiui, įmonės logotipas, padeda susikurti svetainę ir susieti tą skaitmeninį objektą su savo fizine įmone.
Kaip pridėti vaizdą į tinklalapį naudojant HTML
Norėdami pridėti vaizdą, piktogramą ar grafiką prie savo tinklalapio, turite naudoti žymą puslapio HTML kode. Jūs dedate.
IMGžyma jūsų. HTML tiksliai ten, kur norite rodyti grafiką. Puslapio kodą pateikianti žiniatinklio naršyklė pakeis šią žymą atitinkama grafika, kai tik bus peržiūrėtas puslapis. Grįžtant prie mūsų įmonės logotipo pavyzdžio, štai kaip galite pridėti tą vaizdą savo svetainėje:
SRC atributas
Pažvelgę į aukščiau esantį HTML kodą pamatysite, kad elemente yra du atributai. Kiekvienas iš jų reikalingas vaizdui.
Pirmasis atributas yra „src“. Tai tiesiogine to žodžio prasme vaizdo failas, kurį norite rodyti puslapyje. Mūsų pavyzdyje mes naudojame failą, pavadintą "logo.png". Tai grafika, kurią žiniatinklio naršyklė rodys pateikdama svetainę.
Taip pat pastebėsite, kad prieš šį failo pavadinimą pridėjome papildomos informacijos „/ images /“. Tai failo kelias. Pradinis pasvirasis brūkšnys nurodo serveriui ieškoti katalogo šaknies. Tada ji ieškos aplanko pavadinimu „vaizdai“ ir galiausiai failo pavadinimu „logo.png“. Aplanko, vadinamo „vaizdai“, naudojimas visos svetainės grafikos išsaugojimui yra gana įprasta praktika, tačiau failo kelias būtų pakeistas į bet kokį jūsų svetainei aktualų.
Alt atributas
Antrasis reikalingas atributas yra „alt“ tekstas. Tai yra „pakaitinis tekstas“, kuris rodomas, jei paveikslėlio dėl kokių nors priežasčių nepavyksta įkelti. Šis tekstas, kuris mūsų pavyzdyje yra „Įmonės logotipas“, būtų rodomas, jei nepavyktų įkelti vaizdo. Kodėl taip nutiktų? Įvairios priežastys:
- Neteisingas failo kelias
- Neteisingas failo pavadinimas arba rašybos klaida
- Perdavimo klaida
- Failas ištrintas iš serverio
Tai tik kelios galimybės, kodėl gali trūkti mūsų nurodyto vaizdo. Tokiais atvejais vietoj jos bus rodomas mūsų alternatyvusis tekstas.
Kam naudojamas „Alt“ tekstas?
Alt tekstas taip pat naudojamas ekrano skaitytuvo programinėje įrangoje, norint „perskaityti“ vaizdą lankytojui, turinčiam regėjimo sutrikimų. Kadangi jie nemato vaizdo kaip mes, šis tekstas leidžia jiems sužinoti, koks yra pats vaizdas. Štai kodėl reikalingas alternatyvus tekstas ir kodėl jame turėtų būti aiškiai nurodyta, koks yra vaizdas!
Dažnas Alt teksto nesusipratimas yra tas, kad jis skirtas paieškos varikliams. Tai netiesa. Nors „Google“ ir kitos paieškos sistemos skaito šį tekstą, kad nustatytų, koks yra vaizdas (atminkite, jie taip pat negali „pamatyti“ jūsų atvaizdo), neturėtumėte rašyti alternatyvaus teksto, kad patiktumėte tik į paiešką varikliai. Autorius turi aiškų alternatyvų tekstą, skirtą žmonėms. Jei taip pat galite pridėti keletą raktinių žodžių, kurie patrauklūs paieškos sistemoms, tai gerai, bet visada įsitikinkite pagrindinis tekstas atlieka pagrindinį tikslą nurodydamas, koks vaizdas yra tiems, kurie nemato grafikos failą.
Kiti vaizdo atributai
The.
IMG.
žyma taip pat turi du kitus atributus, kuriuos galite pamatyti naudodami įdėdami grafiką į savo tinklalapį - plotį ir aukštį. Pvz., Jei naudojate WYSIWYG redaktorių, pvz., „Dreamweaver“, jis automatiškai prideda šią informaciją jums. Štai pavyzdys:
The.
PLOTIS.
ir.
AUKŠTIS.
atributai nurodo naršyklei vaizdo dydį. Tada naršyklė tiksliai žino, kiek vietos išdėstyme reikia skirti, ir ji gali pereiti prie kito puslapio elemento, kol vaizdas atsisiunčiamas. Naudojant šią informaciją HTML yra problema, kad ne visada norite, kad jūsų vaizdas būtų rodomas tikslaus dydžio. Pavyzdžiui, jei turite.
reaguojanti svetainė
kurių dydis keičiasi atsižvelgiant į lankytojų ekraną ir įrenginio dydį, taip pat norėsite, kad vaizdai būtų lankstūs. Jei HTML nurodysite, koks yra fiksuotas dydis, labai sunku nepaisyti reaguojančio.
CSS medijos užklausos
. Dėl šios priežasties ir norint išlaikyti stiliaus (CSS) ir struktūros (HTML) atskyrimą, rekomenduojama prie savo HTML kodo nepridėti pločio ir aukščio atributų.
Viena pastaba: jei nepaliksite šių dydžio nurodymų ir nenurodysite dydžio CSS, naršyklė vis tiek rodys vaizdą numatytuoju dydžiu.
Redagavo Jeremy Girard