بنية المستند

تتضمّن مستندات HTML تعريفًا لنوع المستند والعنصر الجذر <html>. يشمل العنصر <html> عنوان المستند ونص المستند. على الرغم من أن رأس المستند لا يظهر للزائر المبصر، إلا أنه يعد ضروريًا لجعل موقعك يعمل بشكل سليم. ويحتوي هذا الملف على جميع المعلومات الوصفية، بما في ذلك معلومات عن محرّكات البحث ونتائج وسائل التواصل الاجتماعي والرموز الخاصة بعلامة تبويب المتصفّح واختصار الشاشة الرئيسية على الأجهزة الجوّالة، بالإضافة إلى سلوك المحتوى وطريقة عرضه. في هذا القسم، ستكتشف المكوّنات التي توجد في كل صفحة ويب تقريبًا، على الرغم من أنها غير مرئية.

لإنشاء موقع MachineLearningWorkshop.com (MLW)، عليك البدء بتضمين المكوّنات التي يجب اعتبارها ضرورية لكل صفحة ويب، مثل نوع المستند واللغة البشرية في المحتوى ومجموعة الأحرف، وبالطبع عنوان الموقع أو التطبيق أو اسمهما.

الإضافة إلى كل مستند HTML

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

<!DOCTYPE html>

أول شيء في أي وثيقة HTML هو التمهيد. بالنسبة إلى ملفات HTML، كل ما تحتاجه هو <!DOCTYPE html>. قد يبدو هذا كعنصر HTML، ولكنه ليس كذلك. إنه نوع خاص من العُقد يسمى "doctype". يطلب نوع المستند من المتصفح استخدام الوضع القياسي. في حال حذف هذه الإعدادات، ستستخدم المتصفّحات وضع عرض مختلفًا يُعرف باسم وضع Quirks. يساعد تضمين DOCTYPE في منع وضع Quirks.

<html>

العنصر <html> هو العنصر الجذر لمستند HTML. وهو العنصر الرئيسي لكل من <head> و<body>، ويحتوي على كل محتوى مستند HTML بخلاف نوع المستند. وفي حال حذفها، سيتم تضمينها، ولكن من المهم تضمينها، لأنّها العنصر الذي يتم تعريفه بلغة محتوى المستند.

لغة المحتوى

إنّ سمة اللغة lang التي تمت إضافتها إلى العلامة <html> تحدد اللغة الرئيسية للمستند. قيمة السمة lang هي رمز لغة مكوّن من حرفَين أو ثلاثة أحرف متبوعة بالمنطقة وفقًا لمعيار ISO. يُرجى العلم أنّ المنطقة اختيارية، ولكننا ننصح بذلك، لأنّها قد تختلف اختلافًا كبيرًا بين منطقة وأخرى. على سبيل المثال، تختلف اللغة الفرنسية كثيرًا في كندا (fr-CA) عن بوركينا فاسو (fr-BF). ويتيح بيان اللغة هذا لبرامج قراءة الشاشة ومحركات البحث وخدمات الترجمة إمكانية التعرّف على لغة المستند.

ولا تقتصر السمة lang على العلامة <html>. إذا كان هناك نص في الصفحة بلغة مختلفة عن لغة المستند الرئيسية، يجب استخدام السمة lang لتحديد استثناءات اللغة الرئيسية في المستند. وليس لسمة lang في النص أي تأثير مرئي، تمامًا كما هي الحال عند تضمينها في الرأس. فهو يضيف فقط دلالات ما يتيح للتكنولوجيا المساعِدة والخدمات الآلية التعرّف على لغة المحتوى المتأثر.

بالإضافة إلى ضبط لغة المستند والاستثناءات لهذه اللغة الأساسية، يمكن استخدام السمة في أدوات اختيار لغة CSS. يمكن استهداف <span lang="fr-fr">Ceci n'est pas une pipe.</span> باستخدام أداتَي اختيار السمات واللغة [lang|="fr"] و:lang(fr).

نعثر بين علامتَي <html> للفتح والإغلاق، وهما: <head> و<body>:

<!DOCTYPE html>
<html lang="en-US">
  <head>
  </head>
  <body>
  </body>
</html>

يحتوي عنوان <head>، أو عنوان البيانات الوصفية للمستند، على جميع البيانات الوصفية لموقع إلكتروني أو تطبيق. يتضمن النص الأساسي المحتوى المرئي. يركّز الجزء المتبقي من هذا القسم على المكوّنات المضمَّنة داخل دالة <head></head> الافتتاحية والختامية.

