HTML

Sawirrada HTML (Images)

Sawirrada ayaa ah qayb muhiim ah oo ka mid ah bogagga shabakadda. Waxay ka dhigaan bogagga kuwo muuqaal ahaan soo jiidasho leh, waxayna ka caawiyaan inay gudbiyaan macluumaadka si wax ku ool ah. HTML waxay isticmaashaa tag-ga <img> si loo geliyo sawirrada bogagga shabakadda.

<img> - Geli Sawir

Tag-ga <img> waxaa loo isticmaalaa in lagu geliyo sawir bogga HTML. Tag-ga <img> waa tag madhan (empty tag), taasoo macnaheedu yahay ma laha tag-xir (closing tag). Sawirka la gelinayo waxaa lagu qeexaa iyadoo la isticmaalayo tilmaamo ku jira tag-ga <img>.

  • <img> (Image): Waxay qeexdaa sawir. Tilmaanta src ayaa loo baahan yahay si loo qeexo dariiqa sawirka.

Qaabka Guud:

HTML

<img src="dariiqa-sawirka">

Tusaale:

HTML

<img src="sawirka.jpg">

Soo-saarista Browserka:

(Sawirka "sawirka.jpg" ayaa ka soo muuqan doona bogga haddii faylka "sawirka.jpg" uu ku jiro galka isku midka ah ee faylka HTML)

Sharaxaadda:

  • Tag-ga <img> wuxuu gelinayaa sawir.
  • Tilmaanta src="sawirka.jpg" waxay qeexaysaa dariiqa (source) sawirka, kiiskan, faylka sawirka ee la yiraahdo "sawirka.jpg". Browserku wuxuu isku dayi doonaa inuu soo dejiyo oo uu muujiyo sawirka faylka dariiqa la qeexay.

src, alt, width, height Attributes

Tag-ga <img> wuxuu leeyahay tilmaamo dhowr ah oo lagu xakameyn karo habdhaqanka sawirka, kuwa ugu muhiimsan waxaa ka mid ah:

src Attribute

  • src (Source): Tilmaanta src ayaa loo baahan yahay tag-ga <img> kasta. Waxay qeexdaa dariiqa (source) sawirka la muujinayo. Qiimaha tilmaanta src wuxuu noqon karaa:
    • URL-ka Absolute (Absolute URL): Si loogu xiriiriyo sawir ku yaal bog kale oo shabakadeed ama ilo online ah oo kale.
    • URL-ka Relative (Relative URL): Si loogu xiriiriyo sawir ku yaal isla bogga shabakadda.

Tusaalooyinka src Attributes:

  • URL-ka Absolute:

    HTML

    <img src="https://www.example.com/sawirka.png">

    Waxay gelinaysaa sawir ka yimaada URL-ka https://www.example.com/sawirka.png.

  • URL-ka Relative:

    HTML

    <img src="sawirrada/sawirka.jpg">

    Waxay gelinaysaa sawir ka yimaada faylka "sawirka.jpg" oo ku yaal galka "sawirrada" ee galka hadda jira ee faylka HTML.

alt Attribute

  • alt (Alternative): Tilmaanta alt ayaa lagu talinayaa tag-ga <img> kasta. Waxay qeexdaa qoraal beddel ah oo sawirka ah. Qoraalka beddelka ah waxaa loo muujiyaa haddii sawirka aan la soo bixi karin (tusaale, sababtoo ah xiriirka ayaa jaban, faylka lama heli karo, ama isticmaaluhu wuu damiyay sawirrada), ama akhristayaasha shaashadda ay isticmaalaan si ay u sharxaan sawirka isticmaalayaasha aragga naafada ka ah. Waa muhiim in la bixiyo qoraal beddel ah oo qeexan oo ku saabsan sawirka.

Tusaale alt Attribute:

HTML

<img src="sawirka.jpg" alt="Sawirka muuqaalka quruxda badan">

Sharaxaadda:

  • Haddii sawirka "sawirka.jpg" aan la soo bixi karin, ama haddii akhristaha shaashadda uu isticmaalayo bogga, qoraalka "Sawirka muuqaalka quruxda badan" ayaa la muujin doonaa ama la akhriyi doonaa.

width iyo height Attributes

  • width: Tilmaanta width waxay qeexdaa ballaca sawirka pixels.
  • height: Tilmaanta height waxay qeexdaa dhererka sawirka pixels.

