این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ s در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ s در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ S در HTML
تگ s که از کلمه ( Strike Through ) گرفته شده است، در لغت به معنی اعتصاب می باشد، تگی است که با استفاده از آن میتوان بروی یک متن یک خط کشید و اون متن رو عملا بی اعتبار کرد.
تگ s در ظاهر شبیه تگ <del> می باشد ( یعنی هردوتاشون روی متن خط میکشن ) ولی خب از دیدگاه مرورگرها و موتورهای جستجوگر این ۲تا تگ کاملا فرق میکنند.
تگ <del> میاد و یک متن رو روش خط میکشه و این برای مرورگرها و موتورهای جستجوگر یعنی اون متن / محتوا حذف شده است یعنی دیگه عملا اون محتوا در سایت وجود ندارد یا نخواهد داشت. ( یعنی چیزی که حذف شده )
در نتیجه مرورگرها یا موتورهای جستجوگر به اون متن یا محتوایی که درون تگ <del> قرار داره توجهی نمیکنند چون میگن این متن / محتوا حذف شده است پس به عنوان یک محتوای حذف شده نگاش میکنن.
ولی محتوایی که درون تگ s قرار میگیرد، محتوایی است که باید در سایت وجود داشته باشد ولی خب مثلا برای مدتی اعتبارش از دست رفته یا مثلا دیگه اون متن معتبر نیست.
اصلی ترین و بیشترین کاربرد این تگ در سایت های فروشگاهی برای بخش تخفیف ها می باشد، مثلا میگن این محصول قیمتش فلان بوده بعد روش خط کشیده شده و قیمت الانش شده بهمان ( یعنی اون قیمت اولیش تو سایت وجود داره ولی خب فعلا بی اعتبار هستش )
Free-Learn
مثال از تگ s در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : در مثال زیر، مثلا من اول یک مطلب گذاشتم و گفتم ماشین من پراید است، ولی خب مثلا مدتی بعدش پژو خریدم و اومدم گفتم ماشین جدید من پژو است و پراید رو درون تگ s گذاشتم.
|
1 2 3 4 5 |
<body dir="rtl"> <p>ماشین من <s>پراید</s> پژو می باشد.</p> </body> |
مثال شماره ۲ : استایل دادن به تگ s با استفاده از CSS
|
1 2 3 4 5 6 7 8 9 10 |
<style> s{ background-color:#f2f2f2; color:red; font-weight:bold; padding:4px; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ s در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ s از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
فرض کنید یک وبسایت فروشگاھی دارید و میخواھید برای محصولات تخفیف در نظر بگیرید، خب در اینجا به راحتی میتوانید از تگ s استفاده نمایید، که بگیم خب قیمت اصلی محصول باشه، ما کاریش نداریم ولی این قیمت اصلی در حال حاضر اعتباری نداره برامون چرا که قیمت تخفیف خوردش مهمه. پس بهتره قیمت اصلی رو با تگ s برای مدت زمانی که تخفیف داریم بی اعتبار کنیم.
اگه ما بخوایم از تگ del برای اینکار استفاده کنیم خب یعنی داریم میگیم قیمت اصلی محصول رو بکل حذف کن و حدف شده بدون ، درحالیکه ما نمیخوایم قیمت اصلی رو بکل حذف کنیم، فقط میخوایم برای مدتی بی اعتبارش کنیم پس بهتره از تگ s استفاده نماییم.
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ s را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
s { text-decoration: line-through; } |
