Meta Tags iyo Xididdada Dibadda

Casharkaan waxaan baranayaa waxa ku jira <head> — qaybtii browser-ka iyo matoorada raadinta (Google) loogu sheegi jiray xogta document-ga. Waxaan sidoo kale baranayaa sida CSS iyo JavaScript loogu xidho HTML-ka.

Unugga `<head>` — Dib u eegis

<head> wuxuu ka kooban yahay xog ku saabsan document-ga — ma muuqato website-ka dhexdiisa laakiin browser-ka iyo Google waxay akhristaan.

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Koorso HTML bilaash ah Af-Soomaali ku qoran">
  <title>Cashar HTML — Ereyle</title>
  <link rel="stylesheet" href="qaabka.css">
</head>
<body>
  <!-- Nuxurka bogga halkan -->
</body>
</html>

Meta Tags

Meta tags waa <meta> unugyo — unugyo maran (void elements). Waxay siiyaan browser-ka iyo Google macluumaad ku saabsan bogga.

1. `charset` — Xarafyada

<meta charset="UTF-8">

Wuxuu qeexayaa nidaamka xarafyada ee document-ga. UTF-8 wuxuu taageeraa dhammaan xarafyada adduunka — Soomaali, Carabi, Shiinees, iwm.

Waa in uu ahaadaa kii ugu horreeya ee <head> — ka hor <title>.

2. `viewport` — Muuqaalka Mobile

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Wuxuu u sheegayaa browser-ka telefoonka in bogga uu u qaabeeyaa ballaca shaashadda — lagama maarman si boggu u muuqdo si fiican mobile-ka.

3. `description` — Sharaxaadda Google

<meta name="description" content="Baro HTML aasaaska ah Af-Soomaali — casharro bilaash ah.">

Qoraalkan waa kan Google-ku ku soo muujiyaa hoos cinwaanka marka natiijada raadinta ka soo muuqato. Waa in uu ahaadaa 50–160 xaraf.

4. `keywords` — Erayada Muhiimka

<meta name="keywords" content="HTML, koorso, Soomaali, barnaamij-samaynta, bilaash">

Google casrigu ma adeegsado tiro badan, laakiin matooryo kale waxay weli u isticmaalaan.

5. `author` — Qoraaga

<meta name="author" content="Cabdulwaaxid Axmed Cali">

6. `robots` — Tilmaanta Matoorada Raadinta

<!-- Ogolaan raadinta iyo raacidda links -->
<meta name="robots" content="index, follow">

<!-- Maan raadin boggan -->
<meta name="robots" content="noindex, nofollow">

7. Open Graph — Muuqaalka Warbaahinta Bulshada

Marka link-ga bogga la wadaago Facebook, Twitter, iwm:

<meta property="og:title"       content="Baro HTML — Ereyle">
<meta property="og:description" content="Casharro bilaash ah Af-Soomaali">
<meta property="og:image"       content="https://ereyle.com/sawir.jpg">
<meta property="og:url"         content="https://ereyle.com/html">
<meta property="og:type"        content="website">

Unugga `<title>`

<title>Casharka HTML — Ereyle Learning</title>

Wuxuu muuqdaa tab-ka browser-ka
Waa cinwaanka kii ugu muhiimsan Google u arko
Waa in uu ahaadaa 50–60 xaraf
Bog kasta waa inuu leeyahay title gaar ah

Xididdada CSS — `<link>`

Si CSS-ka dibadda ah loogu xidho HTML-ka:

<link rel="stylesheet" href="qaabka.css">

Sifada	Qiimaha	Macnaha
`rel`	`stylesheet`	Nooca xididdada
`href`	`qaabka.css`	Jidka file-ka CSS

CSS Gudaha — `<style>`

Waxaad kaloo qori kartaa CSS si toos ah <head> dhexdiisa:

