المعلوماتية > برمجيات

تعرف إلى الإصدار الخامس من لغة HTML!

ما هي HTML؟

تم تطوير هذه اللغة من قِبل تيم بيرنرز لي "Tim Berners-Lee" في عام 1990، وهي اختصار للغة توصيف النص التشعبي (Hyper Text Markup Language)، وتُستعمل في خلق الوثائقِ الإلكترونية (التي تُسمّى صفحات pages) على الإنترنت. وتحتوي كلُّ صفحةٍ على سلسلة من الاتصالاتِ التي تنقلنا إلى صفحاتٍ أخرى وتُسمى الروابط التشعبية (hyper links)؛ فكلُّ صفحةٍ تراها على الإنترنت قد تمّت كتابتها بواسطة أحد إصدارات رماز HTML.

يقوم رماز HTML بضمان التنسيق الصحيح للنصوص والصور حتى يقومَ متصفحُ الإنترنت بعرض محتويات الصفحات للمستخدمين كما من المفترض أن تظهر. وبدون الـHTML فالمتصفح لن يعلمَ كيف يتوجّبُ عليه أن يعرِضَ النصوصَ وأن يحمّلَ الصور وغيرها من العناصر. كما توفّر HTML بنيةً أساسيةً للصفحة باستخدام CSS (Cascading Style Sheets) التي تمكّنُنا من تغيير المظهر، أي أننا نستطيع تشبيه HTML بعظام (بنية) صفحات الإنترنت، والـCSS بالجلد (المظهر).

كيف يبدو وسم هذه اللغة HTML tag؟

نلاحظُ في الصورة أعلاه عدمَ وجودِ عددٍ كبيرٍ من المكوّنات، وكل وسوم HTML تقريباً تحوي وسمَ بدايةٍ يتضمن اسمَ الوسم مع أي متحوّلات، ووسمَ إغلاقٍ يتضمن "/" مع اسمِ الوسم الذي يتمّ إغلاقه. أما من أجل الوسوم التي لاتملك وسمَ إغلاق مثل <img> فتتمُّ عملية إغلاقها باستخدام "/".

يكون كل وسمٍ محتوىً ضمن إشارتي "أكبر <" و"أصغر > " ، وكل ماهو موجودٌ بين وسمي البداية والإغلاق يتأثر بهذا الوسم.

في المثال السابق يتمّ خلق رابط يشير إلى الملف hope.html تحت اسم Computer Hope.

بعض الوسوم الأساسية في هذه اللغة:

تتضمن هذه اللغةُ العديدَ من الوسوم التي تشكِّلُ مختلفَ مكونات صفحات الإنترنت التي نراها في كل مكان، ومنها:

· <html> يعرّف الملفَ الخاص بهذه اللغة.

· <body> يعرّف جسم الملف الخاص بهذه اللغة.

· <h1> وحتى <h6> يعرّف العناوين بحجومٍ مختلفة تتناسب عكساً مع الرقم الموجود ضمن الوسم.

· <p> يعرّف مقطعاً نصيّاً.

يعطي سطراً فارغاً بين مكوّنين.

· <!--> لكتابة التعليقات (والتعليقات تُستخدم لمساعدة المبرمجين على فهم الرماز دون أن تؤثّرَ على النتيجة ولا تظهر ضمن صفحة الإنترنت)

· <li> يعطي لائحةً مرتّبةً نقطيّة.

· <a> يعطي رابطاً تشعّبياً إلى صفحةٍ أخرى كما ذكرنا في المثال السابق.

· <table> يعطي جدولاً يمكن التحكّم بأسطره عبر الوسم <tr> وخلاياه عبر الوسم <td>.

الآن، ما هي HTML5؟

HTML5 هو التحديثُ الصادر من لغة HTML على الإصدار HTML4، وذلك في شهر تشرين الأول من عام 2014، وتستخدم HTML5 القواعدَ الأساسية الخاصة بالإصدار السابق نفسها، ولكنّها أضافت وسوماً ومتحوّلاتٍ جديدةً لتحسين الدلالات والعناصر الديناميكية التي تمّ تفعيلها مع استخدام الجافا سكريبت Java Script. (وهي لغة برمجةٍ من جهة المستخدم ولا علاقة لها بالمخدّم، ويقوم المبرمج بتضمين رمازها ضمن عمله من أجل تحقيق ما يستحيل تحقيقه عن طريق HTML لوحدها كطباعة الوقت والتاريخ وغيرها).

الوسوم الجديدة التي تمّت إضافتها في HTML5:

· <article> ويصف قسماً مستقلّاً من المحتوى؛ أي أنه من الممكن توزيعُ مضمون هذا الوسم بشكلٍ منفصلٍ عن بقية محتويات الموقع الإلكتروني. ومن الأمثلة على استخدام هذا الوسم هي المنتديات ومقالات الصحف والمجلّات.

