مقدمة في الـ HTML5

HTML5 ستكون المعيار الجديد للغة HTML ، XHTML ، و HTML DOM . الإصدار الأخير من لغة HTML صدر عام 1999 و منذ ذلك الوقت تغير الويب تغييرات كثيرة وجذرية لذا توجب أنشاء إصدار جديد من اللغة ليواكب هذا التغييرات. HTML5 لم تصدر بشكل نهائي بعد فهي في نطاق التطوير وأغلب المتصفحات الحديثة تدعم بعض من مميزات HTML5.

كيف بدأت الـ HTML5 ؟


الـ HTML5 هي ثمرة التعاون بين (W3C) & (WHATWG) . WHATWG كانت تعمل على نماذج الويب Web Forms و تطبيقات الويب Web Applications ، بينما W3C تعمل على XHTML 2.0 ، في عام 2006 قرروا التعاون و إنشاء نسخة جديدة من الـ HTML .

ماهي الميزات الجديدة في الـ HTML5 ؟


  • وسم canvas للرسم .
  • وسوم video و audio لتشغيل الوسائط المتعددة .
  • دعم أفضل للخزن الغير متصل ( local offline storage )
  • وسوم وصف المحتوى الجديدة مثل article, footer, header, nav, section
  • تحكم أكبر بالنماذج مثل calendar, date, time, email, url, search.

ماذا عن توافق المتصفحات ؟


الإصدارات الحديثة من جوجل كروم و فايرفوكس و أوبرا و سفاري بالإضافة إلى إنترنت إكسبلور 9 تدعم بعض ميزات الـ HTML5 فقط ، تستطيع معرفة مدى توافق متصفحك مع الـ HTML5 عبر هذا الموقع HTML5 Test .

نوع الوثيقة DOCTYPE


< !DOCTYPE> هي ليست وسم Html إنما هي تعليمة وظيفتها إخبار المتصفح عن المعايير التي تستخدمها صفحة الإنترنت الخاصة بك، حيث توضح للمتصفح نسخة ال HTML المكتوبة بها الصفحة الحالية. في ال HTML 4 كان هنالك 3 أنواع من التعليمة DOCTYPE حيث كنا نستخدمها كمرجع لملف ال DTD. ولكن ولأن HTML5 غير مبنية على ال SGML فإنه يوجد لدينا فقط DOCTYPE واحدة، يجب كتابتها في بداية ملف ال HTML حتى قبل وسم ال HTML الخاص بالصفحة. أيضا يجب أن تعرف أن تعليمة ال DOCTYPE غير حساسة لحالة الأحرف، فإبمكانك كتابتها بالطريقة التي تشاء. يتم إستعمال ال DOCTYPE في ال HTML5 بالشكل التالي: < !DOCTYPE html> أو حتى: < !DoCtYpE hTmL>

ترميز الصفحة


تحديد الترميز فى صفحة الـ HTML الخاصة بك شئ اساسي ز في الـ HTML5 أصبح كد الترميز أيضاً أقصر و أبسط مثال :

‹meta charset=”utf-8”›
لاحظ على حالة الأحرف في كلمة utf-8 ،و إذا كنت تستعمل ترميز الـ utf-8 في موقعك فلا توجد ضرورة لكتابة الميتا أعلاه ، إضافة الكود للتوافق مع المتصفحات القديمة فقط .

الوسوم الجديدة


HTML5 جلبت معها المزيد من الوسوم الوصفية ، التي تساعد في عملية ترتيب المحتويات في الصفحة.ألق نظرة على الصورة التالية:

شئ مؤكد أنك لاحظت بعض الوسوم الغريبة عليك ، نعم إن بعض وسوم الـ HTML5 الجديدة ، فهي تساعد أكثر في تنظيم محتوى الصفحة وترتيبها سواء لنا أو لمحركات البحث ، سأشرح بشكل سريع أهم هذه الوسوم لذا تابع معي :

header للحصول على مقدمة للمستند أو الموقع أو المقال ، يجب أن يحتوي الوسم على عنوان المستند أو تاريخ النشر بالإضافة إلى مختصر للموضوع .

article المحتوى الأساسي ، مثل نص الموضوع ، تعليق و غيرها .

asideيستخدم لوضع أشياء متعلقة بالمحتوى الأساسي للصفحة مثل الملاحظات ، وغالباً يكون في شريط جانبي في الصفحة .

