به نام خدا
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> | یه قسمت از متن رو هایلایت میکنه. انگار با ماژیک فسفری روشون خط بکشید |
معمولاً توی اکثر مرورگرها تگ <strong> به عنوان تگ <b> و تگ <em> هم به عنوان تگ <i> نشون داده میشه.
اما یه تفاوت خیلی کوچیک از نظر معنایی وجود داره:
تگ <b> و تگ <i> فقط متن رو به شکل برجسته یا کج درمیارن.
اما تگ های <strong> و <em> نشون میدن که شما میخواهید یه قسمت از متن رو “مهم” نشون بدین. این که چرا این تگ ها اختراع شدن حقیقتش من هم نمیدونم :|
text formatting
تگ های “خروجی کامپیوتری” در HTML
| تگ | توضیحات |
|---|---|
| <code> | برای نشون دادن یه تیکه از متن به عنوان کدنویسی کامپیوتر |
| <kbd> | وقتی میخواهیم به کاربر بگیم که روی کیبوردش دکمه هایی رو فشار بده از این تگ استفاده می کنیم. مثلا میخواهیم به کاربر بگیم چطوری Task Manager رو باز کنه:
Hold down CTRL, ALT, and DELETE, then select Task Manager |
| <samp> | این تگ نشون میده که نتیجه یه کاری چه شکلی میشه. در واقع یه نمونه است |
| <var> | برای اینکه توی یه متن یه قسمت رو به عنوان نمونه علامت گذاری کنیم. مثلاً در نمونه زیر کلمه داخلی یک متغیره:برای اتصال تلفن به داخلی به شکل زیر عمل کنید * 21 * داخلی #. |
| <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 حدود 7.7 است.در نمونه بالا عنوان فیلم و عنوان سایت داخل تگ <cite> قرار گرفتن و حالت italic پیدا کردن. |
| <dfn> | وقتی برای اولین بار توی متن یه اصطلاحی رو مطرح می کنیم از این تگ براش استفاده می کنیم تا معلوم بشه این یه عبارت یا کلمه جدیده که قراره در ادامه دربارش توضیح بدیم. تو بیشتر مرورگرها تگ <dfn> به شکل ایتالیک درمیاد تا اونو متفاوت نشون بده اما باز هم با CSS میشه شکلشو عوض کرد.در طراحی وب به بهینه سازی سایت برای موتورهای جستجو SEO میگن. SEO مخفف عبارت Search Engine Optimization هستش |
قالب بندی متن HTML مبحث ساده ولی گسترده ایه. بنابراین بهتون HTML Text Formatting پیشنهاد میکنم سر حوصله و با اشتیاق نمونه های زیر رو تمرین کنید:
چگونه یک متن را در سند HTML قالب بندی کنیم؟
چگونه فاصله ها و نقاط شکستگی را در HTML کنترل کنیم؟
چگونه تگ های مختلف “خروجی کامپیوتری” نمایش داده می شوند؟
چگونه آدرس و اطلاعات تماس صاحب/ پدیدآورنده یک سند HTML را مشخص کنیم؟
چگونه علائم اختصاری و سرواژه ها را توضیح دهیم؟
جهت خواندن متن را تغییر بدهیم.
چگونه از نقل قول های کوتاه و بلند استفاده کنیم؟
چگونه نشان بدهیم که یک متن اضافه شده یا پاک شده؟
چگونه یک قسمت از متن را هایلایت کنیم؟
دیدگاهتان را بنویسید