المكوّنات المطلوبة داخل <head>

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

ترميز الأحرف

يجب أن يكون العنصر الأول في <head> هو تعريف ترميز الأحرف charset. وتظهر قبل العنوان لضمان قدرة المتصفِّح على عرض الأحرف في هذا العنوان وجميع الأحرف في باقي المستند.

الترميز التلقائي في معظم المتصفّحات هو windows-1252 حسب اللغة. ومع ذلك، يجب عليك استخدام UTF-8، لأنها تتيح الترميز المكوّن من واحد إلى أربعة بايت لجميع الأحرف، بما في ذلك الأحرف التي لم تكن تعرف وجودها. كما أنه نوع الترميز الذي يتطلبه HTML5.

لضبط ترميز الأحرف على UTF-8، يجب تضمين ما يلي:

<meta charset="utf-8" />

من خلال تعريف UTF-8 (غير حساس لحالة الأحرف)، يمكنك حتى تضمين رموز تعبيرية في العنوان (ولكن يُرجى عدم ذلك).

يتم اكتساب ترميز الأحرف في كل محتوى المستند، بما في ذلك <style> و<script>. يعني هذا البيان البسيط أنّه يمكنك تضمين الرموز التعبيرية في أسماء الفئات وselectAPI (يُرجى عدم إجراء ذلك مجددًا). إذا كنت تستخدم الرموز التعبيرية، احرص على استخدامها بطريقة تعزّز سهولة الاستخدام بدون الإضرار بإمكانية الوصول.

عنوان المستند

يجب أن يكون لكل من صفحتك الرئيسية وكل الصفحات الإضافية عنوان فريد. يتم عرض محتوى عنوان المستند والنص بين علامتَي <title> للفتح والإغلاق في علامة تبويب المتصفِّح وقائمة النوافذ المفتوحة والسجلّ ونتائج البحث، وما لم تتم إعادة تعريفه باستخدام علامات <meta>، في بطاقات وسائل التواصل الاجتماعي.

<title>Machine Learning Workshop</title>

البيانات الوصفية إطار العرض

العلامة الوصفية الأخرى التي يجب اعتبارها أساسية هي العلامة الوصفية viewport التي تساعد في استجابة الموقع الإلكتروني، ما يتيح عرض المحتوى بشكل جيد تلقائيًا بغض النظر عن عرض إطار العرض. على الرغم من استخدام العلامة الوصفية لإطار العرض منذ حزيران (يونيو) 2007، عندما تم طرح أول هاتف iPhone، تم توثيقها في إحدى المواصفات مؤخرًا فقط. فهو يتيح التحكم في حجم إطار العرض وحجمه، ويمنع خفض حجم محتوى الموقع الإلكتروني ليلائم موقع ويب بحجم 960 بكسل وشاشة بحجم 320 بكسل.

<meta name="viewport" content="width=device-width" />

تعني الكود السابق "جعل الموقع سريع الاستجابة، بدءًا من جعل عرض المحتوى هو عرض الشاشة". بالإضافة إلى width، يمكنك ضبط التكبير/التصغير وقابلية التوسّع، ولكن يتم ضبطهما تلقائيًا على القيم التي يمكن الوصول إليها. إذا كنت تريد عرض محتوى فاضح، يُرجى تضمين ما يلي:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />

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

حتى الآن، المخطط التفصيلي لملف HTML هو:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>

  </body>
</html>

محتوى <head> آخر

هناك المزيد من التفاصيل الأخرى في <head>. جميع بيانات التعريف، في الواقع. ويمكنك العثور هنا على معظم العناصر التي ستعثر عليها في "<head>"، مع حفظ العديد من خيارات "<meta>" في الفصل التالي.

لقد اطّلعت على مجموعة الأحرف الوصفية وعنوان المستند، ولكن هناك الكثير من البيانات الوصفية خارج علامات <meta> التي يجب تضمينها.

CSS

في علامة <head>، يمكنك تضمين أنماط بتنسيق HTML. هناك مسار تعلم مخصص لخدمة CSS إذا كنت ترغب في التعرف على الأنماط، ولكن تحتاج إلى معرفة كيفية تضمينها في مستندات HTML الخاصة بك.

يمكن تضمين CSS بثلاث طرق هي: <link> و<style> وسمة style.

