The HTML IMG tags regulē attēlu un citu statisku grafisku objektu ievietošanu tīmekļa lapā. Šis kopīgais tags atbalsta vairākus obligātos un izvēles atribūtus, kas bagātina jūsu spēju izveidot saistošu, uz attēlu orientētu vietni.
Pilnībā izveidota HTML IMG taga piemērs izskatās šādi:
Obligātie IMG tagu atribūti
src = "/ ceļš / uz / image.jpg"
Vienīgais atribūts, kas nepieciešams, lai attēls tiktu parādīts tīmekļa lapā, ir src atribūts. Šis atribūts identificē parādāmā attēla faila nosaukumu un atrašanās vietu.
alt = "Attēla apraksts"
Lai rakstītu derīgu XHTML un HTML4, alt nepieciešams arī atribūts. Šis atribūts tiek izmantots, lai ne-vizuālajām 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 to parāda kā uznirstošo logu, kad jūs novietojat peli virs attēla, citi to parāda īpašībās, kad ar peles labo pogu noklikšķiniet uz attēla, un daži to vispār nerāda.
Izmantojiet alternatīvais teksts sniegt papildu informāciju par attēlu, kas nav būtisks vai svarīgs tīmekļa lapas tekstam. Bet atcerieties, ka ekrāna lasītājos un citās tikai teksta pārlūkprogrammās teksts tiks lasīts vienā rindā ar pārējo lapas tekstu. Lai izvairītos no neskaidrībām, tikai logotipa vietā izmantojiet aprakstošu aizstājošo tekstu, kurā teikts (piemēram) “Par tīmekļa dizainu un HTML”.
The alt teksts ir būtisks arī SEO (Search Engine Optimization). Roboti, kurus meklētājprogrammas, piemēram, Google, izmanto vietņu satura izpētei, nevar "redzēt" attēlus. Viņi paļaujas uz alt tekstu, lai noteiktu, kas atrodas lapā.
In HTML5, alt atribūts ne vienmēr ir nepieciešams, jo jūs varat izmantot a paraksts lai tam pievienotu vairāk apraksta. Varat arī izmantot šo atribūtu, lai norādītu ID, kas satur pilnu aprakstu:
aria-descriptionby = "Attēla apraksts"
Alternatīvais teksts nav vajadzīgs arī tad, ja attēls ir tīri dekoratīvs, piemēram, grafisks Web lapas augšdaļā vai ikonas. Bet, ja neesat pārliecināts, katram gadījumam pievienojiet alternatīvo tekstu.
Atribūtu lieluma noteikšana
platums = "500"un.
augstums = "500"Atkarībā no dizaina, izmantojot. augstums un. platums
Parasti jūs vēlaties, lai attēla izmērs tiktu iestatīts CSS. Biežāk tas notiek attēla vecākā konteinera izmēru rezultātā. Šī pieeja nodrošina vislielāko elastību, pielāgojoties dažādiem ekrāna izmēriem. Tomēr joprojām ir gadījumi, kad jūs vēlaties norādīt attēla izmērus kā HTML atribūtus.
Citi noderīgi IMG atribūti
title = "Attēla aprakstošs nosaukums"Atribūts ir globāls atribūts, ko var pielietot jebkuram. HTML elements. Turklāt. nosaukums
Lielākā daļa pārlūkprogrammu atbalsta nosaukums atribūtu, bet viņi to dara dažādos veidos. Daži attēlo tekstu kā uznirstošo logu, bet citi - informācijas ekrānos, kad lietotājs ar peles labo pogu noklikšķina uz attēla. Jūs varat izmantot nosaukums atribūts, lai rakstītu papildu informāciju par attēlu, taču neņemiet vērā, ka šī informācija tiks paslēpta vai redzams. Jums to noteikti nevajadzētu izmantot, lai paslēptu meklētājprogrammu atslēgvārdus. Par šo praksi tagad soda lielākā daļa meklētājprogrammu.
usemap = ""un.
ismap = ""Šie divi atribūti nosaka klienta pusi () un servera pusi (ISMAP) attēlu kartes
longdesc = "Detalizētāks attēla apraksts"The. longdesc
Novecojuši un novecojuši IMG atribūti
Vairāki atribūti HTML5 ir novecojuši vai HTML4 ir novecojuši. Lai iegūtu vislabāko HTML, jums vajadzētu atrast citus risinājumus, nevis izmantot šos atribūtus.
apmale = "3"
izlīdzināt = "pa kreisi"Šis atribūts ļauj ievietot attēlu teksta iekšpusē un likt tekstam ap to plūst. Attēlu var izlīdzināt pa labi vai pa kreisi. Tā ir novecojusi par labu. float CSS īpašums
hspcace = "10"un.
vspace = "10"The. hspace un. vspace atribūti horizontāli pievieno atstarpi ( hspace) un vertikāli ( vspace
lowsrc = "/ path / to / lowres.jpg"The. lowsrc atribūts nodrošina alternatīvu attēlu, ja attēla avots ir tik liels, ka tas tiek lejupielādēts ārkārtīgi lēni. Piemēram, jums var būt attēls, kura lielums ir 500 KB un kuru vēlaties parādīt savā tīmekļa lapā, taču 500 KB lejupielādei būtu vajadzīgs ilgs laiks. Tātad jūs izveidojat daudz mazāku attēla kopiju, iespējams, melnbaltu vai vienkārši optimizētu, un ievietojiet to. lowsrc
The lowsrc atribūts tika pievienots tagam Netscape Navigator 2.0. Tā bija daļa no DOM 1. līmeņa, bet pēc tam tika noņemta no DOM 2. līmeņa. Pārlūka atbalsts šim atribūtam ir bijis neliels, lai gan daudzas vietnes apgalvo, ka to atbalsta visas mūsdienu pārlūkprogrammas. Tas nav novecojis HTML4 vai novecojis HTML5, jo tas nekad nav bijusi oficiāla abu specifikāciju sastāvdaļa.
Izvairieties no šī atribūta izmantošanas, tā vietā optimizējiet savus attēlus, lai tie tiktu ātri ielādēti. Lappušu ielādes ātrums ir kritiska laba web dizaina sastāvdaļa, un lieli attēli lapas ārkārtīgi palēnina - pat ja izmantojat lowsrc atribūts.