رسالة الموقع

ما هي الـ HTML5 و أشهر عناصرها


الـ HTML5 هي أحدث نسخة من لغة ترميز صفحات الويب HTML حتى الآن, و تم تصميمها بوضع عدة نقاط في الاعتبار :
- الحاجة لتقليل الاعتماد على العناصر الخارجية مثل الفلاش
- الحاجة لتقليل الاعتماد على شيفرات الجافا اسكربت الأساسية
- يجب أن تكون لغة الـ HTML5 مستقلة عن نوع الأجهزة التي تعمل عليها
    
وقد قدمت الـ HTML5 مجموعة كبيرة من المزايا التي لم يكن متاح تحقيقها من قبل , مثل :
- العنصر video, audio لعرض وتشغل ملفات الفيديو و الملفات الصوتية
- العنصر canvas لتنفيذ العمليات الرسومية
- دعم تخزين البيانات في ذاكرة المتصفح offline storage والتي قدمت مزايا لا توفرها الكوكيز العادية
- مجموعة جديدة من أنواع المدخلات input types لتسهيل عملية التحقق من صحة البيانات وتسهيل عملية كتابة البيانات
- مجموعة جديدة من العناصر لدعم أنواع معينة من المحتوى
    
    

أهم العناصر الجديدة HTML5 New Tags


    

<header>
رأس الصفحة أو رأس القسم أو رأس المقالة , يمكن أن يتضمن هذا العناصر عنوان الموقع الرئيسي و روابط الموقع , أو عنوان المقالة

<footer>
ﻫﺬﻩ اﻟﻌﻼﻣﺔ ﻟﺘﺬﻳﻴﻞ نهاية اﻟﺼﻔﺤﺔ أو نهاية ﻗﺴﻢ ﺿﻤﻦ اﻟﺼﻔﺤﺔ ﺣﻴﺚ يمكن أن ﺗﻀﻢ اﺳﻢ اﻟﻜﺎﺗﺐ ﻣﺜﻼ ,ﺗﺎرﻳﺦ كتابة المقالة , وﻣﻌﻠﻮﻣﺎت اﻻﺗﺼﺎل أو ﻣﻌﻠﻮﻣﺎت ﺣﻘﻮق اﻟﻨﺸﺮ

<nav>
يتضمن هذا الوسم "tag" روابط التنقل ضمن الصفحة أو في الموقع
    
<aside>
يستخدم هذا الوسم للقوائم الجانبية والتي عادة تتضمن محتوى أقل أهمية من محتوى الصفحة الرئيسي
    
<main>
يتم وضع محتوى الصفحة الرئيسي داخل هذا العنصر, ويلاحظ أن الصفحة الواحدة لا يمكن أن تتضمن أكثر من عنصر main

<article>
من أهم عناصر الـ HTML5 الجديدة, وهو العنصر الخاص بالمقالات أو الأخبار أو مواضيع المنتديات حيث يتم وضع كل ما يتعلق بالمقالة من صور و عناوين رئيسية و نصوص داخل هذا العنصر
و طبعا يمكن أن تتضمن الصفحة الواحدة أكثر من مقالة , أو لنقل أكثر من <article>
    
<section>
يستخدم هذا العنصر لإضافة المحتوى المترابط ببعضه و الذي يمكن فصله عن باقي محتوى الصفحة , وفي الغالب يكون القسم section له عنوان h1,h2,h3... ولكن يمكن أيضا ألا يتضمن عنوان heading
كذلك , قد نجد أن المقالة الواحدة <article> بها أكثر من <section> و قد نجد الـ <section> به أكثر من مقالة <article> وقد لا يتضمن أحدهما الآخر
    
<time>
للتعريف بنص على أنه وقت أو تاريخ , وهذا الوسم تكون خاصية الـ display الإفتراضية له inline بعكس باقي عناصر الـ HTML5 التي تكون خاصية الـ display الإفتراضية لها block
    
<video>
<audio>

وهما عنصرا عرض ملفات الفيديو المرئي و الملفات الصوتية , وكلاهما يعمل بنفس الكيفية باستثناء أن الفيديو يمكن أن يكون له صورة غلاف poster attribute بخلاف الأوديو
أيضا كلاهما ( يمكن أن ) يستخدم العنصر <source> لإدراج ملف الفيديو و الملف الصوتي
<video controls autoplay muted loop preload="metadata" poster="images/video-poster.jpg" width="320" height="240">
<source src="videos/file.flv" type="video/flv">
<source src="videos/file.mp4" type="video/mp4">
<p>Your browser does not support the video tag.</p>
</video>

<canvas>
سبق وأن أشرنا لهذا العنصر , وهو الذي يمكننا من إدراج رسوميات عن طريق الجافا اسكربت. الرسوميات هنا نقصد بها ما نقوم نحن برسمه داخل هذا العنصر عن طريق لغة برمجية أخرى , وفي الغالب تكون الجافا اسكربت.
    
<progress>
<meter>
وهما متشابهان و يؤديان وظيفة متقاربة , فعنصر <progress> يستخدم لإظهار مستوى التقدم في عملية معينة , مثلا نسبة ما تم تحميله من ملف ما , وعن طريق الجافا اسكربت تستطيع زيادة وتحديث هذه النسبة حتى تصل للـ 100%
أما عنصر <meter> فيستخدم لتوضيح نسبة ما تم استخدامه أو تحقيقه
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>

