HTML (HyperText Markup Language)

شنو هي HTML؟

هي الهيكل العظمي لأي صفحة ويب. تخيل الموقع مثل الإنسان:

  • HTML: هي العظم (الهيكل).
  • CSS: هي الجلد والملابس (الشكل).
  • JS: هي العضلات والعقل (الحركة والتفكير).

بدون HTML، المتصفح ما يعرف شنو يعرض، هي اللي تكول للمتصفح: "هنا عنوان"، "هنا صورة"، "هنا دكمة".

ملاحظة: HTML مو لغة برمجة (Programming Language)، هي لغة توصيف (Markup Language). يعني وظيفتها توصف العناصر مو تعالج منطق وحسابات.

---

شلون تتعلم صح؟ (Learning by Building)

⚠️ نصيحة ذهبية للمبتدئين: ما تحتاج تحفظ كل Tags مال HTML. بالـ HTML اكو أكثر من 100 tag، بس بالشغل الحقيقي راح تستخدم حوالي 15-20 tag فقط.

طريقة التعلم الصحيحة: تريد تسوي Navbar؟ تروح تبحث بكوكل "how to make a navbar html"، تلكه اكو tag اسمه <nav>. تستخدمه بالمشروع. تريد تسوي فورم؟ تبحث وتلكه <form> و <input>. بعد ما تستخدمهم بـ 3-4 مشاريع، راح تحفظهم بدون ما تبحث عنهم.

هذا اسمه "التعلم بالبناء" (Learning by Building). الحفظ يجي تلقائياً من التكرار بالمشاريع، مو من القراءة والحفظ النظري. ولا تنسى تشوف شلون ترفع موقعك حتى يبين شغلك للناس.

⚠️ ليش ما أنصح المبتدئين يستخدمون AI من البداية: اذا أنت جديد وتستخدم ChatGPT أو أي AI يكتبلك الكود، أنت ما راح تتعلم لأنك ما داتبحث، ما دا تقرأ Documentation، وما دا تحل مشاكل بنفسك. الـ AI أداة قوية بس بعد ما تفهم الأساسيات. المبرمج اللي يعرف الأساسيات يكدر يستخدم AI بكفاءة لأنه يفهم الكود اللي يطلعله ويكدر يعدله ويصلحه.

الهيكل الأساسي للصفحة (Basic Structure)

أي صفحة HTML لازم تبدي بهذا الهيكل الثابت:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <title>عنوان الصفحة</title>
  </head>
  <body>
    <h1>هلا والله! هاي أول صفحة الي.</h1>
    <p>هذا مجرد نص تجريبي ديظهر بداخل الصفحة.</p>
  </body>
</html>
Tagشنو يسوي
<!DOCTYPE html>يكول للمتصفح إنه هذا ملف HTML5
<html>يلف كل المحتوى
<head>معلومات عن الصفحة (العنوان، الخطوط، الروابط) ما تظهر بالشاشة
<body>كل شي يظهر للمستخدم يكون هنا

الـ Tags اللي فعلياً راح تستخدمها

ما راح نحطلك كل Tags الموجودة. هاي فقط اللي راح تستخدمها بشكل يومي بأي مشروع حقيقي:

النصوص والمحتوى

<h1>عنوان رئيسي (واحد بس بكل صفحة)</h1>
<h2>عنوان ثانوي</h2>
<h3>عنوان فرعي</h3>

<p>هاي فقرة نص عادية.</p>

<span>هذا نص بداخل سطر</span>

<strong>نص مهم (Bold)</strong>

<a href="https://google.com">رابط يودي لكوكل</a>
Tagمتى تستخدمه
<h1> إلى <h6>العناوين. h1 أكبر وأهم، h6 أصغر
<p>فقرات النص
<span>تميز جزء من النص (مثلاً تلونه)
<strong>نص مهم (يطلع Bold)
<a>أي رابط (لصفحة ثانية، لموقع خارجي، لإيميل)

الحاويات (Containers)

<div>
  <p>هاي فقرة بداخل div</p>
  <p>وهاي فقرة ثانية</p>
</div>

الـ <div> هو أكثر tag راح تستخدمه. هو مجرد "صندوق" فارغ تحط بيه عناصر ثانية وتنظمها. ما يسوي شي لحاله، بس ويا CSS يصير أقوى أداة عدك.

الصور

<img src="images/logo.png" alt="شعار الموقع" />
Attributeشنو يسوي
srcمسار الصورة
altنص بديل يظهر اذا الصورة ما تحملت (مهم للـ SEO وإمكانية الوصول)

القوائم (Lists)

<!-- قائمة بنقاط -->
<ul>
  <li>عنصر أول</li>
  <li>عنصر ثاني</li>
</ul>

<!-- قائمة مرقمة -->
<ol>
  <li>الخطوة الأولى</li>
  <li>الخطوة الثانية</li>
</ol>

الأزرار والفورمات (Forms)

هاي تستخدمها بأي صفحة فيها إدخال بيانات (تسجيل دخول، بحث، تواصل):

<form>
  <label for="email">الإيميل:</label>
  <input type="email" id="email" placeholder="example@gmail.com" />

  <label for="password">الباسوورد:</label>
  <input type="password" id="password" />

  <button type="submit">دخول</button>
</form>
Tagمتى تستخدمه
<form>يلف أي حقول إدخال مرتبطة ببعض
<input>حقل إدخال (نص، إيميل، باسوورد، رقم...)
<label>اسم الحقل (يساعد بالـ Accessibility)
<button>دكمة
<textarea>حقل نص كبير (مثل صندوق الرسالة)
<select>قائمة منسدلة (Dropdown)

التنظيم (Semantic Tags)

هاي مو ضرورية بالبداية، بس لمن تشتغل بمشاريع حقيقية راح تلكيها بكل مكان:

<header>الهيدر (الشريط العلوي)</header>

<nav>قائمة التنقل (الروابط)</nav>

<main>المحتوى الرئيسي</main>

<section>قسم من الصفحة</section>

<footer>الفوتر (الشريط السفلي)</footer>

هاي الـ Tags نفس الـ <div> بالضبط من ناحية الشكل، بس تعطي معنى للمتصفح ولمحركات البحث. يعني <nav> يكول للمتصفح "هذا مكان التنقل"، بينما <div> ما يكول شي.

مصادر التعلم (Resources)

1. التأسيس (YouTube)

2. المراجع (Documentation)

  • MDN Web Docs - HTML (المرجع الرسمي والأدق. لمن تحتاج تعرف عن أي tag، ابحث هنا).
  • W3Schools - HTML (شروحات بسيطة مع أمثلة تكدر تجربها مباشرة).

الخطوة التالية: لغة CSS ←