أساسيات HTML5

ما هو HTML وكيف يعمل الويب

25 دقيقة الدرس 1 من 18

ماذا يعني HTML؟

HTML هو اختصار لـ HyperText Markup Language (لغة توصيف النص التشعبي). دعنا نفصل ذلك: النص التشعبي يعني نصا يرتبط بنصوص اخرى -- تلك الروابط التي تنقر عليها يوميا. التوصيف يعني انك توضح المحتوى باستخدام وسوم لمنحه بنية واضحة. اللغة تعني انها تتبع مجموعة قواعد محددة يفهمها المتصفح. HTML ليست لغة برمجة، بل هي لغة توصيف تصف بنية ومحتوى صفحات الويب.

تاريخ موجز لـ HTML

انشا تيم بيرنرز لي HTML في عام 1991 في مختبر CERN. اليك اهم المراحل:

HTML 1.0 (1991) -- الاصدار الاول مع وسوم اساسية للعناوين والفقرات والروابط.
HTML 2.0 (1995) -- تم توحيده بواسطة IETF مع اضافة النماذج والجداول.
HTML 3.2 (1997) -- قدمه W3C مع دعم للبرمجيات النصية.
HTML 4.01 (1999) -- اضاف اوراق الانماط وتحسينات في البرمجة وميزات الوصول.
HTML5 (2014) -- المعيار الحديث مع عناصر دلالية وصوت وفيديو وواجهات برمجة التطبيقات. هذا ما نستخدمه اليوم.

كيف يعمل الويب: نموذج العميل والخادم

في كل مرة تزور فيها موقعا الكترونيا، تحدث محادثة بين جهازين. جهازك (يسمى العميل) يرسل طلبا، وجهاز بعيد (يسمى الخادم) يرسل استجابة. يتبع هذا معيار HTTP (بروتوكول نقل النص التشعبي).

اليك التدفق المبسط:

تكتب عنوان URL في المتصفح (مثلا https://example.com).
يرسل المتصفح طلب HTTP الى الخادم على ذلك العنوان.
يعالج الخادم الطلب ويرسل استجابة HTTP تحتوي على ملفات HTML و CSS و JavaScript.
يقرا المتصفح HTML ويطبق CSS للتنسيق وينفذ JavaScript للتفاعل ثم يعرض الصفحة على شاشتك.

مثال: طلب واستجابة HTTP بسيطة

Request:
GET /index.html HTTP/1.1
Host: example.com

Response:
HTTP/1.1 200 OK
Content-Type: text/html

<html>
  <body>
    <h1>!مرحبا</h1>
  </body>
</html>

ماذا يفعل المتصفح فعليا؟

عندما يستقبل المتصفح ملف HTML، يمر بهذه الخطوات:

التحليل -- يقرا كود HTML ويبني شجرة DOM (نموذج كائن المستند).
العرض -- يجمع DOM مع قواعد CSS لحساب التخطيط ورسم البكسلات على الشاشة.
البرمجة -- ينفذ اي كود JavaScript لاضافة السلوك الديناميكي.

فكر في HTML كالهيكل العظمي، و CSS كالجلد والملابس، و JavaScript كالعضلات والدماغ.

HTML مقابل CSS مقابل JavaScript

هذه التقنيات الثلاث تعمل معا لكنها تخدم اغراضا مختلفة جدا:

HTML -- يحدد البنية والمحتوى (العناوين والفقرات والصور والروابط).
CSS -- يتحكم في العرض المرئي (الالوان والخطوط والتخطيط والمسافات).
JavaScript -- يضيف التفاعل والسلوك الديناميكي (الرسوم المتحركة والتحقق من النماذج وجلب البيانات).

مثال: HTML يوفر البنية

<h1>موقعي</h1>
<p>هذه فقرة نصية.</p>
<a href="https://example.com">انقر هنا</a>

مثال: CSS يضيف التنسيق

<style>
  h1 { color: navy; font-size: 32px; }
  p { line-height: 1.6; }
</style>

مثال: JavaScript يضيف السلوك

<script>
  document.querySelector("h1").addEventListener("click", function() {
    alert("لقد نقرت على العنوان!");
  });
</script>

مفهوم التوصيف

في HTML، تقوم بتغليف المحتوى داخل وسوم لاخبار المتصفح بما يمثله ذلك المحتوى. تاتي الوسوم في ازواج: وسم افتتاحي ووسم اغلاق. المحتوى بينهما هو العنصر.

مثال: اول صفحة HTML -- مرحبا بالعالم

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحتي الاولى</title>
</head>
<body>
    <h1>مرحبا بالعالم!</h1>
    <p>هذه اول صفحة ويب لي.</p>
</body>
</html>

ملاحظة: تصريح <!DOCTYPE html> يخبر المتصفح ان هذا مستند HTML5. قم دائما بتضمينه في اعلى كل ملف HTML.

نصيحة: لا تحتاج لحفظ كل وسوم HTML فورا. ركز على فهم مفهوم الوسوم والبنية اولا. ستصبح الوسوم المحددة طبيعة ثانية مع الممارسة.

خطا شائع: نسيان اغلاق الوسوم. كل وسم افتتاحي مثل <p> يحتاج وسم اغلاق مقابل </p>. الوسوم غير المغلقة قد تسبب عرضا غير متوقع عبر المتصفحات المختلفة.

تمرين عملي

افتح اي موقع تزوره باستمرار، انقر بزر الفارة الايمن على الصفحة، واختر "عرض مصدر الصفحة". تصفح كود HTML. هل يمكنك تحديد وسوم <html> و <head> و <body>؟ لاحظ كيف ان المحتوى الذي تراه على الشاشة مغلف في وسوم HTML متنوعة. هذا هو اساس كل صفحة ويب زرتها.