Original subtitles

حسناً.

في هذا الدرس، سوف نتعلم كل شيء عن العناصر الفارغة (void elements) مثل عنصر الخط الأفقي (horizontal rule) وعنصر

فاصل الأسطر (break element).

ما هي العناصر الفارغة بالضبط؟

حسنًا، لقد رأينا ما هي العناصر غير الفارغة، مثل عنصر الفقرة (paragraph) أو عناصر العناوين (heading)،

وهي ليست فارغة لأنها تحتوي على محتوى هنا في المنتصف بين وسمي البداية والنهاية.

أما العنصر الفارغ فهو عنصر يُمنع تماماً وضع أي محتوى بداخل الوسم الخاص به.

وفي الواقع، فإن شكل الوسم نفسه يبدو مختلفاً تماماً.

هذا هو عنصر الخط الأفقي، ويمكنك أن ترى أنه يبدأ بزاوية قوس (أقواس زاوية) وينتهي

بزاوية قوس كذلك.

ولكن هنا تماماً، توجد هذه الشرطة المائلة للأمام (forward slash) قبل نهاية الوسم مباشرةً.

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

إنها هنا تماماً أمام الحرف.

بينما في العناصر الفارغة، تكون الشرطة المائلة للأمام قبل نهاية الوسم مباشرةً.

وعادةً حسب العرف المتبع، سترى مسافة صغيرة هنا أيضاً بين اسم الوسم وتلك

الشرطة المائلة للأمام.

هذا أمر يجب الحذر الشديد بشأنه.

عندما تقوم بإنشاء هذه العناصر الفارغة.

تأكد من أن الشرطة المائلة مائلة في الاتجاه الصحيح، أي بهذا الاتجاه وليس شرطة مائلة للخلف (backslash)

مثل هذه.

فعندما تشير إلى اليمين، فإنها تكون شرطة مائلة للأمام، وعندما تشير إلى الخلف، فإنها تكون

شرطة مائلة للخلف.

إذن كيف يبدو هذا عندما نضيفه إلى مستند HTML؟

حسنًا، لدينا هنا فقرتانا السابقتان، وفي المنتصف بين الفقرتين تماماً قمت بإضافة

عنصر الخط الأفقي والذي نأمل أن يساعدنا في تقسيم المحتوى لإظهار أن هذا الجزء غير متعلق

بهذا الجزء.

ولدينا نوع من الفصل بينهما؛ عندما نقوم بتشغيل هذا الكود أو عندما نعرضه في متصفح الويب،

هذا هو ما ستراه.

سترى الفقرة الأولى، ثم الفقرة الثانية، ثم سترى هذا الخط الأفقي،

أو خطاً أفقياً بشكل أساسي في المكان الذي يتواجد فيه العنصر في ذلك المستند.

الآن، الخط الأفقي ليس هو العنصر الفارغ الوحيد.

هناك عنصر آخر شائع ستراه وهو عنصر فاصل الأسطر (break element).

وهو يبدو هكذا.

الآن، وبشكل مشابه مجدداً، لدينا اسم الوسم ومن ثم لدينا تلك الشرطة المائلة للأمام ومن ثم

ننهي الوسم بشكل أساسي.

إذن لا يوجد وسم افتتاح.

ولا يوجد وسم إغلاق.

بل هناك وسم واحد فقط يبدو هكذا.

ويأتي اسم الوسم مباشرةً قبل الشرطة المائلة للأمام.

الآن، كيف يعمل عنصر فاصل الأسطر؟

حسناً، إنه مفيد جداً عندما يكون لديك نصوص تحتاج فيها إلى فصل الأشياء على أسطر منفصلة

من أجل إعطاء المعنى الصحيح.

على سبيل المثال، إذا كان لديك قصائد شعرية، فمن المفترض في الواقع أن تكون في نفس الفقرة، ولكن يجب

أن يكون كل سطر منها على سطر منفصل لجعل القافية تعمل بشكل صحيح أو لجعل بنية

القصيدة صحيحة.

هذه قصيدة لأحد شعرائي المفضلين، وهو ويليام بليك.

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

إذا كان لدينا هذا الكود هنا، على الرغم من أنها نعم، كلها في نفس الفقرة، وكلها مرتبطة

ببعضها البعض وهذا أمر منطقي.