طريقتان أساسيتان لتضمين الأنماط في ملف HTML هما تضمين مورد خارجي باستخدام عنصر <link> مع ضبط السمة rel على stylesheet، أو تضمين CSS مباشرةً في رأس المستند داخل علامات <style> للفتح والإغلاق.

إنّ العلامة <link> هي الطريقة المفضّلة لتضمين أوراق الأنماط. إنّ ربط أوراق أنماط خارجية واحدة أو بضع أوراق أنماط خارجية أمر مفيد لكلّ من تجربة المطوّرين وأداء الموقع الإلكتروني: إذ عليك صيانة CSS في مكان واحد بدلاً من انتشاره في كل مكان، كما يمكن للمتصفّحات تخزين الملف الخارجي في ذاكرة التخزين المؤقت، ما يعني أنّه لن يكون من الضروري تنزيله مرة أخرى مع كل عملية تنقّل بين الصفحات.

البنية هي <link rel="stylesheet" href="styles.css">، حيث يكون style.css هو عنوان URL لورقة الأنماط. سترى غالبًا type="text/css". ليس ذلك ضروريًا! إذا كنت تضمّن أنماطًا مكتوبة باستخدام لغة أخرى غير CSS، يجب استخدام type، ولكن بما أنّه ليس هناك أي نوع آخر، لن تكون هذه السمة مطلوبة. تحدّد السمة rel العلاقة: stylesheet في هذه الحالة. في حال عدم تضمين هذا التاريخ، لن يتم ربط خدمة مقارنة الأسعار (CSS).

من المفترض أن تكتشف قريبًا بعض قيم rel الأخرى، ولكن لنناقش أولاً الطرق الأخرى لتضمين CSS.

إذا كنت تريد أن تكون أنماط أوراق الأنماط الخارجية داخل طبقة تتالية ولكنك لا تملك الإذن بالوصول لتعديل ملف CSS ووضع معلومات الطبقة فيه، فستحتاج إلى تضمين CSS مع @import داخل <style>:

<style>
  @import "styles.css" layer(firstLayer);
</style>

عند استخدام @import لاستيراد أوراق أنماط إلى المستند، بشكل اختياري في الطبقات المتسلسلة، يجب أن تكون عبارات @import هي أول العبارات في <style> أو ورقة الأنماط المرتبطة، خارج بيان مجموعة الأحرف.

في حين أنّ الطبقات المتتالية لا تزال جديدة إلى حدّ ما وقد لا تتمكّن من رصد @import في رأس <style>، سترى غالبًا خصائص مخصَّصة معرَّفة في قالب نمط الرأس:

<style>
  :root {
    --theme-color: #226DAA;
  }
</style>

يجب أن تظهر الأنماط في رأس الصفحة، سواء من خلال <link> أو <style> أو كليهما. وستعمل إذا تم تضمينها في نص المستند، ولكنك تريد أن تضع الأنماط في رأس الصفحة لأسباب تتعلق بالأداء. قد يبدو هذا غير بديهي، لأنك قد تعتقد أنك تريد تحميل المحتوى أولاً، ولكنك تريد فعلاً أن يعرف المتصفح كيفية عرض المحتوى عند تحميله. تؤدي إضافة الأنماط أولاً إلى منع إعادة الطلاء غير الضرورية التي تحدث إذا تم تصميم عنصر بعد عرضه لأول مرة.

إليك الطريقة الوحيدة لتضمين الأنماط التي لن تستخدمها أبدًا في <head> للمستند: الأنماط المضمّنة. من المحتمل أنك لن تستخدم أنماطًا مضمّنة في رأس الصفحة مطلقًا، لأنّ أوراق أنماط برامج وكيل المستخدم تُخفي الرأس تلقائيًا. ولكن إذا أردت مثلاً إنشاء محرِّر CSS بدون JavaScript بحيث يمكنك اختبار العناصر المخصّصة لصفحتك، يمكنك جعل الرأس مرئيًا باستخدام display: block، ثم إخفاء كل ما في الرأس، ثم باستخدام السمة style المضمّنة، جعل كتلة نمط قابلة للتعديل مرئية.

<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
  head { display: block; }
  head * { display: none; }
  :root {
    --theme-color: #226DAA;
  }
</style>

يمكنك إضافة أنماط مضمّنة إلى <style>، إلا أنّ تصميم <style> في style هو أكثر متعة. أنحني.

