كلام في ال HTML5
في هذا الموضوع سوف أتحدث عن ال HTML5 و الميزات الجديدة فيه بإذن الله. لن ترقى لمستوى الدروس أو ورشة العمل لذلك سميتها "كلام في ال HTML5".
سوف أعتمد على المصادر التالية بشكل أساسي في كتابة المواضيع:
http://www.w3schools.com/html5/html5_reference.asp
http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html
ومصادر أخرى، من خلال جوجل..
عندما بدأ الحديث عن ال HTML5 كنت أتسائل عن ماهية الأشياء الجديدة التي تحتويها، و التي يقال أنها سوف تلغي الحاجة إلى تقنيات ال Flash و ال Silverlight’s ... عندها قررت أن ألقي نظرة على ال HTML5 و ما الجديد الذي جلبته لنا. لذلك دعنا نلقي نظرة سوية على الموضوع.
على مدى الزمان، مازالت لغة ال HTML هي اللغة الأساسية لوصف ملفات صفحات الإنترنت، لكن الحديث عن ال HTML كان دائما يبدأ بالقول أن ال HTML لغة وصفية فقط، لوصف ملفات الإنترنت. لذلك كان من الصعب الحديث عنها في مجال تطبيقات الإنترنت. لكن و أثناء التطوير المستمر لل HTML كان يتم محاولة إدخال ال HTML إلى هذا المفهوم. و ذلك ما تحاول ال HTML5 عمله. إذا يمكننا إعتبار الهدف الأساسي لل HTML5 هي زيادة التوافقية في الإنترنت (بين المواقع و المتصفحات و بين المواقع بحد ذاتها)، إضافة إلى تقليل تكاليف تطوير صفحات الإنترنت: من خلال إدخال ال HTML إلى مجال تطوير ال Web Application. حيث أصبح بإمكاننا بناء Applications بسيطة بدون الحاجة لإستخدام لغات ال Server Side.
حتى اليوم ما زال الإنترنت يعمل على النسخة 4 و إصداراتها الفرعية، لذلك ال HTML5 لم يتم إعتماده بعد من قبل ال W3C.
في مستهل عام 2008 أصدرت منظمة W3C مسودة عمل لل HTML5. مجموعة العمل على وضع معايير ال HTML5 تتكون من الشركات: AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera، إضافة إلى العديد العديد من المزودين الآخرين و الشركات.
تحتوي ال HTML5 في طياتها على العديد من الدوال الجديده و الوسوم الجديدة، التي تهدف إلى تحقيق الأهداف السابقة الذكر.
هنا سوف نتحدث عن الأشياء الجديدة فقط في ال HTML5 (لن نتحدث عن Tags موجودة مسبقا، إلا إذا كانت قد حصلت على تعديلات مهمة). أيضا سوف نحاول الإشارة إلى الوسوم و الأشياء التي لم تعد مدعومة من قبل ال HTML5.
إذا كنت تريد الحصول على مرجع و قائمة بهذه الأوامر (جديدها و قديمها) ألق نظرة على هذه الصفحة.
قبل البدء في الحديث عن الأشياء الجديدة في ال HTML5 جدير بالذكر أن بعض المتصفحات الحديثة تدعم بعض الميزات في ال HTM5 و بعضها لا يدعم (لا يوجد متصفح يدعم كل شيئ بعد). لذلك سوف نعتمد على النسخة الأخيرة من متصفحي Safariو Operaو ربما Chromeللعمل، و لمعاينة النتائج. (أعتقد أن أول إثنين يفيان بالغرض معا) لذلك لا تتردد في تنزيلهم.
إذا دعنا نبدأ بأول الوسوم:
<!DOCTYPE>
<!DOCTYPE> هي ليست وسم Html إنما هي تعليمة وظيفتها إخبار المتصفح عن المعايير التي تستخدمها صفحة الإنترنت الخاصة بك، حيث توضح للمتصفح نسخة ال HTML المكتوبة بها الصفحة الحالية.
في ال HTML 4 كان هنالك 3 أنواع من التعليمة DOCTYPE حيث كنا نستخدمها كمرجع لملف ال DTD. ولكن ولأن HTML5 غير مبنية على ال SGML فإنه يوجد لدينا فقط DOCTYPE واحدة، يجب كتابتها في بداية ملف ال HTML حتى قبل وسم ال HTML الخاص بالصفحة. أيضا يجب أن تعرف أن تعليمة ال DOCTYPE غير حساسة لحالة الأحرف، فإبمكانك كتابتها بالطريقة التي تشاء.
يتم إستعمال ال DOCTYPE في ال HTML5 بالشكل التالي:
<!DOCTYPE html>
أو حتى:
<!DoCtYpE hTmL>
:)
إذا مثالنا الأول، سيكون بالشكل التالي:
<!DOCTYPE HTML> <html> <head> <title>Page Title</title> </head> <body> Page Content </body> </html>
الوسوم HTML و Head لا يحتويان على تغييرات رئيسية.
HTML Content Structure
أو ترتيب المحتويات في ال HTML5، تحتوي على ال HTML5 على العديد من الوسوم الجديدة التي تساعد في عملية ترتيب المحتويات في الصفحة.
ألق نظرة على الصورة التالية:
يا أخي ألا تلاحظ أنك لم تأتي بشيئ جديد، نحن نعرف هذا التقسيم منذ العصر الحجري؟؟!!!.
لا يا صديقي دقق في الصورة أكثر، منذ العصر الحجري كنا لتمثيل قسم ال Header تكتب:
<div id=”Header”>…</div>
لكن ولأننا في عصر ال HTML5، فإن ذلك قد تغيير أيضا. ما يعني أنه لدينا الان في ال HTML5 وسم بإسم Header تستطيع في داخله وضح محتويات رأس الصفحة (شعار الصفحة و وصف عنها...)، وهنالك أيضا وسم بإسم Nav تستطيع في داخله أن تضع قائمة التنقل في الصفحات الأخرى أو في أجزاء الصفحة الحالية.
سأقوم بسرد هذه الوسوم الجديدة فيما يلي:
<header>
الوسم Header، هو وسم جديد كليا في ال HTML5. يجب أن يحتوي على معلومات تقديمة عن الموقع أو عن المحتوى الذي بداخله.
يمكن إستخدام الوسم Header مره أو أكثر، حيث ممكن وضع Header للصفحة بشكل كامل، و من الممكن وضع Header لمقالة واحدة مثلا، أو لجدول المحتويات. إذا بشكل عام يجب أن يحتوي هذا الوسم على معلومات وصفية للمحتوى الخاص به.
<nav>
بإستخدام هذا الوسم تستطيع تعريف منطقة من أجل وضع روابط للتنقل بين الصفحات الأخرى و أجزاء الصفحة الحالية. بمعنى أن قسم ال Navigation حاليا سوف يتم وضع محتوياته داخل الوسم Nav.
<section>
الوسم Section يستخدم لتعريف الأقسام في الصفحة أو المستند. حيث يمكن تجميع المحتويات و وضعها في Sections "أقسام" بناء على طبيعتها. على سبيل المثال من الممكن إستخدام هذا الوسم ليحتوي علىChapter معين مثلا.
على سبيل المثال ايضا ممكن إستخدامه في الصفحة الرئيسية بحيث يكون لدينا قسم “Section” خاص بآخر الأخبار، و قسم خاص بمقدمة عن الموقع، و قسم خاص بمعلومات الإتصال...الخ.
إذا مفهوم القسم هو مفهوم عام يمكن إستخدامه لوصف محتوى مترابط معا.
<article>
يمثل الوسم Article جزء معين من الصفحة، من الممكن أن يحتوي على أشياء منفصلة، مثلا خبر كامل، أو مقالة مجلة أو صحيفة أو Blog، بإمكانك أيضا إعتبار ال Comments الخاصة بالمستخدمين ك articles أو حتى نموذج يتم تعبئته من قبل المستخدمين.
إذا بشكل عام يحتوي هذا الوسم على المحتويات المنفصلة و الأساسية في الصفحة.
<aside>
يستخدم هذا الوسم لوضع أشياء متعلقة بالمحتوى الأساسي للصفحة. وغالبا ما يكون هذا المحتوى في شريط جانبي في تلك الصفحة.
حيث يمكن مثلا وضع تصويت معين في هذا القسم، أو روابط لمقالات متعلقة بالمحتوى الحالي، أو محتوى إعلاني معين، أو أي اشياء شبيهة أخرى. يمكن أيضا أن يحتوي هذا الوسم على الوسم nav الذي يمثل روابط للتنقل.
<footer>
الوسم footer يكون عادة متواجد في نهاية (ليس شرطا) الأقسام “Sections” أو الصفحات، حيث يمكن إستخدامه في أكثر من مكان في الصحفة الواحدة.
عادية يحتوي هذا القسم على معلومات، مثل كاتب القسم أو الصفحة الحالية، تاريخ آخر إضافة أو تعديل، معلومات حقوق النشر و النقل، أو حتى روابط ذات علاقة بالمحتوى الحالي.
إلى هنا هذه الوسوم تستخدم لتنظيم محتويات الصفحة (كلها جديدة في ال HTML5). ولكن ملاحظة مهمة: لا تتوقع عند إستخدامك لهذه الوسوم الحصول على صفحة مرتبة ب Layout معين مثلا، حيث أن التنظيم الذي تقوم به هذه الوسوم هو تنظيم منطقي و (ليس شرطا أن ينعكس على تصميم الصفحة) :blink: :wacko: !!.
حسنا إذا ما الفائدة من هذه الوسوم إذا ؟؟؟
كما قلنا في بداية الحديث عن هذه الوسوم فهي أولا تغنينا عن إستخدام الطريقة القديمة لتمثيل المحتوى. من ناحية أخرى عند إستخدامك لهذه الوسوم سوف تسهل على عناكب البحث و الأرشفة التي تدخل إلى صفحتك عملها، حيث يصبح بإمكانها معرفة كل جزء من الصفحة و ما يحتويه بشكل منفصل عن الأجزاء الأخرى من الصفحة.
إضافة إلى ذلك، سيكون التعامل مع ال Css أسهل، بدلا من إستخدام الطريقة التقليدية سابقة الذكر. أيضا سوف يساعدك إستخدام هذا التقسيم في التعامل بشكل أكبر مع ال API الخاص بالHTML5 و الإستفادة من كل خصائصة. إضافة إلى العديد من الميزات الأخرى.
حسنا دعنا نأخذ مثالا شاملا عن هذه الوسوم. سوف نقوم بإنشاء الصفحة التي تمثل الشكل في الصورة السابقة:
<!DOCTYPE html> <html lang="en"> <head> <title>HTML5 Document</title> </head> <body> <header> this is the header of the page, where it contains main information about the page + the logo + the search dialog for example </header> <nav> the main navigation part of the page <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> </nav> <section> <header>the main section of the page, and this description is written in the section Header</header> <article> and this is the main article of the page, lets says it is a blog that contains "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" nice Blog :) </article> <footer>the footer of this section contains my name "Khaldoun Khaled" because i am the writer, and this blog is not copy right protected :) </footer> </section> <aside> this is the aside part that contains links to related postes.<br/> <nav> note that the links inside a "nav" tag <ul> <li><a href="#">bbbbbb</a></li> <li><a href="#">cccccc</a></li> <li><a href="#">dddddd</a></li> <li><a href="#">eeeeee</a></li> </ul> </nav> </aside> <footer> my page footer contains information about the site (arabteam2000-forum.com) and the copy rights, and the Year (2010) </footer> </body> </html>
لاحظ أنني قد إتبعت الترتيب الذي في الصورة السابقة أثناء كتابتي لهذا الكود. كود سهل وليس بحاجة لمزيد من التوضيح.
خلدون خالد