ولكنك لا تنظر إلى الشعر بهذه الطريقة، فهذا لا يعمل حقاً.

نحن لا نعرف أين يفترض بنا أن نتنفس وكيف يفترض بنا قراءة القصيدة.

لذا بدلاً من ذلك، يمكننا إضافة عناصر فاصل الأسطر التي تعلمنا عنها للتو.

عنصرنا الفارغ لا يحتوي على أي محتوى بداخله، ولكنه يوضح فقط أين يجب أن تكون الفواصل في هذه الفقرة

لكي تبدو هذه القصيدة بشكل صحيح ومتناسق.

وعندما يتم عرض مستند HTML هذا، هذا هو ما ستراه.

تنسيق مثالي لقصيدة شعرية.

"أن ترى العالم في حبة رمل، والجنة في زهرة برية.

وأن تمسك اللانهائية في راحة يدك، والأبدية في ساعة."

وكل هذا منسق بشكل جميل بفضل كل عنصر من عناصر فاصل الأسطر في نهاية كل سطر.

الآن جاء دورك لتجربة تمرين باستخدام هذه العناصر الفارغة.

لذا تفضل وقم بتحميل ملفات البداية لهذا التمرين من مصادر الدورة التدريبية لهذا الدرس.

وعندما تقوم بفك الضغط عنها وفتحها، هذا هو ما يجب أن تراه في ملف index.

لدينا اسم شاعرنا ويليام بليك، وهذا على ما يبدو عنوانه الحقيقي الذي عاش

فيه في مرحلة ما من حياته.

ومن ثم لدينا فقرتان من ويكيبيديا تصفان الشاعر باختصار.

وأريدك أن تستخدم كل ما تعلمته حتى الآن لتنسيق هذا المستند بحيث

يبدو مثل النتيجة النهائية (الهدف) التي وضعتها هنا من أجلك.

كما ترى، في هذا المستوى العلوي، سيتم عرض اسم شاعرنا كعنوان من الدرجة الأولى H1، لأن

هذا هو الشيء الأكثر أهمية في هذه الصفحة المحددة.

وبعد ذلك لدينا عنوان الشاعر، والذي يتم عرضه كفقرة.

ولكن لاحظ أن العناوين البريدية، على الرغم من أنها فقرة واحدة، إلا أنها تحتاج مجدداً إلى التقسيم

إلى أسطر منفصلة باستخدام عنصر فاصل الأسطر الخاص بنا.

وفي النهاية، لدينا خط أفقي يفصل العنوان واسم المؤلف

عن الوصف القصير لهذا المؤلف، والذي يجب أن يوضع في فقرتين منفصلتين.

الآن أريدك أن توقف الفيديو مؤقتاً وتقوم بتعديل ملف index.html لتصل إلى هذه النتيجة goal.png.

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

أوقف الفيديو الآن وقم بتجربة هذا التحدي.

حسناً.

أتمنى أن تكون قد جربت ذلك وسار كل شيء على ما يرام.

سوف أستعرض معكم الحل الآن.

أولاً، قلنا إننا سنضع وسم H1 لاسم الشاعر، ومن ثم سنضع وسم فقرة

يحيط بالعنوان البريدي.

الآن، لكي نجعل هذا العنوان يظهر على أسطر مختلفة، سنضيف عنصر فاصل الأسطر الخاص بنا إلى

نهاية كل سطر.

وتذكر أن عنصر فاصل الأسطر هو وسم مغلق ذاتياً (self-closing tag).

لذا سنقوم بإنشائه على هذا النحو تماماً.

الآن سأقوم ببساطة بنسخه ولصقه في نهاية كل سطر، ويمكنك رؤية كم أصبح

عنواننا منسقاً بشكل جميل الآن.

وأخيراً، أردنا فصل هاتين الفقرتين في النهاية.

لذا سأقوم ببساطة بفعل ذلك.

والآن أصبحت النتيجة ممتازة ومثالية جداً.

لقد حققنا النتيجة المطلوبة.

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

الأفقي بين العنوان والفقرتين.

دعنا ننتقل ونضيف العنصر الفارغ الآخر الذي تعلمنا عنه.

والآن نكون قد أكملنا التحدي ويمكنك التحقق من عملك بمقارنته بالحل للتأكد من أن

