الفرق بين المراجعتين ل"HTML/hr"
< HTML
اذهب إلى التنقل
اذهب إلى البحث
ط (تغيير ترتيب التصنيفات) |
(إضافة قسمين ومثال) |
||
| (مراجعتان متوسطتان بواسطة نفس المستخدم غير معروضتين) | |||
| سطر 6: | سطر 6: | ||
يحتوي هذا المثال على فقرتين (العنصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code>) يفصل بينهما العنصر <code><nowiki><hr></nowiki></code> الذي يُمثَّل بخطٍ أفقي:<syntaxhighlight lang="html"> | يحتوي هذا المثال على فقرتين (العنصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code>) يفصل بينهما العنصر <code><nowiki><hr></nowiki></code> الذي يُمثَّل بخطٍ أفقي:<syntaxhighlight lang="html"> | ||
<p> | <p> | ||
| − | + | تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب بتصفح محتواها واطلع على دليل المساهمين. | |
| − | |||
| − | |||
| − | |||
</p> | </p> | ||
| سطر 15: | سطر 12: | ||
<p> | <p> | ||
| − | + | محتوى موسوعة حسوب هو محتوى مرجعي، أي هو أقرب للقاموس تبحث فيه عمّا تحتاج له عند الحاجة. إذا كنت تبحث عن دروس تطبيقية، فننصحك بزيارة أكاديمية حسوب. | |
| − | |||
| − | |||
| − | |||
</p> | </p> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == بطاقة العنصر == | ||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 63: | سطر 58: | ||
* <code>width</code>: ضبط طول الخط الأفقي بالبكسلات أو كنسبة مئوية. | * <code>width</code>: ضبط طول الخط الأفقي بالبكسلات أو كنسبة مئوية. | ||
لا يستحسن أن تستعمل الخاصيات السابقة في الصفحات الحديثة لأنها أصبحت مهملة، وذكرناها هنا لغرض العلم بها. | لا يستحسن أن تستعمل الخاصيات السابقة في الصفحات الحديثة لأنها أصبحت مهملة، وذكرناها هنا لغرض العلم بها. | ||
| + | |||
| + | == تنسيق العنصر == | ||
| + | تعرض أغلبية المتصفحات العنصر <code><nowiki><hr></nowiki></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>block</code>، مع إضافة هوامش (<code>[[CSS/margin-top|margin-top]]</code> و <code>[[CSS/margin-bottom|margin-bottom]]</code> و <code>[[CSS/margin-left|margin-left]]</code> و <code>[[CSS/margin-right|margin-right]]</code>)، وإطار (<code>[[CSS/border-style|border-style]]</code> و <code>[[CSS/border-width|border-width]]</code>):<syntaxhighlight lang="css"> | ||
| + | hr { | ||
| + | display: block; | ||
| + | margin-top: 0.5em; | ||
| + | margin-bottom: 0.5em; | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; | ||
| + | border-style: inset; | ||
| + | border-width: 1px; | ||
| + | } | ||
| + | </syntaxhighlight> | ||
==مصادر ومواصفات== | ==مصادر ومواصفات== | ||
| سطر 68: | سطر 76: | ||
*مواصفة [http://www.w3.org/TR/html5/grouping-content.html#the-hr-element HTML5]. | *مواصفة [http://www.w3.org/TR/html5/grouping-content.html#the-hr-element HTML5]. | ||
*مواصفة [http://www.w3.org/TR/html401/present/graphics.html#h-15.3 HTML 4.01]، أهملت هذه المواصفة الخاصيات <code>align</code> و <code>size</code> و <code>noshade</code> و <code>width</code>. | *مواصفة [http://www.w3.org/TR/html401/present/graphics.html#h-15.3 HTML 4.01]، أهملت هذه المواصفة الخاصيات <code>align</code> و <code>size</code> و <code>noshade</code> و <code>width</code>. | ||
| − | [[تصنيف:HTML]] | + | [[تصنيف:HTML|{{SUBPAGENAME}}]] |
| − | [[تصنيف:HTML Elements]] | + | [[تصنيف:HTML Elements|{{SUBPAGENAME}}]] |
| − | [[تصنيف:Text Content]] | + | [[تصنيف:HTML Text Content|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 07:04، 18 فبراير 2018
العنصر <hr> يُمثِّل فاصلًا موضوعيًا بين الفقرات (مثلًا: تغيّر المشهد في قصة ما، أو تبدّل الموضوع بإنشاء قسم جديد).
كان يُعرَض هذا العنصر في الإصدارات السابقة من HTML على شكل خط أفقي، وصحيحٌ أنَّه ما يزال يعرَض كذلك في المتصفحات، لكن أصبح له معنى هيكلي، بدلًا من كونه عنصرًا شكليًا فقط.
يحتوي هذا المثال على فقرتين (العنصر <p>) يفصل بينهما العنصر <hr> الذي يُمثَّل بخطٍ أفقي:
<p>
تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب بتصفح محتواها واطلع على دليل المساهمين.
</p>
<hr>
<p>
محتوى موسوعة حسوب هو محتوى مرجعي، أي هو أقرب للقاموس تبحث فيه عمّا تحتاج له عند الحاجة. إذا كنت تبحث عن دروس تطبيقية، فننصحك بزيارة أكاديمية حسوب.
</p>
بطاقة العنصر
| تصنيفات المحتوى | محتوى تنظيمي. |
|---|---|
| المحتوى المسموح | لا يوجد، لأنه عنصر فارغ. |
| الوسم المختصر | يجب أن يملك وسم بداية، ولا يجب أن يملك وسم نهاية. |
| العناصر الأب | أي عنصر يقبل المحتوى التنظيمي. |
| واجهة DOM | HTMLHRElement
|
دعم المتصفحات
| Chrome | Firefox | Edge | Safari | Opera |
|---|---|---|---|---|
| مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
الخاصيات
يمكن استخدام الخاصيات العامة في هذا العنصر.
هنالك خاصيات كانت تستعمل في الإصدارات السابقة لكنها أصبحت غير مدعومة في HTML5 مثل:
align: ضبط محاذاة الخط الأفقي في الصفحة، والقيمة الافتراضية هيleft.size: ضبط ارتفاع الخط الأفقي بالبكسلات.width: ضبط طول الخط الأفقي بالبكسلات أو كنسبة مئوية.
لا يستحسن أن تستعمل الخاصيات السابقة في الصفحات الحديثة لأنها أصبحت مهملة، وذكرناها هنا لغرض العلم بها.
تنسيق العنصر
تعرض أغلبية المتصفحات العنصر <hr> مع ضبط الخاصية display إلى block، مع إضافة هوامش (margin-top و margin-bottom و margin-left و margin-right)، وإطار (border-style و border-width):
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
مصادر ومواصفات
- معيار HTML Living Standard، عرِّفت هذه المواصفة وظيفة العنصر
<hr>. - مواصفة HTML5.
- مواصفة HTML 4.01، أهملت هذه المواصفة الخاصيات
alignوsizeوnoshadeوwidth.