هل تساءلت يومًا كيف تُبنى صفحات الويب التي تزورها يوميًا؟ الإجابة تكمن في لغة HTML، أو لغة توصيف النص الفائق (HyperText Markup Language) [citation:8]. تعتبر HTML حجر الأساس لأي موقع إلكتروني؛ فهي اللغة التي يستخدمها المطورون لبناء هيكل الصفحة وتنظيم محتواها، بحيث تستطيع المتصفحات فهمه وعرضه بالشكل الصحيح [citation:1][citation:2]. هذا الدليل هو نقطة انطلاقك المثالية لفهم هذه اللغة، حتى لو لم تكن لديك أي خلفية برمجية سابقة [citation:1].
ما هي HTML بالضبط؟
ببساطة، HTML ليست لغة برمجة بالمعنى التقليدي، بل هي لغة توصيف (Markup Language). هذا يعني أننا نستخدمها لإضافة "علامات" أو "وسوم" (Tags) حول محتوى النص لتحديد وظيفته ومعناه [citation:2][citation:7]. تخيل أنك تعطي تعليمات للمتصفح: "هذا النص هو عنوان رئيسي"، أو "هذه الفقرة تحتوي على رابط لصفحة أخرى"، أو "هذه الصورة يجب عرضها هنا" [citation:3][citation:2].
تعمل HTML جنبًا إلى جنب مع تقنيتين أساسيتين أخريين لتشكيل العمود الفقري للويب [citation:8]:
- CSS (أوراق الأنماط المتتالية): مسؤولة عن شكل الصفحة، مثل الألوان والخطوط والتخطيط.
- JavaScript: مسؤولة عن سلوك الصفحة، مثل جعل الأزرار تفاعلية أو تحميل محتوى جديد دون إعادة تحميل الصفحة.
الوحدة الأساسية: عنصر HTML
العنصر (Element) هو اللبنة الأساسية التي تُبنى منها صفحات الويب. كل عنصر في HTML يتكون من ثلاثة أجزاء رئيسية [citation:2][citation:4][citation:13]:
- وسم البداية (Opening Tag): يتكون من اسم العنصر محاطًا بعلامتي
<و>، ويحدد بداية العنصر. مثلاً:
. - المحتوى (Content): هو النص أو البيانات الفعلية التي سيتم عرضها. مثلاً:
قطتي شرسة جدًا.. - وسم النهاية (Closing Tag): مطابق لوسم البداية لكن يسبقه شرطة مائلة
/، ويحدد نهاية العنصر. مثلاً: .
لاحظ أن الكثيرين يستخدمون مصطلحي "عنصر" و"وسم" بالتبادل، لكن هناك فرق دقيق. الوسم هو مجرد العلامة (مثل
)، بينما العنصر هو الوسم ومحتواه معًا (مثل
قطتي شرسة جدًا.
) [citation:4][citation:7][citation:13].
مثال توضيحي: تخيل أن العنصر هو صندوق. الوسم الذي يبدأ (
) هو غطاء الصندوق، والمحتوى (النص أو الصور) هو ما بداخل الصندوق، والوسم الذي يغلق (
) هو غطاء الصندوق عند إغلاقه. العنصر كله هو الصندوق بما يحتويه [citation:4].
الخصائص (Attributes): إضافة تفاصيل للعنصر
تمنحنا الخصائص (Attributes) وسيلة لإضافة معلومات إضافية للعنصر، مثل عنوان الصورة أو رابط الوجهة للرابط. توضع الخصائص دائمًا داخل وسم البداية، وتأتي على شكل الاسم="القيمة" [citation:2].
من أشهر الأمثلة على استخدام الخصائص هو عنصر الصورة () الذي لا يحتوي على محتوى نصي، فهو عنصر فارغ (Empty Element) [citation:2][citation:13]:
في هذا المثال:
- src: تحدد مصدر (رابط) الصورة.
- alt: تقدم وصفًا نصيًا للصورة لمن لا يستطيعون رؤيتها، وهو مهم جدًا لإمكانية الوصول (Accessibility) [citation:2][citation:8].
- width: تحدد عرض الصورة بالبكسل.
هيكل صفحة HTML الأساسي
كل صفحة HTML تتبع هيكلًا أساسيًا وموحدًا، يشبه الهيكل العظمي للإنسان [citation:7][citation:12]. إليك المكونات الأساسية [citation:2][citation:14]:
مرحبًا بالعالم!هذه هي فقرتي الأولى.
دعنا نشرح كل جزء:
- : يُعلن هذا السطر للمتصفح عن إصدار HTML المستخدم (وهو HTML5 في هذا المثال)، ليتأكد من عرض الصفحة بشكل صحيح [citation:2][citation:7].
- : هذا هو العنصر الجذر (Root Element) الذي يحيط بكل محتوى الصفحة. يُعد بمثابة الحاوية الرئيسية [citation:12][citation:14].
- : يحتوي هذا القسم على معلومات "خلف الكواليس" عن الصفحة، والتي لا تظهر للمستخدم مباشرة. نضع هنا عنوان الصفحة (
يجب عليك تسجيل الدخول لنشر تعليق.