أحدث 10 وسوم في لغة HTML5

شاركShare on Facebook68Tweet about this on TwitterShare on Google+1Pin on Pinterest0Share on Tumblr0Share on StumbleUpon0Share on LinkedIn0

html 5 tags

تقدم لغة HTML5 مجموعة جديدة من الوسوم التي من شأنها أن تضفي مزيدا من القوة والكفاءة والمرونة في تطوير مواقع الويب.

تقدم لغة HTML5 مجموعة من العناصر والصفات التي تساعد المطورين لجعل صفحات الويب أكثر فهما للأنظمة المختلفة وبالأخص محركات البحث و تعرض المحتويات بشكل فريد ومميز وتزيل عبأ كبيرا عن المتصفحات في تحميل ملفات JavaScript المعقدة والاضافات مثل Flash و Sliverlight لتتعامل معها.

اليك أحدث 10 وسوم في لغة HTML5 لتجعل عملية كتابة الأكواد أكثر سهولة من ذي قبل.

1-<video> و <audio>

واحد من أهم الاستخدامات لملفات Flash و Silverlight وما يشبها من تقنيات هو ادراج عنصري الحركة والصوت للموقع، تدعم لغة HTML5 القدرة على التحكم في ملفات الصوت والفيديو لتستطيع المتصفحات عرض عناصر التحكم وعرض المحتوى باستخدام JavaScript وكما أنهت مشكلة ترميز ملفات الصوت والفيديو التي طالما شغلت بالنا وسببت الكثير من المشاكل واتاحة الفرصة لتحديد أكثر من مصدر للمحتويات لتسمح بعرض ملفات الصوت والفيديو في متصفحات زوار الموقع دون الاهتمام ان كان متصفحهم يدعم ترميز تلك الملفات.

2- <input>

أضيف للعنصر <input> العديد من القيم لصفاتها وبناءا على كل قيمة يقوم المتصفح بوظائف متميزة … على سبيل المثال اذا استخدمنا datetime يعرض المتصفح رزنامة وساعة لاختيار التاريخ والوقت المناسب وكما توجد مجموعة كبيرة من السمات عن

د التعرف عليهم ستوفر الكثير من الوقت والمجهود في كتابة أكواد JavaScript

3- <canvas>

يقدم وسم <canvas> نفس استخدامات GDI+ أو NET Image object. وان لم يكن أفضل منهما ولكنه مميز جدا في انشاء الرسوم البيانية والتي كانت في السابق أحد نقاط الضعف في لغة HTML.

4- <header> و <footer>

وسمين جديدين تم اضافتها في لغة HTML5 وقد لا يختلفان في وظيفة العرض عن وسم <div> ولكنهما

مع مرور الوقت سيؤثران بشكل جيد على أداء الموقع في تهيئة محركات البحث SEO ويساعدهم على الفصل بين المحتوى المهم بالنسبة للمستخدم وباقي محتوى الصفحة.

 5- <article> و <section>

وسمين جديدين أيضا تم اضافتهما للغة HTML5 يساعدان على رفع الأداء ونسبة ظهور الموقع في محركات البحث ويمكن استخدامها لتقسيم article لأكثر من section والعكس صحيح وقد يبدو ذلك أمرا غريبا ولكنه ليس كذلك فان article عبارة عن كتلة من المحتوى و section عبارة عن جزء من المحتوى كاملا … على سبيل المثال اذا نظرنا الى الصفحة الرئيسية لأي مدونة قد نجد section يحتوي على مجموعة من المشاركات وكل مشاركة تحتوي على article وبداخلها section يحتوي على المشاركة نفسها والتعليقات.

6- <details>

تحتاج أغلب مواقع الويب الى مساحة نصية قابلة للتوسعة والتصغير حسب الاستخدام ومن السهل جدا انشاؤها عن طريق JavaScript أو عن طريق ملقم الويب (السيرفر) ولكن مع استخدام وسم <details> أصبح الأمر أكثر سهولة وأصبحت عملية توسعة وتصغير المساحة النصية بمجرد النقر عليها ولكنها لم تحصل على دعم على نطاق واسع في المتصفحات ولكن قريبا سيحدث ذلك.

7- <datalist>

يؤدي وسم <datalist> نفس وظائف combo box وما على المستخدم سوى تعبئة الخيارات وكما أن لها العديد من الاستخدامات مثل صندوق بحث يعتمد على بيانات سابقة من المستخدم والتي كانت تحتاج في السباق لمجموعة من أكواد JavaScript لفعلها.

8- <progress> و <meter>

وسمي <progress> و <meter> متشابهين ويستخدم وسم <progress> مقياس لما تم انجازه في شئ ما أو لأمر غير معروف المدة مثل البحث في قاعدة البيانات أما وسم <meter> يستخدم كمقياس للقيمة مثل الثرومتر وعدد الوحدات المستخدمة وغيرها.

9- <figure> و <figcaption>

يعتبر وسم <figure> بمثابة عداد للمحتوى مثل الصور أو أي شئ آخر و أما وسم <figcaption> يستخدم داخل وسم <figure> لادراج تعليق أو عنوان فرعي … على سبيل المثال ان كانت لديك 4 صور لرسوم بيانية لنمو مبيعات الشركة من خلال هذين الوسمين تستطيع اضافة عناوين مثل نمو مبيعات الشركة من عام 2008-2012

10- <output>

وسم <output> فريد من نوعه ويتم توليد محتواه ديناميكيا وأكثر استخداماته في العمليات الحسابية وهي طريقة سهلة ومريحة عما نفعله للحصول على نفس النتائج.

وسوم أخرى

نعم هناك وسوم أخرى وان كانت لديك احداها لا تترد وشاركنا المعلمومة.

كما يمكن الاطلاع على المواضيع التالية:

مقدمة في لغة HTML

ما الفرق بين HTML و HTML5

ما تعني كلمة دومين DOMAIN؟

ساعدنا في اختيار محتوى لمدونة المليون دولار – اكتشف نفسك

كيف تختار محتوى متميز للمدونة؟

شاركShare on Facebook68Tweet about this on TwitterShare on Google+1Pin on Pinterest0Share on Tumblr0Share on StumbleUpon0Share on LinkedIn0

Comments

comments

تعليق واحد

  1. شكرا لكم جزيلا على هذه المعلومات المفيدة 🙂

اضف رد

لن يتم نشر البريد الإلكتروني . الحقول المطلوبة مشار لها بـ *

*