HTML

Waa maxay HTML?

HTML waxay u taagan tahay HyperText Markup Language. Waa luqadda caadiga ah ee loo isticmaalo abuurista bogagga shabakadda. HTML waxay u ogolaataa isticmaalayaasha inay abuuraan oo habeeyaan qaybaha, sadarrada, xiriirinta, sawirrada, fiidiyowyada, iyo waxyaabo kale oo badan oo ku jira bogga shabakadda. HTML ma aha luqad barnaamij, laakiin waa luqad calaamadaysan, taas oo macnaheedu yahay inay isticmaasho calaamado si ay u calaamadeeyso qoraalka si biraawsarku u muujiyo si sax ah.

Taariikhda HTML

HTML waxaa markii ugu horreysay soo bandhigay Tim Berners-Lee sannadkii 1990. Berners-Lee, oo ah saynisyahan ka tirsan CERN, wuxuu u baahday hab ay saynisyahannadu ku wadaagaan dukumeentiyada. HTML waxay ku bilaabatay luqad fudud oo loogu talagalay wadaagista dukumeentiyada, laakiin si degdeg ah ayay u kortay oo ay noqotay luqadda aasaasiga ah ee shabakadda.

  • 1991: Tim Berners-Lee wuxuu daabacay dukumeentiga ugu horreeya ee si rasmi ah u qeexaya HTML tags.
  • 1993: IETF (Internet Engineering Task Force) ayaa bilaabay inay si rasmi ah u aqoonsadaan HTML, iyadoo la sameeyay HTML Working Group.
  • 1995: HTML2 ayaa la daabacay, noqotayna heer caadi ah oo lagu qeexay RFC 1866.
  • 1997: HTML3.2, oo ay ansixisay W3C (World Wide Web Consortium), ayaa la daabacay.
  • 1997: HTML4.0 ayaa la daabacay.
  • 1999: HTML 4.01 ayaa la daabacay.
  • 2014: HTML5, oo ah nooca ugu dambeeyay ee HTML, ayaa la daabacay.

Noocyada HTML

Waxaa jira noocyo badan oo HTML ah oo soo maray taariikhda, laakiin kuwa ugu muhiimsan waxaa ka mid ah:

  • HTML 4.01: Noocaan waxaa la isticmaalay muddo dheer waxaana lagu tiriyaa mid ka mid ah noocyadii ugu xasilloonaa.
  • XHTML: XHTML waxay ahayd dib-u-habeyn ku saleysan XML ee HTML 4.01. Waxay ahayd mid adag oo ku saabsan xeerarka, taas oo looga gol lahaa inay ka dhigto HTML mid nadiif ah oo modular ah.
  • HTML5: HTML5 waa nooca ugu dambeeyay ee HTML waana nooca ugu ballaaran ee la isticmaalo maanta. Waxay keentay astaamo cusub oo badan, oo ay ku jiraan taageerada fiidiyowyada iyo codka, iyo walxo semantic ah oo badan.

HTML vs CSS vs JavaScript

HTML, CSS, iyo JavaScript waa saddexda luqadood ee aasaasiga ah ee shabakadda. Waxay si wadajir ah u shaqeeyaan si ay u abuuraan bogag shabakadeed oo is dhexgal ah oo qurux badan.

  • HTML: Waa luqadda qaab dhismeedka. Waxay qeexdaa qaabdhismeedka iyo macnaha ku jira bogga shabakadda. Waxay u dhigantaa lafaha iyo muruqyada jidhka bini'aadamka.
  • CSS (Cascading Style Sheets): Waa luqadda qaabeynta. Waxay qeexdaa sida walxaha HTML loo muujiyo. Waxay maamushaa midabka, cabbirka, farta, iyo qaabeynta kale ee muuqaalka bogga shabakadda. Waxay u dhigantaa dharka iyo qurxinta jidhka bini'aadamka.
  • JavaScript: Waa luqadda barnaamijka. Waxay ka dhigtaa bogagga shabakadda kuwo is dhexgal ah. JavaScript waxay u ogolaataa bogagga shabakadda inay ka jawaabaan falcelinta isticmaalaha, cusbooneysiiyaan waxyaabaha ku jira si firfircoon, iyo inay la xiriiraan server-ka. Waxay u dhigantaa maskaxda jidhka bini'aadamka.

Dejinta deegaankaaga (Qoraalka qoraalka, Browserka)

Si aad u qorto HTML, waxaad u baahan doontaa laba shay:

  1. Qoraal qore (Text Editor): Waa barnaamij kuu ogolaanaya inaad qorto koodka HTML. Waxaa jira qoraal qoreyaal badan oo la heli karo, oo ay ku jiraan kuwa bilaashka ah sida VS Code, Sublime Text, Notepad++, iyo Atom. Waxaad sidoo kale isticmaali kartaa qoraalka qoraalka fudud ee ku yimaada nidaamkaaga hawlgalka, sida Notepad (Windows) ama TextEdit (Mac).
  2. Browserka (Browser): Waa barnaamij kuu ogolaanaya inaad ku aragto bogagga HTML. Waxaa jira biraawsar badan oo la heli karo, oo ay ku jiraan Chrome, Firefox, Safari, iyo Edge.

