HTML5 ( الدرس السابع ) : HTML5 Tag

[عاليا]

بسم الله الرحمن الرحيم

درسنا اليوم : HTML5 Tag
HTML5 Tag Reference

لم يتم اعتماد هذه الوسوم بعد من قبل الـ W3C لذا سنعرض فكرة عامة عنها وما هو الجديد فيها وما الوسوم التي لا تدعمها لغة HTML5 .

[عاليا]

- يعتبر الهدف الأساسي للـ HTML5 هي زيادة التوافقية في الإنترنت (بين المواقع و المتصفحات و بين المواقع بحد ذاتها)، إضافة إلى تقليل تكاليف تطوير صفحات الإنترنت: من خلال إدخال الـ HTML إلى مجال تطوير الـ Web Application. حيث أصبح بإمكاننا بناء Applications بسيطة بدون الحاجة لاستخدام لغات الـ Server Side.
- تحتوي لغة HTML5 على العديد من الوسوم الجديدة مثل : <nav>, <header>, <footer>, <figure..
- تضم مجموعة العمل التي تقوم على تطوير ودعم معايير هذه اللغة كلا من : AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many hundreds of other vendors.
- حتى اليوم ما زال الإنترنت يعمل على النسخة 4 و إصداراتها الفرعية، لذلك الـ HTML5 لم يتم اعتماده بعد من قبل الـ W3C.

وسوم HTML4 ومازالت تستخدم في لغة HTML5 للمراجعة :
http://forum.ma3ali.net/t345356.html
http://forum.ma3ali.net/t345615.html

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

<article> : يحدد جزء معين من الصفحة .
يمثل الوسم Article جزء معين من الصفحة، من الممكن أن يحتوي على أشياء منفصلة، مثلا خبر كامل، أو مقالة مجلة أو صحيفة أو Blog، بإمكانك أيضا اعتبار الـ Comments الخاصة بالمستخدمين ك articles أو حتى نموذج يتم تعبئته من قبل المستخدمين.
إذا بشكل عام يحتوي هذا الوسم على المحتويات المنفصلة و الأساسية في الصفحة.
HTML5 article Tag

<aside> : يحدد أشياء تتعلق بالمحتوى .
يستخدم هذا الوسم لوضع أشياء متعلقة بالمحتوى الأساسي للصفحة. وغالبا ما يكون هذا المحتوى في شريط جانبي في تلك الصفحة.
حيث يمكن مثلا وضع تصويت معين في هذا القسم، أو روابط لمقالات متعلقة بالمحتوى الحالي، أو محتوى إعلاني معين، أو أي أشياء شبيهة أخرى. يمكن أيضا أن يحتوي هذا الوسم على الوسم nav الذي يمثل روابط للتنقل.
HTML5 aside Tag

<footer> : يمكن استخدامه أكثر من مرة في الصفحة .
الوسم footer يكون عادة متواجد في نهاية (ليس شرطا) الأقسام “Sections” أو الصفحات، حيث يمكن استخدامه في أكثر من مكان في الصفحة الواحدة.
عادية يحتوي هذا القسم على معلومات، مثل كاتب القسم أو الصفحة الحالية، تاريخ آخر إضافة أو تعديل، معلومات حقوق النشر و النقل، أو حتى روابط ذات علاقة بالمحتوى الحالي.
HTML5 footer Tag

<header> : يمكن استخدامه أكثر من مرة في الصفحة .
الوسم Header، هو وسم جديد كليا في الـ HTML5. يجب أن يحتوي على معلومات مبدئية عن الموقع أو عن المحتوى الذي بداخله.
يمكن استخدام الوسم Header مره أو أكثر، حيث ممكن وضع Header للصفحة بشكل كامل، و من الممكن وضع Header لمقالة واحدة مثلا، أو لجدول المحتويات. إذا بشكل عام يجب أن يحتوي هذا الوسم على معلومات وصفية للمحتوى الخاص به.
HTML5 header Tag

