الدرس 1: مقدمة في HTML | المستوى الثاني

📖 مقدمة: HTML هي البداية الحقيقية لرحلتك في تطوير الويب

تهانينا على إتمامك للمستوى الأول! الآن أنت تمتلك الأساس النظري القوي الذي يُتيح لك فهم كيف يعمل الكمبيوتر والإنترنت. لكن حان الوقت للانتقال من النظرية إلى التطبيق العملي — حان الوقت لكتابة أول سطر كود في حياتك!

في هذا الدرس، ستتعلم HTML (HyperText Markup Language) — اللغة الأساسية التي يفهمها كل متصفح في العالم. HTML ليست لغة برمجة بالمعنى التقليدي، بل هي لغة ترميز (Markup Language) تُستخدم لوصف هيكل صفحة الويب. تخيلها كـ هيكل العظم للجسم البشري — هي الأساس الذي يبني عليه كل شيء آخر.

بدون HTML، لا يوجد مواقع ويب. Google, Facebook, YouTube, Amazon — كل هذه المواقع تبدأ بملف HTML. حتى التطبيقات المعقدة مثل Gmail و Netflix تستخدم HTML في جوهرها. فهم HTML بعمق هو الخطوة الأولى نحو أن تصبح مطور ويب محترف.

🌐 ما هو HTML؟ التعريف الشامل

HTML (HyperText Markup Language) هي لغة ترميز تُستخدم لإنشاء هيكل صفحات الويب. تم تطويرها لأول مرة عام 1991 بواسطة Tim Berners-Lee — مخترع الإنترنت نفسه! منذ ذلك الحين، تطورت HTML بشكل كبير، واليوم نستخدم HTML5 — الإصدار الأحدث والأكثر قوة.

📌 لماذا تُسمى "HyperText"؟

كلمة HyperText تعني "نص فائق" — أي نص يحتوي على روابط (Links) تتيح لك الانتقال إلى صفحات أخرى. هذه الروابط هي ما يجعل الإنترنت "شبكة" — صفحات مترابطة ببعضها. عندما تنقر على رابط في Google، فإنك تستخدم HyperText للانتقال إلى صفحة أخرى.

📌 لماذا "Markup" وليس "Programming"؟

HTML تُسمى لغة ترميز وليست لغة برمجة لأنها لا تحتوي على منطق (Logic) — لا يمكنك كتابة "إذا كان كذا فافعل كذا" أو "كرر هذه العملية 10 مرات" في HTML. بدلاً من ذلك، تستخدم HTML وسوم (Tags) لـ "وصف" المحتوى: هذا عنوان، هذه فقرة، هذه صورة، هذا رابط.

لكن لا تقلل من أهمية HTML! بدونها، لا يمكن لـ CSS (التنسيق) أو JavaScript (التفاعل) أن يعملا. HTML هو الأساس، وCSS هو الديكور، وJavaScript هو الحركة.

🏗️ هيكل صفحة HTML الأساسي: البناء من الأساس

كل صفحة HTML تتبع هيكلًا أساسيًا مشتركًا. دعنا نستكشف هذا الهيكل سطرًا بسطر:

<!-- هذا تعليق -->
<!-- يُستخدم لكتابة ملاحظات لا يقرأها المتصفح -->

<!DOCTYPE html>
<!-- يُخبر المتصفح أن هذا مستند HTML5 -->

<html lang="ar" dir="rtl">
<!-- الجذر الرئيسي للصفحة -->
<!-- lang="ar" يحدد اللغة العربية -->
<!-- dir="rtl" يجعل الاتجاه من اليمين لليسار -->

    <head>
        <!-- معلومات الصفحة (غير مرئية للمستخدم) -->
        
        <meta charset="UTF-8">
        <!-- يدعم جميع اللغات بما فيها العربية -->
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- يجعل الصفحة متجاوبة مع الهاتف -->
        
        <title>عنوان الصفحة</title>
        <!-- يظهر في شريط عنوان المتصفح -->
        
        <meta name="description" content="وصف الصفحة لمحركات البحث">
        <!-- يظهر في نتائج Google -->
        
    </head>

    <body>
        <!-- المحتوى المرئي للمستخدم -->
        <!-- هنا تكتب كل ما يراه الزائر -->
        
        <h1>مرحباً بالعالم! 🌍</h1>
        <p>هذه أول صفحة ويب أبنيها.</p>
        
    </body>

