HTML img tags tiek izmantots, lai tīmekļa lapā parādītu attēlu. HTML img tags ir tukšs tags, kurā ir tikai atribūti, noslēdzošie tagi HTML attēla elementā netiek izmantoti.

Apskatīsim HTML attēla piemēru.

 <h2>HTML Image Example</h2> <img src="//techcodeview.com/img/html-tutorial/39/html-image.webp" alt="Good Morning Friends"> 

Izvade:

HTML img taga atribūti

src un alt ir svarīgi HTML img taga atribūti. Visi HTML attēla tagu atribūti ir norādīti zemāk.

1) src

Tas ir nepieciešams atribūts, kas raksturo attēla avotu vai ceļu. Tas norāda pārlūkprogrammai, kur meklēt attēlu serverī.

Attēla atrašanās vieta var būt tajā pašā direktorijā vai citā serverī.

2) viss

Atribūts alt definē attēla alternatīvu tekstu, ja to nevar parādīt. Alt atribūta vērtība apraksta attēlu vārdos. Atribūts alt tiek uzskatīts par piemērotu potenciālajam SEO.

3) platums

Tas ir neobligāts atribūts, ko izmanto, lai norādītu attēla platumu. Tagad tas nav ieteicams. Platuma atribūta vietā ir jāizmanto CSS.

4) augstums

Tas ir h3 attēla augstums. HTML augstuma atribūts atbalsta arī iframe, attēla un objekta elementus. Tagad tas nav ieteicams. Augstuma atribūta vietā ir jāizmanto CSS.

Augstuma un platuma atribūta izmantošana ar img tagu

Jūs esat iemācījušies, kā ievietot attēlu savā tīmekļa lapā, tagad, ja mēs vēlamies attēlam piešķirt kādu augstumu un platumu atbilstoši mūsu prasībām, mēs varam iestatīt to ar attēla augstuma un platuma atribūtiem.

Piemērs:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Izvade:

Piezīme. Vienmēr mēģiniet ievietot attēlu ar augstumu un platumu, pretējā gadījumā tas var mirgot, kad tiek rādīts tīmekļa lapā.

Alt atribūta izmantošana

Mēs varam izmantot alt atribūtu ar tagu. Tas parādīs alternatīvu tekstu, ja attēlu nevar parādīt pārlūkprogrammā. Šis ir alt atribūta piemērs:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Izvade:

Kā iegūt attēlu no cita direktorija/mapes?

Lai tīmeklī ievietotu attēlu, šim attēlam ir jāatrodas tajā pašā mapē, kurā ievietojāt HTML failu. Bet, ja kādā gadījumā attēls ir pieejams citā direktorijā, varat piekļūt attēlam šādi:

Iepriekš minētajā paziņojumā mēs esam ievietojuši attēlu lokālajā diskā E ------> attēlu mapē ------> img/html-tutorial/39/html-image-2.webp.

Piezīme. Ja src URL būs nepareizs vai uzrakstīts nepareizi, tas nerādīs jūsu attēlu tīmekļa lapā, tāpēc mēģiniet ievietot pareizo URL.

Izmantot tagu kā saiti

Mēs varam arī saistīt attēlu ar citu lapu vai mēs varam izmantot attēlu kā saiti. Lai to izdarītu, ielieciet tagu iekšpusē tagu.

Piemērs:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp"> 

Izvade:

Atbalsta pārlūkprogrammas

Elements	Chrome	IE	Firefox	Opera	Safari
	Jā	Jā	Jā	Jā	Jā