إضافة خطوط أفقية لتقسيم المحتوى على الصفحة

كيفية استخدام علامة HR لوثيقة ويب

تم استخدام علامة الموارد البشرية تقليديًا لإضافة خط أفقي (يطلق عليه أحيانًا القاعدة الأفقية) إلى مستند ويب. لإضافة سطر ، تقوم بكتابة:


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

هو علامة الموارد البشرية الدلالي؟

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

بدءًا من HTML5 ، أصبحت علامة الموارد البشرية دلالية ، وهي تحدد الآن فاصلًا موضوعيًا ذا مستوى فاصل ، وهو فاصل في تدفق المحتوى الذي لا يضمن صفحة جديدة أو محددًا آخر أقوى - إنه تغيير في الموضوع . على سبيل المثال ، قد تجد علامة الموارد البشرية بعد تغيير مشهد في قصة ، أو يمكن أن تشير إلى تغيير في الموضوع في وثيقة مرجعية.

سمات الموارد البشرية في HTML4 و HTML5

في HTML4 ، يمكن تعيين علامة بسيطة لسمات الموارد البشرية بما في ذلك "align" و "width" و "noshade". يمكن ضبط المحاذاة إلى اليسار أو المركز أو اليمين أو المبرر. قام العرض بتعديل عرض الخط الأفقي من النسبة 100٪ الافتراضية التي مددت الخط عبر الصفحة. جعل سمة noshade خط لون خالصًا بدلاً من لون مظلل. هذه السمات قديمة في HTML5 ، ويجب عليك استخدام CSS لتمييز علامات HR في HTML5. على سبيل المثال ، في HTML 4:


يولد خط أفقي بارتفاع 10 بكسل.

باستخدام CSS مع HTML5 ، تم تصميم خط أفقي يبلغ ارتفاعه 10 بكسل:


إن استخدام CSS لأسلوب الخط الأفقي يمنحك الكثير من الحرية في تصميم صفحة الويب الخاصة بك. يمكنك مشاهدة العديد من الأمثلة على أنماط علامات الموارد البشرية في مقالة نمط HR HR . لا تتوافق أنماط العرض والارتفاع إلا مع جميع المتصفحات ، لذلك قد تكون هناك حاجة إلى بعض التجارب والخطأ عند استخدام أنماط أخرى. العرض الافتراضي هو دائمًا 100٪ من عرض صفحة الويب أو العنصر الرئيسي. الارتفاع الافتراضي للقاعدة هو بكسل اثنين.