<br>

<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter>

<br>

<label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="0.6">60%</meter>

مازال لدينا مجموعة أخرى من العناصر الجديدة التي تمت إضافتها في لغة الـ #HTML5 ولكن ما سبق هو الأهم والأكثر استخداما منها 😀

أنواع المدخلات الجديدة HTML5 Input New Types

حقول المدخلات <input> قديما كنت أنواعها قليلة جدا ومحصورة في الـ text,password,radio,checkbox,submit و reset
ولكن مع تطور الويب اصبحنا بحاجة لمجموعة أكبر وأكثر من المدخلات , وهذا ما قدمته لنا الـ HTML5
    
tel
عند تحديد قيمة الخاصية type للعنصر input بالقيمة tel فهذا يعني أن القيمة التي سيتم إدخالها هي رقم تليفون
    
search
يعني أن الحقل النصي يستخدم للبحث
    
email
يعني أن ما سيتم إدخاله هو عنوان بريد إلكتروني
    
date
يعني أن ما سيتم إدخاله تاريخ , ولكن يلاحظ أن صيغة التاريخ يتحكم بها برنامج المتصفح نفسه و قد تختلف من متصفح لآخر
    
time
يعني أن ما سيتم إدخاله هو وقت ( الساعة )
    
number
يعني أن ما سيتم إدخاله رقم فقط
    
range
عند تحديد قيمة الخاصية type للعنصر input بالقيمة range هذا يعني أن القيمة التي سيتم إدخالها يجب أن تكون محصورة بين قيمة دنيا وقيمة عليا , لاحظ المثال التالي
<label for="points">Points (between 0 and 10):</label>
<input type="range" id="points" name="points" min="0" max="10">

color
عند تحديد قيمة الخاصية type للعنصر input بالقيمة color هذا يعني أن القيمة التي سيتم إدخالها هي كود لون ست عشري , مثلا # FF0000
هذه هي أكثر الأنواع المستخدمة للعنصر input والتي أضافتها الـ HTML5 , ولكن توجد مجموعة أخرى من الأنواع يندر استخدامها , مثل : url, datetime-local, month, week

    

الخصائص الجديدة للنماذج وحقول الإدخال HTML5 New Form & Input Attributes

في الـ HTML5 توجد خصائص جديدة للعنصر <form> و العنصر <input> وهي كما يلي:
الخاصية autocomplete
هذه الخاصية توضح هل النموذج أو حقل الإدخال يتمتع بخاصية الإكمال التلقائي autocomplete أم لا.
ويمكن تطبيق هذه الخاصية على النموذج form نفسه أو على أحد المدخلات من نوع text, password, url, search, tel, email, datepickers,range, color
حيث أن المستخدم بمجرد أن يبدأ في الكتابة يقوم المتصفح بعرض وإظهار قيم يمكن إدخالها في الحقل النصي بناءا على ما قام المستخدم بإدخاله في المرات السابقة في هذه الحقول.
    
الخاصية min
تستخدم لتحديد الحد الأدنى أو القيمة الدنيا للحقول من نوع number, date pickers, range
    
الخاصية max
مثلها مثل الخاصية min ولكنها لتحديد الحد الأقصى أو القيمة العليا , وتزيد عنها أنها تستخدم مع العناصر <progress> و <meter> أيضا

الخاصية step
وهي تحدد قيمة كل خطوة بين القيم المسموح بإدخالها في الحقول من نوع number, date pickers, range
<input type="range" name="price" min="10" max="100" step="5">
الخاصية multiple
و تعني أن حقل الإدخال input يمكن أن يحمل أكثر من قيمة في نفس الوقت , وهذه الخاصية تعمل فقط على المدخلات من نوع email و file

الخاصية required
و تعني أن حقل الإدخال يجب تعبئته بقيمة قبل إرسال النموذج

الخاصية novalidate
و تعني أن حقل الإدخال لا يجب أن يتم التحقق من صحة ما تم إدخاله من معلومات به قبل إرسال النموذج. مثلا الحقل من نوع email يجب أن يتم إدخال عنوان بريد به , ولو تم إدخال أرقام بدلا من عنوان البريد الألكتروني
وحاولت إرسال النموذج سوف تحصل على رسالة خطأ ( من الـ HTML5 ) ولن يتم إرسال النموذج
ولكنك تستطيع عن طريق إضافة خاصية novalidate لهذا الحقل أو للنموذج نفسه <form> أن تعطل خاصية التحقق من صحة المدخلات و عندها سيتم إرسال النموذج حتى لو كان من تم إدخاله من بيانات غير صحيح وفقا لنوع الحقول.

الخاصية pattern
و هي توضح التعبير النظامي Regular Expression الذي يجب أن تتطابق معه مدخلات الحقول للتحقق من صحة المدخلات.

الخاصية placeholder
وهي عبارة نصية تظهر في حقل الإدخال كرسالة للمستخدم توضح له نوع البيانات التي يجب أن يقوم بإدخالها


    
بقي لنا أن نتكلم عما قدمته لنا الـ HTML5 من وسائل لتخزين البيانات على أجهزة المستخدمين , localStorage و sessionStorage وهو ما يجب أن نفرد له موضوع خاص 😀
المشاركات اﻷكثر تفاعلا