Sifooyinka HTML (Attributes)

Sifooyinka (attributes) waxay unugyada HTML ka siiyaan xog dheeraad ah ama habayn gaar ah. Waxay kujiraan billaawga unugga kaliya — marna dhammaadka.

Qaab-dhismeedka Sifada

<unug sifada="qiimaha">Nuxurka</unug>

Tusaale:

<a href="https://ereyle.com">Booqo Ereyle</a>
<img src="sawir.jpg" alt="Sawir qurxoon" width="400">
<p style="color:red;">Qoraalkan cas buu yahay</p>

Xukunnada:

Sifooyinku waxay ku jiraan billaawga unugga keliya
Qiimaha waa in lagu xidho kolmooyin "..." ama '...'
Sifooyinku waxay yimaadaan magac=qiime qaabkiisa

Sifooyinka Ugu Muhiimsan ee HTML-ka

1. `href` — Xiriirka

Waxaa loo adeegsadaa <a> unugga si loo sheego adiga la tagayso:

<a href="https://www.w3schools.com">W3Schools</a>
<a href="bogga-kale.html">Bogga Labaad</a>
<a href="#cinwaanka">Qaybta Cinwaanka</a>
<a href="mailto:nala@xiriir.com">Email</a>

2. `src` — Isha

Waxaa loo adeegsadaa <img>, <video>, <audio>, iyo <script> unugyada:

<img src="logo.png" alt="Logo">
<script src="koodka.js"></script>

3. `alt` — Qoraalka Beddelka

Waxaa loo adeegsadaa <img> — wuxuu muuqdaa haddii sawirku soo muuqan:

<img src="qurux.jpg" alt="Muuqaalka caasimadda Muqdisho">

4. `id` — Aqoonsiga Gaar

Wuxuu siiyaa unugga magac gaar ah oo keligii leeyahay bogga dhexdiisa. Lama isticmaali karo laba unug oo id isku mid ah.

<h2 id="cinwaanka-koowaad">Cinwaanka Koowaad</h2>
<a href="#cinwaanka-koowaad">Tag Cinwaanka</a>

CSS iyo JavaScript waxay sidoo kale isticmaalaan id:

<p id="farriin">Farriintaan waxaa bedeli doonaa JavaScript</p>

5. `class` — Koox

Wuxuu siiyaa unugga magac koox ah. Unugyo badan waxay wadaagi karaan class isku mid ah.

<p class="qoraal-weyn">Tuduc koowaad</p>
<p class="qoraal-weyn">Tuduc labaad</p>
<p class="qoraal-cas">Tuduc saddexaad — midab kala duwan</p>

CSS:

<style>
  .qoraal-weyn { font-size: 20px; }
  .qoraal-cas  { color: red; }
</style>

6. `style` — Qurxinta Toos ah

Wuxuu ku daraa CSS-ka si toos ah unugga:

<p style="color:blue; font-size:18px; font-weight:bold;">
  Qoraalkan buluug, weyn, oo dhuuban
</p>

<div style="background-color:#f0f0f0; padding:20px; border-radius:8px;">
  Sanduuq qurxoon
</div>

7. `title` — Cinwaanka Tilmaamaha

Qoraal gaaban oo muuqda marka gacanta <a> ama unug ku dhacdo:

<a href="https://ereyle.com" title="Baro wax cusub maanta">Ereyle</a>
<abbr title="HyperText Markup Language">HTML</abbr>

8. `lang` — Luqadda

Wuxuu qeexaa luqadda document-ga ama qaybta — muhiim u ah screen readers iyo Google:

<html lang="so">  <!-- Soomaali -->
<html lang="en">  <!-- Ingiriisi -->
<html lang="ar">  <!-- Carabi -->

9. `target` — Halka Link-gu Furmo

Qiimaha	Macnaha
`_blank`	Tab cusub
`_self`	Isla tab-ka (caadiga ah)
`_parent`	Frame waalidka
`_top`	Dhammaan window-ka

<a href="https://google.com" target="_blank">Google — Tab Cusub</a>

10. `width` iyo `height`

Waxaa loo adeegsadaa sawirrada, muuqaallada, iyo jadwallada:

<img src="sawir.jpg" width="500" height="300" alt="Sawir">
<video width="640" height="360" controls>...</video>
<table width="100%">...</table>

Sifooyinka Boolean

Sifo boolean ah waa sifo aanay u baahnayn qiime — joogitaankeedu waa wuxuu xaqiijiyaa:

<input type="checkbox" checked>      <!-- Xididan markii hore -->
<input type="text" disabled>         <!-- Lama geli karo -->
<input type="email" required>        <!-- Lazim ah foomka -->
<video controls autoplay muted loop> <!-- Sifo badan oo boolean -->

Sifooyinka `data-*`

Waxaad samayn kartaa sifooyin aad dejisay si xogta ku kaydso HTML-ka:

<button data-user-id="42" data-action="tirtir" onclick="tirtir(this)">
  Tirtir
</button>

<div data-category="barnaamijyada" data-price="0">
  Koorso bilaash ah
</div>

JavaScript wuxuu si fudud u akhristaa data-*:

const button = document.querySelector('button');
console.log(button.dataset.userId);  // "42"
console.log(button.dataset.action);  // "tirtir"

Tusaale Dhamaystiran

<!DOCTYPE html>
<html lang="so">
<head>
  <title>Sifooyinka HTML</title>
  <style>
    .xidid   { font-weight: bold; color: darkblue; }
    .muuqaal { border: 2px solid green; padding: 8px; border-radius: 6px; }
  </style>
</head>
<body>

  <h1 id="cinwaanka-ugu-weyn" class="xidid" style="font-size:2rem;">
    Sifooyinka HTML
  </h1>

  <p class="muuqaal">
    Qoraalkan wuxuu leeyahay class, border, iyo padding.
  </p>

  <a href="https://ereyle.com" target="_blank" title="Waxbarasho online">
    Booqo Ereyle
  </a>

  <br><br>

  <img
    src="html-sifo.png"
    alt="Tusaale muujinaya sifooyinka HTML"
    width="500"
    height="300"
    style="border-radius:12px;"
  >

  <br><br>

  <input type="text" placeholder="Magacaaga" required>
  <input type="submit" value="Gudbi" disabled>

</body>
</html>

Koobid

Sifada	Shaqadiisa	Unugyada
`href`	Link	`<a>`
`src`	Isha	`<img>`, `<video>`, `<script>`
`alt`	Qoraalka beddelka	`<img>`
`id`	Aqoonsiga gaar	Unug kasta
`class`	Koox	Unug kasta
`style`	CSS toos ah	Unug kasta
`title`	Tilmaan	`<a>`, `<abbr>`
`lang`	Luqadda	`<html>`
`target`	Halka link-gu furmo	`<a>`
`width`/`height`	Cabbirka	`<img>`, `<video>`

Casharka xigta: Waxaan baranayaa Astaamaha Gaarka ah (Special Characters) iyo sida qoraalka loo maamulo.

Qaab-dhismeedka Sifada

Sifooyinka Ugu Muhiimsan ee HTML-ka

1. href — Xiriirka

2. src — Isha

3. alt — Qoraalka Beddelka

4. id — Aqoonsiga Gaar

5. class — Koox

6. style — Qurxinta Toos ah

7. title — Cinwaanka Tilmaamaha

8. lang — Luqadda

9. target — Halka Link-gu Furmo

10. width iyo height