آموزش تگ details در html

//

آموزش تگ details در html

تگ details

در این قسمت از آموزش 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 در html

استفاده از تگ details

تگ details یک تگ جدید است و در نسخه های قدیمی html وجود ندارد.

تگ details جزئیات اضافی که کاربر بر حسب تقاضا می تواند مشاهده یا مخفی نماید را مشخص می کند.

تگ details مورد استفاده برای ایجاد یک ویجت تعاملی است که کاربر با استفاده از کلیک کردن می تواند باز یا بسته اش نماید. و هر نوع محتوایی را می توان داخل تگ details قرار داد.

محتوای عنصر details نباید قابل مشاهده باشد مگر این که ویژگی های open قرار داده شده باشد.

مثال شماره ۱ : استفاده از تگ details در حالت عادی بدون استایل

شما میتوانید با استفاده از تگ summary درون تگ details خود ، عنصری را ایجاد کنید که با کلیک به آن محتوای درون تگ details شما نمایش داده شود.

ویژگی باز ، محتوای تگ details را قابل مشاهده می کند. مرورگرهای Internet Explorer و Microsoft Edge از این ویژگی پشتیبانی نمی کنند.

پشتیبانی مرورگرها

تگ details در مرورگرهای : IE، safari ، firefox، cherom، opera و Edge پشتیبانی می شود.

در دوره آموزش HTML و CSS ثبت نام کنید.

 

دانلود فایل این جلسه

برای نصب نرم افزار برای کد نویسی html از لینک زیر استفاده فرمایید.

آموزش نرم افزار های مورد نیاز طراحی وب سایت

در صورت که به طراحی وب آشنایی ندارید میتوانید از آموزش زیر استفاده فرمایید .

طراحی وب

در صورت که میخواهید به صورت حرفه ای طراحی وب را فرا بگیرید از لینک زیر استفاده فرمایید .

آموزش css html آموزش HTML5 CSS3

در یافت تمام جلسات آموزش مرحله به مرحله html از لینک زیر استفاده فرمایید.

آموزش html

میانگین رتبه 5/5 تعداد رای : 1

مطالب مرتبط

نظرات

هیچ دیدگاهی برای این محصول نوشته نشده است.

سبد خرید
در حال بروز رسانی