نظرة على الـ HTML5 والجديد فيها

200px-HTML5.svg

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




بدأ الحديث منذ فترة عن ال HTML5 والـ CSS 3 لوصلوهم في نفس الوقت في الغالب وارتباطهم ببعض القوى. حتى الآن اغلب المتصفحات الحديثة تدعم هذه التطورات فايرفوكس واوبرا وكروم وسفارى. ولكن حتى الآن لم يتم دعم الـ HTML5 ولكن المستخدم والرسمي من   W3C  هو الـ  HTML4. تحتوى الـ HTML5 على العديد من الوسوم الجديدة سوف نستعرض أهمها وإن شاء الله سوف يكون مقال آخر لـ CSS 3.

لنبدأ

http://img695.imageshack.us/img695/9251/html5structure.jpg

1- <!DOCTYPE>
نوع الوثيقة ليست من ضمن الوسوم ولكن هي بداية لأي صفحة بهذه اللغة لتخبر المتصفح نوع الوثيقة
أصبحت في الـ HTML5

هكذا  <!DOCTYPE html>   مع ملاحظة أنها يجب كتابتها قبل بداية وثيقة الـ HTML.

<!DOCTYPE HTML>
<html>
<head>
<title>Page Title</title>
</head>

<body>
Page Content
</body>

</html>

<div id=”Header”>…</div>

أصبح في الـ HTML 5

<header>

2- <header>
هو أحد الوسومات الجديدة والجديدة فيه سهولة استخدامه أكثر من مرة فهو هيدر للصفحة وهيدر للعمود وهيدر للمقالة.

3- <nav>
معروفة بمنطقة القوائم أو التنقلات.

4- <section>
يستخدم لتعريف أقسام الصفحة على حسب الأنماط الخاصة بها فيمكن وضع سكشن للأخبار وسكشن الاتصال وهكذا.

5- <article>
يحتوى على أشكال مختلفة للنصوص في الصفحة فهو خاص للمقالات أو التدوينات الخاصة بالمدونات وخلافه.

6- <aside>
هو الخاص بالجانب سواء الأيمن أو الأيسر.

7- <footer>
ليس خاص بنهاية الصفحة ولكن كما استخدمنا الهيدر في أكثر من مكان نستطيع استخدام الذيل في أكثر من مكان هو ذيل للصفحة أو العمود أو المقالة وهكذا.

8- <Audio>  <Video>
أصبح بالإمكان الآن وضع ملف صوت أو فيديو مباشرة في الصفحة فقط بهذا الوسم دون استخدام أي إضافات أخرى.

9-  <canvas>
هذا الوسم من الأوسمة الجديدة، أصبح الآن بإمكانك إدخال لوحة رسومات في الصفحة بالحجم الذي تريده بكل سهولة لإنجاز أعمالك.