· <aside> ويصف قسماً من المحتوى بحيث يكون هذا القسم مرتبطاً بشكلٍ جزئيٍّ مع المحتوى المجاور له ومنفصلاً عمّا تبقى من المكوّنات. ومن أفضل الأمثلة على استعماله الشريط الجانبي والإعلانات ذات الصلة والروابط التي تأخذ المستخدم إلى مقالاتٍ مشابهة.

· <audio> ويُستعمل لتضمين مقطعٍ صوتيٍّ ضمن صفحة الانترنت كأغنيةٍ أو تسجيل مقابلةٍ ما.

· <bdi> وهو اختصارٌ للمصطلح (bidirectional isolation) ويعني العزلةَ ثنائية الاتجاه. يُستعمل هذا الوسم لحصر قسمٍ من المحتوى قد يكون مصمّماً باتجاهٍ مختلفٍ عن بقية محتويات الصفحة، ويعدُّ هذا الوسم مفيداً في حال وجود نصٍّ باتجاهٍ غير معروفٍ ضمن نصٍّ محدّد الاتجاه.

· <canvas> ويُستعمل لرسم الأشكال البيانية باستخدام لغاتٍ نصّية (scripting languages) مثل الجافا سكريبت، وهو مفيدٌ في حال رغبة المبرمج بتضمين بعض الأشكال أو الرسوم المتحركة "على الطاير".

· <datalist> ويُستعمل لتصميم لائحةٍ من الخيارات بالمشاركة مع الوسم <input> الذي يأخذ الدخل من المستخدم لتحقيق التفاعل ضمن صفحات الإنترنت. ويفيد الوسم <datalist> في عرض خياراتٍ عبر اللوائح المنزلقة أو الإكمال التلقائي عندما يبدأ المستخدم بالكتابة ضمن الحقل المخصص له.

· <details> ويستعمل لخلق أدواتٍ تفاعليةٍ (widgets) قد يكون محتواها مخفّياً، فقد يرغب المبرمج بعرض المزيد من المعلومات حول مكوّنٍ ما من دون حجز مساحةٍ إضافيةٍ لذلك، وعندها يستطيع الاستفادة من هذا الوسم في عرض هذه المعلومات وإخفائها حسب رغبة المستخدم.

· <embed> ويُستعمل لتصميم مساحةٍ مخصّصة للمحتوى التفاعلي كالأدوات المُضمَّنة (plugins) أو التطبيقات الخارجية، وذلك في حال رغبة المبرمج بإضافة محتوى قد لا يكون مدعوماً أساساً من قبل المتصفّح.

· <figure> ويُستعمل لتصميم منطقةٍ مخصّصة لمحتوى مستقل لا يؤثر على المجرى الأساسي للمقال، كالخطوط البيانية والرسوم التوضيحية وأجزاء الرماز المُضمَّنة. · <figcaption> وهو وسمٌ اختياري يُستعمل لتوضيح ما هو موجود ضمن <figure>، كالنصوص التوضيحية التي توضع في نهاية الجداول والصور لشرح محتواها.

· <footer> ويُستعمل لتصميم تذييلٍ خاص بالملف أو بقسمٍ منه، كما في حالة الرغبة بعرض معلوماتٍ عن كاتب ما أو روابط لصفحاتٍ مماثلة أو معلومات الاتصال أو معلومات حقوق النشر وغيرها.

· <header> ويُستعمل لاحتواء عناصر التجوال أو العناصر التمهيدية، كشعار الموقع الإلكتروني وروابط أقسام الموقع الرئيسية وصندوق البحث وغيرها.

· <keygen> ويُستعمل لتصميم حقل مولّد لأزواجٍ من المفاتيح (مفتاحٍ عام يُرسَل إلى المخدّم ومفتاحٍ خاص يُخزّن محلياً) ضمن الاستمارات الإلكترونية وذلك لتحقيق الحماية والخصوصية للمستخدم.

· <mark> ويُستعمل لتسليط الضوء على قسمٍ معيّنٍ من النص قد يكون مهمّاً للمستخدم كنتائج البحث الأخيرة التي قام بها.

· <meter> ويُستعمل لتشكيل قياسٍ ضمن مجالٍ معين بحيث يمكن تقسيم هذا القياس إلى قيمٍ عدديةٍ أو كسريّة، ويُعدُّ مفيداً في العرض البصري لقيمٍ معينة كعرض المساحة المستخدمة ضمن أحد الأقراص الصلبة أو ضمن الذاكرة على سبيل المثال.

· <nav> يُستعمل لتصميم كتلةٍ من الروابط على شكل شريط، بحيث يكون كل زرٍ من هذا الشريط رابطاً لصفحةٍ ما.

· <output> يُستعمل لعرض نتيجة عملٍ أو حسابٍ قام به المستخدم كالعمليات الحسابية التي قام بها رمازٌ نصّيٌ ما.

· <progress> ويُستعمل لعرض المرحلة التي وصلت لها عمليةٌ جاريةٌ لاتزال قيد التنفيذ، وذلك ضمن شريطٍ أو إطار. ويتم التعاون مع جافا سكريبت للتعامل مع القيم الخاصة بهذا الوسم.

