Notkun HTML IMG merkisins fyrir myndir og hluti
HTML IMG merkið felur í sér að myndir og aðrar truflanir grafíkar hlutir eru settar inn á vefsíðu. Þetta sameiginlega merki styður nokkrar lögboðnar og valfrjálsar eiginleikar sem bæta ríkulega við hæfni þína til að hanna áhugaverðan, ímyndaðan vef.
Dæmi um fullbúið HTML IMG tag lítur svona út:
Nauðsynlegir eiginleikar IMG merki
SRC. Eina eigindin sem þú þarft til að fá mynd sem birtist á vefsíðu er SRC eiginleiki. Þessi eiginleiki auðkennir heiti og staðsetningu myndarskráarinnar sem birtist.
ALT. Til að skrifa gild XHTML og HTML4 er ALT eigindi einnig krafist. Þessi eiginleiki er notaður til að veita ósýnilegum vöfrum með texta sem lýsir myndinni. Vafrar sýna aðra texta á mismunandi vegu. Sumir sýna það sem sprettiglugga þegar þú setur músina yfir myndina, aðrir sýna það í eiginleikum þegar þú hægrismellt á myndina og sumir sýna það ekki yfirleitt.
Notaðu alt textann til að gefa viðbótarupplýsingar um myndina sem eru ekki viðeigandi eða mikilvæg fyrir texta vefsíðunnar. En mundu að í skjálesendum og öðrum vafra sem aðeins eru textar verða textinn lesinn inn í textann á síðunni. Til að forðast rugling skaltu nota lýsandi alt texta sem segir (til dæmis), "Um vefhönnun og HTML" í staðinn fyrir bara "merki".
Í HTML5 er ekki alltaf krafist ALT eiginleiki, því þú getur notað forskrift til að bæta við fleiri lýsingu við það. Þú getur einnig notað eiginleiki ARIA-LÝSINGAR til að tilgreina auðkenni sem inniheldur fulla lýsingu.
Ekki er nauðsynlegt að nota allt texta ef myndin er eingöngu skreytingar, svo sem grafík efst á vefsíðu eða táknum. En ef þú ert ekki viss skaltu innihalda alt texta bara ef þú vilt.
Mælt IMG eiginleiki
Breidd og hæð . Þú ættir að komast í vana að nota alltaf WIDTH og HEIGHT eiginleika. Og þú ættir alltaf að nota raunverulegan stærð og ekki breyta stærð myndarinnar með vafranum.
Þessir eiginleikar flýta fyrir flutningi síðunnar vegna þess að vafrinn getur úthlutað plássi í hönnuninni fyrir myndina og síðan haltu áfram að hlaða niður restinni af innihaldi frekar en að bíða eftir að allt myndin sé hlaðið niður.
Aðrar gagnlegar IMG eiginleiki
TITLE . Eiginleiki er alþjóðlegt eiginleiki sem hægt er að nota á hvaða HTML-einingu sem er . Þar að auki leyfir eiginleiki TITLE þér að bæta við frekari upplýsingum um myndina.
Flestir vafrar styðja eiginleiki TITLE, en þeir gera það á mismunandi vegu. Sumir sýna textann sem sprettiglugga á meðan aðrir sýna það í upplýsingaskjáum þegar notandinn smellir rétt á myndinni. Þú getur notað TITLE eiginleiki til að skrifa viðbótarupplýsingar um myndina, en ekki treyst að þessar upplýsingar séu annað hvort falin eða sýnileg. Þú ættir örugglega ekki að nota þetta til að fela leitarorð fyrir leitarvélar. Þetta starf er nú refsað af flestum leitarvélum.
USEMAP og ISMAP . Þessir tveir eiginleikar setja myndkort á viðskiptavinarhlið () og miðlara-hlið (ISMAP) á myndirnar þínar.
LONGDESC . Eiginleikinn styður vefslóðir í lengri lýsingu á myndinni. Þessi eiginleiki gerir myndirnar þínar aðgengilegar.
Ógilt og úrelt IMG eiginleiki
Nokkrir eiginleikar eru nú úreltar í HTML5 eða úr gildi í HTML4. Fyrir bestu HTML, ættirðu að finna aðrar lausnir í stað þess að nota þessar eiginleikar.
BORDER . Eiginleikinn skilgreinir breiddina í punktum af hvaða landamærum sem er í kringum myndina. Það hefur verið vanrækt í þágu CSS í HTML4 og er úreltur í HTML5.
ALIGN . Þessi eiginleiki gerir þér kleift að setja inn mynd inni í textanum og flýta textanum um það. Þú getur stillt myndina til hægri eða vinstri. Það hefur verið sviptur í þágu flotts CSS eignarinnar í HTML4 og er úreltur í HTML5.
HSPACE og VSPACE . HSPACE og VSPACE eiginleika bætast hvítt rými lárétt (HSPACE) og lóðrétt (VSPACE). Hvítt rými verður bætt við báðar hliðar grafíkarinnar (efst og neðst eða til vinstri og hægri), þannig að ef þú þarft aðeins pláss á annarri hliðinni skaltu nota CSS. Þessir eiginleikar hafa verið fjarlægðir í HTML4 í þágu CSS eignarinnar, og þau eru úreltur í HTML5.
LOWSRC . The LOWSRC eigindi veitir annað mynd þegar mynd uppspretta þinn er svo stór að það sækir mjög hægt. Til dæmis gætir þú fengið mynd sem er 500kB sem þú vilt birta á vefsíðunni þinni, en 500KB myndi taka langan tíma að hlaða niður. Þannig að þú býrð til miklu minni eintak af myndinni, kannski í svörtu og hvítu eða bara mjög bjartsýni og setti það í LOWSRC eiginleiki. Smærri myndin mun hlaða niður og birta fyrst, og þá þegar stærri myndin birtist mun hún skipta um lágmarkssniðið.
LOWSRC eiginleiki var bætt við Netscape Navigator 2.0 við IMG merkið. Það var hluti af DOM stigi 1 en var þá fjarlægt úr DOM stigi 2. Browser stuðningur hefur verið sketchy fyrir þessa eiginleika, þó að margir síður halda því fram að það sé studd af öllum nútíma vafra. Það er ekki úrelt í HTML4 eða úreltur í HTML5 vegna þess að það var aldrei opinbert hluti af annaðhvort forskrift.
Forðastu að nota þennan eiginleika og í staðinn fínstilla myndirnar þínar þannig að þær hlaða hratt. Hraða blaðsíðna er mikilvægur hluti af góðri vefhönnun og stórar myndir hægar síður niður gríðarlega - jafnvel þótt þú notar LOWSRC eiginleiki.