Sawirrada HTML

Sawirrada ayaa ka dhigaya websiteyada kuwo xiiso leh oo muuqaal fiican leh. HTML-ka, sawirrada waxaa lagu geliyaa unugga <img> oo ah unug maran (void element) — ma lahan dhammaad.

Unugga `<img>`

<img src="sawirka.jpg" alt="Sharaxaadda sawirka">

Sifadaha ugu muhiimsan:

Sifada	Shaqadiisa
`src`	Source — jidka ama URL-ka sawirka
`alt`	Alternate text — qoraal haddaan sawirku soo muuqan
`width`	Ballaca sawirka (pixel ama %)
`height`	Dhererka sawirka (pixel)

Sifada `src` — Jidka Sawirka

Sawir ku jira isla folder-ka

Haddii sawirka uu ku jiro isla folder-ka document HTML-kaaga:

<img src="muuq.jpg" alt="Muuq">

Sawir ku jira folder kale

<img src="sawirro/muuq.jpg" alt="Muuq">

Sawir ka yimid internet (URL)

<img src="https://example.com/sawir.png" alt="Sawir internet">

Talo: Waxaa wanaagsan in sawirka aad isticmaalayso uu ku kaydsan yahay serverkaaga — sawirrada internet ka yimid waxay dhibaato ku keeni karaan haddii URL-koodu bedelo.

Sifada `alt` — Muhimmadiisa

Sifada alt waa lagama maarman sababo badan darteed:

Haddii sawirku soo muuqan — alt-ka qoraalku wuxuu ku muuqdaa meesha
Screen readers — indhoolayaashu waxay alt-ka akhristaan
SEO — Google wuxuu alt-ka akhristaa si uu u fahmo sawirka
Internet tartan — waxay muujisaa waxa sawirku ahaa

<!-- Wanaagsan ✓ -->
<img src="aqoon.jpg" alt="Ardayda fasalka ku jira oo buugag akhriyaysa">

<!-- Xuun ✗ — alt madhan -->
<img src="aqoon.jpg" alt="">

<!-- Xuun ✗ — alt aan waxtar lahayn -->
<img src="aqoon.jpg" alt="sawir1">

Cabbirka Sawirka — `width` iyo `height`

<img src="sawir.png" height="250" width="200" alt="Sawir HTML">

Haddaadan width iyo height siin, browser-ku sawirka wuxuu ku fidiyaa dhammaan ballaca shaashadda. Waa in aad had iyo jeer cabbirka u sheegto.

Percent ahaan

<!-- Sawirku waa u noqon doonaa 50% ballaca unugga waalidka -->
<img src="sawir.jpg" width="50%" alt="Sawir">

Jaadadka Sawirrada

Browser-radu waxay taageeraan jaadadyo badan:

Jaadad	Isticmaalka
`.jpg` / `.jpeg`	Sawirrada sawir-qaadaha — midabooda badan
`.png`	Sawirrada leh gadaal shaafaf ah (transparent)
`.gif`	Sawirrada dhaqdhaqaaqa leh
`.svg`	Sawirrada vector-ka — iskuma beddelaan cabbirka
`.webp`	Jaadad casri ah — culus yar, tayo sare

Sida jaadadka loo garto

Marka aad sawir gacanta ku haysato computerkaaga:

Midig guji sawirka
Dooro Properties
Eeg “Type of file” — waxaad arkaysaa .jpg, .png iwm

Sawirrada Dhexdhexaadka ah (Responsive Images)

Si sawirku u noqdo mid si fiican ugu muuqda phone-ka iyo computerka:

<img src="sawir.jpg" alt="Sawir" style="max-width:100%; height:auto;">

Sawir ku duuban Link

Marka aad rabto in sawir noqdo link la guji karo:

<a href="https://ereyle.com">
  <img src="ereyle-logo.png" alt="Ereyle - Waxbarasho Online" width="150">
</a>

Tusaale Dhamaystiran

<!DOCTYPE html>
<html>
<head>
  <title>Sawirrada HTML</title>
</head>
<body>

  <h1>Sawirrada HTML</h1>

  <!-- Sawir aasaasi ah -->
  <h2>1. Sawir caadi ah</h2>
  <img src="muuq.jpg" alt="Muuq qurxoon" width="400" height="300">

  <!-- Sawir internet ka yimid -->
  <h2>2. Sawir URL ah</h2>
  <img src="https://via.placeholder.com/400x200" alt="Sawir tusaale" width="400">

  <!-- Sawir link noqday -->
  <h2>3. Sawir la gujin karo</h2>
  <a href="https://ereyle.com" target="_blank">
    <img src="ereyle.png" alt="Booqo Ereyle" width="200">
  </a>

  <!-- Sawir response ah -->
  <h2>4. Sawir dhexdhexaad ah</h2>
  <img src="mugga-weyn.jpg" alt="Muuq weyn" style="max-width:100%; height:auto;">

</body>
</html>

Raadraaca — Xukunnada Sawirrada

Xukun	Sharaxaad
Isticmaal `alt` had iyo jeer	Accessibility iyo SEO
Sheeg `width` iyo `height`	Browser wuxuu si dhaqso ah u soo muujiyaa
Sawirrada compress garee	Bogga wuxuu si dhaqso ah u soo furmaa
Isticmaal jaadadka saxda ah	JPG muuqaallo, PNG logo/transparent
Sawirrada kugula kaydso serverkaaga	Ku tiirsan maysid URL kale

Casharka xigta: Waxaan baranayaa muuqaallada iyo maqallada HTML — video iyo audio.

Unugga <img>

Sifada src — Jidka Sawirka