آموزش تگ details در html
آموزش تگ details در html
فهرست موضوعات در این آموزش
در این قسمت از آموزش html قصد داریم کلیه تگ details در html را برای شما عزیزان توضیح دهیم. برای این منظور تگ details برای شما آماده شده است. امیدواریم مطالب قابل درک و کاربردی باشد با ما همراه باشید.
قبل از اینکه به آموزش تگ details بپردازیم می‌خواهیم بدانیم مفهوم تگ چیست و چه کاربرد‌هایی در html دارد.
تگ ها درhtml نقش مهمی دارند زیرا تمامی کارهایhtml با تگ انجام می‌شود.
در نوشتن تگ‌ها باید ساختار و اصول آن رعایت شود و از علامت شروع (< نام تگ>) و علامت پایان (<نام تگ/>) استفاده می‌شود.
تگ‌ها در html دو دسته اند:
- تگ‌های بلند که شروع و پایان دارند.
- تگ‌های کوتاه که شروع و پایان ندارند.
HTML5 با ویژگی های مختلفی ارائه شد که یکی از مهم ترین آنها تگ های معنایی یا semantic Tags در می باشد.
semantic Tags به طراحان وب کمک می کند تا ساختار صفحه خود را براساس قوانینی که توسط موتور های جستجو قابل شناسایی است طراحی کنند.
در نتیجه این کار باعث بهبود دسترسی موتورهای جستجو به تمام اطلاعات وب سایت شما می شود.
تگ های مفهومی یا Semantic Tags در HTML5
تگ های معنایی یا به عبارتی semantic tags مولفه هایی هستند که معنای آنها هم برای مرورگر و موتور های جستجو به طور کاملا واضح است.
برای مثال تگ های <table >,<header>, <footer> و… مشخص می کنند که چه نوع محتوایی دارند.
اما عناصر غیر معنایی مانند <p>, <span>, <pre> به هیچ عنوان معنا یا اطلاعاتی را در مورد محتوای خود به ما نمی دهند
تگ details در html
تگ details تگی است که با استفاده از آن میتوان یک محتوا را بصورت پیش فرض در حالت مخفی / غیرقابل نمایش ایجاد کرد ، تا کاربر بتواند با کلیک بروی این تگ محتوای مخفی شده را مشاهده نماید.
استفاده از تگ details
تگ details یک تگ جدید است و در نسخه های قدیمی html وجود ندارد.
تگ details جزئیات اضافی که کاربر بر حسب تقاضا می تواند مشاهده یا مخفی نماید را مشخص می کند.
تگ details مورد استفاده برای ایجاد یک ویجت تعاملی است که کاربر با استفاده از کلیک کردن می تواند باز یا بسته اش نماید. و هر نوع محتوایی را می توان داخل تگ details قرار داد.
محتوای عنصر details نباید قابل مشاهده باشد مگر این که ویژگی های open قرار داده شده باشد.
مثال شماره ۱ : استفاده از تگ details در حالت عادی بدون استایل
شما میتوانید با استفاده از تگ summary درون تگ details خود ، عنصری را ایجاد کنید که با کلیک به آن محتوای درون تگ details شما نمایش داده شود.
|
1 2 3 4 5 |
<details> <summary>Copyright 1999-2014.</summary> <p> - by Refsnes Data. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of the company Refsnes Data.</p> </details> |
ویژگی باز ، محتوای تگ details را قابل مشاهده می کند. مرورگرهای Internet Explorer و Microsoft Edge از این ویژگی پشتیبانی نمی کنند.
|
1 2 3 4 5 6 7 |
<details open> <summary>Copyright 1999-2014.</summary> <p> - by Refsnes Data. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of the company Refsnes Data. <a href="https://replywp.com">پاسخ وردپرس</a> </p> </details> |
پشتیبانی مرورگرها
تگ details در مرورگرهای : IE، safari ، firefox، cherom، opera و Edge پشتیبانی می شود.
در دوره آموزش HTML و CSS ثبت نام کنید.
برای نصب نرم افزار برای کد نویسی html از لینک زیر استفاده فرمایید.
آموزش نرم افزار های مورد نیاز طراحی وب سایت
در صورت که به طراحی وب آشنایی ندارید میتوانید از آموزش زیر استفاده فرمایید .
در صورت که میخواهید به صورت حرفه ای طراحی وب را فرا بگیرید از لینک زیر استفاده فرمایید .
آموزش css html آموزش HTML5 CSS3
در یافت تمام جلسات آموزش مرحله به مرحله html از لینک زیر استفاده فرمایید.
هنوز بررسی‌ای ثبت نشده است.