HTML IMG tagu izmantošana attēliem un objektiem
HTML IMG tags regulē attēlu un citu statisku grafisko objektu ievietošanu tīmekļa lapā. Šis kopīgais tags atbalsta vairākus obligātus un izvēles atribūtus, kas bagātina jūsu spēju veidot aizraujošu, uz attēlu orientētu tīmekļa vietni.
Pilnīgi izveidota HTML IMG taga piemērs izskatās šādi:
Obligātie IMG tagu atribūti
SRC Vienīgais atribūts, kas jums nepieciešams, lai iegūtu attēlu, kas tiek parādīts tīmekļa lapā, ir SRC atribūts. Šis atribūts identificē attēlojamā attēla faila nosaukumu un atrašanās vietu.
ALT Lai rakstītu derīgu XHTML un HTML4, ir nepieciešams arī ALT atribūts. Šo atribūtu izmanto, lai nonvisual pārlūkprogrammām nodrošinātu tekstu, kas apraksta attēlu. Pārlūkprogrammas parāda alternatīvo tekstu dažādos veidos. Daži parāda to kā uznirstošo logu, kad peli novietojat peles kursoru virs attēla, bet citi to parāda rekvizītos, ja ar peles labo pogu noklikšķiniet uz attēla, un daži to nerāda vispār.
Izmantojiet alt tekstu, lai sniegtu papildu informāciju par attēlu, kas nav būtisks vai būtisks attiecībā uz tīmekļa lapas tekstu. Bet atcerieties, ka ekrāna lasītājos un citos tikai teksta pārlūkos teksts tiks lasīts inline kopā ar pārējo tekstu lapā. Lai izvairītos no neskaidrības, izmantojiet tikai aprakstošu alt tekstu, kas saka (piemēram), "Par Web Dizains un HTML", nevis vienkārši "logotips".
HTML5 atribūts ALT ne vienmēr ir nepieciešams, jo jūs varat izmantot parakstu, lai tam pievienotu citu aprakstu. Jūs varat arī izmantot atribūtu ARIA-DESCRIBEDBY, lai norādītu ID, kas satur pilnu aprakstu.
Alt teksts nav nepieciešams arī tad, ja attēls ir tīri dekoratīvs, piemēram, grafika tīmekļa lapas augšdaļā vai ikonas. Bet, ja neesat pārliecināts, iekļaujiet alt tekstu tikai gadījumā.
Ieteicamie IMG atribūti
Platums un augstums . Jums vajadzētu ieiet ieradumā vienmēr izmantot atribūtus WIDTH un HEIGHT. Un jums vienmēr vajadzētu izmantot reālo izmēru, nevis mainīt attēlus ar pārlūku.
Šie atribūti paātrina lapas noformējumu, jo pārlūkprogramma var piešķirt vietu attēla dizainam, un pēc tam turpināt lejupielādēt pārējo saturu, nevis gaidīt, kamēr tiek lejupielādēts viss attēls.
Citi noderīgi IMG atribūti
NOSAUKUMS Atribūts ir globāls atribūts, ko var pielietot jebkuram HTML elementam . Turklāt TITLE atribūts ļauj jums pievienot papildu informāciju par attēlu.
Lielākā daļa pārlūkprogrammu atbalsta TITLE atribūtu, bet viņi to veic dažādos veidos. Daži parāda tekstu kā uznirstošo logu, bet citi to parāda informācijas ekrānos, kad lietotājs ar labo klikšķi uz attēla. Jūs varat izmantot atribūtu TITLE, lai rakstītu papildu informāciju par attēlu, bet neuzskatu, ka šī informācija nav slēpta vai redzama. Jūs noteikti noteikti to neizmantojat, lai paslēptu atslēgvārdus meklētājprogrammām. Šo praksi tagad soda vairākums meklētājprogrammu.
USEMAP un ISMAP . Šie divi atribūti, kas tiek iestatīti uz klienta puses () un servera puses (ISMAP) attēlu, tiek attēloti jūsu attēlos.
LONGDESC . Atribūts atbalsta URL, lai iegūtu garāku attēla aprakstu. Šī funkcija ļauj jūsu attēliem kļūt pieejamākiem.
Novecojuši un novecojuši IMG atribūti
Vairāki atribūti HTML5 formātā tagad ir novecojuši vai HTML4 formātā novecojuši. Lai iegūtu vislabāko HTML, jums vajadzētu atrast citus risinājumus, nevis izmantot šos atribūtus.
ROBEŽA . Atribūts nosaka platumu pikseļos jebkurā malā ap attēlu. HTML4 formātā tas ir novecojis par labu CSS, un HTML5 ir novecojis.
ALIGN Šis atribūts ļauj ievietot attēlu iekšā tekstā un tajā aprakstīt teksta plūsmu. Jūs varat pielāgot attēlu pa labi vai pa kreisi. Tas ir novecojis par labu peldošā CSS īpašumam HTML4 formātā un HTML5 formātā ir novecojis.
HSPACE un VSPACE . HSPACE un VSPACE atribūti pievieno balto laukumu horizontāli (HSPACE) un vertikāli (VSPACE). Balta vieta tiks pievienota grafikas abām pusēm (augšējā un apakšējā vai kreisajā un labajā pusē), tādēļ, ja vienai pusei vajag tikai vietu, jums vajadzētu izmantot CSS. Šie atribūti HTML4 versijā nav novecojuši par labu CSS īpašuma īpašībām, un HTML5 ir novecojuši.
LOWSRC . LOWSRC atribūts nodrošina alternatīvu attēlu, ja jūsu attēla avots ir tik liels, ka tas tiek lejupielādēts ļoti lēni. Piemēram, jums var būt 500KB attēls, kuru vēlaties parādīt savā tīmekļa lapā, bet 500KB varētu paiet ilgs laiks, lai to lejupielādētu. Tātad jūs izveidojat daudz mazāku attēla kopiju, iespējams, melnā un baltā krāsā vai vienkārši ļoti optimizēta, un ievietojiet to LOWSRC atribūtā. Mazāks attēls vispirms tiks lejupielādēts un parādīts, un tad, kad parādīsies lielāks attēls, tas nomainīs zemu avotu.
LOWSRC atribūts tika pievienots IMG tagam Netscape Navigator 2.0. Tas bija daļa no DOM 1. līmeņa, bet pēc tam tika noņemts no DOM 2. līmeņa. Šim atribūtam ir bijušais pārlūka atbalsts, lai gan daudzas vietnes apgalvo, ka to atbalsta visas mūsdienu pārlūkprogrammas. HTML5 formātā tas nav novecojis vai novecojis HTML5, jo tā nekad nav bijusi oficiāla neviena no specifikācijām.
Izvairieties no šī atribūta izmantošanas un tā vietā optimizējiet savus attēlus, lai tie ātri ielādētuos. Lapas ielādes ātrums ir laba Web dizaina sastāvdaļa, un lielie attēli lēni lejup uz leju ārkārtīgi - pat ja jūs izmantojat LOWSRC atribūtu.