الرئيسية / برمجة / الفرق ما بين HTML5 و HTML

الفرق ما بين HTML5 و HTML

HTML5 و HTML ما هو الاختلاف بينهما؟؟؟ الكثير منا يسأل هذا السؤال… لهذا السبب أردت تعريفكم بأهم مزايا HTML5 وما قدمته هذه النسخة لكثير من مطوري البرامج.

لكن قبل البدء بالحديث عن هذه النسخة المتطورة سنعرفكم أولاً عن النسخة الأصلية ألا وهي HTML.

غالباً ما يسمع الناس الجدد في نواحي تصميم الويب كلمة “markup” ويتساءلون ما تعنيه وكيف تختلف عن مصطلح “code”.

يتم غالبا تصميم لغة ترميزية لمعالجة النص وتعريفه وعرضه.

كما يتم تضمين العلامات والتعليقات التوضيحية النصية داخل ملفات نصية لتسهيل معالجة النصوص على جهاز الكومبيوتر.

من الناحية التاريخية، تم استلهام لغة الترميز اللغوي عن عملية وضع العلامات على المخطوطات.

حيث أن أي من تعليمات الطابعة تم اشتقاقها من علامات مكتوبة بخط اليد.

HTML هي لغة الترميز الأكثر استخداماً، وقبل بضع سنوات تم إصدار تحديث لهذه اللغة بعنوان HTML5.

إذاً سنستعرض لكم في هذه المقالة الفرق ما بين HTML و HTML5.

حيث أننا سنتحدث عن الأمور التالية:

  1. ما هو HTML ؟
  2. ما هي الاختلافات الرئيسية بين HTML و HTML5؟
  3. المزايا الأساسية المقدمة بواسطةHTML5 للمطورين.
  4. (ورقة غش HTML5) HTML5 Cheat Sheet.
  5. مزايا HTML5 للمستخدم النهائي.

ما هو HTML؟

يمكن الإشارة إلى لغة ترميز النصوص التشعبية (HTML) أو (Hyper-Text Markup) على أنها اللغة الأساسية في جميع أنحاء العالم.

تتم كتابة معظم صفحات الويب المستضافة على الإنترنت في بعض أنواع HTML.

يضمن مطورو البرامج عبر HTML كيفية عرض الوسائط المتعددة والنص والارتباط التشعبي بين الأشياء الأخرى في متصفحات الويب.

من العناصر التي تنشئ اتصالات مع المستند (النص التشعبي) إلى العناصر التي تجعل هذه المستندات تفاعلية (مثل: النماذج)، كلها مكونات HTML.

تم تطوير معيار HTML بواسطة W3C أو اتحاد شبكة الويب العالمية في عام 1997.

في HTML يتم استخدام العلامات لتعريف بنية النص، كما يتم تحديد العلامات والعناصر باستخدام الحروف > و <.

بعض الأمثلة للعلامات المذكورة سابقاً هي العناوين والجداول والفقرات الخ…

والمتصفحات هي المسؤولة عن عرض محتوى صفحة الويب عبر هذه العلامات.

منذ فترة طويلة لم يكن HTML هو معيار تطوير الويب الوحيد.

في الأيام الأولى كانت جميع علامات المحتوى والمظهر موجودة بلغة واحدة عملاقة ومرهقة (وغالباً معقدة).

مع مرور الوقت، توصل W3C إلى قرار بأن الفصل بين المحتوى ونمط صفحة الويب كان ضرورياً، هذا أدى إلى إنشاء أوراق الأنماط.

العلامات المستخدمة الآن في تحديد نمط المستند (مثل Font) تم تجاهلها تقريباً، وذلك لأن الأشخاص بدأوا يفضلون أوراق الأنماط.

ولا تزال علامات تعريف المحتوى (مثل H1) تشكل HTML الأساسي.

أهم تحديثات HTML:

شهد HTML بمرور الوقت العديد من التحديثات، وفي الوقت الحالي أحدث إصدار لـ HTML هو HTML5.

وبالطبع لا تزال HTML5 لغة ترميزية بالمقام الأول، ولكنها أضافت مجموعة كبيرة من الميزات إلى HTML الأصلي.

كما استأصلت بعض التشدد الذي كان موجوداً في XHTML.

ويتم يومياً إضافة ميزات جديدة على HTML5، ولكن لا يتم طرح أي إصدارات مرقمة جديدة هناك.

