ما هو HTML؟
HTML، أو HyperText Markup Language، هي لغة الترميز القياسية المستخدمة في بناء وتصميم صفحات الويب. تُعتبر HTML بمثابة العمود الفقري للويب، حيث تُستخدم لوصف الهيكل الأساسي للمحتويات التي تظهر على المتصفح. اسمها مكون من ثلاثة أجزاء:
- HyperText: يشير إلى النصوص التي تحتوي على روابط إلى صفحات أو موارد أخرى على الإنترنت.
- Markup: يعني “الترميز”، وهي الطريقة التي يتم بها تنظيم المحتوى باستخدام وسوم HTML.
- Language: تُعتبر HTML لغة ترميز وليست لغة برمجة، فهي تعطي تعليمات للمتصفح حول كيفية عرض المحتوى على الشاشة.
في حين أن HTML تحدد بنية الصفحات، لا تتحكم في شكل أو تنسيق المحتوى — بل تتعامل مع تنظيم النصوص، الصور، القوائم، الروابط، وغيرها من العناصر على الصفحة. التنسيق المرئي يعتمد بشكل رئيسي على CSS (Cascading Style Sheets)، والتي تُستخدم لتنسيق مظهر صفحة الويب، بينما يمكن لـ JavaScript إضافة تفاعلية وديناميكية إلى هذه الصفحات.
أهمية HTML
- تُعتبر الأساس في تطوير جميع مواقع الويب على الإنترنت.
- لا يمكن لأي موقع أو تطبيق ويب أن يعمل بدون هيكل HTML الذي يحدد المحتويات والمكونات.
- سهلة التعلم والفهم، مما يجعلها لغة مثالية للمبتدئين في مجال تطوير الويب.
- تُستخدم من قبل جميع المتصفحات، وهي أول لغة يتفاعل معها متصفح الإنترنت لعرض صفحات الويب.
كيف يعمل HTML في بناء صفحات الويب؟
تعتمد HTML على مفهوم الوسوم (tags)، التي توضح للمستعرض كيفية تنظيم وعرض العناصر المختلفة في صفحة الويب. كل وسم في HTML يُكتب داخل أقواس زاوية < >. بعض الوسوم تحتوي على وسم إغلاق، في حين أن بعض الوسوم تُكتب دون الحاجة إلى إغلاقها.
على سبيل المثال، إذا أردنا كتابة فقرة نصية في HTML، فإننا نستخدم الوسم <p> الذي يمثل الفقرة، ويجب أن يُغلق الوسم بـ </p> بعد انتهاء النص. ما بين وسمي الفتح والإغلاق، يمكننا إدراج المحتويات التي نريد عرضها في الفقرة.
كيفية بناء صفحة ويب:
عندما يفتح المتصفح ملف HTML، يقوم بقراءة جميع الوسوم وتعليمات HTML لتحديد ما يجب عرضه على الشاشة. الصفحة الأساسية في HTML تتبع الهيكل التالي:
- DOCTYPE: يُكتب في بداية الملف لتحديد إصدار HTML الذي يتم استخدامه. على سبيل المثال:
<!DOCTYPE html>. - وسم
<html>: هذا الوسم يحدد بداية الصفحة الإلكترونية ونهايتها. - وسم
<head>: يحتوي على معلومات الصفحة التي لا تظهر مباشرةً للمستخدم، مثل عنوان الصفحة<title>, والوصف، والكلمات المفتاحية، وأي روابط لملفات CSS أو JavaScript. - وسم
<body>: يحتوي على المحتوى الفعلي الذي يراه المستخدم على الصفحة، مثل النصوص والصور والفيديوهات والأزرار.
أمثلة على بعض الوسوم:
<h1>إلى<h6>: تُستخدم للعناوين، حيث يمثل<h1>العنوان الرئيسي و<h6>العنوان الأقل أهمية.p>: يُستخدم لكتابة فقرة نصية.<a>: يُستخدم لإنشاء الروابط التشعبية.<img>: يُستخدم لعرض الصور.ul>و<li>: يُستخدمان لإنشاء قوائم غير مرتبة (قوائم نقطية).
HTML تسمح بتنظيم وتحديد العناصر المختلفة على الصفحة، وتجعل المحتوى مفهومًا لكل من البشر والمتصفحات. على سبيل المثال، الوسم <a href="https://example.com">اضغط هنا</a> يُظهر رابطًا يمكن للمستخدم النقر عليه للانتقال إلى صفحة أخرى.
تاريخ HTML وإصداراته
بدايات HTML:
تم تطوير HTML لأول مرة في أواخر الثمانينيات وأوائل التسعينيات بواسطة تيم بيرنرز لي، مخترع شبكة الويب العالمية. كان الهدف الرئيسي هو تسهيل مشاركة المستندات بين الباحثين والمستخدمين من خلال الروابط النصية التي تربط بين الصفحات.
HTML 1.0:
الإصدار الأول من HTML ظهر في عام 1991 وكان بسيطًا جدًا، حيث احتوى على حوالي 18 وسم فقط. كان الهدف منه هو تسهيل تبادل المستندات والمقالات العلمية. على الرغم من بساطته، إلا أنه أسس مفهوم الروابط التشعبية التي تمثل واحدة من أهم ميزات الويب.
HTML 2.0 (1995):
جاء هذا الإصدار بعد فترة قصيرة ليحسن بعض الميزات السابقة ويوسع اللغة لتشمل المزيد من الوسوم. أضاف ميزات جديدة مثل النماذج (Forms) التي سمحت بإنشاء حقول إدخال للمستخدمين، مما جعل الويب أكثر تفاعلية.
HTML 3.2 (1997):
شهد هذا الإصدار تحسينات كبيرة في عرض الجداول والخطوط والألوان، مما أتاح لمطوري الويب تصميم صفحات أكثر تنسيقًا وتنظيمًا. بدأ هذا الإصدار في دعم بعض الميزات الرسومية مثل الصور المدمجة مع النصوص.
HTML 4.0 (1999):
أتى هذا الإصدار مع ميزات جديدة مثل تحسين دعم اللغات المختلفة وتحسين إمكانية الوصول. كان له دور كبير في تعزيز التنوع في تصميم صفحات الويب، كما أضاف إمكانيات جديدة لتسهيل التعامل مع النماذج والعناصر التفاعلية.
HTML5 (2014):
يُعتبر HTML5 أحدث إصدار وأكثر تطورًا في تاريخ HTML. تم تطويره ليتناسب مع التقدم التكنولوجي في تصميم مواقع الويب. يوفر HTML5 العديد من التحسينات والمميزات التي تساعد على إنشاء مواقع تفاعلية ومتعددة الوسائط بشكل أسرع وأكثر كفاءة.
- دعم الفيديو والصوت: مع HTML5، يمكن تضمين ملفات الفيديو والصوت مباشرةً في صفحة الويب بدون الحاجة إلى استخدام إضافات خارجية مثل Flash.
- الرسومات والرسوم المتحركة: باستخدام وسوم مثل
<canvas>و WebGL، يمكن إنشاء رسومات ثلاثية الأبعاد ورسوم متحركة تفاعلية. - تحسين الأداء والتوافق: تم تصميم HTML5 ليكون أكثر كفاءة وسرعة، ويتوافق مع جميع الأجهزة والمتصفحات الحديثة.
- دعم الأجهزة المحمولة: مع انتشار الهواتف الذكية والأجهزة اللوحية، تم تصميم HTML5 ليتكيف مع مختلف أحجام الشاشات وأنظمة التشغيل.
مميزات HTML5:
- التكامل مع JavaScript و CSS3: يُتيح HTML5 التكامل السلس مع لغات البرمجة الأخرى مثل JavaScript وCSS3، مما يجعل بناء المواقع التفاعلية والمستجيبة أكثر سهولة.
- التخزين المحلي: يوفر HTML5 طرقًا لتخزين البيانات محليًا على الجهاز بدون الحاجة إلى الاعتماد على ملفات تعريف الارتباط (Cookies).
- التوافق مع المتصفحات الحديثة: HTML5 متوافق مع جميع المتصفحات الحديثة، مما يجعله الحل الأمثل للمطورين لبناء مواقع تعمل بشكل جيد على مختلف الأجهزة والمنصات.
الخاتمة:
HTML هي اللبنة الأساسية التي تُبنى عليها صفحات الويب، وقد تطورت بشكل كبير على مر السنين لتلبية احتياجات التكنولوجيا الحديثة وتوفير تجربة أفضل للمستخدمين. من خلال استخدام HTML، يمكننا إنشاء صفحات ويب غنية بالمحتوى النصي والمرئي، وتجهيز الأساس لبناء مواقع تفاعلية باستخدام لغات مثل CSS وJavaScript.
في الدرس القادم، سنتناول كيفية كتابة أول صفحة HTML بسيطة باستخدام الوسوم الأساسية، وكيفية استخدام هذه الوسوم لبناء هيكل صفحة ويب كامل.