<section> : تحديد أقسام المستند .
الوسم Section يستخدم لتعريف الأقسام في الصفحة أو المستند. حيث يمكن تجميع المحتويات و وضعها في Sections "أقسام" بناء على طبيعتها. على سبيل المثال من الممكن استخدام هذا الوسم ليحتوي علىChapter معين مثلا.
على سبيل المثال أيضا ممكن استخدامه في الصفحة الرئيسية بحيث يكون لدينا قسم “Section” خاص بآخر الأخبار، و قسم خاص بمقدمة عن الموقع، و قسم خاص بمعلومات الاتصال...الخ.
إذا مفهوم القسم هو مفهوم عام يمكن استخدامه لوصف محتوى مترابط معا.
HTML5 section Tag

<audio> : سبق دراستها بالتفصيل
HTML5 audio tag

<canvas> : سبق دراستها بالتفصيل
HTML5 canvas Tag

<command> : يحدد الأمر الذي سيقوم بتنفيذه عنصر من عناصر القائمة .
HTML5 command Tag

<datalist> : تحدد عناصر القائمة .
HTML5 datalist Tag

<details> : تحدد تفاصيل العنصر .
HTML5 details Tag

<embed> : للإضافات الخارجية .
HTML5 embed Tag

<figcaption> : تحدد الصور التوضيحية الملحقة بالصفحة .
HTML5 figcaption Tag

<figure> : تحدد الصور التوضيحية لمجموعة محتويات .
HTML5 figure Tag

<hgroup> : يحدد معلومات عن قسم من اقسام الصفحة .
HTML5 hgroup Tag

<keygen> : سبق دراستها
HTML5 keygen Tag

<mark> : سبق دراستها
HTML5 mark Tag

<output> : سبق دراستها
HTML5 output Tag

<progress> : توضح مراحل تقدم التحميل .
HTML5 progress Tag

<source> : سبق دراستها
HTML5 source Tag

<summary> : ملخص لتفاصيل العنصر .
HTML5 summary Tag

<time> : تحدد الوقت والتاريخ .
HTML5 time Tag

<wbr> : خط فاصل بعد كلمة طويلة لا يوجد فواصل بين حروفها .
HTML5 wbr Tag

<ruby> : وسم خاص باللغة الصينية .
HTML5 ruby Tag

<rt> : تظهر شرح لـ ruby .
HTML5 rt Tag

<rp> : لإظهار مدى دعم المتصفح للغة الصينية .
HTML5 rp Tag

الوسوم التي لا تدعمها لغة HTML5 :
<acronym> , <applet> , <basefont> , <big> , <center> , <dir> , <font> , <frame> , <frameset> , <noframes> , <strike> , <tt> , <u> , <xmp> .

المشاركة الأصلية كتبت بواسطة محمد جبلي لنعلم أن إلغاء الوسوم من النسخة الجديدة في HTML5 لا يعني أن المتصفحات الجديدة لن تفهمها , المتصفحات مجبرة على دعم كل العناصر القياسية سواء السابقة أم الجديدة لأنه من الممكن أن أقوم أنا بعمل موقع قياسي على الوسوم التي كانت في HTML3 مثلا فمن غير المنطقي أنه بعد كم سنة ألاقي موقع الذي كان يعتمد على العناصر القياسية لا يعمل بالشكل المطلوب ! إلغاء العناصر من النسخة الجديدة يعني أنه من الأفضل تجنب إستخدامها و كذلك إن قمت بعمل validation للصفحة لتعرف هل هي مطابقة للمواصفات و المقاييس لنسخة HTML5 سيقول لك لا , لأنك تستخدم عناصر قد ألغيت , ولكنها ستعمل بشكل جيد . validation أي التحقق من أن كود صفحتك مطابق للمواصفات و المقاييس لتحقق أدخل على : The W3C Markup Validation Service ثم من قائمة Document Type إختر HTML5 إن أصبت فمن الله وحدة وإن أخطأت فمن نفسي و الشيطان

مصادر :
HTML 5 Tags
قلعة الأكواد - كلام في ال HTML5 الجزء الأول
http://forum.ma3ali.net/t767645.html
HTML5 Tag Reference

[عاصم نت]

شكرا لكـ على هذهـ الجهود المباركة،واستفدنا بحق
ألن يكون هناك تطبيق ؟

[عاليا]

المشاركة الأصلية كتبت بواسطة عاصم نت ألن يكون هناك تطبيق ؟

بارك الله فيك أخي الكريم
لا يوجد تطبيق على هذا الدرس
الدرس للاطلاع على الوسوم الجديدة ومعرفة الوسوم التي ألغيت.