كل شيء قمت به يبدو متطابقاً تماماً.

الآن، هناك حيلة ذكية أحب استخدامها وهي ببساطة نسخ الحل والذهاب إلى موقع diffchecker.com ولصق

كود الحل هناك.

ثم لصق الكود الخاص بك، وبعد ذلك تضغط على "البحث عن الاختلافات" (find difference).

وسيقوم الموقع بتظليل جميع الأماكن المختلفة في حال أخطأت في كتابة كلمة ما أو إذا قمت

بشيء خاطئ.

على سبيل المثال، في هذه الحالة، في نسختنا، توجد مسافة بعد كلمة Blake ووسم

الإغلاق، والتي لن تحدث أي فرق من حيث لغة HTML.

ولكن لو أنني بدلاً من ذلك كتبت وسم H1 بشكل غير صحيح ولم أكتب حرف H في وسم الإغلاق، حينها

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

وسوف يبرز حقيقة أن هذا الجزء غير صحيح، ويجب الآن تنبيهنا للتحقق من الفرق.

هذه نصيحة واحدة لدي لكم اليوم.

ودعوني أعود فقط إلى ملف index.html الخاص بنا لإصلاح هذا الخطأ البرمجي وسنكون الآن جاهزين للانطلاق.

الآن، فيما يتعلق بالأمور التي يجب فعلها والتي لا يجب فعلها مع العناصر الفارغة، في بعض الأحيان ترى الناس يقومون به هو إضافة وسم فاصل أسطر

لإضافة سطر جديد بدلاً من إنشاء عنصر فقرة منفصل.

الآن، هذا ليس ما تريد القيام به لأن هذا ليس جيداً جداً لإمكانية الوصول (accessibility)، مما يعني

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

لذا أنصحك دائماً بإنشاء عناصر فقرة جديدة عندما يكون لديك فقرات جديدة، واستخدام عنصر فاصل

الأسطر فقط عندما يكون هناك سبب ما يجعلك ترغب في فصل الأسطر المختلفة في

فقرة واحدة.

ولكنها تظل فقرة واحدة كما هو الحال في قصيدة شعرية أو في حالة عنوان بريدي كما

غطينا في هذا الدرس.

الآن، الشيء الأخير الذي تجب الإشارة إليه هو أنه في بعض الأحيان عندما تنظر إلى عنصر الخط الأفقي أو

عنصر فاصل الأسطر، قد تراه ممثلاً

بدون وسم الإغلاق النهائي هذا، قد ترى الناس يكتبونه ببساطة هكذا وهذا يعتبر HTML

صحيحاً تماماً ومقبولاً.

لذا يمكن أن يكون لديك بالفعل عنصر خط أفقي يبدو هكذا.

ويمكن أن يكون لديك عنصر فاصل أسطر يبدو هكذا بدلاً من العنصر الذي يحتوي على الشرطة المائلة للأمام في

النهاية.

وكلاهما خياران صحيحان ومتاحان.

يمكنك اختيار هذا أو يمكنك اختيار ذاك بدءاً من إصدار HTML5، وهو أحدث إصدار من HTML.

ما بدأ يفعله المتصفح هو أنه بدأ يتجاهل هذه الشرطة المائلة للأمام في النهاية لدرجة أنه لا

ينظر إليها حتى.

هو يرى الجزء الأول ويعرف بالفعل أن فاصل الأسطر هو عنصر فارغ وأن الخط الأفقي هو عنصر

فارغ.

لذا فهو لا يحتاج فعلياً إلى الاستمرار في القراءة.

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

والسبب في ذلك هو أنه عندما تقرأ الكود الخاص بك، بصفتك بشراً، سيكون من الأسهل عليك بكثير

رؤية أن هذا عنصر فارغ ولا يحتاج إلى وسم إغلاق، وبذلك لا ينتهي بك الأمر

مرتبكاً، ويمكنك تمييز العناصر الفارغة والعناصر غير الفارغة بسهولة والتفريق بينها

وبين بعضها البعض.

إذن هذه مجرد نصيحة سريعة وشيء لتنبيهك عندما تراه مكتوباً بهذا الشكل على الإنترنت.

كلا الإصدارين صحيحان تماماً.

ويمكنك الانتقاء والاختيار بينهما، ولكنني أوصي بالاعتماد على هذا الإصدار.