HTML IMG žyma reguliuoja paveikslėlių ir kitų statinių grafinių objektų įterpimą į tinklalapį. Ši bendroji žyma palaiko keletą privalomų ir neprivalomų atributų, kurie suteikia daugiau galimybių kurti patrauklią, į vaizdą orientuotą svetainę.
Visiškai suformuotos HTML IMG žymos pavyzdys atrodo taip:
Būtini IMG žymos atributai
src = "/ kelias / į / image.jpg"
Vienintelis atributas, kurio reikia norint atvaizdą rodyti tinklalapyje, yra src atributas. Šis atributas identifikuoja rodomo vaizdo failo pavadinimą ir vietą.
alt = "Vaizdo aprašymas"
Norėdami parašyti galiojančius XHTML ir HTML4, alt taip pat reikalingas atributas. Šis atributas naudojamas ne vizualioms naršyklėms pateikti vaizdą apibūdinantį tekstą. Naršyklės pateikia alternatyvų tekstą skirtingais būdais. Kai kurie rodo jį kaip iššokantį langą, kai užvedate pelės žymeklį virš vaizdo, kiti rodo jį savybėse, kai dešiniuoju pelės mygtuku spustelėkite paveikslėlį, o kai kurie jo visai nerodo.
Naudoti alt tekstas pateikti papildomos informacijos apie vaizdą, nesusijusios ar nesvarbios tinklalapio tekstui. Tačiau nepamirškite, kad ekrano skaitytuvuose ir kitose tik teksto naršyklėse tekstas bus skaitomas eilutėje su likusiu puslapio tekstu. Kad išvengtumėte painiavos, vietoj „logotipo“ naudokite aprašomąjį alternatyvųjį tekstą, kuriame sakoma (pavyzdžiui) „Apie interneto dizainą ir HTML“.
alt tekstas taip pat būtinas SEO (Search Engine Optimization). Robotai, kuriuos paieškos sistemos, pvz., „Google“, naudoja svetainių turiniui tirti, negali „matyti“ vaizdų. Jie remiasi alt tekstą, kad nustatytumėte, kas yra puslapyje.
Į HTML5, alt atributas ne visada reikalingas, nes galite naudoti a antraštė pridėti prie jo daugiau aprašymo. Taip pat galite naudoti šį atributą nurodyti ID, kuriame yra visas aprašas:
aria-descriptionby = "Vaizdo aprašymas"
„Alt“ teksto taip pat nereikia, jei vaizdas yra vien dekoratyvinis, pvz., Paveikslėlis tinklalapio viršuje arba piktogramos. Bet jei nesate tikras, kiekvienam atvejui įtraukite alternatyvųjį tekstą.
Atributų dydžio nustatymas
plotis = "500"ir.
aukštis = "500"Priklausomai nuo jūsų dizaino, naudokite. ūgio ir. plotis
Paprastai norite, kad vaizdo dydis būtų nustatytas jūsų CSS. Dažniausiai tai bus paveikslėlio pirminio sudėtinio rodinio matmenų rezultatas. Šis metodas suteikia didžiausią lankstumą prisitaikant prie skirtingų dydžių ekrano. Tačiau vis dar yra atvejų, kai galite nurodyti vaizdo matmenis kaip HTML atributus.
Kiti naudingi IMG atributai
title = "Aprašomasis vaizdo pavadinimas"Šis atributas yra visuotinis atributas, kurį galima pritaikyti bet kuriam. HTML elementas. Be to,. pavadinimas
Dauguma naršyklių palaiko pavadinimas atributas, tačiau jie tai daro skirtingais būdais. Kai kurie pateikia tekstą kaip iššokantįjį langą, kiti - informaciniuose ekranuose, kai vartotojas dešiniuoju pelės mygtuku spustelėja vaizdą. Galite naudoti pavadinimas atributas parašyti papildomos informacijos apie vaizdą, tačiau nesiskaitykite, kad ši informacija nebus paslėpta arba matomas. Jūs tikrai neturėtumėte to naudoti paslėpdami paieškos sistemų raktinius žodžius. Už šią praktiką dabar baudžia dauguma paieškos sistemų.
usemap = ""ir.
ismap = ""Šie du atributai nustato kliento pusę () ir serverio pusę (ISMAP) vaizdiniai žemėlapiai
longdesc = "Išsamesnis jūsų vaizdo aprašymas"The. longdesc
Nebenaudojami ir pasenę IMG atributai
Keletas atributų HTML5 pasenę arba HTML4 nebenaudojami. Norėdami gauti geriausią HTML, turėtumėte rasti kitų sprendimų, užuot naudoję šiuos atributus.
kraštas = "3"
lygiuoti = "kairė"Šis atributas leidžia įdėti vaizdą į tekstą ir leisti aplinkui tekėti. Galite sulygiuoti vaizdą į dešinę arba į kairę. Jis buvo nebenaudojamas. plūduriuojantis CSS turtas
hspcace = "10"ir.
vspace = "10"The. „hspace“ ir. vspace atributai horizontaliai prideda baltą tarpą ( „hspace“) ir vertikaliai ( vspace
lowsrc = "/ kelias / į / lowres.jpg"The. lowsrc atributas pateikia alternatyvų vaizdą, kai jūsų vaizdo šaltinis yra toks didelis, kad jis atsisiunčiamas itin lėtai. Pvz., Galite turėti 500 KB dydžio vaizdą, kurį norite rodyti savo tinklalapyje, tačiau 500 KB parsisiųsti reikės daug laiko. Taigi jūs sukuriate daug mažesnę atvaizdo kopiją, galbūt nespalvotą arba tiesiog labai optimizuotą, ir įdėkite tai į. lowsrc
lowsrc atributas buvo pridėtas prie „Netscape Navigator 2.0“ prie žymos. Tai buvo 1 DOM lygio dalis, bet tada buvo pašalinta iš 2 DOM lygio. Naršyklės palaikymas buvo nenuoseklus šiam atributui, nors daugelis svetainių teigia, kad jį palaiko visos šiuolaikinės naršyklės. Jis nėra nebenaudojamas HTML4 ar pasenęs HTML5, nes niekada nebuvo oficiali abiejų specifikacijų dalis.
Venkite naudoti šį atributą, o optimizuokite vaizdus, kad jie būtų greitai įkeliami. Puslapio įkėlimo greitis yra kritinė gero interneto dizaino dalis, o dideli vaizdai labai sulėtina puslapius - net jei naudojate lowsrc atributas.