· <rp> ويُستعمل لتصميم أقواسٍ تحدّد ما سيتمّ عرضه ضمن المتصفحات التي لا تدعم مبادئ الروبي (Ruby).

· <rt> ويُستعمل لتحديد طريقة النطق الخاصة بكلمات وحروف شرق آسيا.

· <ruby> ويُستعمل لتصميم مفهوم روبي ضمن الموقع وذلك لمساعدة زوّار الموقع على نطق الحروف الخاصة بشرق آسيا.

· <time> ويُستعمل لعرض التاريخ والوقت بصيغةٍ مقروءة وواضحةٍ للبشر. كما أنه يسمح بعرض التاريخ والوقت بلغة الآلة وذلك من أجل تفعيل جدولة الأحداثِ ضمن التقويم.

· <track> يُستعمل في حال رغبة المبرمج بإضافة الشروحات أو الترجمة أو أي شكلٍ من النصوص لعرضه ريثما يتم عرض ملف الوسائط المتعدّدة كالصوت أو الفيديو.

· <video> ويُستعمل لتضمين ملفات الفيديو ضمن صفحات الموقع الإلكتروني.

· <wbr> ويُستعمل في إعطاء المتصفّح خيار تقسيم الأسطر النصّية الطويلة، كتقسيم الكلمات والعناوين الطويلة عندما يتغيّر حجم الشاشة ويصبح أصغر.

كما تمّت إضافة صيغٍ جديدة لما يقوم المستخدم بإدخاله وتدعى أنماط الدخل (input types) وهي:

· tel لأرقام الهواتف.

· search لحقول البحث.

· url لعناوين المواقع الإلكترونية.

· email لعناوين البريد الإلكتروني بصيغتها النظامية.

· datetime تجمع التواريخ والأوقات لإعطاء توقيتٍ محدّد في يومٍ ما.

· date للتواريخ.

· month للأشهر.

· week للأسابيع (على سبيل المثال: الأسبوع 31 من السنة 2015).

· time للوقت.

· datetime-local تشبه النمط datetime المذكور سابقاً، ولكنها تشمل تحديد المنطقة الزمنية.

· number للقيم العددية.

· range للقيم العددية ضمن مجالٍ معيّن.

· color للألوان، حيث تسمح للمستخدم باختيار لونٍ معين وتعيد القيمة الستّ عشرية لهذا اللون.

ومع نموّ الرغبة في فصل البنية عن التصميم، تمّت إزالة بعض العناصر بسبب احتوائها على مشاكل في الوصول أو لقلّة استعمالها وهي:

· <acronym>

· <applet>

· <basefont>

· <big>

· <center>

· <dir>

· <font>

· <frame>

· <Frameset>

· <noframes>

· <strike>

· <tt>

وأخيراً، ما هو أدوبي فلاش (Adobe Flash) وما الفرق بينها وبين HTML5؟

أدوبي فلاش هو منصّةٌ برمجية للوسائط المتعدّدة، وتُستعمل بشكلٍ أساسيّ لتشكيل الأشكال البيانية والرسوم المتحركة والألعاب بشكلٍ شعاعيّ. ويتم تشغيل هذه المكوّنات ضمن مشغّل أدوبي فلاش (Adobe Flash Player). يُستعمل مشغّل أدوبي فلاش لإضافة مقاطع الفيديو والمقاطع الصوتية والإعلانات ومكوّنات الوسائط المتعددة إلى صفحات الإنترنت.

يعدُّ الفلاش تقنيةً قديمةً بالمقارنة مع HTML5، وقد كانت تحتاج لتضمين إضافة فلاش(Flash Plugin) ضمن المتصفّح، في حين أن معظم المتصفّحات تدعم HTML بشكلٍ تلقائي ولا تحتاج لأية إضافات.

بعض الفروقات بين الفلاش وHTML5:

· يحتاج الفلاش لتضمين الإضافات الخاصة بها ضمن المتصفّحات، في حين تعمل HTML5 بشكلٍ تلقائي.

· تعدُّ HTML5 نسخةً موسّعةً أخف وأسرع وأكثر دعماً من الفلاش.

· يعدُّ الفلاش أكثر شعبيةً لتشغيل مقاطع الفيديو والرسوم المتحركة من HTML5.

· تعدّ أدوات تطوير الفلاش أكثر تكلفةً من محرّرات HTML5.

· إن استعمال الفلاش يجعل تضمين الإعلانات ضمن مقاطع الفيديو أكثر سهولةً.

· يحتاج الفلاش لطاقةٍ أكبر من وحدة المعالجة المركزية CPU ضمن جهاز الحاسوب.

وهكذا نلاحظ الهيمنة الكبيرة التي فرضتها HTML بإصدارها الأخير القادر على تلبية كل احتياجات مستخدمي الإنترنت والمزيل لكل العوائق أمام طموحات المبرمجين والمطوّرين، لتصبح كما يقول الكثيرون «مستقبل التصفّح وسيّده».

المصادر:

هنا