يمكن أن يكون الاختلاف الرئيسي بين HTML و HTML5 هو عدم كون الصوت أو الفيديو أحد مكونات HTML، بينما يمكن اعتبار كلاهما جزءاً لا يتجزأ من HTML5.

milestones-of-HTML

ما هي الاختلافات الرئيسية بين HTML و  HTML5

الشيء الثابت في مجال تكنولوجيا المعلومات هو أن التحديثات/ التغييرات الدورية لا مفر منها.

فلا توجد لغة قادرة على تجنب الترقيات و/ أو الإصدارات الجديدة، و HTML ليست استثناء.

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

كما ذكرنا سابقاً، فإن أكبر ميزة تمتلكها HTML5 على سلفها غير المرقمة هي أن لديها دعماً صوتياً وفيديو عالي المستوى.

هذه الميزة لم تكن جزءاً من مواصفات الإصدار في HTML السابقة.

تتوفر أيضاً اختلافات أخرى بين HTML و HTML5:

  • يتم دعم SVG و Canvas ورسومات متجهة افتراضية في HTML5.

بينما فيHTML  كان استخدام الرسومات المتجهة ممكناً فقط باستخدامه مع تقنيات مختلفة مثل Flash و VML و Silver-Light إلخ…

  • يستخدم HTML5 قواعد بيانات SQL على الويب، وذاكرة التخزين المؤقت للتطبيق من أجل تخزين البيانات مؤقتاً.

في الوقت نفسه وفي HTML يمكن استخدام ذاكرة التخزين المؤقت للمتصفح فقط لهذا الغرض.

  • هناك فرق آخر بين HTML و HTML5، الجدير بالذكر هو أن الأول لا يسمح بتشغيل JavaScript داخل متصفح الويب (يتم تشغيله بدلاً من ذلك في مؤشر ترابط واجهة المتصفح).

بينما الأخير يوفر دعماً كاملاً لـ JavaScript لتشغيلها في الخلفية.

  • لا يعتمد HTML5 على SGML، ويسمح له بتحسين قواعد التحليل التي توفر توافقاً محسّناً.
  • في HTML5 يمكن استخدام MathML و SVG المضمنة في النص بينما لم يكن ذلك ممكناً في HTML.
  • تم إيقاف بعض العناصر وإسقاطها بالكامل وهي: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center,strike, tt.
  • يدعم HTML5 أنواعاً جديدة من عناصر تحكم النموذج، مثل: التواريخ، الأوقات، البريد الإلكتروني، الرقم، النطاق، tel، عنوان URL والبحث وما إلى ذلك.
  • هناك العديد من العناصر الجديدة المقدمة في HTML، بعض من أهمها: summary, time, aside, audio, command, data, datalist, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video.

differences-between-html-and-html5

المزايا الأساسية المقدمة بواسطة HTML5 للمطورين:

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

التعامل مع الخطأ المستمر:

تحتوي معظم المتصفحات على دعم لتحليل كود HTML غير صحيح (بنيوياً/ تركيبياً)، ولكن في بضع السنوات التي مضت، لم تكن عملية قياسية لمعالجة هذا الأمر.

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

لقد أحدثت معالجة الأخطاء المتسقة في HTML5 اختلافاً كبيراً في هذا الصدد.

إن خوارزميات التوزيع المحسنة المستخدمة في HTML5 لها فوائد لا يمكن تحديدها.

تكشف الاستطلاعات أن حوالي 90% من المواقع الإلكترونية قد تكون مسؤولة عن تضمين بعض الأكواد المكتوبة بشكل غير صحيح.

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

علاوة على ذلك، فإن معالجة الأخطاء الكامنة توفر للمطورين الكثير من المال وأطنان من الوقت.

دلالات محسنة للعناصر:

لتعزيز التحسينات البرمجية، تم إجراء تحسينات على الأدوار الدلالية لمختلف العناصر الموجودة.

القسم والمقالة والتنقل والرأس هي العناصر الجديدة التي حلت محل معظم عناصر div المهملة الآن، وهذا قد جعل عملية المسح الخاطئ أقل تعقيداً بكثير.

دعم محسّن لميزات تطبيق الويب:

كان أحد الأهداف الأساسية لـ HTML5 هو السماح للمتصفحات بالعمل كمنصات للتطبيقات.

حيث كانت مواقع الويب في الماضي أقل تعقيدا بكثير، ولكن مع مرور الوقت ازدادت البراعة.

يوفر HTML5 للمطورين تحكما محسّنا في أداء مواقعهم على الويب.

في الماضي كان على المطورين استخدام الحلول لأن العديد من تقنيات جانب الخادم وملحقات المتصفح لم تكن موجودة.

الآن وباستخدام HTML5، لا يوجد أي استخدام لتوظيف أي عمل مستند إلى JavaScript أو Flash (كما تم فعله في HTML4).

السبب في ذلك هو وجود عناصر موجودة أصلا في HTML5 توفر جميع هذه الوظائف.

شبكة الهاتف المحمول أسهل:

حتى اليوم يمكن أن يكون إنشاء إصدار من موقع ويب للجوال مصدر إزعاج للمطورين.

شهد الانتشار الديموغرافي الذي يمتلك الهواتف الذكية انتشارا هائلا خلال العقد الماضي، مما خلق الحاجة لتحسين معايير HTML.

يريد المستخدمون النهائيون الوصول إلى الويب في أي وقت وعبر أي جهاز، مما يجعل وجود مواقع الويب المتجاوبة مطلوباً.

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

عنصر الـ Canvas:

إحدى ميزات HTML5 الأكثر مناقشة هي عنصر <Canvas>.

حيث كان لإدخال هذه العلامة الفريدة تأثير هائل على استخدام Adobe Flash.

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

حيث يعتقد أنه سيتم تشغيل Flash قريبا وبشكل كامل.

عند استخدام عنصر Canvas، يمكن لمطور البرامج رسم رسومات باستخدام ألوان وأشكال مختلفة من خلال استخدام النصوص البرمجية (مثل JavaScript).

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

مثال على استخدام JavaScript بالتزامن مع Canvas هو:

عنصر القائمة (Menu):

العناصر <menu> و <menuitem> المضافة حديثا هي مكونات مواصفات العناصر التفاعلية.

لكنها لا تستخدم في كثير من الأحيان أو يتحدث عنها مجتمع المطورين.

ومع ذلك، يمكن استخدام هذين العنصرين لضمان التفاعل المحسّن للويب.

حيث يتم استخدام علامة <menu> لتمثيل أوامر القائمة في تطبيقات الجوال وتطبيقات سطح المكتب لأغراض البساطة.

يمكن أن يكون الاستخدام المحتمل لعلامة menu هو:

سمات البيانات القابلة للتخصيص:

كان من الممكن إضافة سمات مخصصة قبل HTML5، ولكنها كانت قضية محفوفة بالمخاطر.

على سبيل المثال، في HTML4 تؤدي السمات المخصصة أحيانا على إيقاف عرض الصفحة تماما، ويمكن أن تصبح في الغالب سبباً للمستندات غير الصحيحة/ غير الصالحة.

لقد أدت سمة data-* في HTML5 إلى إنهاء هذه المشكلة التي تحدث غالباً.

هناك استخدامات متعددة لهذه السمة، ولكن الهدف الأساسي من إدخالها هو تخزين معلومات إضافية حول عناصر مختلفة.

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

الاستغناء عن ملفات تعريف الارتباط وتوديعها:

كان دعم التخزين المحلي إضافة كبيرة إلى HTML5.

في أيام ما قبل HTML 5، إذا أراد المطورون تخزين أي شيء فعليهم استخدام ملفات تعريف الارتباط.

يمكن أن تحتوي ملفات تعريف الارتباط على كمية صغيرة من البيانات (ناهيك عن أن الجميع يكرههم)، هذا ما جعل إضافة كائن التخزين المحلي إلى HTML 5 ميزة أكثر ترحيبا.

كائن التخزين المحلي هو جزء من مساحة اسم المجال العام، ويمكن الوصول إليه من أي مكان مطلوب أثناء استخدام البرامج النصية.

HTML5 Cheat Sheet (ورقة غش HTML5):

يمكن أن تكون أوراق الغش مساعدة كبيرة في حال بدأت تعلم لغة جديدة.

استخدم ورقة الأنماط أدناه لبدء استخدام HTML 5.

تحتوي ورقة الغش هذه على كل علامات HTML الأكثر استخداما (بما في ذلك HTML 5).

                                                                                   html 5-cheat-sheet

مزايا HTML5 للمستخدم النهائي:

جلب HTML5 نقلة نوعية لكل من المطورين والمستخدمين النهائيين.

بعض المزايا العديدة التي يوفرها للمستخدمين النهائيين هي:

  1. تنهار الآن متصفحات الجوال كثيراً بشكل أقل من التطبيق المحلي.

لم يكن هذا هو الحال من قبل، عندما لم يكن هناك ما يكفي من دعم تطوير الويب للجوال المقدم بواسطة HTML.

  1. الاعتماد على مواقع الجوال مرتفع للغاية، حيث أن 30% من مستخدمي الهواتف المحمولة يكرهون تنزيل التطبيقات.

لذلك إذا أراد أحد المستخدمين الآن استخدام خدمات الشركة ولكنه لا يريد تنزيل تطبيقها، فيمكنه فقط تسجيل الدخول إلى موقع الويب المتجاوب التابع للشركة لإجراء ذلك.

  1. إن القضاء على الحاجة لاستخدام Adobe Flash يتيح للمطورين توفير تجربة مستخدم غنية بالرسوم البيانية.

كم أن استخدام JavaScript و MPEG4 بالتزامن مع HTML5 جعل الحياة أفضل للمستخدمين.

  1. كما أن القدرة على دعم عناصر الصوت والفيديو الأصلية تعني أن المستخدمين لن يضطروا إلى تنزيل مكونات إضافية لعرض الوسائط المتعددة على موقع الويب الخاص بك.

يعد هذا الدعم الإعلامي الغني الذي توفره HTML5 واحداً من أكبر الأسباب التي تجعله يستخدم HTML بمرات أكثر في عالم اليوم.

الخلاصة:

لا يمكن أن تكون النسخة الأحدث من أي لغة أفضل من سابقتها، و HTML5 بالتأكيد ليست استثناء للحقيقة.

مع مرور كل عام سيكشف المطورون عن طرق جديدة للاستفادة من HTML5.

علاوة على ذلك، من المتوقع أن تتغير وسائل الإعلام الاجتماعية بشكل أكبر مع اللغة في وقت قريب.

حيث بلغت موجة التغيير فعلاً العديد من المطورين على مستوى العالم، ولا يزال من المتوقع أن يزيد اعتماد HTML5 بشكل أسرع في السنوات القادمة.

لتعظيم إمكانيات المتصفحات الحديثة، فمن الأهمية القصوى اعتماد HTML5 في أسرع وقت ممكن.

مرجع المقالة من هنا

 

نبذة عن الخطة الشاملة

نسعى دوماً لتزويد متابعينا بأفضل المعلومات و البرامج والتطبيقات والنصائح الهامة، كما نعمل دائماً على توجيه المتابعين وخاصة المبرمجين إلى المسار الصحيح.

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

الموقع الرسمي للخطة والتسجيل من هنا:

http://khottah.com/

التسجيل عبر رابط الخطة مع خصم 50% من هنا:

http://khottah.com/?coupon_code=50off

لمعرفة منهاج الخطة من هنا:

https://anbilarabi.com/curriculum

طرق الدفع والاشتراك والتحويل من هنا:

https://anbilarabi.com/payments

يمكنكم تحميل البروشور الخاص بالخطة من هنا:

https://15f7fy16numklnwbn3m52e15-wpengine.netdna-ssl.com/khottah-brochure.pdf

شرح صوتي عن الخطة في 5 دقائق:

https://soundcloud.com/anbilarabi/5a-1

الدليل الشامل حول الخطة بالفيديو تعرف على الخطة من الداخل:

https://youtu.be/Oqi8Dp1KgH4

أخيراً نود مشاركتكم  بعض ما قاله البعض عنا وعن الخطة الشاملة وتقييمات الطلاب عبر هذا الرابط:

https://anbilarabi.com/people

شكراً جزيلاً لكم ولا تترددوا بالتواصل معنا عن طريق الواتس آب للرقم 00970599042502

كما يمكنكم مراسلتنا عبر هذا الإيميل:

http://ahmadnaser.com

عن Hanadi Hussino

Author Image

شاهد أيضاً

 تعرف على موقع socialmedia market الربح من الإنترنت

 تعرف على موقع socialmedia market الربح من الإنترنت الربح من الإنترنت أصبح واجه هامه للعمل …

>