الوسم summary في HTML

الوسم summary

سنتحدث عن عنصرين مهمين في لغة html و هما details و يملك ضمنه عنصر summary و يكون عبارة عن مثلث صغير و بداخله نضع فقرات.

وسم "summary" في HTML يستخدم في تعريف عنصر فرعي (sub-element) ضمن وسم "details" لإنشاء قائمة مطوية (collapsible list) يُمكن توسيعها وطيّها.

يتم استخدام الوسم "details" لتعريف البنية العامة للقائمة المطوية، ويتم استخدام الوسم "summary" لتعريف عنوان أو عنصر تفصيلي يتم النقر عليه لتوسيع أو طي القائمة المطوية.

يكتب بالشكل

<details>
    <summary>نكتب اسم العرض</summary>
</details>

فيما يلي مثال على استخدام الوسمين "details" و"summary" في HTML:

<details>
  <summary>عنوان القائمة المطوية</summary>
  <p>محتوى القائمة المطوية.</p>
</details>

عند تشغيل الكود السابق، ستظهر قائمة مطوية تحتوي على عنوان "عنوان القائمة المطوية". عند النقر على العنوان، سيتم توسيع القائمة المطوية لعرض المحتوى الذي يتم تعريفه داخل الوسم "details".

يمكنك استخدام الوسمين "details" و"summary" لتنظيم المحتوى وإظهاره بشكل متحكم للمستخدم، حيث يمكنه توسيع القوائم المطوية لعرض المزيد من التفاصيل أو طيها لتوفير مساحة على الصفحة.

مثال

أنشئ قائمة من نوع details تعرض أسم Nusur Tech و بداخلها وسم summary يعرض لنا تعلم لغات html,css,javascript,python.

<body>
    <details>
        <summary>Programmer Tech</summary>
        <p>learn html</p> 
        <p>learn css</p> 
        <p>learn python</p>  
        <p>learn javascript</p>
    </details>
</body>

يمكن تنسيق هذا عن طريق الـ css ليكون مظهره اجمل.

وسيكون كود CSS بالشكل

<style>
    details > summary {
        padding: 4px;
        width: 200px;
        background-color: #90a3f7;
        border: none;
        box-shadow: 1px 1px 2px #7de2ed;
        cursor: pointer;
    }
    details > p {
        background-color: #4ef4dd;
        padding: 4px;
        margin: 0;
        box-shadow: 1px 1px 2px #e99898;
    }
</style>

و نستطيع تحسينه اكثر بالشكل

<style>
    details {
        border: 1px solid rgb(110, 204, 231);
        border-radius: 4px;
        padding: 10px 10px 0;
    }
    summary {
        font-weight: bold;
        margin: -10px -10px 0;
        padding: 10px;
        cursor: pointer;
    }
    details[open] {
        padding: 10px;
    }
    details[open] summary {
        border-bottom: 1px solid rgb(77, 119, 167);
        margin-bottom: 10px;
    }
</style>

مثال قائمة مطوية بسيطة:

<details>
    <summary>عنوان القائمة المطوية</summary>
    <ul>
        <li>عنصر 1</li>
        <li>عنصر 2</li>
        <li>عنصر 3</li>
    </ul>
</details>

مثال قسم قابل للتوسيع في صفحة الأسئلة والأجوبة:

<div>
    <summary>سؤال 1: ما هو الHTML؟</summary>
    <p>الإجابة: HTML هي لغة ترميز تستخدم لبناء صفحات الويب.</p>
</div>

مثال قائمة مطوية تحتوي على صور:

<details>
    <summary>عرض الصور</summary>
    <img src="image1.jpg" alt="صورة 1">
    <img src="image2.jpg" alt="صورة 2">
    <img src="image3.jpg" alt="صورة 3">
</details>

مثال قسم قابل للتوسيع لعرض معلومات المستخدم:

<div>
    <summary>معلومات المستخدم</summary>
        <ul>
            <li>الاسم: جون دو</li>
            <li>العمر: 30 سنة</li>
            <li>البريد الإلكتروني: john@example.com</li>
        </ul>
</div>

هذه أمثلة بسيطة توضح كيف يمكن استخدام الوسم "summary" في HTML لإنشاء قوائم مطوية وعناصر قابلة للتوسيع. يمكنك تعديلها وتخصيصها وفقًا لاحتياجاتك الخاصة.

هل يمكنني تغيير تصميم الوسم summary في HTML

نعم، يمكنك تغيير تصميم الوسم "summary" في HTML باستخدام CSS. يمكنك تطبيق أنماط CSS المخصصة لتعديل المظهر الخاص بالوسم "summary" وتخصيصه وفقًا لاحتياجاتك.

فيما يلي بعض الأمثلة لتغيير تصميم الوسم "summary" باستخدام CSS:

مثال تغيير اللون وتنسيق النص:

<style>
    summary {
        color: blue;
        font-weight: bold;
    }
</style>

مثال تغيير الخلفية والهوامش:

<style>
    summary {
        background-color: #f1f1f1;
        margin: 10px;
        padding: 5px;
    }
</style>

مثال تغيير الأيقونة المستخدمة للتوسيع والطي:

<style>
  summary::before {
    content: "+";
    font-weight: bold;
    margin-right: 5px;
  }

  details[open] summary::before {
    content: "-";
  }
</style>

يمكنك تجربة هذه الأمثلة وتعديل القيم والخصائص وفقًا لتفضيلاتك الشخصية. يمكنك أيضًا استخدام أنماط CSS المتقدمة لتخصيص تصميم الوسم "summary" بشكل أكبر، مثل استخدام الصور أو تطبيق تأثيرات أخرى.

تذكر أن تضع أنماط CSS داخل عنصر <style> داخل وسم <head> في مستند HTML الخاص بك، أو يمكنك استخدام ملف CSS خارجي والربط به في المستند HTML باستخدام وسم <link>.

هل يمكن استخدام الوسم summary في HTML في أي عنصر آخر؟

لا، وسم "summary" لا يمكن استخدامه في أي عنصر آخر في HTML. يجب استخدامه فقط داخل وسم "details" لتعريف عنوان أو عنصر تفصيلي للقائمة المطوية.

وسم "summary" يعمل كعنصر تحكم لفتح وإغلاق القائمة المطوية، ويتم توفير تبديل الحالة (toggle functionality) تلقائيًا عند استخدامه داخل وسم "details". عند النقر على عنصر "summary"، يتم تغيير حالة القائمة المطوية بين العرض والإخفاء.

إذا كنت ترغب في إنشاء عنصر آخر يحتوي على عنوان قابل للنقر يتحكم في عرض وإخفاء محتواه، يمكنك استخدام البرمجة والأحداث(Event handling) في HTML وJavaScript لتحقيق ذلك.

دعم الوسم summary في HTML للمتصفحات

فيما يلي قائمة بالمتصفحات التي تدعم الوسم summary في HTML :

Chrome 12.
Edge 79.
Firefox 49.
Opera 15.
Safari 6.
Android Webview 4.
Chrome for Android مدعوم.
Firefox for Android 49.
Opera for Android 14 مدعوم.
Safari for IOS مدعوم.
Samsung Internet.

نسور التقنية Nusur Tech

الوسم summary في HTML