</html>
        

دعنا نفهم كل جزء من هذا الهيكل بالتفصيل:

1️⃣ <!DOCTYPE html> — إعلان نوع المستند

هذا السطر الأول في أي صفحة HTML5. يُخبر المتصفح أن هذه الصفحة تستخدم HTML5 — أحدث إصدار. بدونه، قد يعرض المتصفح الصفحة بطريقة قديمة وغير صحيحة (ما يُعرف بـ "Quirks Mode").

2️⃣ <html> — الجذر الرئيسي

هو العنصر الجذري الذي يحتوي على كل شيء آخر في الصفحة. الخاصيتان المهمتان هنا:

lang="ar" — تُخبر المتصفح والمحركات أن الصفحة باللغة العربية. هذا مهم لـ SEO وإمكانية الوصول (Accessibility).
dir="rtl" — Right-to-Left. تُخبر المتصفح أن الاتجاه من اليمين لليسار (للغات العربية والعبرية والفارسية).

3️⃣ <head> — رأس الصفحة (غير مرئي)

يحتوي على البيانات الوصفية (Metadata) — معلومات عن الصفحة لا تظهر مباشرة للمستخدم، لكنها ضرورية للمتصفح ومحركات البحث:

<meta charset="UTF-8"> — يدعم جميع الأحرف واللغات، بما فيها العربية والصينية والإيموجي.
<meta name="viewport"> — يجعل الصفحة تتكيف مع حجم شاشة الهاتف. بدونه، ستظهر الصفحة صغيرة جدًا على الموبايل.
<title> — عنوان الصفحة الذي يظهر في شريط المتصفح وفي نتائج Google.
<meta name="description"> — وصف قصير يظهر تحت عنوان الصفحة في نتائج Google. مهم جدًا لـ SEO!

4️⃣ <body> — جسم الصفحة (المرئي)

هنا تكتب كل المحتوى الذي يراه المستخدم: العناوين، الفقرات، الصور، الروابط، الجداول، النماذج، وكل شيء آخر.

🏷️ الوسوم (Tags): اللبنات الأساسية لـ HTML

HTML تستخدم وسوم (Tags) لوصف المحتوى. كل وسم له بداية ونهاية (في معظم الحالات):

<وسم>  المحتوى  </وسم>
  ↑        ↑         ↑
بداية   المحتوى    نهاية
        

📌 أنواع الوسوم في HTML

هناك مئات الوسوم في HTML5، لكنك تحتاج لحفظ حوالي 20-30 وسمًا فقط للبدء. إليك التصنيفات الرئيسية:

📝 وسوم النصوص:

الوسم	الوظيفة	مثال
`<h1> - <h6>`	العناوين (h1 الأكبر، h6 الأصغر)	`<h1>عنوان رئيسي</h1>`
`<p>`	فقرة نصية	`<p>هذا نص.</p>`
`<br>`	سطر جديد (بدون نهاية)	`سطر1<br>سطر2`
`<hr>`	خط أفقي فاصل	`<hr>`
`<span>`	حاوية صغيرة لنص (inline)	`<span>نص</span>`

🔗 وسوم الروابط والوسائط:

الوسم	الوظيفة	مثال
`<a>`	رابط تشعبي	`<a href="url">نص الرابط</a>`
`<img>`	صورة (بدون نهاية)	`<img src="photo.jpg" alt="وصف">`

📋 وسوم القوائم والجداول:

الوسم	الوظيفة
`<ul> + <li>`	قائمة غير مرتبة (نقاط)
`<ol> + <li>`	قائمة مرتبة (أرقام)
`<table>, <tr>, <td>`	جدول (صفوف وخلايا)

🎯 الخصائص (Attributes): إضافة معلومات للوسوم

الخصائص تُضيف معلومات إضافية للوسوم. تُكتب داخل وسم البداية:

<وسم خاصية="قيمة">المحتوى</وسم>

<a href="https://google.com">Google</a>
<img src="logo.png" alt="شعار الموقع" width="200">
<div class="container" id="main">...</div>
        