Tilmaamahaan waxaa loo isticmaali karaa in lagu dejiyo cabbirka sawirka bogga shabakadda. Waxaa fiican in la dejiyo cabbirka sawirka iyadoo la isticmaalayo tilmaamahaan si browserku uu booska saxda ah ugu qoondeeyo sawirka inta bogga la soo dejinayo. Haddii cabbirka aan la dejin, bogga ayaa laga yaabaa inuu isbeddelo inta sawirka la soo dejinayo, taasoo keeni karta khibrad isticmaale oo xun.

Tusaale width iyo height Attributes:

HTML

<img src="sawirka.jpg" alt="Sawirka muuqaalka quruxda badan" width="500" height="300">

Sharaxaadda:

  • Sawirka "sawirka.jpg" waxaa lagu muujin doonaa ballac 500 pixels ah iyo dherer 300 pixels ah.

Ogow: Waxaa fiican in la isticmaalo CSS si loo qaabeeyo cabbirka sawirrada bogagga waaweyn. Tilmaamaha width iyo height waxaa loo isticmaali karaa dejinta cabbirka aasaasiga ah, laakiin CSS waxay bixisaa xakameyn badan oo ku saabsan qaabeynta sawirrada.

Noocyada Sawirka ee Caanka ah

Waxaa jira noocyo badan oo sawir ah oo loo isticmaali karo bogagga shabakadda, kuwa ugu caansan waxaa ka mid ah:

  • JPEG/JPG (Joint Photographic Experts Group): Nooca ugu badan ee loo isticmaalo sawirrada sawirrada, sawirrada adag, iyo sawirrada midabka badan. JPEG waxay isticmaashaa cadaadis khasaare ah (lossy compression), taasoo macnaheedu yahay cabbirka faylka waa la yareyn karaa, laakiin tayada sawirka ayaa laga yaabaa inay yara yaraato. JPEG waxay ku fiican tahay sawirrada sawirrada sababtoo ah waxay taageertaa midabyo badan waxayna si fiican u cadaadin kartaa sawirrada adag.

  • PNG (Portable Network Graphics): Nooc caan ah oo loo isticmaalo sawirrada, logos, icons, iyo sawirrada hufnaanta (transparency). PNG waxay isticmaashaa cadaadis aan khasaare ahayn (lossless compression), taasoo macnaheedu yahay tayada sawirka ma yaraato, laakiin cabbirka faylka wuxuu noqon karaa mid ka weyn JPEG. PNG waxay ku fiican tahay logos iyo icons sababtoo ah waxay taageertaa hufnaanta waxayna ilaalisaa tayada sawirka.

  • GIF (Graphics Interchange Format): Nooc hore oo loo isticmaalo sawirrada animated, icons, iyo sawirrada fudud. GIF waxay isticmaashaa cadaadis aan khasaare ahayn (lossless compression) waxayna xaddidaysaa midabada 256, taasoo ka dhigaysa mid ku habboon sawirrada fudud iyo animations, laakiin aan ku fiicnayn sawirrada adag.

  • SVG (Scalable Vector Graphics): Nooc vector ah oo loo isticmaalo logos, icons, illustrations, iyo graphics oo loo baahan yahay in la miisaamo iyadoo aan tayada la lumin. SVG waxay ku saleysan tahay XML, taasoo macnaheedu yahay sawirrada SVG waxaa lagu miisaami karaa cabbir kasta iyadoo aan tayada la lumin, cabbirka faylkuna wuu yar yahay marka loo eego sawirrada raster-ka sida JPEG ama PNG. SVG waxay ku fiican tahay logos iyo icons sababtoo ah waxay noqdaan kuwo cad oo fiiqan cabbir kasta.

Goorma la isticmaalo nooc kasta oo sawir ah:

  • JPEG: Sawirrada, sawirrada adag, sawirrada midabka badan.
  • PNG: Logos, icons, sawirrada hufnaanta, sawirrada leh qoraal badan ama khadad fiiqan.
  • GIF: Animations fudud, icons yaryar, sawirrada hufnaanta fudud.
  • SVG: Logos, icons, illustrations, graphics oo loo baahan yahay in la miisaamo.

Gabagabo

Sawirrada HTML waxay ka dhigaan bogagga shabakadda kuwo muuqaal ahaan soo jiidasho leh oo wax ku ool ah. Isticmaalka tag-ga <img> iyo tilmaamaha src, alt, width, iyo height si sax ah waxay kuu oggolaanayaan inaad gelisid oo aad xakamaysid sawirrada bogaggaaga shabakadda si wax ku ool ah. Fahamka noocyada sawirka ee kala duwan iyo goorta la isticmaalo mid kasta ayaa muhiim u ah abuurista bogag shabakadeed oo wanaagsan oo la hagaajiyay.