يُستخدَم العنصر link لإنشاء علاقات بين مستند HTML والموارد الخارجية. يمكن تنزيل بعض هذه الموارد، والبعض الآخر يقدّم معلومات. يتم تحديد نوع العلاقة من خلال قيمة السمة rel. تتوفّر حاليًا 25 قيمة للسمة rel يمكن استخدامها مع <link> أو <a> و<area> أو <form>، مع عدد قليل من القيم التي يمكن استخدامها مع الكل. نفضّل تضمين العبارات ذات الصلة بالمعلومات الوصفية في العنوان وتلك المرتبطة بالأداء في <body>.

ستُضمّن ثلاثة أنواع أخرى في العنوان الآن: icon وalternate وcanonical. (ستقوم بتضمين نوع رابع، rel="manifest"، في الوحدة التالية).

الرمز المفضّل

استخدِم العلامة <link> مع زوج السمة/القيمة rel="icon" لتحديد الرمز المفضّل الذي سيتم استخدامه للمستند. الرمز المفضل هو رمز صغير جدًا يظهر في علامة تبويب المتصفح، بشكل عام على يمين عنوان المستند. وعندما يكون لديك عدد غير عملي من علامات التبويب المفتوحة، ستتقلص علامات التبويب وقد يختفي العنوان تمامًا، ولكن يظل الرمز مرئيًا دائمًا. معظم الرموز المفضلة هي شعارات شركة أو تطبيق.

في حال عدم الإفصاح عن رمز مفضّل، سيبحث المتصفّح عن ملف باسم favicon.ico في دليل المستوى الأعلى (المجلد الجذر للموقع الإلكتروني). باستخدام <link>، يمكنك استخدام اسم ملف وموقعه مختلفَين:

<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />

يشير الرمز السابق إلى "استخدام mlwicon.png كرمز للسيناريوهات التي يكون فيها الحجم 16 بكسل أو 32 بكسل أو 48 بكسل منطقيًا". تقبل سمة "الأحجام" قيمة any للرموز القابلة للتوسّع أو قائمة بقيم widthXheight مربّعة مفصولة بمسافات، حيث تكون قيم العرض والارتفاع 16 أو 32 أو 48 أو أكثر في ذلك التسلسل الهندسي، ويتم حذف وحدة البكسل وتكون علامة X غير حساسة لحالة الأحرف.

<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />

هناك نوعان خاصان غير عاديين من الرموز لمتصفّح Safari: apple-touch-icon لأجهزة iOS وmask-icon لعلامات التبويب المثبَّتة على نظام التشغيل macOS. لا يتم تطبيق apple-touch-icon إلا عندما يضيف المستخدم موقعًا إلكترونيًا إلى الشاشة الرئيسية: يمكنك تحديد رموز متعددة باستخدام sizes مختلفة لأجهزة مختلفة. لن يتم استخدام mask-icon إلا إذا ثبّت المستخدم علامة التبويب في متصفّح Safari على جهاز كمبيوتر سطح المكتب: يجب أن يكون الرمز نفسه بتنسيق SVG أحادي اللون، وتملأ السمة color الرمز باللون المطلوب.

في حين أنه يمكنك استخدام <link> لتحديد صورة مختلفة تمامًا في كل صفحة أو حتى كل تحميل صفحة، لا يجوز ذلك. لتحقيق الاتساق وتقديم تجربة مستخدم جيدة، استخدم صورة واحدة! يستخدم Twitter الطائر الأزرق، فعندما ترى الطائر الأزرق في علامة تبويب المتصفح، ستعرف أن علامة التبويب مفتوحة على صفحة Twitter بدون النقر على علامة التبويب. تستخدم Google رموزًا مفضّلة مختلفة لكل تطبيق من تطبيقاتها المختلفة: هناك رمز بريد إلكتروني، ورمز تقويم، على سبيل المثال. لكن جميع أيقونات Google تستخدم نفس نظام الألوان. ومرة أخرى، أنت تعرف بالضبط ما هو محتوى علامة التبويب المفتوحة من الأيقونة.

إصدارات بديلة من الموقع الإلكتروني

نستخدم القيمة alternate للسمة rel لتحديد الترجمات أو التمثيلات البديلة للموقع الإلكتروني.

لنتخيل أن لدينا نسخًا من الموقع مترجمة إلى اللغتين الفرنسية والبرتغالية البرازيلية:

<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />

عند استخدام السمة alternate للترجمة، يجب ضبط السمة hreflang.

