Pasižiūrėkite į bet kurį tinklalapį internete šiandien ir pastebėsite, kad jie dalijasi tam tikrais bendrais bruožais. Vienas iš tų bendrų bruožų yra vaizdai. Tinkami paveikslėliai taip pat prideda svetainės pristatymą. Kai kurie iš šių paveikslėlių, pvz., Įmonės logotipas, padeda kurti svetainę ir prijungti šį skaitmeninį objektą prie jūsų fizinės įmonės.
Norėdami pridėti vaizdą, piktogramą ar grafiką į savo tinklalapį, turite naudoti žymą puslapio HTML kode. IMG žymeles įdėkite į HTML, kur norite rodyti grafiką. Interneto naršyklė, kuri pateikia puslapio kodą, pakeis šią žymę atitinkama grafika, kai tik bus peržiūrėtas puslapis. Toliau grįžtant prie mūsų įmonės logotipo pavyzdžio, galite pridėti šį paveikslėlį į savo svetainę:
Vaizdo atributai
Žiūrėdami aukščiau esantį HTML kodą, pamatysite, kad elementas apima du atributus. Kiekvienas iš jų yra reikalingas vaizdui.
Pirmasis atributas yra "src". Tai iš tikrųjų yra vaizdo failas, kurį norite rodyti puslapyje. Pavyzdyje naudojame failą "logo.png". Tai yra grafika, kurią žiniatinklio naršyklė rodė, kai ji pateikia svetainę.
Taip pat pastebėsite, kad iki šio failo pavadinimo pridėjome papildomos informacijos "/ images /". Tai failo kelias. Pirmasis įstrižainės briauna pasako serverį ieškoti katalogo šaknies. Tada bus ieškoma aplanko "vaizdai" ir galiausiai failas "logo.png". Naudojant aplanką, vadinamą "vaizdais", saugoti visą svetainės grafiką, yra gana įprasta praktika, tačiau jūsų failo kelias būtų pakeistas į bet kurį, kuris yra tinkamas jūsų svetainei.
Antras reikalaujamas atributas yra "alt" tekstas. Tai yra "alternatyvusis tekstas", kuris rodomas, jei vaizdas dėl kokios nors priežasties nepavyksta įkelti. Šis tekstas, kuris mūsų pavyzdyje yra "Įmonės logotipas", bus rodomas, jei vaizdas nepavyks įkelti. Kodėl taip atsitiktų? Įvairias priežastis:
- Neteisingas failo kelias
- Neteisingas failo vardas arba klaidos pranešimas
- Perdavimo klaida
- Failas buvo ištrintas iš serverio
Tai yra tik keletas galimybių, kodėl mūsų nurodytas vaizdas gali būti praleistas. Tokiais atvejais vietoj jo būtų rodomas mūsų alt tekstas.
Alt tekstą taip pat naudoja ekrano skaitymo programinė įranga, kad "skaityti" vaizdą lankytojui, kuris turi regos sutrikimą. Kadangi jie nemato tokio vaizdo kaip mes, šis tekstas leidžia jiems sužinoti, kas yra pats paveikslėlis. Štai kodėl reikalingas alt tekstas ir kodėl jis turi aiškiai nurodyti, koks yra vaizdas!
Paprastai alt-teksto nesusipratimas yra tas, kad jis skirtas paieškos sistemoms. Tai netiesa. Nors "Google" ir kiti paieškos varikliai skaito šį tekstą, norėdami nustatyti, koks atvaizdas yra (atminkite, kad jie taip pat negali "matyti" jūsų vaizdo), negalima rašyti alt teksto, kad būtų galima apskųsti tik paieškos sistemas. Autorius aiškus alt tekstas skirtas žmonėms. Jei taip pat galite pridėti keletą raktinių žodžių į žymą, kuri kreipiasi į paieškos variklius, viskas gerai, bet visada įsitikinkite, kad alt tekstas tarnauja jo pagrindiniam tikslui, nurodydamas, koks yra vaizdas visiems, kurie nerodo grafikos failo.
Kiti atributai
IMG žyma taip pat turi du kitus atributai, kuriuos galbūt matote naudodami, kai į savo tinklalapį įtraukiate grafiką - plotis ir aukštis. Pvz., Jei naudojate WYSIWYG redaktorių, pvz., "Dreamweaver", jis automatiškai prideda šią informaciją jums. Štai pavyzdys:
Atributai WIDTH ir HEIGHT nurodo naršyklę vaizdo dydį. Tada naršyklė tiksliai žino, kiek išdėstymo vietos yra, ir gali pereiti prie kito elemento puslapyje, kol atsisiunčia vaizdas. Problema naudojant šią informaciją jūsų HTML yra tai, kad ne visada norite, kad jūsų vaizdas būtų rodomas tokio paties dydžio. Pvz., Jei turite jautrią svetainę, kurios dydis keičiamas atsižvelgiant į lankytojų ekraną ir įrenginio dydį, taip pat norėsite, kad jūsų vaizdai būtų lankstūs. Jei nurodote savo HTML, koks yra fiksuoto dydžio dydis, jums bus labai sunku pasižymėti jautriais CSS žiniasklaidos užklausomis . Dėl šios priežasties ir norint išlaikyti stiliaus atskyrimą (CSS) ir struktūrą (HTML), rekomenduojame NEPRIDĖKTI jūsų HTML kodui priskirti pločio ir aukščio atributus.
Viena pastaba: jei išjungsite šias dydžio instrukcijas ir nenurodysite CSS dydžio, naršyklė bet kuriuo atveju rodys vaizdą pagal jo numatytąjį, vietinį dydį.
Redagavo Jeremy Girard