Tallaabooyinka dejinta deegaankaaga:

  1. Soo dejiso oo ku rakib qoraal qore: Ka dooro mid ka mid ah qoraal qoreyaasha kor ku xusan oo ku rakib kombiyuutarkaaga.
  2. Ku rakib browserka: Haddii aadan horey u haysan, ku rakib browserka aad doorbidayso.
  3. Abuur fayl HTML cusub: Fur qoraalka qoraalkaaga oo samee fayl cusub. Ku keydi faylka magac ku dhammaada .html (tusaale, index.html).
  4. Ku qor koodkaaga HTML: Ku qor koodhkaaga HTML faylka aad abuurtay.
  5. Fur faylka HTML ee browserka: Ka hel faylka HTML ee kombiyuutarkaaga oo laba jeer guji si aad ugu furto browserkaaga. Browserku wuxuu turjumi doonaa koodhkaaga HTML wuxuuna ku tusi doonaa bogga shabakadda.

Qaabdhismeedka aasaasiga ah ee HTML

Bogga HTML wuxuu leeyahay qaabdhismeed aasaasi ah oo had iyo jeer isku mid ah. Qaabdhismeedka aasaasiga ah ee bogga HTML wuxuu u eg yahay sidan:

HTML

<!DOCTYPE html>
<html lang="so">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cinwaanka Bogga</title>
</head>
<body>
    </body>
</html>

Sharaxaadda qaybaha:

  • <!DOCTYPE html>: Waxay u sheegaysaa browserka in dukumeentigu yahay HTML5.
  • <html lang="so">: Waa xididka bogga HTML. lang="so" waxay qeexaysaa luqadda bogga, kiiskan Soomaali.
  • <head>: Waxay ka kooban tahay metadata ku saabsan bogga, sida cinwaanka, qeexida, iyo xiriirinta faylasha CSS iyo JavaScript.
    • <meta charset="UTF-8">: Waxay qeexaysaa habka qoraalka ee loo isticmaalo bogga, UTF-8 waa habka qoraalka ee caalamiga ah oo taageera jilayaal badan.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Waxay dejinaysaa aragtida bogga si ay ugu habboonaato dhammaan qalabka.
    • <title>Cinwaanka Bogga</title>: Waxay qeexaysaa cinwaanka bogga, kaas oo ka muuqda tabka browserka ama cinwaanka daaqadda.
  • <body>: Waxay ka kooban tahay waxyaabaha muuqda ee bogga, sida qoraalka, sawirrada, fiidiyowyada, iwm.

Tags iyo walxaha HTML

HTML waxay isticmaashaa tags si ay u calaamadeyso waxyaabaha ku jira. Tags-ku waxay ku qoran yihiin xaglo-xaglo (< >). Tags-ka badankoodu waxay ku yimaadaan laba-labo: tag-fur (<tag>) iyo tag-xir (</tag>). Waxyaabaha u dhexeeya tag-furka iyo tag-xirka waxaa loo yaqaan walaxda HTML.

Tusaalooyinka tags-ka HTML ee caadiga ah:

  • <h1> ilaa <h6>: Tags-ka cinwaanka, <h1> waa cinwaanka ugu weyn, <h6> waa kan ugu yar.
  • <p>: Tag-ga sadarka.
  • <a>: Tag-ga xiriirinta (link).
  • <img>: Tag-ga sawirka.
  • <ul>: Tag-ga liiska aan kala horeyn (unordered list).
  • <ol>: Tag-ga liiska kala horeyn (ordered list).
  • <li>: Tag-ga shayga liiska (list item).
  • <div>: Tag-ga qaybinta (division), loo isticmaalo in la qaybiyo bogga qaybo.
  • <span>: Tag-ga safka (span), loo isticmaalo in la calaamadeeyo qayb yar oo qoraal ah.

Tusaale walax HTML:

HTML

<p>Kani waa sadar.</p>

<p> waa tag-furka, </p> waa tag-xirka, "Kani waa sadar." waa waxyaabaha ku jira walaxda.

Tilmaamaha HTML

Tilmaamaha (Attributes) waxay bixiyaan macluumaad dheeraad ah oo ku saabsan walxaha HTML. Tilmaamaha waxaa lagu qoraa tag-furka, waxayna ka kooban yihiin magac iyo qiimo. Magaca iyo qiimaha waxaa lagu kala saaraa calaamadda sinnaanta (=), qiimaha waxaa lagu dhex qoraa xigashooyin (" ").

Qaabka guud ee tilmaamaha:

HTML

<tag attribute_name="attribute_value">Waxyaabaha ku jira</tag>

Tusaalooyinka tilmaamaha HTML ee caadiga ah:

  • class: Waxay qeexdaa fasalka CSS ee walaxda.
  • id: Waxay qeexdaa aqoonsi gaar ah oo walaxda ah.
  • style: Waxay qeexdaa qaabka CSS ee walaxda.
  • src: Tag-ga <img> ayey u isticmaashaa si loo qeexo dariiqa sawirka.
  • href: Tag-ga <a> ayey u isticmaashaa si loo qeexo URL-ka xiriirinta.
  • alt: Tag-ga <img> ayey u isticmaashaa si loo qeexo qoraal beddel ah oo sawirka ah, haddii sawirku aanu soo bixi karin.
  • lang: Waxay qeexdaa luqadda walaxda.

Tusaale tilmaamaha:

HTML

<p class="highlight" style="color:blue;">Sadarkaan waa buluug oo la muujiyay.</p>
<img src="sawir.jpg" alt="Sharaxaad sawir">
<a href="https://www.example.com">Booqo Example</a>