جلسه ی سی و هفتم: تگ Summary و کاربرد آن در HTML5

تگ Summary

در جلسات گذشته در مورد HTML و مفاهیم مربوط به آن صحبت نموده ایم در این جلسه می خواهیم در مورد تگ Summary و کاربرد آن در HTML5 صحبت نماییم. (برای دیدن آموزش Html به زبان ساده کلیک کنید)

برای اینکه بخواهیم با تگ های Summary و Details آشنا شویم ابتدا باید تگ details را بشناسیم زیرا تگ Summary درون این تگ قرار میگیرد.

 

تگ details

لغت details در معنای کلمه به معنای جزئیات می باشد. در طراحی سایت ما از تگ details برای اضافه کردن جزئیات بیشتر به یک مطلب یا موضوع مورد نظر خود استفاده می کنیم. تگ details به صورت پیش فرض بسته می باشد و جزئیات درون آن نمایش داده نمی شود، برای اینکه بخواهیم جزئیات درون تگ details را ببینم باید بر روی آن کلیک کنیم. عموما تگ Details شبیه یک منوی متحرک است که در هر زمانی می توانیم آن را باز کنیم یا ببندیم. در صورتی که بخواهیم جزئیات درون این تگ برای همه قابل مشاهده باشد باید ویژگی Open را برای آن تعریف کنیم. به نمونه کد زیر توجه کنید.

کد HTML:


<details open>

<p>این یک متن باز می باشد که به طور عادی قابل مشاهده است</p>

</details>

خروجی کد بالا:

تگ Summary

همانطور که در نمونه کد بالا مشاهده می کنید جزئیات ما به صورت باز می باشد در صورتی که از کلمه ی Open استفاده نشود تگ details بسته خواهد بود و باید با کلیک بر روی آن جزئیات را مشاهده کنیم. در صورتی که از ویژگی open استفاده نکنیم خروجی زیر را مشاهده می کنیم. به نمونه کد زیر توجه کنید:

کد HTML:


<details>

<p>این یک متن باز می باشد که به طور عادی قابل مشاهده است</p>

</details>

خروجی کد بالا:

تگ Summary

 

تگ Summary

یکی از اجزای تگ Details تگ Summary می باشد این تگ یک عنوان قابل مشاهده برای تگ Details ایجاد می کند. زمانی که از تگ Details استفاده می کنیم مشاهده می کنید که کلمه ی Details را به جای عنوان تگ نشان داده و کاربران با کلیک بر روی آن می توانند جزئیات درون آن را مشاهده کنند. اما زمانی که از تگ Summary استفاده می کنیم می توانیم یک عنوان برای جزئیات مورد نظر خود بنویسیم تا کاربر از مفهوم جزئیات داخل تگ Details آگاهی کمی داشته باشد. به نمونه کد زیر توجه کنید:


<details>

<summary>تگ Summary</summary>

<p> این بخش زمانی که بر روی جمله ی تگ Summary کلیک شود نشان داده خواهد شد.</p>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله </p>

</details>

خروجی کد بالا:

تگ Summary

همانطور که مشاهده میکنید در نمونه کد بالا تگ مورد نظر ما بسته می باشد و از خاصیت Open در آن استفاده نشده است و دلیل باز بودن جزئیات ما کلیک بر روی عنوان مورد نظر خود که تگ Summary است می باشد.

نکته: یادتان باشد که تگ Summary باید به عنوان اولین عنصر درون تگ Details قرار بگیرد.

 

یک مثال کاربردی

حال که کار با تگ های details و Summary را یاد گرفته اید نیاز از است که یک مثال کاربردی از این تگ ها ببینید تا بدانید در کدام قسمت از وب سایت خود نیاز است که از آن استفاده کنید. به نمونه کد زیر توجه کنید:

کد HTML:

<div class="box">
  <img src="image/img.jpg" alt="kamyabiha.com">
  <p>
    Heading به معنای عنوان می باشد .هدینگ ها در اینترنت و وب سایت برای مشخص کردن عناوین و سرفصل ها استفاده می‌ شوند در اصل از این تگ ها برای سئو ی سایت استفاده می کنیم .
  </p>
  <details open>
    <summary style="color:red">سئو چیست؟</summary>
    <p>
      سئو مخفف کلمه ی Search Engine Optimization می باشد که کاربرد آن بهینه سازی سایت می باشد
    </p>
  </details>
</div>

کد CSS:


.box {

width: 50%;

height:auto;

margin: 20px auto;

padding: 5px 15px;

box-shadow:1px 1px 10px rgba(0,0,0,.5);

border-radius: 10px;

text-align: center;

}

.box img {

width: 250px;

height: 150px;

margin: 5px auto;

}

خروجی کد بالا:

تگ Summary

مثال بالا صفحه یک پست می باشد. در مثال نشان داده ایم که چگونه باید از تگ های Summary و Details استفاده کنیم. همانطور که مشاهده می کنید در مثال بالا از کلمه ی سئو استفاده شده است. حال ممکن است که این کلمه برای کاربران ما کلمه ای جدید و نامفهموم باشد. برای اینکه در توضیحات خود دچار مشکل نشویم در آخر متن خود با استفاده از تگ های Summary و Details یک پاورقی با عنوان سئو چیست ایجاد نموده ایم. البته لازم به ذکر است که در این مثال از خاصیت Open استفاده شده و توضیحات ما حالت باز دارد.

 

خلاصه مطلب

  1. لغت details در معنای کلمه به معنای جزئیات می باشد. در طراحی سایت ما از تگ details برای اضافه کردن جزئیات بیشتر به یک مطلب یا موضوع مورد نظر خود استفاده می کنیم.
  2. در صورتی که از کلمه ی Open استفاده شود تگ details به صورت باز خواهد بود.
  3. از تگ Summary برای ایجاد یک عنوان قابل مشاهده در تگ Details استفاده میکنیم می کنیم.
  4. یادتان باشد که تگ Summary باید به عنوان اولین عنصر درون تگ Details قرار بگیرد.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها