تگ های قالب بندی متن قسمت دو

تگ های قالب بندی متن قسمت دو

تگ i و تگ em در HTML

امروز درباره تگ i در html و تگ em در html خواهیم پرداخت و میگوییم چیست و چه کاربردی دارد. در ادامه آموزش html همراه فرازنتورک باشید.

1 معرفی تگ i و تگ em

2 تفاوت تگ i و تگ em

3 نکات تکمیلی در مورد تگ i و تگ em

معرفی تگ i و تگ em

با استفاده از تگ i و em در HTML می توانیم محتوای درون این تگ ها را به صورت مورب (Italic) نمایش دهیم.
به منظور درک بهتر کاربرد تگ <i> و تگ <em> در طراحی سایت به مثال‌های زیر توجه کنید در این مثال ها عبارت طراحی سایت به صورت مورب نشان داده می‌شود.

<p> آموزش 
   <i> طراحی سایت </i>
</p>

<p> آموزش 
   <em> طراحی سایت </em>
</p>

تفاوت تگ i و تگ em

ممکن است که برای شما این سوال پیش بیاید که تگ i و em هر دو محتوای درون خود را به صورت مورب نمایش می‌شوند پس چه تفاوتی بین این دو تگ وجود دارد؟ در پاسخ به این سوال باید گفت که نام تگ em از کلمه لاتین (emphasize) به معنی “تاکید” گرفته شده  و زمانی که بخواهیم بر روی یک محتوا تاکید کنیم از تگ em استفاده می‌کنیم.

نکات تکمیلی در مورد تگ i و تگ em

تگ های i و em توسط تمامی مرورگرها پشتیبانی می‌شوند.

تگ del و تگ s و تگ strike در HTML

تگ del چیست ؟ کاربرد تگ del در html چیست ؟ تگ strike در اچ تی ام ال چه کاربردی دارد ؟ تفاوت تگ del با تگ s و strike در چیست ؟ برای کشیدن خط روی متن از چه تگی در html استفاده کنیم ؟ اگر به دنبال یافتن پاسخ این سوالات هستید این مقاله آموزشی را از دست ندهید.

1 آموزش تگ del ، تگ S و Strike در  HTML

1.1 تگ del چیست ؟

1.2 تگ s و تگ strike چیست ؟

1.3 کاربرد تگ del در html

1.4  کاربرد تگ s و strike در html

1.5 تفاوت تگ del با تگ s و strike

آموزش تگ del ، تگ S و Strike در  HTML

تگ del چیست ؟

با استفاده از تگ del در HTML می‌توانیم روی محتوایی که درون این تگ قرار گرفته یک خط بکشیم.

تگ s و تگ strike چیست ؟

از تگ s و strike هم در اچ تی ام ال برای کشیدن خط روی متن استفاده می شود، این دو تگ مشابه تگ del عمل می کنند اما از نظر معنایی با هم تفاوت دارند که در ادامه این مقاله آموزشی از سایت فرازنتورک تفاوت تگ del با تگ strike و s را از نظر معنایی بررسی می کنیم.

کاربرد تگ del در html

ممکن است شما محتوای “هزینه آموزش طراحی سایت 15000 تومان” را بر روی صفحه وب منتشر کنید اما مثلا به مناسب عید نوروز تصمیم بگیرید به خریداران پیکیج آموزشی طراحی سایت 20 درصد تخفیف دهید با استفاده از تگ del می‌توانید بر روی قیمت قبلی یک خط بکشید و سپس قیمت جدید را درج کنید . در مثال زیر بر روی ” 15000 تومان ” یک خط کشیده می‌شود. به مثال زیر توجه کنید :

<p> هزینه آموزش طراحی سایت 
   <del> 15000 تومان </del>
</p>

کاربرد تگ s و strike در html

ممکن است شما مثلا بیست سال پیش محتوایی تحت عنوان “منابع کمی برای آموزش طراحی سایت منتشر شده است ” را در صفحه وب منتشر کرده باشید اما در سال 1396 با وجود سایت ها و منابع آموزشی فراوان در حوزه طراحی سایت ، محتوای شما از اعتبار ساقط شده است حال شما با استفاده از تگ s یا strike می‌توانید بر روی محتوای نامعتبر یک خط بکشید . به مثال های زیر توجه کنید :

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

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

تفاوت تگ del با تگ s و strike

گرچه تگ del و تگ s و تگ strike هر سه مشابه هم عمل کرده و بر روی محتوای درون خود یک خط می‌کشند اما از نظر معنایی با هم تفاوت هایی دارند مثال های ذکر شده در بالا تفاوت بین این تگ‌ها را به خوبی نشان می‌دهد ، دو تگ s و strike از نظر معنایی همانند هم هستند و زمانی که بخواهیم روی یک محتوا که دیگر معتبر نیست یک خط بکشیم از این دو تگ استفاده می‌کنیم اما زمانی که یک بخشی از محتوا حذف شده ولی می خواهیم آن بخش حذف شده را روی صفحه وب نگه داریم و تنها بر روی آن یک خط بکشیم از تگ del استفاده می‌نماییم.

توجه : تگ strike در HTML5 منسوخ شده است و توصیه می‌شود که دیگر از این تگ در طراحی سایت استفاده نشود .

تگ u و تگ ins در HTML

1.1  معرفی تگ u و تگ ins

1.2 کاربرد تگ u در HTML

1.3 کاربرد تگ ins در HTML

1.4 سبک نگارش تگ u و تگ ins

1.5 نکات تکمیلی در مورد تگ ins و تگ u

