الفرق بين المراجعتين لصفحة: «HTML/figure»

من موسوعة حسوب
→ التعديل السابق
مرئينص الويكي
ط تغيير ترتيب التصنيفات
إضافة قسمين وأمثلة
 
(2 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:العنصر <code><figure></code>}}</noinclude>
<noinclude>{{DISPLAYTITLE:العنصر <code><figure></code>}}</noinclude>
يُمثِّل العنصر <code><figure></code> محتوى مستقل بحد ذاته، ويستخدم عادةً مع لافتة (عبر العنصر <code>[[HTML/figcaption|<figcaption>]]</code>)، ويُشير عادةً إلى وحدة لا تتجزأ من المعلومات.
يُمثِّل العنصر <code><figure></code> محتوى مستقل بحد ذاته، ويستخدم عادةً مع لافتة (عبر العنصر <code>[[HTML/figcaption|<figcaption>]]</code>)، ويُشير عادةً إلى وحدة لا تتجزأ من المعلومات.
== بطاقة العنصر ==
{| class="wikitable" style="width: 100%;"
{| class="wikitable" style="width: 100%;"
|-
|-
سطر 47: سطر 49:
<!-- شعار فقط -->
<!-- شعار فقط -->
<figure>
<figure>
   <img
   <img src="wiki-hsoub.jpg" alt="شعار موسوعة حسوب">
  src="logo.png"
  alt="An awesome picture">
</figure>
</figure>
<p></p>
<p></p>
<!-- شعار مع لافتة نصية -->
<!-- شعار مع لافتة نصية -->
<figure>
<figure>
   <img
   <img src="wiki-hsoub.jpg" alt="شعار موسوعة حسوب">
  src="logo.png"
   <figcaption>شعار الموسوعة</figcaption>
  alt="An awesome picture">
   <figcaption>Fig1. Logo</figcaption>
</figure>
</figure>
<p></p>
</syntaxhighlight>
</syntaxhighlight>
=== عرض شيفرة برمجية ===
=== عرض شيفرة برمجية ===
أما هذا المثال فسيتعمل العنصر <code><figure></code> (مع لافتة عبر العنصر <code>[[HTML/figcaption|<figcaption>]]</code>) لعرض شيفرة برمجية:<syntaxhighlight lang="html">
أما هذا المثال فسيتعمل العنصر <code><figure></code> (مع لافتة عبر العنصر <code>[[HTML/figcaption|<figcaption>]]</code>) لعرض شيفرة برمجية:<syntaxhighlight lang="html">
<figure>
<figure>
   <figcaption>Get browser details
   <figcaption>الحصول على معلومات المتصفح</figcaption>
using navigator</figcaption>
   <pre>
   <pre>
function NavigatorExample() {
    function NavigatorExample() {
  var txt;
      var txt;
  txt = "Browser CodeName: " + navigator.appCodeName;
      txt = "Browser CodeName: " + navigator.appCodeName;
  txt+= "Browser Name: " + navigator.appName;
      txt+= "Browser Name: " + navigator.appName;
  txt+= "Browser Version: " + navigator.appVersion ;
      txt+= "Browser Version: " + navigator.appVersion ;
  txt+= "Cookies Enabled: " + navigator.cookieEnabled;
      txt+= "Cookies Enabled: " + navigator.cookieEnabled;
  txt+= "Platform: " + navigator.platform;
      txt+= "Platform: " + navigator.platform;
  txt+= "User-agent header: " + navigator.userAgent;
      txt+= "User-agent header: " + navigator.userAgent;
}             
    }             
   </pre>
   </pre>
</figure>
</figure>
</syntaxhighlight>
</syntaxhighlight>
=== عرض اقتباس ===
=== عرض اقتباس ===
هذا المثال يستعمل العنصر <code><figure></code> لعرض اقتباس، مع استعمال العنصر <code>[[HTML/cite|<nowiki><cite></nowiki>]]</code> لذكر مصدر اسم صاحب الاقتباس داخل العنصر <code>[[HTML/figcaption|<figcaption>]]</code>:<syntaxhighlight lang="html">
هذا المثال يستعمل العنصر <code><figure></code> لعرض اقتباس، مع استعمال العنصر <code>[[HTML/cite|<nowiki><cite></nowiki>]]</code> لذكر مصدر اسم صاحب الاقتباس داخل العنصر <code>[[HTML/figcaption|<figcaption>]]</code>:<syntaxhighlight lang="html">
<figure>
<figure>
   <figcaption><cite>Edsger Dijkstra :-</cite></figcaption>
   <figcaption><cite>إدسخر ديكسترا:</cite></figcaption>
   <p>"If debugging is the process of removing software bugs,
   <q>إذا كان التنقيح هو عملية إزالة العلل، فالبرمجة هي عملية إضافة العلل.</q>
  <br />
  then programming must be the process of putting them in"</p>
</figure>
</figure>
</syntaxhighlight>
</syntaxhighlight>
=== عرض قصيدة شعرية ===
=== عرض قصيدة شعرية ===
أما هذا المثال فيستعمل العنصر <code><figure></code> لعرض قصيدة شعرية، مع استخدام العنصر <code>[[HTML/cite|<nowiki><cite></nowiki>]]</code> لذكر اسم القصيدة:<syntaxhighlight lang="html">
أما هذا المثال فيستعمل العنصر <code><figure></code> لعرض قصيدة شعرية، مع استخدام العنصر <code>[[HTML/cite|<nowiki><cite></nowiki>]]</code> لذكر اسم القصيدة:<syntaxhighlight lang="html">
<figure>
<figure>
  <p>
  <p>وقد أغتدي والطير في وكناتها    بمنجر قيد الأوابد هيكل</p>
  Depression is running through my head,<br>
  <figcaption><cite>معلقة امرؤ القيس</cite>.</figcaption>
  These thoughts make me think of death,<br>
  A darkness which blanks my mind,<br>
  A walk through the graveyard, what can I find?....
</p>
  <figcaption><cite>Depression</cite>.
  By: Darren Harris</figcaption>
</figure>
</figure>
</syntaxhighlight>
==التنسيق الافتراضي==
تعرض أغلبية المتصفحات العنصر <code><figure></code> بضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>block</code>، وضبط قيمة <code>[[CSS/margin-top|margin-top]]</code> و <code>[[CSS/margin-bottom|margin-bottom]]</code> إلى <code>1em</code>، وقيمة <code>[[CSS/margin-left|margin-left]]</code> و <code>[[CSS/margin-right|margin-right]]</code> إلى <code>40px</code>:<syntaxhighlight lang="css">
figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}
</syntaxhighlight>
</syntaxhighlight>
==مصادر ومواصفات==
==مصادر ومواصفات==
*معيار [https://html.spec.whatwg.org/multipage/semantics.html#the-figure-element HTML Living Standard].
*معيار [https://html.spec.whatwg.org/multipage/semantics.html#the-figure-element HTML Living Standard].
*مواصفة [http://www.w3.org/TR/html5/grouping-content.html#the-figure-element HTML5].
*مواصفة [http://www.w3.org/TR/html5/grouping-content.html#the-figure-element HTML5].
[[تصنيف:HTML]]
[[تصنيف:HTML|{{SUBPAGENAME}}]]
[[تصنيف:HTML Elements]]
[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
[[تصنيف:Text Content]]
[[تصنيف:HTML Text Content|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 06:41، 18 فبراير 2018

يُمثِّل العنصر <figure> محتوى مستقل بحد ذاته، ويستخدم عادةً مع لافتة (عبر العنصر <figcaption>)، ويُشير عادةً إلى وحدة لا تتجزأ من المعلومات.

بطاقة العنصر

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

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

Chrome Firefox Edge Safari Opera
8 4.0 مدعوم 5.1 11.10

الخاصيات

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

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

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

أمثلة

عرض صورة

هذا المثال يستعمل العنصر <figure> مرتين، إذ يعرض أوّل مرة شعارًا، وفي المرة الثانية سيعرض شعارًا مع لافتة نصية:

<!-- شعار فقط -->
<figure>
  <img src="wiki-hsoub.jpg" alt="شعار موسوعة حسوب">
</figure>
<p></p>
<!-- شعار مع لافتة نصية -->
<figure>
  <img src="wiki-hsoub.jpg" alt="شعار موسوعة حسوب">
  <figcaption>شعار الموسوعة</figcaption>
</figure>

عرض شيفرة برمجية

أما هذا المثال فسيتعمل العنصر <figure> (مع لافتة عبر العنصر <figcaption>) لعرض شيفرة برمجية:

<figure>
  <figcaption>الحصول على معلومات المتصفح</figcaption>
  <pre>
    function NavigatorExample() {
      var txt;
      txt = "Browser CodeName: " + navigator.appCodeName;
      txt+= "Browser Name: " + navigator.appName;
      txt+= "Browser Version: " + navigator.appVersion ;
      txt+= "Cookies Enabled: " + navigator.cookieEnabled;
      txt+= "Platform: " + navigator.platform;
      txt+= "User-agent header: " + navigator.userAgent;
    }            
  </pre>
</figure>

عرض اقتباس

هذا المثال يستعمل العنصر <figure> لعرض اقتباس، مع استعمال العنصر <cite> لذكر مصدر اسم صاحب الاقتباس داخل العنصر <figcaption>:

<figure>
  <figcaption><cite>إدسخر ديكسترا:</cite></figcaption>
  <q>إذا كان التنقيح هو عملية إزالة العلل، فالبرمجة هي عملية إضافة العلل.</q>
</figure>

عرض قصيدة شعرية

أما هذا المثال فيستعمل العنصر <figure> لعرض قصيدة شعرية، مع استخدام العنصر <cite> لذكر اسم القصيدة:

<figure>
 <p>وقد أغتدي والطير في وكناتها    بمنجر قيد الأوابد هيكل</p>
 <figcaption><cite>معلقة امرؤ القيس</cite>.</figcaption>
</figure>

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

تعرض أغلبية المتصفحات العنصر <figure> بضبط الخاصية display إلى block، وضبط قيمة margin-top و margin-bottom إلى 1em، وقيمة margin-left و margin-right إلى 40px:

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

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

مجلوبة من «https://wiki.hsoub.com/index.php?title=HTML/figure&oldid=2594»