قالب بندی متن یا HTML Text Formatting

به نام خدا

HTML Text Formatting – نگاه کلی

به نمونه های زیر نگاه کنید:

This text is bold

This text is strong

This text is italic

This text is emphasized

This is computer output

This is_subscript and ^superscript

آزمایش کنید!

این ها نمونه هایی ساده از قالب بندی متن در HTML یا همون HTML Text Formatting هستند. برای قالب بندی های پیشرفته تر از CSS استفاده میشه که انشاالله در جلسات بعد یاد میگیریم.

تگ های قالب بندی HTML

در زیر نمونه هایی از تگ های قالب بندی رو با هم بررسی میکنیم. برای اینکه توضیح کامل هر تگ رو ببینید و آزمایشش کنید روی اسم تگ کلیک کنید:

تگ	توضیحات
<b>	برجسته کردن یا bold کردن متن
<em>	برای تأکید کردن یا emphasize کردن متن
<i>	برای کج کردن یا italic کردن. برای جاهایی که لحن متن تغییر میکنه.
<small>	متن رو یه خورده کوچیک میکنه ;)
<strong>	نشون میده که این قسمت از متن مهمه.
<sub>	_{برای وارد کردن زیرنویس یا اندیس متن به کار میره}
<sup>	^{برای وارد کردن بالانویس یا توان به کار میره}
<ins>	وقتی به یه نوشته یه قسمت جدید اضافه میشه از این تگ استفاده میکنن
<del>	وقتی از یه نوشته یه قسمت حذف میشه از این تگ استفاده میکنن . این تگ و تگ <ins> با هم کاربرد دارن.
<mark>	یه قسمت از متن رو هایلایت میکنه. انگار با ماژیک فسفری روشون خط بکشید

معمولاً توی اکثر مرورگرها تگ به عنوان تگ و تگ هم به عنوان تگ نشون داده میشه.

اما یه تفاوت خیلی کوچیک از نظر معنایی وجود داره:

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

اما تگ های و  نشون میدن که شما میخواهید یه قسمت از متن رو “مهم” نشون بدین. این که چرا این تگ ها اختراع شدن حقیقتش من هم نمیدونم :|

تگ های “خروجی کامپیوتری” در HTML

تگ	توضیحات
<code>	برای نشون دادن یه تیکه از متن به عنوان کدنویسی کامپیوتر
<kbd>	وقتی میخواهیم به کاربر بگیم که روی کیبوردش دکمه هایی رو فشار بده از این تگ استفاده می کنیم. مثلا میخواهیم به کاربر بگیم چطوری Task Manager رو باز کنه: Hold down `CTRL`, `ALT`, and `DELETE`, then select Task Manager
<samp>	این تگ نشون میده که نتیجه یه کاری چه شکلی میشه. در واقع یه نمونه است
<var>	برای اینکه توی یه متن یه قسمت رو به عنوان نمونه علامت گذاری کنیم. مثلاً در نمونه زیر کلمه داخلی یک متغیره:برای اتصال تلفن به داخلی به شکل زیر عمل کنید `* ۲۱ * داخلی #`.
<pre>	یادتونه تو مبحث پاراگراف ها گفتم که هر تعداد space یا enter بزنید، موقع نمایش مرورگر اونو یه دونه حساب میکنه؟ در مورد متن های عادی این مسئله زیاد مهم نیست اما اگه یه وقت خواستیم یه متنی بنویسیم که توش تعداد space و enter مهم بود (مثلا کدهای برنامه نویسی) از تگ pre استفاده می کنیم. این تگ که مخفف Preformatted text هست برای قالب بندی متون خاص به کار میره و باعث میشه که مرورگر همینجور خودسرانه شکل متن ما رو عوض نکنه

نقل قول ها و تعریف ها در HTML

تگ	توضیح
<abbr>	این تگ آموزنده کارش اینه که وقتی موس روی یه کلمه مخفف میره عبارت کاملش رو نشون میده. برای نمونه موس رو روی دوتا سرواژه زیر ببرید: WHO –> <abbr title=”World Health Organization”>WHO</abbr> FIFA –> <abbr title=”Fédération Internationale de Football Association“>FIFA</abbr>
<address>	این تگ اطلاعات تماس فرد مالک یا بوجود آورنده یه اثر رو مشخص میکنه. این اطلاعات میتونه تلفن، آدرس محل کار یا هرچیز مرتبط دیگه باشه. دقت کنید که تگ های اینجوری از نظر ظاهری تغییر خاصی تو متن ایجاد نمیکنن اما در بالارفتن امتیاز موتورهای جستجو خیلی تأثیر دارن.
<bdo>	یه تگ دوست داشتنی. کارش اینه که جهت متن رو مشخص میکنه. <bdo> مخفف کلمه Bi-Directional Override نمونه: <bdo dir=”ltr”>این متن برعکس میشه</bdo> — این متن برعکس میشه همون طور که می بینید متن بالا که فارسیه وقتی ltr یا Left-to-Right بشه تبدیل به چی میشه :D
<blockquote>	پیام اخلاقی این آموزش اینه که وقتی یه بخشی رو از یه منبع دیگه عیناً داخل سند HTML میارید با این تگ مشخصش کنید. میتونید بهش بگید تگ نقل قول بلند
<q>	این تگ هم واسه نقل قول کوتاهه. مثلا بخواهید یه شعار یا یه سخن کوتاه رو تو نوشتتون بیارید.
<cite>	واسه مشخص کردن عنوان یه چیزه. مثلا عنوان یه کتاب یا یه فیلم سینمایی. نمونه:امتیاز فیلم Titanic در سایت IMDB حدود ۷.۷ است.در نمونه بالا عنوان فیلم و عنوان سایت داخل تگ <cite> قرار گرفتن و حالت italic پیدا کردن.
<dfn>	وقتی برای اولین بار توی متن یه اصطلاحی رو مطرح می کنیم از این تگ براش استفاده می کنیم تا معلوم بشه این یه عبارت یا کلمه جدیده که قراره در ادامه دربارش توضیح بدیم. تو بیشتر مرورگرها تگ <dfn> به شکل ایتالیک درمیاد تا اونو متفاوت نشون بده اما باز هم با CSS میشه شکلشو عوض کرد.در طراحی وب به بهینه سازی سایت برای موتورهای جستجو SEO میگن. SEO مخفف عبارت Search Engine Optimization هستش