جلسه ی بیست و چهارم: تگ های عبارتی

تگ های عبارتی در Html

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

 

انواع تگ های عبارتی

تگ های عبارتی هفت عدد می باشند که عبارتند از:

  1. تگ em
  2. تگ strong
  3. تگ dfn
  4. تگ code
  5. تگ samp
  6. تگ kbd
  7. تگ var

 

تگ Em

تگ em مخفف کلمه ی emphasized می باشد که به معنای تاکید است. از تگ em که یکی از تگ های عبارتی است برای تاکید بر روی یک متن استفاده می شود. لازم به ذکر است که خروجی این کد شبیه خروجی تگ i می باشد یعنی متن را به صورت مورب یا همان italic نشان می هد.

شاید با خود فکر کنید که هر دوی این تگ ها خروجی یکسان دارند پس چرا باید از هر دوی آن ها استفاده کنیم؟؟ چرا فقط از تگ i استفاده نکنیم؟؟ باید بگوییم که بعضی از تگ ها در مقادیری خاص ممکن است نتایج مشابه داشته باشند و تفاوت تگ i و تگ em در مهم بودن و تاکید می باشد. به نمونه کد زیر توجه کنید:


<em>این متن برای تاکید است</em><br>

<i>این متن به صورت italic است</i>

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

تگ em

 

تگ strong

از تگ strong برای برجسته و ضخیم تر کردن متن ها استفاده استفاده می شود. تگ Strong نیز مانند تگ em دارای مشابه می باشد، لازم به ذکر است که خروجی تگ b با تگ Strong شبیه هم می باشند اما تفاوت هایی نیز دارند.

تفاوت تگ Strong و تگ b در ظاهر نیست بلکه مفهوم آن ها تفاوت دارد یعنی اگر می خواهیم به ربات های گوگل بفهمانیم که متن ما مهم است آن را به وسیله ی تگ strong برجسته می نماییم ولی اگر میخواهیم فقط متن خود را برجسته نماییم و اهمیت خاصی برایمان ندارد از تگ b استفاده می کنیم. به نمونه کد زیر توجه کنید:


<b>این توسط تگ b برجسته شده است.</b><br>

<strong>این متن یک توسط تگ Strong برجسته شده است.</strong>

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

تگ strong

 

تگ dfn

از تگ dfn برای توضیح یک کلمه که در وب سایت ما وجود دارد استفاده می کنیم معمولا مرورگر ها کلمه ای را که درون تگ dfn قرار می گیرد به صورت italic نمایش می دهند.

نکته: تگ dfn دارای خصوصیت title می باشد که اگر ماوس خود را بر روی کلمه ی مورد نظر ببریم یک پیام روی آن نمایش داده می شود، البته استفاده از این خاصیت اختیاری است.

به نمونه کد زیر توجه کنید:


<dfn title="abolfazl kalhori">A.K</dfn> مخفف کلمه ی ابوالفضل کلهری می باشد

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

تگ dfn

 

تگ code

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

نکته: تگ code ممکن است حالت کد نویسی مارا انتقال ندهد و فواصل را جا به جا کند پس برای حفظ حالت کد نویسی خود بهتر است از یک تگ دیگر به نام Pre درون تگ code استفاده کنیم.

به نمونه کد زیر توجه کنید:


<code>

<pre>

body {

background-color: #fff;

color: #000;

font-size: 18px

}

</pre>

</code>

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

تگ code

 

تگ samp

تگ samp یک تگ عبارتی است که مانند تگ code می باشد از این تگ نیز برای نگهداری یک قطعه کد استفاده می شود.

 

تگ kbd

تگ kbd که یکی از تگ های عبارتی می باشد مانند دو تگ بالا است که برای نگهداری یک قطعه از دستورات کیبورد استفاده می شود.

 

شاید با خود بگویید که این سه تگ کار مشابهی دارند و چرا به جای همه ی آن ها فقط از یک تگ استفاده نکنیم؟؟؟ برای دریافت جواب خود به سه نکته ی زیر توجه کنید:

  1. از تگ CODE زمانی استفاده می شود که قسمتی از یک کد کامپیوتری در نطر ما باشد. (تگهای XML)
  2. از تگ KBD برای ورودی کاربر استفاده می شود که معمولا منظور ما کیبورد و یا ( ورودی دستوراتی که در CMD نوشته می شوند یا تایپ حروف ) می باشد.
  3. از تگ SAMP برای خروجی برنامه استفاده می شود. (برای مثال خروجی دستورات CMD)

تگ var

از تگ var برای نوشتن متغییر ها استفاده می شود برای مثال برای نوشتن فرمول کار از تگ var استفاده می نماییم. به نمونه کد زیر توجه کنید:

قانون کار: <var>W</var> = <var>F</var><var>.D</var>

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

تگvar

 

خلاصه مطلب:

  1. تگ em مخفف کلمه ی emphasized می باشد که به معنای تاکید است.
  2. از تگ strong برای برجسته و ضخیم تر کردن متن ها استفاده استفاده می شود.
  3. از تگ dfn برای توضیح یک کلمه که در وب سایت ما وجود دارد استفاده می کنیم معمولا مرورگر ها کلمه ای را که درون تگ dfn قرار می گیرد به صورت italic نمایش می دهند.
  4. یکی دیگر از تگ های عبارتی تگ code می باشد که برای قرار دادن یک قطعه کد کامپیوتری از آن استفاده می کنیم.
  5. تگ samp یک تگ عبارتی است که مانند تگ code می باشد از این تگ نیز برای نگهداری یک قطعه کد استفاده می شود.
  6. تگ kbd که یکی از تگ های عبارتی می باشد مانند دو تگ بالا است که برای نگهداری یک قطعه از دستورات کیبورد استفاده می شود.
  7. از تگ var برای نوشتن متغییر ها استفاده می شود برای مثال برای نوشتن فرمول کار از تگ var استفاده می نماییم.
ابوالفضل کلهری

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

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