ولا تقتصر القيمة البديلة على الترجمات فحسب. على سبيل المثال، يمكن أن تحدّد السمة type معرّف الموارد المنتظم (URI) البديل لخلاصة RSS عندما يتم ضبط السمة type على application/rss+xml أو application/atom+xml. يمكننا إنشاء رابط يؤدي إلى نسخة افتراضية بصيغة PDF من الموقع الإلكتروني.

<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />

إذا كانت قيمة rel هي alternate stylesheet، تحدّد ورقة أنماط بديلة، ويجب ضبط السمة title واختيار اسم للنمط البديل.

عنوان URL الأساسي

في حال إنشاء عدة ترجمات أو إصدارات من "ورشة عمل تعلُّم الآلة"، قد تشعر بالارتباك لدى محرّكات البحث بشأن النسخة التي تمثّل المصدر الموثوق. لإجراء ذلك، يمكنك استخدام rel="canonical" لتحديد عنوان URL المفضّل للموقع الإلكتروني أو التطبيق.

أدرِج عنوان URL الأساسي في جميع صفحاتك المترجَمة وفي الصفحة الرئيسية، مع الإشارة إلى عنوان URL المفضّل لدينا:

<link rel="canonical" href="https://www.machinelearning.com" />

يتم غالبًا استخدام رابط rel="canonical" الأساسي للنشر المتبادل مع جهات النشر ومنصات التدوين بهدف الإشارة إلى المصدر الأصلي. وعندما يشارك موقع إلكتروني محتوًى، يجب أن يتضمّن الرابط الأساسي المؤدي إلى المصدر الأصلي.

النصوص البرمجية

تُستخدَم العلامة <script> لتضمين نصوص برمجية. النوع الافتراضي هو JavaScript. في حال تضمين أي لغة برمجة نصية أخرى، يمكنك تضمين السمة type مع نوع MIME أو type="module" إذا كانت وحدة JavaScript. يتم تحليل وحدات JavaScript وJavaScript وتنفيذها فقط.

يمكن استخدام علامات <script> لتغليف الرمز أو لتنزيل ملف خارجي. في إطار عمل MLW، لا يتوفّر ملف نص برمجي خارجي، لأنّه بعكس الاعتقاد الرائج، لست بحاجة إلى JavaScript لموقع إلكتروني فعّال، وهذا المسار هو مسار تعلُّم HTML وليس مسار JavaScript.

ستضع جزءًا صغيرًا من JavaScript لإنشاء بيضة عيد الفصح في وقت لاحق:

<script>
  document.getElementById('switch').addEventListener('click', function() {
    document.body.classList.toggle('black');
  });
</script>

ينشئ هذا المقتطف معالج أحداث لعنصر يحمل المعرّف switch. مع JavaScript، لا تريد الإشارة إلى عنصر قبل وجوده. إنها غير موجودة بعد، لذا لن نضمّنها بعد. عند إضافة عنصر مفتاح الإضاءة، سنضيف <script> في أسفل <body> بدلاً من <head>. ولماذا؟ سببان. نريد التأكّد من توفّر العناصر قبل مصادفة النص البرمجي الذي يشير إليها، لأنّنا لا نستند إلى هذا النص البرمجي على حدث DOMContentLoaded. وبشكل أساسي، لا تعمل لغة JavaScript على حظر العرض فحسب، بل يتوقف المتصفّح عن تنزيل جميع مواد العرض عند تنزيل النصوص البرمجية ولا يستأنف تنزيل مواد العرض الأخرى إلى أن تنتهي عملية تنفيذ JavaScript. ولهذا السبب، ستجد غالبًا طلبات JavaScript في نهاية المستند وليس في الرأس.

هناك سمتان يمكنهما تقليل طبيعة حظر تنزيل وتنفيذ JavaScript من خلال السمتَين: defer وasync. باستخدام defer، لن يتم حظر عرض HTML أثناء التنزيل، ولا يتم تنفيذ JavaScript إلا بعد انتهاء عرض المستند. باستخدام async، لا يتم حظر العرض أثناء عملية التنزيل أيضًا، ولكن بعد انتهاء تنزيل النص البرمجي، يتم إيقاف العرض مؤقتًا أثناء تنفيذ JavaScript.

التحميل عند استخدام غير متزامن والتأجيل.

لتضمين JavaScript الخاص بـ MLW في ملف خارجي، يمكنك كتابة ما يلي:

<script src="js/switch.js" defer></script>

تؤدي إضافة السمة defer إلى تأجيل تنفيذ النص البرمجي إلى أن يتم عرض كل المحتوى، ما يمنع النص البرمجي من الإضرار بالأداء. السمتان async وdefer صالحتان فقط على النصوص البرمجية الخارجية.

