تم تصميم HTML5 للقيام بأي شيء تقريبًا ترغب في فعله عبر الإنترنت دون الحاجة إلى تحميل ملحقات المتصفح أو برامج أخرى. هل ترغب في إنشاء رسوم متحركة؟ تضمين الموسيقى والأفلام؟ بناء تطبيقات متقدمة تعمل في المتصفح الخاص بك؟ بإمكانك ذلك باستخدام HTML5.
- ما هوه HTML5
- كيفية كتابة كود HTML5
- المتصفحات التي تدعم HTML5
ما هو HTML5؟
HTML5 is the newest version of HTML المصطلح يشير إلى شيئين. الأول هو لغة HTML المُحدثة ذاتها، التي تحتوي على عناصر وسمات جديدة. والثاني هو المجموعة الأكبر من التقنيات التي تعمل مع هذا الإصدار الجديد من HTML - مثل تنسيق الفيديو الجديد - والتي تمكنك من بناء مواقع وتطبيقات أكثر تعقيدًا وقوة.
لفهم كيف تطور HTML على مر السنين، دعنا نلقي نظرة على الاختلافات بين HTML و HTML5.
HTML مقابل HTML5
تعد HTML لغة وصف المستندات المركزية للشبكة العنكبوتية العالمية. تم تصميمها في البداية لأجل وصف الوثائق العلمية بشكل دال، ولكنها تطورت منذ ذلك الحين لتصف أكثر من ذلك بكثير.
أغلب الصفحات على الويب اليوم تم بناؤها باستخدام HTML4. على الرغم من تحسينها كثيراً منذ الإصدار الأول من HTML الذي تم كتابته في عام 1993، إلا أن HTML4 لا تزال لديها بعض القيود. أكبر هذه القيود كانت إذا أراد مطورو الويب أو المصممون إضافة محتوى أو ميزات إلى موقعهم لم يتم دعمها في HTML.
في هذه الحالة، كان عليهم استخدام تقنيات ملكية. للأسف، هناك بعض المستخدمين الذين لن يتمكنوا من الوصول إلى هذا المحتوى أو تلك الميزة. فعلى سبيل المثال، المستخدمين على الآيفون والآيباد لن يتمكنوا من ذلك حيث أن هذه الأجهزة لا تدعم تقنية Flash. ترجمة مقترحة من المؤسسة.
الشرفة، HTML5. تم تصميم HTML5 للتخلص من الحاجة إلى تلك التقنيات المملوكة الغير معيارية. مع هذا الإصدار الجديد من HTML، يمكنك إنشاء تطبيقات ويب تعمل بدون اتصال بالإنترنت، وتدعم فيديو عالي الدقة والرسوم المتحركة، وتعرف موقعك الجغرافي.
لفهم كيف يمكن لـ HTML5 أن يفعل كل ذلك ، دعنا نلقي نظرة على ما هو جديد في هذا الإصدار الأخير من HTML.
ماذا يفعل HTML5؟
تم تصميم HTML5 بأهداف رئيسية ، بما في ذلك:
- تسهيل قراءة الشفرة للمستخدمين وبرامج قراءة الشاشة
- تقليل التداخل بين HTML و CSS و JavaScript
- تعزيز استجابة التصميم واتساقه عبر المتصفحات.
- دعم وسائط متعددة دون الحاجة إلى فلاش أو ملحقات أخرى.
كل هذه الأهداف أثّرت في التغييرات التي أحدثت في هذا الإصدار الجديد من HTML. دعنا نركز على سبع من هذه التغييرات أدناه.
أهمية HTML5
تقدم HTML5 عدة علامات جديدة . تشمل هذه العلامات:
تقدم HTML5 عدة علامات جديدة ذات دلالة. تشمل هذه العلامات: <section>, <header>, <footer> <nav>, <mark>, <figure>, <aside> <figcaption>, <data>, <time>, <output>, <progress>, <meter> و <main>. هذه العلامات تجعل من الأسهل كتابة رمز أنظف يفصل بوضوح بين الأنماط والمحتوى، وهو أمر مهم بشكل خاص للمستخدمين الذين يعتمدون على تقنيات مساعدة مثل قارئات الشاشة.Inline SVG
باستخدام HTML4، ستحتاج إلى استخدام Flash أو Silverlight أو تكنولوجيا أخرى لإضافة رسومات ناقلة قابلة للتوسع (SVG) إلى صفحات الويب الخاصة بك. بواسطة HTML5، يمكنك إضافة رسومات ناقلة مباشرة في وثائق HTML باستخدام عنصر "svg". يمكنك أيضًا رسم مستطيلات ودوائر ونصوص ومسارات وأشكال أخرى مبنية على ناقلات باستخدام هذا العنصر الجديد. فيما يلي مثال لشكل دائري تم إنشاؤه باستخدام عنصر "circle" في SVG.
مميزات HTML5
يمكنك إنشاء نماذج أكثر ذكاءً بفضل مزيد من خيارات النماذج الموسّعة المتاحة في الـ HTML5. بالإضافة إلى كل أنواع إدخال النماذج القياسية، يقدم الـ HTML5 المزيد، بما في ذلك: datetime، datetime-local، date، month، week، time، number، range، email و url. بإمكانك أيضًا إضافة أدوات انتقاء التواريخ، المنزلقات، التحقق ونص التعليمات التي تسمح بها السمة الجديدة للـ placeholder، والتي سنناقشها لاحقًا.
تصميم ويب باستخدام HTML5
قبل HTML5 ، كانت هناك حاجة إلى إضافات المتصفح لتضمين المحتوى الصوتي والمرئي في صفحات الويب. لم يقم HTML5 فقط بإدخال علامات
تجربة مستخدم مع HTML5
أدخلت HTML5 سمة تعبير العنصر (placeholder). يمكنك استخدامها مع عنصر المدخلات (input) لتقديم تلميح قصير لمساعدة المستخدمين في ملء كلمات المرور أو حقول إدخال البيانات الأخرى. يمكن أن يساعد هذا في إنشاء نماذج أفضل. ومع ذلك، من المهم أن نلاحظ أن هذه السمة غير متاحة لتقنيات المساعدة. لا تتردد في قراءة المزيد حول ذلك.
الأحداث المرسلة من الخادم
الخادم للحصول على التحديثات على فترات منتظمة. باستخدام الأحداث المرسلة من الخادم بتنسيق HTML5، يمكن للخادم الآن دفع التحديثات إلى صفحة الويب في أي وقت تتوفر فيه بيانات جديدة، مما يسمح بالتحديثات في الوقت الفعلي دون الحاجة إلى طلبات مستمرة من صفحة الويب.
يدعم HTML5 أحداث الإعلانات المرسلة من الخادم في اتجاه واحد. وهذا يعني أن البيانات يتم إرسالها باستمرار من الخادم إلى المتصفح. تخيل مدى فائدة ذلك إذا تضمن موقع الويب الخاص بك أسعار الأسهم وتغذية الأخبار وتغذية تويتر وما إلى ذلك. تم دعم الإعلانات المرسلة من الخادم في النسخة السابقة من HTML ، ولكن كان يتعين على صفحة الويب أن تطلبها مرارًا وتكرارًا.
تخزين الويب المحلي
مع الإصدار السابق من تِشْمِلْ، يتم تخزين البيانات محلياً عن طريق ملفات تعريف الارتباط. أما بفضل HTML5، يتم استخدام تخزين الويب بدلاً من ملفات تعريف الارتباط بفضل واجهة برمجة النصوص المستخدمة في HTML5. هذا يُتيح لك تخزين البيانات محلياً، مثل ملفات تعريف الارتباط، ولكن بكميات أكبر بكثير.
الآن بعدما فهمنا ما هو جديد في HTML5، دعنا نلقي نظرة على سبب استخدامه في موقعك على الويب.
مزايا HTML5
يقدم HTML5 مجموعة واسعة من الفوائد على الإصدارات السابقة من HTML والتي ذكرناها بإيجاز سابقاً. لنلقِ نظرة أقرب فقط على بعض الأسباب التي تجعل HTML5 مميزة جداً.
إنه متوافق عبر المتصفحات.
يتم دعم HTML5 من قبل جميع المتصفحات الرئيسية، بما في ذلك Chrome و Firefox و Safari و Opera، بالإضافة إلى iOS لـ Chrome و Safari ومتصفحات Android. يمكن أن يعمل حتى مع المتصفحات الأقدم وأقل شهرة مثل Internet Explorer. وهذا يعني عند البناء باستخدام HTML5، أنك تعرف أن المستخدمين سيحصلون على تجربة متسقة في موقعك، بغض النظر عن المتصفح الذي يستخدمونه أو ما إذا كانوا على الهاتف المحمول أم سطح المكتب.
أنها تمكن التصفح دون اتصال.
يتيح لك HTML5 بناء تطبيقات غير متصلة بالإنترنت. ستقوم المتصفحات التي تدعم تطبيقات HTML5 غير المتصلة بالإنترنت (التي هي معظمها) بتنزيل HTML و CSS و JavaScript والصور وغيرها من الموارد التي تشكل التطبيق وتخزينها محليًا. ثم ، عندما يحاول المستخدم الوصول إلى تطبيق الويب بدون اتصال بالشبكة ، سيقوم المتصفح بعرض النسخ المحلية. وهذا يعني أنه لن تكون هناك مشكلة في تحميل موقعك إذا فقد المستخدم الاتصال بالإنترنت أو لم يكن لديه اتصال نشط.
يسمح لك بكتابة كود أنظف.
مع عناصر HTML5 الحديثة ذات الطابع الدلالي، يمكنك إنشاء قواعد برمجية أكثر نظافة ووصفاً. قبل HTML5، كان على المطورين استخدام العديد من العناصر العامة مثل الديفز وتنسيقها بواسطة CSS للعرض كرؤوس أو قوائم التنقل. والنتيجة؟ وجود العديد من الديفز وأسماء الفئات التي جعلت الكود أكثر صعوبة في القراءة.
HTML5 يتيح لك كتابة رمز أكثر معنىً من الناحية الدلالية، مما يمكّنك وقراء آخرين من فصل الأسلوب والمحتوى.
إنه أكثر سهولة في الوصول إليه.
أيضًا ، بفضل عناصر HTML5 الجديدة ، يمكنك إنشاء مواقع وتطبيقات أكثر إمكانية الوصول. قبل هذه العناصر ، لم يتمكن قراء الشاشة من تحديد أن div ذو اسم class أو ID “الرأس” كان فعلا رأسًا. الآن ، مع
كيفية استخدام HTML5
للبدء في استخدام HTML5 على موقعك الإلكتروني، فمن المستحسن أن تقوم أولاً بإنشاء قالب HTML. يمكنك بعدها استخدامه كنموذج أساس لجميع مشاريعك المستقبلية. هنا مثال على قالب أساسي.
هذا هو عنوان الصفحة /* هذه العلامات التنسيقية ضرورية فقط إذا كنت تضيف تنسيقًا داخليًا للصفحة */ هذه هي العنوان الرئيسي هذه فقرة.
دليل مع تعليمات خطوة بخطوة وأمثلة التعليمات البرمجية. أولاً، تحتاج إلى إنشاء ملف HTML جديد باستخدام محرر النصوص. افتح محرر النصوص الذي تختاره وقم بإنشاء مستند فارغ جديد. احفظه بامتداد .html. الخطوة التالية هي إضافة البنية الأساسية لمستند HTML. يتضمن ذلك إعلان DOCTYPE وعلامات الفتح والإغلاق بتنسيق HTML وأقسام الرأس والنص.
تأكد من تضمين العلامات الوصفية الضرورية والعنوان وأي روابط CSS أو JavaScript مطلوبة داخل القسم الرئيسي. أخيرًا، يمكنك البدء في إضافة محتوى صفحة الويب الخاصة بك داخل قسم النص باستخدام علامات وسمات HTML. يمكن أن يشمل ذلك العناوين والفقرات والصور والروابط وأي عناصر أخرى مرغوبة. تذكر أن تحفظ ملفك بعد إجراء أية تغييرات. محرر النصوص الأساسي مثل Notepad++.
- أولاً، قم بتعريف نوع المستند كـ HTML5. للقيام بذلك، يمكنك إضافة الكود الخاص في السطر الأول. ليس هناك حاجة لإضافة الرقم "5" في هذا التعريف لأن HTML5 هو تطوير لمعايير HTML السابقة.
- في الخطوة التالية، قم بتعريف عنصر الجذر. يعمل هذا العنصر على تحديد اللغة التي تشرع في كتابتها، ومن المتوقع دائمًا أن يكون في مستند HTML5.
- يتم تضمين صفة اللغة وتعريفها في علامة البداية لعنصر HTML. بدون صفة اللغة، ستعتمد قارئات الشاشة على لغة نظام التشغيل، مما قد يؤدي إلى تلاوة غير صحيحة للعنوان والمحتوى الآخر في الصفحة. سيضمن تحديد الصفة أن قارئات الشاشة تتمكن من تحديد اللغة التي تتواجد بها المستند.اجعل موقعك الإلكتروني أكثر إمكانية للوصول"بما أننا نكتب هذا المنشور باللغة الإنجليزية، سنقوم بتعيين صفة اللغة في الملف إلى "en"."
- ضع أيضًا سمة البيان في علامة HTML الافتتاحية الخاصة بك. يشير هذا إلى ملف التعريف الخاص بتطبيقك، الذي يعتبر قائمة بالموارد التي قد يحتاجها تطبيق الويب الخاص بك للوصول إليها أثناء فصله عن الشبكة. يجعل ذلك ممكنًا للمتصفح تحميل موقعك حتى عندما يفقد المستخدم الاتصال بالإنترنت أو لا يكون لديه اتصال بها.
- أنشىء الجزء العلوي للوثيقة عن طريق كتابة وسم البدء والوسم المغلق . في الجزء العلوي، ستضع معلومات الوصف حول الصفحة والتي لن تظهر على الواجهة الأمامية.
- في قسم الرأس، حدد اسم مستندك HTML5. قم بوضع الاسم بين علامات .
- أضف تحت العنوان معلومات تعين مجموعة الحروف التي يجب استخدامها من قبل المتصفح عند عرض الصفحة. عمومًا، يستخدم الصفحات المكتوبة بالإنجليزية مجموعة الحروف UTF-8، لذا قم بإضافة السطر التالي: .
- الرجاء إضافة الروابط الخارجية لأي أوراق أنماط تستخدمها. إذا كنت تقوم بتحميلها Bootstrap CSS على مشروعك ، على سبيل المثال ، سيكون شكله مثل هذا:. من أجل هذا العرض التوضيحي، سأضمن وجود رابط وهمي و comment in HTML noting that it’s optional.
- الآن قم بإنشاء جزء الجسم للوثيقة عن طريق كتابة علامة فتح وعلامة إغلاق . يحتوي جزء الجسم على جميع المعلومات التي ستكون مرئية في الواجهة الأمامية، مثل الفقرات والصور والروابط.
- في قسم الجسم، أضف عنوانًا وفقرةً. ستكتب اسم العنوان وتحيط بها بعلامات
عند الانتهاء، يمكنك حفظ ملفك بامتداد .html وتحميله في المتصفح لرؤية كيف يبدو.
موعد أصدر HTML5؟
تم إصدار المسودة العامة الأولى للـ HTML5 من قبل مجموعة عمل ويب التكنولوجيا النصية التشعبية التطبيقية (WHATWG) في عام 2008. ومع ذلك، لم يتم إصدارها كتوصية للWorld Wide Web Consortium (W3C) حتى 28 أكتوبر 2014. ثم دمجت هذه التوصية مع معيار HTML Living بواسطة WHATWG في عام 2019.
لفهم سبب استغراق عملية التحديد لأكثر من عقد من الزمان، دعنا نلقي نظرة على التاريخ المعقد لـ HTML5.
في عام 1999، السنة التالية لإطلاق HTML4، قرر المركز العالمي لشبكة الويب (W3C) التوقف عن العمل على HTML والتركيز بدلاً من ذلك على تطوير نسخة قائمة على XML تسمى XHTML. وبعد أربع سنوات، ظهر اهتمام جديد بتطوير HTML حيث بدأ الناس يدركون أن استخدام XML يعتمد تمامًا على تقنيات جديدة مثل RSS.
في عام 2004، اقترحت شركتا Mozilla وOpera أن يتابع HTML تطوره في ورشة عمل تابعة لـ W3C. عندما رفض أعضاء W3C الاقتراح لصالح مواصلة تطوير بدائل قائمة على XML، قامت شركتا Mozilla وOpera - بالاشتراك مع شركة Apple - بإطلاق مجموعة العمل لتطوير تقنية تطبيقات الرابط الفائقة للويب (WHATWG) للاستمرار في تطوير HTML.
في عام 2006، عكست W3C مسارها وأعربت عن رغبتها في المشاركة في تطوير مواصفات HTML5. وبعد عام، تم تشكيل مجموعة للعمل مع WHATWG. عملت هاتين المجموعتين معًا لعدد من السنوات حتى عام 2011، عندما قررتا أن لديهما هدفين منفصلين. بينما أرادت W3C نشر نسخة نهائية من HTML5، أرادت WHATWG نشر معيار حي لـ HTML والاستمرار في صيانته باستمرار.
W3C نشرت في عام 2014 النسخة "النهائية" للHTML5 واستمر WHATWG في الحفاظ على النسخة "الحية" على موقعهم. اندمجت هاتين الوثيقتين في عام 2019 عندماوقّعت W3C و WHATWG اتفاقية.للتعاون في تطوير نسخة واحدة من لغة HTML في المستقبل.
ما هي المتصفحات التي تدعم HTML5؟
جميع الإصدارات الأحدث من المتصفحات الرئيسية -بما في ذلك جوجل كروم، أوبرا، موزيلا فايرفوكس، آبل سفاري وإنترنت إكسبلورر -تدعم العديد من ميزات HTML5 ولكن ليس جميعها. حالياً، جوجل كروم وأوبرا هما الأكثر توافقًا مع HTML5، تليهما فايرفوكس وسفاري قريبًا. إنترنت إكسبلورر هو الأقل توافقًا، على الرغم من أنه يدعم جزئيًا أو بالكامل معظم ميزات HTML5.
فيما يلي جدول يوضح توافق المتصفحات الرئيسية في مجال السرعة والأداء. هنا مفتاح الرموز:
- ✓ مدعوم بالكامل
- ≈ مدعوم جزئيا
- ✗ غير معتمد
إذا كنت ترغب في تفصيل أكثر حول الإصدارات المختلفة للمتصفحات التي تدعم HTML5، تحقق من Caniuse.com.
HTML5 هو مستقبل الشبكة العنكبوتية العالمية
مع عناصرها الجديدة الدلالية، وخيارات النموذج الموسعة، وعلامة الفيديو غير المرتبطة بالتنسيق، والمزيد، فإن HTML5 يحدث ثورة في كيفية بناء المطورين لصفحات الويب. وهذا بدوره يغير تجارب المستخدمين عبر الإنترنت. يمكننا الآن مشاهدة مقاطع الفيديو دون أن يُطلب منا تحديث Flash أو تنزيل برنامج آخر. يمكننا استخدام التطبيقات عندما لا يكون لدينا اتصال بالإنترنت. يمكننا أن نحظى بتجربة رائعة نفسها على موقع سواء استخدمنا الهاتف المحمول أو الجهاز اللوحي أو التلفزيون الذكي - والمزيد.
يرجى اتباع إرشادات سياسة الاستخدام عند كتابة التعليق