commandزر أمر ، مثال أزرار “حذف” , “تعديل” وغيرها من الأوامر .

details لوصف تفاصيل حول الموضوع أو مقتطف عنه .

summary ملخص للموضوع هذا العنصر يكون داخل عنصر details .

footer لتذييل المستند أو الموقع أو حتى الموضوع ، يمكن أن تشتمل على أسم الكاتب ، تاريخ آخر أضافة للمستند ، معلومات الاتصال ، أو حقوق النشر .

hgroup مجموعة العناوين ، وذلك بإستخدام h1إلى h6 .

mark للنص الذي ينبغي تسليط الضوء عليه ، غالباً ما يأتي بخلفية صفراء .

meterللقياس ، تستخدم إذا كان الحد الأقصى والأدنى من القيم معروف .

nav لوضع قائمة الإبحاء ، مثل القائمة العلوية ، قائمة الروابط و غيرها …

progress حالة التقدم في العمل .

section لوصف اجزاء المستند ، مثلاً جزء التعليقات ، جزء الأخبار .. الخ .

time لتحديد الوقت أو التاريخ أو كلاهما .

wbr خط فاصل .

وسوم الوسائط المتعددة الجديدة :

audio لمحتوى الوسائط المتعددة والأصوات والموسيقى أو غيرها.

video لمحتوى الفيديو ، مثل فيلم أو مقطع الفيديو وغيرها.

source لموارد وعناصر وسائل الاعلام ، الذي يعرف داخل الفيديو أو العناصر السمعية .

embed المحلقات مثلا مشاهد الفلاش و غيرها . وسوم الرسم الجديد :

canvas يستخدم للرسم عن طريق الجافا سكربت . الوسوم الجديدة في النماذج :

datalist قائمة من الخيارات لقيم الإدخال

keygen انتاج مفاتيح لمصادقة المستخدمين .

output لأنواع مختلفة من المخرجات .

القيم الجديدة للمدخلات :

  • tel قيمة المدخلات من نوع رقم الهاتف.
  • search حقل الإدخال هو حقل البحث
  • .url قيمة الإدخال هو عنوان .
  • email قيمة الإدخال واحد أو أكثر من عناوين البريد الالكتروني .
  • datetime قيمة الإدخال هي التاريخ أو الوقت .
  • date قيمة الإدخال هي التاريخ .
  • month قيمة الإدخال هي شهر .
  • week قيمة الإدخال هي أسبوع .
  • time قيمة الإدخال هي وقت .
  • datetime-local قيمة الإدخال هي تاريخ ، رقم محلي .
  • number قيمة الإدخال هي رقم .
  • range قيمة الإدخال هي رقم في نطاق معين .
  • color قيمة الإدخال هي لون .

الإنتقال من الـ XHTML


HTML5 بلا شك الإختلافات بين الـ HTML5 والنسخ السابقة كبيرة جداً ،، الـ HTML5 أكثر بساطة الان وأكثر سهولة في الإستخدام ، HTML5 الان اكثر مرونة من قبل لتجعل عميلة الإنتقال أكثر بساطة . فمثلا ، الان عندما نريد إدراج صورة فإننا نستخدم :

بينما في النسخ السابقة كنا نستخدم :

لا حظت الفرق ؟ نعم في الـ HTML5 لاداعي للشرطة المائلة للإغلاق ، هذا ينطبق على كل الوسوم في الـ HTML5 ، ولكن يجب أن تعلم أن الطريقتين صحيحة أيضاً فلايوجد داعي للتعب نفسك في إزال الشرطة المائلة من كل الوسوم التي كتبتها مسبقاً !! أيضاً عند إستداء ملفات الجافاسكربت ، فإننا نستخدم :

‹script src='example.js' ›

بينما في النسخ السابقة من الـ HTML :

‹script type='text/javascript' src='example.js' /›

هذا ينطبق أيضاً على وسم الـ style ، فنحن لم نعد بحاجة إلى عنصر type لوصف محتوى ملفات الجافاسكربت أو الستايل ، ولكن يجب أن تعلم أن الطريقتين صحيحة أيضاً . حالة الأحرف في الـ HTML5 لم تعد مهمة يمكنك كتابة الوسوم بحالة الأحرف التي تريدها : مثلاً : hEaDeR , HEADER

مواقع تساعدك في تعلم الـ HTML5


5 رأي حول “مقدمة في الـ HTML5”

اترك رد