البرمجةمقالات

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

200px-HTML5.svg

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

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

لنبدأ

https://i0.wp.com/img695.imageshack.us/img695/9251/html5structure.jpg?w=708

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

‫24 تعليقات

  1. هذه اللغة تعد تحول كبير ونمطي سيغير الكثير في صفحات ومواقع الإنترنت ويجعلها أكثر مرونة وانسيابية وتفاعل مع المستخدم .. نحن لا نستطيع أن ننتقص من قوة هذه اللغة واحترافيتها ولكن من يقارنها بالفلاش فلا وجة أبداً للمقارنة هنا مع هذا العملاق وإن كان لا بد منها فستكون مقارنة جزئية لا أكثر ستتفوق الــHTML5 بكل تأكيد في الكثير من جزئياتها .. ليس تعصباً لكن من لديهم فهم شامل ومدارك واسعة عن ماهية تقنية الفلاش يعون هذا الأمر جيداً …

  2. أحسنت وهذا ما أقوله ..
    من يدرك قدرات الفلاش يعي جيداً بأنه من الصعب إحلال HTML5 مكانه

  3. HTML5 والفلاش تقنيتان مختلفتان .. قد يتقاطعان في بعض الأجزاء .. لكن هذا لا يعني أن يكون أحدهم بديلا عن الأخر

    الأمر يشبه السفينة و السيارة .. كلاهم يمكن إستخدامه كوسيلة مواصلات أحيانا .. لكن بالتأكيد لكل منهم إستخدامات لا يستطيع الأخر أن يحل محلها

    في الواقع الــ HTML5 تتكامل مع الفلاش بشكل أفضل من أي نسخة سابقة

    الوقت وحده هو الذي سيثبت أن هاتين التقنيتان ليستا بأعداء .. بل العكس
    الويب سيصبح أفضل وأقوى بوجود كلا منهم .. وليس بإختفاء أحدهم !!

  4. تطور ملحوظ عن html
    يبدو اننا سوف نعيد تعلم الـ html من جديد حتى نتاقلم مع الوسوم الجديد
    لكن يظل هناك عائق بنظري حول الـ html 5 وهو متصفح الاكسبلورر
    فأذا كان هذا المتصفح لايدعم css بشكل كامل فكيف سيدعم html 5
    الله يشفيه ان شاء الله ويقومه با السلامه
    ^_^

  5. شكرا اخوي ..

    لكن يا ليت استخدمت الكود ستاسل في عرض الأكواد..

    عشان تظهر التاقس بالشكل الصحيح

  6. أرى أن الكثير من العرب يدعمون الفلاش لا لشيء.. فقط لأنه لغة برمجية سهلة.. تقوم تطبيقات الفلاش بحلها لهم بسهولة..

    لذلك.. في أي بلد عربي ارفع حجرًا ستجد تحته حزمة من مبرمجي الفلاش.!

    ومع ذلك فمبرمجي الفلاش لا يقرون بأنه يتسبب بالكثير من المشاكل.. دائمًا ما يهربون من هذه النقطة ويبدأون في انتقاد أبل وكيف هي احتكارية..

    نقول الفلاش جيد، ولكن أدوبي كسولة أو غبية أو أي شيء، لأن الفلاش يتسبب في مشاكل حقيقية لا يستطيع أي أحد إنكارها، فيقولون: أبل شركة احتكارية وأبل وأبل..!!

    قم بفتح 10 ألسنة (لا أعلم من سماها ألسنة فالإسم مضحك :)) عمومًا أقصد بها tabs ..
    وفي الـ10 ألسنة افتح 10 مقاطع يوتيوب.. ثم قم بالتنقل بينها بسرعة.. وانظر كيف سيبدأ جهازك في (الاستهبال) وكيف سترتفع حرارته..!

  7. جهد جميل.

    عندما يتم دعم HTML5 من w3c ستكون CSS3 معتمدة وحينها لن يكون هناك متصفح لا يدعمها. وأظن هذه الخطوة قريبة إذ أن البحوث في آخرها على هذا الموضوع. أما المتصفحات التي تدعم هذه التقنيات فهي تدعمها من تلقاء نفسها وكميزة لمتصفحاتها.

    لكن تأكد قبل أن تبدأ باستخدام HTML5 بأنك على علم بالـ usability والـ accessibility لأن هذه التقنيات كلها بالنهاية تسير في نفس الطريق السرعة في تحليل وتفسير الكود والسهولة المتاحة لمتصفحي الويب.

    مرة أخرى شكرا لك

  8. السلام عليكم
    سمعت ان اغلب فيديوهات اليوتيوب تم تحويلها الي HTML5
    كيف يمكن ان اميز هذا الفيديو يعمل بالـ FLASH & HTML5
    بارك الله فيك

  9. أخي iAlone
    أنا مبرمج فلاش حابب اسئلك
    هل بإمكانك فتح عشر ملفات فيديو على أي مشغل بسطح المكتب بدون أن يبطئ الجهاز
    :)

  10. HTML 5 لها مستقبل واعد و سيتكون هي اللغة الاولى لتصميم الواجهات في وندوز 8

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى