استندت هذه المقالة ، التي تم تحديثها في عام 2020 ، في الأصل إلى فصل من HTML5 و CSS3 للعالم الحقيقيبقلم أليكسيس جولدشتاين ولويس لازاريس وإستيل ويل.
عندما تتعلم HTML5 وتضيف تقنيات جديدة إلى صندوق الأدوات الخاص بك ، فمن المحتمل أن ترغب في إنشاء لوحة مرجعية لنفسك يمكنك من خلالها بدء جميع مشاريعك المستندة إلى HTML5. نحن نشجع على ذلك ، وقد تفكر أيضًا في استخدام أحد المصادر المتعددة عبر الإنترنت التي توفر لك نقطة بداية HTML5 أساسية.
في هذه المقالة ، سنلقي نظرة على كيفية البدء في ذلك. لنبدأ ببساطة ، بصفحة HTML5 عارية عارية:
<!doctype html> <html lang="en">
<head> <meta charset="utf-8"> <title>The HTML5 Herald</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <link rel="stylesheet" href="css/styles.css?v=1.0"> </head> <body> <script src="js/scripts.js"></script>
</body>
</html>
باستخدام هذا النموذج الأساسي ، دعنا نفحص الآن بعض الأجزاء المهمة من الترميز وكيف يمكن أن تختلف هذه عن كيفية كتابة HTML قبل HTML5.
ما هو HTML5؟
- HTML5 هي المواصفات النشطة الحالية لـ HTML أو لغة ترميز النص التشعبي.
- يشكل HTML طبقة المحتوى على الويب ، مما يوفر طريقة لتنظيم المعلومات بطريقة يمكن عرضها بواسطة المتصفحات ومعالجتها بواسطة برامج زحف محرك البحث.
- تم إصدار HTML5 مبدئيًا في عام 2008 ، وقد أضاف ميزات إضافية منذ ذلك الحين. إنه يحسن في الإصدارات السابقة من خلال تمكين محتوى الوسائط المتعددة الأصلي ، ودعم رسومات المتجهات SVG و MathML ، وعناصر الوثيقة الدلالية الجديدة.
- HTML مفيد من تلقاء نفسه ، ولكن يتم فتح الكثير من قوته من خلال طبقات الويب الأخرى. CSS هي طبقة الأنماط التي تحدد كيفية عرض هذا المحتوى. JavaScript هي طبقة السلوك التي تسمح بتفاعل المستخدم ومعالجة البيانات الديناميكية.
النوع
أولا ، لدينا إعلان نوع الوثيقة ، أو DOCTYPE. هذه ببساطة طريقة لإخبار المتصفح - أو أي محلل آخر - بنوع المستند الذي ينظر إليه. في حالة ملفات HTML ، فهذا يعني إصدار ونكهة محددة لـ HTML. يجب أن يكون نوع المستند دائمًا هو العنصر الأول في أعلى أي ملف HTML. منذ سنوات عديدة ، كان إعلان المذاهب فوضى قبيحة ويصعب تذكرها. بالنسبة إلى XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
وبالنسبة لـ HTML4 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
على الرغم من أن هذه السلسلة الطويلة من النص في الجزء العلوي من مستنداتنا لم تؤذينا حقًا (بخلاف إجبار مشاهدي مواقعنا على تنزيل عدد قليل من وحدات البايت الإضافية) ، فإن HTML5 تخلص من ذلك القرش الذي لا يمكن فك شفرته. الآن كل ما تحتاجه هو:
<!doctype html>
بسيطة وهادفة. يمكن كتابة المستند في أحرف كبيرة أو صغيرة أو مختلطة. ستلاحظ أن الرقم "5" مفقود بشكل واضح من الإعلان. على الرغم من أن التكرار الحالي لترميز الويب يُعرف باسم "HTML5" ، إلا أنه في الواقع مجرد تطور لمعايير HTML السابقة - وستكون المواصفات المستقبلية مجرد تطور لما لدينا اليوم.
نظرًا لأن المتصفحات مطلوبة عادةً لدعم كل المحتوى الموجود على الويب ، فلا يوجد اعتماد على نوع المستند لإخبارهم بالميزات التي يجب دعمها في مستند معين. بمعنى آخر ، لن تجعل الوثيقة فقط صفحاتك متوافقة مع HTML5. إن الأمر متروك للمتصفح للقيام بذلك. في الواقع ، يمكنك استخدام أحد هذين النوعين الأقدم مع عناصر HTML5 الجديدة في الصفحة وستعرض الصفحة نفس الشكل الذي ستستخدمه إذا استخدمت نوع المستند الجديد.
• html العنصر
التالي في أي مستند HTML هو html العنصر ، الذي لم يتغير بشكل ملحوظ مع HTML5. في مثالنا ، قمنا بإدراج lang سمة بقيمة en، الذي يحدد أن المستند باللغة الإنجليزية. في البنية المستندة إلى XHTML ، ستتم مطالبتك بتضمين xmlns ينسب. في HTML5 ، لم تعد هناك حاجة ، وحتى lang السمة غير ضرورية للمستند للتحقق من صحة أو يعمل بشكل صحيح.
حتى هنا ما لدينا حتى الآن ، بما في ذلك الختام </html> العلامة:
<!doctype html>
<html lang="en"> </html>
• head العنصر
الجزء التالي من صفحتنا هو <head> الجزء. السطر الأول داخل head هو الذي يحدد ترميز الأحرف للمستند. هذا عنصر آخر تم تبسيطه منذ XHTML و HTML4 ، وهو ميزة اختيارية ، ولكن يوصى به. ربما كنت قد كتبته في الماضي على النحو التالي:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
يعمل HTML5 على تحسين ذلك من خلال تقليل ترميز الأحرف <meta> علامة إلى الحد الأدنى:
<meta charset="utf-8">
في جميع الحالات تقريبًا ، utf-8 هي القيمة التي ستستخدمها في مستنداتك. لا يوجد تفسير كامل لتشفير الأحرف خارج نطاق هذه المقالة ، وربما لن يكون مثيرًا للاهتمام بالنسبة لك أيضًا. ومع ذلك ، إذا كنت تريد الخوض في مزيد من التعمق ، يمكنك قراءة الموضوع حول W3C or ماذا.
ملاحظة: لضمان قراءة جميع المستعرضات لترميز الأحرف بشكل صحيح ، يجب تضمين تعريف ترميز الأحرف بالكامل في مكان ما ضمن أول 512 حرفًا من المستند. يجب أن تظهر أيضًا قبل أي عناصر قائمة على المحتوى (مثل <title> العنصر الذي يتبعه في مثال موقعنا).
هناك الكثير مما يمكن أن نكتبه حول هذا الموضوع ، لكننا نريد أن نبقيك مستيقظًا - لذلك سنوفر لك هذه التفاصيل! في الوقت الحالي ، نحن راضون عن قبول هذا الإعلان المبسط والانتقال إلى الجزء التالي من وثيقتنا:
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint"> <link rel="stylesheet" href="css/styles.css?v=1.0">
في هذه السطور ، بالكاد يختلف HTML5 عن النحو السابق. عنوان الصفحة (العنصر الإلزامي الوحيد داخل head) كما هو الحال دائمًا ، والعلامات الوصفية التي قمنا بتضمينها هي مجرد أمثلة اختيارية للإشارة إلى المكان الذي سيتم وضع هذه العلامات فيه ؛ يمكنك وضعه أكبر عدد ممكن meta عناصر هنا كما تريد.
الجزء الرئيسي من هذا الجزء من الترميز هو ورقة الأنماط ، والتي يتم تضمينها باستخدام العرفية link جزء. لا توجد سمات مطلوبة لـ link غير href و rel. type السمة (التي كانت شائعة في الإصدارات القديمة من HTML) ليست ضرورية ، كما لم تكن ضرورية للإشارة إلى نوع محتوى ورقة الأنماط.
تسوية ساحة اللعب
عندما تم تقديم HTML5 ، اشتمل على عدد من العناصر الجديدة ، مثل article و section. قد تعتقد أن هذه ستكون مشكلة كبيرة لدعم المتصفح الأقدم للعناصر غير المعروفة ، ولكنك ستكون مخطئًا. هذا لأن غالبية المتصفحات لا تهتم في الواقع بالعلامات التي تستخدمها. إذا كان لديك مستند HTML مع recipe علامة (أو حتى أ ziggy ) وفيه ، وأرفق CSS بعض الأنماط لهذا العنصر ، سيتابع كل متصفح تقريبًا كما لو كان هذا طبيعيًا تمامًا ، ويطبق أسلوبك دون شكوى.
بالطبع ، ستفشل هذه الوثيقة الافتراضية في التحقق من الصحة وقد تواجه مشاكل في إمكانية الوصول ، ولكنها ستظهر بشكل صحيح في جميع المتصفحات تقريبًا - باستثناء الإصدارات القديمة من Internet Explorer (IE). قبل الإصدار 9 ، منع IE العناصر غير المعروفة من تلقي النمط. لقد رأى محرك العرض هذه العناصر الغامضة على أنها "عناصر غير معروفة" ، لذا لم تكن قادرًا على تغيير الطريقة التي نظروا بها أو تصرفوا بها. وهذا لا يشمل فقط عناصرنا المتخيلة ، ولكن أيضًا أي عناصر لم يتم تحديدها بعد في وقت تطوير إصدارات المتصفح هذه. هذا يعني (كنت تفكر في ذلك) عناصر HTML5 الجديدة.
الخبر السار هو أنه في هذه الأيام ، انخفض استخدام IE مباشرة ، مع انخفاض IE11 إلى حوالي 2.7 ٪ من الاستخدام العالمي (اعتبارًا من 2018) ، والإصدارات السابقة لذلك قد سقطت فعليًا من الخريطة. (يمكنك عرض إحصائيات حول استخدام المتصفح ودعم ميزات HTML5 بشكل عام على هل يمكنني استخدام موقع.)
إذا كنت في الحقيقة بحاجة إلى دعم المتصفحات القديمة ، ومع ذلك ، لا يزال بإمكانك استخدام موثوق HTML5 شيف، قطعة بسيطة جدًا من JavaScript تم تطويرها في الأصل بواسطة John Resig. مستوحاة من فكرة Sjoerd Visscher ، جعلت عناصر HTML5 الجديدة سهلة التصميم في الإصدارات القديمة من IE. حقًا ، مع ذلك ، لا ينبغي أن يكون هذا مطلوبًا الآن. كما أشار هل يمكنني استخدام، يتم دعم عناصر HTML5 عبر جميع المتصفحات الحديثة وحتى أحدث إصداراتها القديمة. (انقر على خيار "إظهار الكل" لمشاهدة جميع إصدارات المتصفح.) والاستثناء الوحيد هو أن بعض المتصفحات لا تتعرف على الإصدار الأحدث main جزء. ومع ذلك ، بالنسبة إلى هذه المتصفحات ، لا يزال بإمكانك استخدام هذا العنصر ، طالما أنك تضيف نمطًا متوافقًا (مثل تعيينه ليكون عنصر كتلة.)
الباقي هو التاريخ
بالنظر إلى باقي نموذج البداية ، لدينا المعتاد body العنصر مع علامة الإغلاق والإغلاق html بطاقة شعار. لدينا أيضا إشارة إلى ملف JavaScript داخل script جزء.
يشبه إلى حد كبير link ناقش العلامة في وقت سابق ، <script> لا تتطلب العلامة أن تعلن a type ينسب. إذا كنت قد كتبت XHTML ، فقد تتذكر script العلامات التي تبدو مثل هذا:
<script src="js/scripts.js" type="text/javascript"></script>
نظرًا لأن JavaScript هي ، لجميع الأغراض العملية ، لغة البرمجة النصية الحقيقية الوحيدة المستخدمة على الويب ، وبما أن جميع المتصفحات ستفترض أنك تستخدم JavaScript حتى عندما لا تعلن صراحة عن هذه الحقيقة ، type السمة غير ضرورية في مستندات HTML5:
<script src="js/scripts.js"></script>
لقد وضعنا script في الجزء السفلي من صفحتنا لتتوافق مع أفضل الممارسات لتضمين JavaScript. هذا يتعلق بسرعة تحميل الصفحة ؛ عندما يصادف المتصفح نصًا برمجيًا ، سيتوقف تنزيل بقية الصفحة وعرضها مؤقتًا أثناء تحليل النص البرمجي. يؤدي هذا إلى ظهور الصفحة للتحميل بشكل أبطأ بكثير عندما يتم تضمين نصوص كبيرة في أعلى الصفحة قبل أي محتوى. لهذا السبب يجب وضع معظم البرامج النصية في أسفل الصفحة ، بحيث لا يتم تحليلها إلا بعد تحميل باقي الصفحة.
في بعض الحالات ، ومع ذلك ، (كما هو الحال مع HTML5 shiv) قد يكون البرنامج النصي حاجة ليتم وضعها في رأس المستند ، لأنك تريد أن تصبح نافذة المفعول قبل أن يبدأ المتصفح في عرض الصفحة.
الخطوات المقبلة
طريقة واحدة لنقل HTML5 الخاص بك إلى المستوى التالي هو تجربة لوح مرجعي HTML5. يوفر هذا المورد الذي يتم تحديثه بانتظام نقطة بداية مفيدة لمشاريعك ، حيث يحتوي على جميع أفضل الممارسات الحديثة التي وضعها مئات من أفضل المبرمجين في العالم. إنه يستحق التنزيل والتحقق حتى إذا كنت ترغب فقط في اختيار الرمز وإلقاء نظرة على كيفية استخدام بعض العناصر هذه الأيام ، مثل العناصر الوصفية المختلفة الموجودة في رأس المستند.
ابدأ بالراحة أكثر مع HTML5 المشفر يدويًا و CSS3 مع مواردنا ، HTML5 و CSS3 للعالم الحقيقي. ستتعلم كل شيء من أساسيات ترميز HTML الدلالية إلى تقنيات التصميم الجذابة.
هناك طريقة أخرى للارتقاء بموقع الويب أو تطوير تطبيق الويب إلى المستوى التالي وهي تجربة أحد الأطر الحديثة المستخدمة على نطاق واسع اليوم. على سبيل المثال ، تحقق من الموارد الشاملة SitePoint على رد فعل و زاوي.
المصدر: https://www.sitepoint.com/a-basic-html5-template/؟utm_source=rss