أهم الخصائص التي ستستخدمها يوميًا:

href — عنوان الرابط (للوسم <a>).
src — مصدر الصورة أو الملف (للوسم <img> و <script>).
alt — وصف نصي للصورة (مهم جدًا لإمكانية الوصول وSEO).
class — اسم فئة CSS (يمكن تكراره في عدة عناصر).
id — معرف فريد (يُستخدم مرة واحدة فقط في الصفحة).
style — تنسيق مباشر (inline CSS).

⚡ HTML5: الثورة الحديثة

HTML5 — الإصدار الحالي — أضاف ميزات قوية جعلت بناء المواقع أسهل وأكثر دلالة (Semantic):

📌 وسوم دلالية (Semantic Tags)

بدلاً من استخدام <div> لكل شيء، HTML5 قدم وسومًا ذات معنى:

<header> — رأس الصفحة أو القسم.
<nav> — قائمة التنقل (Navigation).
<main> — المحتوى الرئيسي للصفحة.
<article> — مقالة أو محتوى مستقل.
<section> — قسم من الصفحة.
<aside> — محتوى جانبي (مثل الشريط الجانبي).
<footer> — تذييل الصفحة.

هذه الوسوم ليست مجرد أسماء جميلة — إنها تُساعد:

محركات البحث (SEO): Google يفهم بنية صفحتك أفضل.
قارئات الشاشة: المكفوفون يتنقلون بسهولة بين الأقسام.
المطورين: الكود أكثر تنظيمًا وأسهل في الصيانة.

💡 ملخص الدرس: النقاط الرئيسية

لنُلخّص ما تعلمناه في هذا الدرس:

HTML هي لغة ترميز (Markup) تُستخدم لبناء هيكل صفحات الويب — ليست لغة برمجة.
كل صفحة HTML تتكون من <!DOCTYPE>, <html>, <head>, <body>.
الوسوم (Tags) تُستخدم لوصف المحتوى — كل وسم له بداية ونهاية (في الغالب).
الخصائص (Attributes) تُضيف معلومات إضافية للوسوم مثل href, src, alt, class, id.
HTML5 قدم وسوم دلالية (Semantic) مثل <header>, <nav>, <main>, <footer>.
الـ <head> يحتوي على البيانات الوصفية (Metadata) — غير مرئي للمستخدم.
الـ <body> يحتوي على كل المحتوى المرئي.
الـ <meta charset="UTF-8"> ضروري لدعم اللغة العربية.
الـ <meta name="viewport"> ضروري لجعل الصفحة متجاوبة مع الهاتف.

🎯 التحدي العملي

قبل الانتقال إلى الدرس التالي، أكمل هذه التحديات:

افتح VS Code (أو أي محرر نصوص) وأنشئ ملفًا جديدًا باسم index.html.
اكتب هيكل HTML5 الكامل مع lang="ar" و dir="rtl".
أضف عنوانًا رئيسيًا (<h1>) بعنوان "موقعي الأول".
أضف فقرة (<p>) تُعرف بنفسك.
أضف قائمة غير مرتبة (<ul>) بـ 3 هوايات تحبها.
أضف رابط (<a>) يؤدي إلى موقع Google.
افتح الملف في المتصفح (انقر عليه مرتين) وشاهد النتيجة!
جرب تغيير <h1> إلى <h2>, <h3>... وشاهد الفرق في الحجم.

هذه التمارين ستُساعدك على ترسيخ ما تعلمته وإعدادك للدروس القادمة.

📚 مصادر إضافية للقراءة

إذا كنت ترغب في التعمق أكثر:

موقع developer.mozilla.org (MDN) — أشمل وثائق HTML في العالم.
موقع w3schools.com/html — شروحات تفاعلية مع أمثلة قابلة للتجربة.
موقع html.com — دليل شامل للمبتدئين.
موقع validator.w3.org — أداة مجانية لفحص أخطاء HTML في صفحتك.

في الدرس القادم، ستتعلم العناوين والفقرات والنصوص في HTML — كيف تُنسق النصوص وتجعلها مقروءة وجذابة. استعد!

🌐 مقدمة في HTML: بناء هيكل صفحات الويب من الصفر