المجموعة الأساسية

هناك عنصر آخر يمكن العثور عليه فقط في <head>.. ولا يتم استخدامه كثيرًا، إذ يسمح العنصر <base> بضبط عنوان URL تلقائي للرابط وهدف. تحدد السمة href عنوان URL الأساسي لجميع الروابط النسبية.

إنّ السمة target، الصالحة في <base> وكذلك على الروابط والنماذج، تحدّد الأماكن التي يجب فتح هذه الروابط فيها. يفتح الإعداد التلقائي _self الملفات المرتبطة في سياق المستند الحالي نفسه. وتشمل الخيارات الأخرى السمة _blank التي تفتح كل رابط في نافذة جديدة، بالإضافة إلى عنصر _parent للمحتوى الحالي، والذي قد يكون مماثلاً للسمة ذاتها إذا لم تكن أداة الفتح إطار iframe، أو السمة _top المتوفّرة في علامة تبويب المتصفِّح نفسها، ولكن تظهر خارج أي سياق لشغل علامة التبويب بالكامل.

يضيف معظم المطوّرين السمة target إلى الروابط القليلة، إن توفّرت، التي يريدون فتحها في نافذة جديدة على الروابط أو النماذج بأنفسهم، بدلاً من استخدام <base>.

<base target="_top" href="https://machinelearningworkshop.com" />

إذا تبيّن لنا أنّ موقعنا الإلكتروني مضمَّن في إطار iframe على موقع إلكتروني مثل Yummly، يعني تضمين العنصر <base> أنّه عندما ينقر أحد المستخدمين على أي روابط ضِمن مستندنا، سيتم تحميل الرابط من خارج إطار iframe، ما سيشغل نافذة المتصفّح بأكملها.

ومن عيوب هذا العنصر أنّه يتم التعامل مع روابط الارتساء باستخدام <base>. تعمل السمة <base> على تحويل الرابط <a href="#ref"> إلى <a target="_top" href="https://machinelearningworkshop.com#ref"> بشكل فعّال، ما يؤدي إلى إرسال طلب HTTP إلى عنوان URL الأساسي مع إرفاق الجزء.

في ما يلي بعض الملاحظات الأخرى التي يجب أخذها في الاعتبار بشأن <base>: يمكن أن يكون هناك عنصر <base> واحد فقط في المستند، ويجب أن يأتي قبل استخدام أي عناوين URL نسبية، بما في ذلك المراجع المحتملة للنصوص البرمجية أو الأنماط.

يظهر الرمز الآن على النحو التالي:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" src="css/styles.css" />
    <link rel="icon" type="image/png" href="/images/favicon.png" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
    <link rel="canonical" href="https://www.machinelearning.com" />
  </head>
  <body>

    <!-- <script defer src="scripts/lightswitch.js"></script>-->
  </body>
</html>

تعليقات HTML

لاحظ أن النص ملتف بين بعض الأقواس ذات الزوايا والشرطات والفرقعة. هذه هي الطريقة التي يمكنك بها التعليق على HTML. سنترك النص البرمجي معلّقًا إلى أن نحصل على المحتوى الفعلي في الصفحة. لن يتم عرض أو تحليل أي بيانات بين <!-- و-->. يمكن وضع تعليقات HTML في أي مكان على الصفحة، بما في ذلك الرأس أو النص الأساسي، باستثناء النصوص البرمجية أو كتل الأنماط، حيث يجب عليك استخدام تعليقات JavaScript وCSS، على التوالي.

لقد اطّلعت على أساسيات المحتوى في <head>، ولكنّك تريد تعلُّم أكثر من الأساسيات. في الأقسام التالية، سنتعرّف على العلامات الوصفية وكيفية التحكّم في ما يتم عرضه عندما يكون موقعك الإلكتروني مرتبطًا على وسائل التواصل الاجتماعي.

التحقق من فهمك

اختبر معلوماتك حول هيكل المستندات.

كيف تحدد لغة المستند؟

أضِف السمة language إلى علامة HTML.
يُرجى إعادة المحاولة.
أضِف السمة lang إلى علامة HTML.
إجابة صحيحة
Add the <lang> إلى <head>.
يُرجى إعادة المحاولة.

اختَر العناصر التي يمكن تضمينها في <head>.

<p>
يُرجى إعادة المحاولة.
<title>
إجابة صحيحة
<meta>
إجابة صحيحة