<head>
  <style>
    body { font-family: sans-serif; background: #fafafa; }
    h1   { color: #0a0a0a; }
    p    { color: #555; line-height: 1.7; }
  </style>
</head>

CSS Toos ah — `style` Sifada

Waxaad CSS u samayn kartaa unug gaar ah:

<p style="color: red; font-size: 18px;">Qoraalkan cas buu yahay</p>

Kala-duwanaanshaha saddexda:

	Meesha	Adeegsiga
`<link>`	`<head>`	File gaar ah — ugu fiican
`<style>`	`<head>`	Bogga keliya
`style=""`	Unugga	Unug keliya — ugu yar

Xididdada JavaScript — `<script>`

JavaScript dibadda — `src`

<!-- Hoos `<body>` dhammaadkiisa — ugu fiican -->
<script src="koodka.js"></script>

JavaScript gudaha

<script>
  alert("Ku soo dhawoow Ereyle!");

  function salaan(magac) {
    return "Salaan " + magac + "!";
  }
</script>

Meesha `<script>` La Dhigo

<!DOCTYPE html>
<html>
<head>
  <!-- CSS halkan -->
  <link rel="stylesheet" href="qaabka.css">
</head>
<body>

  <!-- Nuxurka bogga -->
  <h1>Halkan nuxurka</h1>

  <!-- Script hoos body — si boggu u soo furmaa horteed -->
  <script src="koodka.js"></script>
</body>
</html>

Maxay script-ku u hooseeyaa? Haddii script-ku <head> ku jiro, browser-ku wuxuu joojiyaa soo dejinta bogga ilaa script-ka la soo dejiyo — boggu waa u tartiibmi doonaa. Hoos <body> waa ku fiican.

`defer` iyo `async`

<!-- defer: soo daji laakiin ka dib nuxurka -->
<script src="koodka.js" defer></script>

<!-- async: soo daji isla markiiba, ka madax-banaan -->
<script src="koodka.js" async></script>

Favicon — Sawirka Yar ee Tab-ka

<head>
  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

Waa sawirka yar oo ka muuqda tab-ka browser-ka dhinaciisa cinwaanka.

Tusaale Dhamaystiran — Head Buuxa

<!DOCTYPE html>
<html lang="so">
<head>

  <!-- Xarafyada — ka hor wax kale -->
  <meta charset="UTF-8">

  <!-- Mobile -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- SEO -->
  <meta name="description" content="Baro HTML bilaash Af-Soomaali — Ereyle Learning">
  <meta name="keywords"    content="HTML, koorso, Soomaali, bilaash">
  <meta name="author"      content="Ereyle Team">
  <meta name="robots"      content="index, follow">

  <!-- Open Graph -->
  <meta property="og:title"       content="Baro HTML — Ereyle">
  <meta property="og:description" content="Casharro bilaash ah Af-Soomaali">
  <meta property="og:image"       content="https://ereyle.com/og.png">
  <meta property="og:url"         content="https://ereyle.com/html">

  <!-- Cinwaanka -->
  <title>Aasaaska HTML — Ereyle Learning</title>

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="/favicon.png">

  <!-- CSS -->
  <link rel="stylesheet" href="qaabka.css">

</head>
<body>

  <h1>Baro HTML Maanta</h1>
  <p>Casharro bilaash ah Af-Soomaali</p>

  <!-- JavaScript — hoos body -->
  <script src="koodka.js" defer></script>
</body>
</html>

Koobid

Unugga/Sifada	Shaqadiisa
`<meta charset="UTF-8">`	Xarafyada — ka hor wax kale
`<meta name="viewport">`	Mobile-friendly
`<meta name="description">`	Sharaxaadda Google
`<title>`	Cinwaanka tab-ka iyo Google
`<link rel="stylesheet">`	CSS dibadda
`<style>`	CSS gudaha
`<script src="">`	JavaScript dibadda
`<script>`	JavaScript gudaha
`<link rel="icon">`	Favicon

Casharka xigta: Waxaan baranayaa Foomamka Horumarsan — validation, accessibility, iyo input types cusub.

Unugga <head> — Dib u eegis

Meta Tags

1. charset — Xarafyada

2. viewport — Muuqaalka Mobile

3. description — Sharaxaadda Google

4. keywords — Erayada Muhiimka

5. author — Qoraaga

6. robots — Tilmaanta Matoorada Raadinta

7. Open Graph — Muuqaalka Warbaahinta Bulshada

Unugga <title>

Xididdada CSS — <link>

CSS Gudaha — <style>

CSS Toos ah — style Sifada

Xididdada JavaScript — <script>

JavaScript dibadda — src