الفرق بين المراجعتين ل"HTML/figure"
< HTML
اذهب إلى التنقل
اذهب إلى البحث
ط (تغيير ترتيب التصنيفات) |
(إضافة قسمين وأمثلة) |
||
| (مراجعتان متوسطتان بواسطة نفس المستخدم غير معروضتين) | |||
| سطر 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="شعار موسوعة حسوب"> |
| − | |||
| − | |||
</figure> | </figure> | ||
<p></p> | <p></p> | ||
<!-- شعار مع لافتة نصية --> | <!-- شعار مع لافتة نصية --> | ||
<figure> | <figure> | ||
| − | <img | + | <img src="wiki-hsoub.jpg" alt="شعار موسوعة حسوب"> |
| − | + | <figcaption>شعار الموسوعة</figcaption> | |
| − | |||
| − | <figcaption> | ||
</figure> | </figure> | ||
| − | |||
</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> | + | <figcaption>الحصول على معلومات المتصفح</figcaption> |
| − | |||
<pre> | <pre> | ||
| − | function NavigatorExample() { | + | 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> | </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> | + | <figcaption><cite>إدسخر ديكسترا:</cite></figcaption> |
| − | < | + | <q>إذا كان التنقيح هو عملية إزالة العلل، فالبرمجة هي عملية إضافة العلل.</q> |
| − | |||
| − | |||
</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> |
| − | + | <figcaption><cite>معلقة امرؤ القيس</cite>.</figcaption> | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | <figcaption><cite> | ||
| − | |||
</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;
}
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5.