معرفی تگ u و تگ ins

تگ u و ins هر دو محتوای درون خود را به صورت زیرخط دار (underline) نمایش می‌دهند و در دسته‌ی تگ ‌های قالب بندی متن جای می‌گیرند.
برای درک بهتر کاربرد تگ u و ins در طراحی سایت به مثال زیر توجه کنید :

<p> Training
   <u>
       u tag
   </u>
</p>

<p> Training
    <ins>
         ins tag
    </ins>
<p>

کاربرد تگ u در HTML

از تگ u در HTML برای نمایش محتوا و یا متنی که دارای سبک نگارشی متفاوتی نسبت به سایر محتواهای موجود در سایت است استفاده می‌شود مثل کلمات دارای غلط املایی .

کاربرد تگ ins در HTML

تگ ins در مقابل تگ del قرار دارد و برای مشخص کردن محتوایی که به تازگی به سایت اضافه شده است از این تگ استفاده می‌شود.

سبک نگارش تگ u و تگ ins

مرورگرها به صورت پیش فرض تگ u و تگ ins را با سبک نگارش و یا استایل زیر نمایش می‌دهند که البته شما می‌توانید با استفاده از CSS این سبک نگارش را تغییر دهید .

u {
    text-decoration: underline;
}

ins {
    text-decoration: underline;
}

نکات تکمیلی در مورد تگ ins و تگ u

• تگ u و ins از جمله عناصر  Inline Level یا درون خطی به شمار می روند.
• تگ u و تگ ins توسط تمامی مرورگرها پشتیبانی می‌شوند .

تگ abbr و تگ acronym در HTML

1.1  معرفی تگ abbr و تگ acronym

1.2 صفت های تگ abbr و acronym

1.3 استایل های پیش فرض تگ abbr و acronym

1.4 نکات تکمیلی در مورد تگ abbr و تگ acronym

معرفی تگ abbr و تگ acronym

از تگ <acronym> و <abbr> برای نمایش یک عبارت مخفف استفاده می شود به عنوان مثال HTML که مخفف عبارت Hyper Text Markup Language است را بین تگ آغازی و تگ پایانی <abbr></abbr> و یا بین دو تگ <acronym></acronym> قرار می‌دهیم.
برای درک بهتر کاربرد تگ abbr و acronym در HTML به مثال زیر توجه کنید :

<abbr>
      HTML
</abbr>

<acronym>
      HTML
</acronym>

صفت های تگ abbr و acronym

صفت title

از صفت title می توان برای نمایش عبارت کامل آن مخففی که درون تگ abbr یا acronym  قرار گرفته استفاده نمود تا با قرار گرفتن موس بر روی مخفف ، عبارت کامل آن به کاربر نمایش داده شود . مثال زیر یک نمونه از کاربرد تگ abbr به ھمراه صفت title را نشان می‌دھد:

<abbr title="Hyper Text Markup Language">
      HTML
</abbr>

استایل های پیش فرض تگ abbr و acronym

تمامی مرورگرها به صورت پیش فرض این دو عنصر را به صورت درون خطی یا inline level نمایش می‌دهند .

نکات تکمیلی در مورد تگ abbr و تگ acronym

تگ u و تگ ins توسط تمامی مرورگرها پشتیبانی می‌شوند .

تذکر :  تگ acronym در HTML5 منسوخ شده است توصیه می‌شود که در طراحی سایت به جای این تگ از تگ abbr استفاده نمایید .

تگ sup در HTML

1.1  معرفی تگ sup

1.2 کاربرد تگ sup

1.3 نکات تکمیلی در مورد تگ sup

معرفی تگ sup

محتوای درون تگ sup به صورت بالا نویس نمایش داده می‌شود . بالانویس ھا معمولا به اندازه نصف ارتفاع یک کاراکتر بالاتر از مابقی کاراکتر ھا قرار می‌گیرند و نسبت به متون اطرافشان کمی کوچک تر هستند.

کاربرد تگ sup

از تگ sup می‌توان برای نمایش توان در فرمول‌ های ریاضی استفاده نمود . برای درک بهتر کاربرد تگ sup در طراحی سایت به مثال زیر توجه کنید :

<p>
    Value of 5 <sup>2</sup> + 3 <sup>3</sup> = 52
</p>

نکات تکمیلی در مورد تگ sup

• تگ sup توسط تمامی مرورگرها پشتیبانی می‌شوند .

معرفی تگ sub

تگ sub محتوای درون خود را به صورت زیرنویس (اندیس) نشان میدهد زیر نویس ھا معمولا به اندازه نصف ارتفاع یک کاراکتر نسبت به مابقی کاراکتر ھا پایین تر قرار میگیرند و نسبت به متون اطرافشان کوچکتر ھستند.

کاربرد تگ sub

از تگ sub در صفحات وب بیشتر برای نمایش فرمول های شیمی استفاده می شود . برای درک بهتر کاربرد تگ sub در طراحی سایت به مثال زیر توجه کنید :

<p>
   The chemical formula of water: H<sub>2</sub>O
</p>

نکات تکمیلی در مورد تگ sub

• تگ sub توسط تمامی مرورگرها پشتیبانی می‌شوند .

خب به پایان این جلسه آموزش اچ تی ام ال رسیدیم در جلسه آینده به معرفی مابقی تگ های قالب بندی متن در HTML می‌پردازیم.

مطالب مرتبط:

1-تگ های قالب بندی متن قسمت اول 

2-تگ های قالب بندی متن قسمت سوم 

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

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده: راحله تبریزی