الفرق بين المراجعتين ل"HTML/mark"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
 
(إضافة قسمين ومثال)
 
(3 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة)
سطر 4: سطر 4:
 
مثال عن استخدام العنصر <code><nowiki><mark></nowiki></code>:
 
مثال عن استخدام العنصر <code><nowiki><mark></nowiki></code>:
 
<syntaxhighlight lang="html">
 
<syntaxhighlight lang="html">
<p>The &lt;mark&gt; element is used to
+
<p>يستعمل العنصر &lt;mark&gt;
   <mark>highlight</mark> text</p>
+
   <mark>لتعليم</mark> النص</p>
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
== بطاقة العنصر ==
 
{| class="wikitable" style="width: 100%;"
 
{| class="wikitable" style="width: 100%;"
 
|-
 
|-
سطر 49: سطر 50:
 
* لا تستعمل العنصر <code><nowiki><mark></nowiki></code> لعرض النصوص البرمجية.
 
* لا تستعمل العنصر <code><nowiki><mark></nowiki></code> لعرض النصوص البرمجية.
 
* لا تخلط بين العنصرين <code><nowiki><mark></nowiki></code> و <code>[[HTML/strong|<nowiki><strong></nowiki>]]</code>، فالعنصر <code>[[HTML/strong|<nowiki><strong></nowiki>]]</code> يستخدم لإعطاء أهمية إلى جزء من النص، بينما العنصر <code><nowiki><mark></nowiki></code> فيشير إلى أنَّ ذلك النص متعلقٌ بشيءٍ ما في سياقٍ مختلف.
 
* لا تخلط بين العنصرين <code><nowiki><mark></nowiki></code> و <code>[[HTML/strong|<nowiki><strong></nowiki>]]</code>، فالعنصر <code>[[HTML/strong|<nowiki><strong></nowiki>]]</code> يستخدم لإعطاء أهمية إلى جزء من النص، بينما العنصر <code><nowiki><mark></nowiki></code> فيشير إلى أنَّ ذلك النص متعلقٌ بشيءٍ ما في سياقٍ مختلف.
 +
 +
== التنسيق الافتراضي ==
 +
تعرض أغلبية المتصفحات العنصر <code><nowiki><mark></nowiki></code> مع جعل لون الخلفية <code>[[CSS/background-color|background-color]]</code> أصفر ولون النص <code>[[CSS/color|color]]</code> أسود:<syntaxhighlight lang="css">
 +
mark {
 +
  background-color: yellow;
 +
  color: black;
 +
}
 +
</syntaxhighlight>
 +
 
==مصادر ومواصفات==
 
==مصادر ومواصفات==
 
*معيار [https://html.spec.whatwg.org/multipage/semantics.html#the-mark-element HTML Living Standard].
 
*معيار [https://html.spec.whatwg.org/multipage/semantics.html#the-mark-element HTML Living Standard].
 
*مواصفة [http://www.w3.org/TR/html5/text-level-semantics.html#the-mark-element HTML5].
 
*مواصفة [http://www.w3.org/TR/html5/text-level-semantics.html#the-mark-element HTML5].
 
+
[[تصنيف:HTML|{{SUBPAGENAME}}]]
[[تصنيف:Inline text semantics]]
+
[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
[[تصنيف:HTML]]
+
[[تصنيف:HTML Inline text semantics|{{SUBPAGENAME}}]]
[[تصنيف:HTML Elements]]
 

المراجعة الحالية بتاريخ 09:09، 19 فبراير 2018

يستعمل العنصر <mark> لتعليم (highlight) جزء من النص لغرض الإشارة إليه لأن له أهمية في سياقٍ معيّن. فمثلًا يمكن أن يستعمل لتعليم كل مرة ترد فيها كلمة مفتاحية في عبارة البحث في صفحة النتائج.

مثال عن استخدام العنصر <mark>:

<p>يستعمل العنصر &lt;mark&gt;
  <mark>لتعليم</mark> النص</p>

بطاقة العنصر

تصنيفات المحتوى عنصر تنظيمي أو عنصر عادي.
المحتوى المسموح محتوى عادي.
الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب أي عنصر يقبل المحتوى العادي.
واجهة DOM HTMLElement

دعم المتصفحات

Chrome Firefox Edge Safari Opera
مدعوم مدعوم مدعوم مدعوم 11.0

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

ملاحظات الاستخدام

  • إذا ورد هذا العنصر داخل اقتباس، فالنص المعلَّم سيُشار إليه خارج الاقتباس أو سيتم التعرض بشكلٍ دقيق له لاحقًا مع أنَّ الكاتب الأصلي لم يظن أنَّ ذلك النص مهم.
  • النص المُعلَّم في المحتوى الرئيسي للصفحة يعني أنَّ ذلك النص مهم لنشاط المستخدم الحالي، كما في نتائج البحث.
  • لا تستعمل العنصر <mark> لعرض النصوص البرمجية.
  • لا تخلط بين العنصرين <mark> و <strong>، فالعنصر <strong> يستخدم لإعطاء أهمية إلى جزء من النص، بينما العنصر <mark> فيشير إلى أنَّ ذلك النص متعلقٌ بشيءٍ ما في سياقٍ مختلف.

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <mark> مع جعل لون الخلفية background-color أصفر ولون النص color أسود:

mark {
  background-color: yellow;
  color: black;
}

مصادر ومواصفات