Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

HTMLالوسم <figure>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي

تعريفه

نستخدم الوسم <figure> على هذا النحو <figure> </figure> لتخصيص مكان في الصفحة بهدف عرض صورة, كود أو رسم بداخله.
بداخل هذا الوسم يمكن إضافة الوسم <figcaption> لعرض وصف للشيء المعروض فيه و هذا الأمر يمكن فعله بشكل إختياري.

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

الجدول التالي يظهر المتصفحات التي تدعم الوسم <figure>.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
8 12 4 11 5.1 مدعوم مدعوم 4 11 5.1 مدعوم

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بعرض صورة و وصف خاص بها بداخل وسم <figure>.

المثال الأول

<figure>
<img src="planets.PNG">
<figcaption>Fig 1 - The solar system.</figcaption>
</figure>
<figure> <img src="planets.PNG"> <figcaption>Fig 1 - The solar system.</figcaption> </figure>

جرب الكود


في المثال التالي قمنا بتحسين ظهور الصورة و الوصف الخاص بها بواسطة كود CSS.

المثال الثاني

figure {
border: thin #c0c0c0 solid;
display: flex;
flex-flow: column;
padding: 5px;
max-width: 254px;
margin: auto;
}
img {
max-width: 254px;
height: auto;
}
figcaption {
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
padding: 6px 3px;
text-align: center;
}
figure { border: thin #c0c0c0 solid; display: flex; flex-flow: column; padding: 5px; max-width: 254px; margin: auto; } img { max-width: 254px; height: auto; } figcaption { background-color: #222; color: #fff; font: italic smaller sans-serif; padding: 6px 3px; text-align: center; }

جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

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

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة