آشنایی با تگ های پیکربندی متن در HTML
آشنایی با تگ های پیکربندی متن در HTML
همانطور که در جلسه قبلی از سری آموزشی زبان HTML خواندیم با برچسب های قالب بندی متن آشنا شدیم و در ادامه به سه مورد از تگ های پیکربندی متن خواهیم پرداخت.
برچسب های <i>، <b> ، <u>
سه مورد از پراستفاده ترین تگ های پیکربندی متن هستند که برای ویرایش متون در محیط وب مورد استفاده قرار می گیرند.
برچسب <i> : (اصطلاحا Italic)
این برچسب برای کج دار کردن متن مورد استفاده قرار می گیرد و بیشتر برای نقل قول یک جمله و عبارت از طرف شخص یا کتاب استفاده می شود.
نکته : : کلید ترکیبی برای برچسب <i> کلید های Ctrl+I می باشد.
این نوع نمایش نقل قول تقریبا در تمامی زبان ها به یک صورت و مرسوم است.
مثال : نمونه کد و روش استفاده از این برچسب به صورت زیر می باشد:
<i>Youcode.ir</i>خروجی :
Youcode.ir
نکته : از این برچسب در حالتی که برچسب های زیر مورد استفاده قرار نگیرد کاربرد دارد و به عبارتی دیگر هنگام استفاده از برچسب <i>نباید از برچسب های زیر استفاده کرد:
برچسب <em> (برچسب مورد استفاده برای تایید کردن و توجه بیشتر نوشته)
برچسب <strong> (برچسب مورد استفاده برای تاکید و ضخیم کردن نوشته)
برچسب <mark> (برچسب مورد استفاده برای هایلایت و رنگی کردن نوشته)
برچسب <cite> (برچسب مورد استفاده به عنوان یک کار خاص)
برچسب <dfn> (برچسب مورد استفاده برای تعریف کردن یک نوشته)
نکته : در جلسات بعدی با این برچسب ها آشنا خواهیم شد.
تذکر : دلیل استفاده نکردن برچسب <i> در صورت وجود برچسب های فوق، همانند بودن خروجی به یک صورت و وضعیت می باشد.
سازگاری در مرورگرهای مختلف :
| عنوان برچسب |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
<i> |
دارد | دارد | دارد | دارد | دارد |
تفاوت های استفاه در زبان های HTML 4.01 و HTML 5 :
در نسخه HTML 4.01 برچسب <i> مورد استفاده قرار می گیرد ولی در نسخه HTML 5 دیگر نیازی به استفاده از این برچسب نیست و می توان به سادگی در فایل استایل دهی CSS کد مربوط به این برچسب را برای اعمال تغییرات روی نوشته مورد نظر با اختصاص دادن کلاس مورد نظر استفاده کرد.
تنظیمات پیشفرض در استایل CSS :
تقریبا همگی مروگرها به طور پیشفرض برای این برچسب کدهای استایل CSS زیر را در نظر می گیرند، پس اگر می خواهید در فایل Style.css خود از برچسب <i> استفاده کنید می توانید از کدهای استایل زیر استفاده کنید :
i {
font-style: italic;
}
برچسب <b> : (اصطلاحا Bold)
یکی دیگر از تگ های پیکربندی متن است که از این برچسب برای پررنگ تر کردن عبارت و نوشته های مورد تاکید استفاده می شود.
این نوع نمایش متون به صورت ضخیم تر و پررنگ تر برای تاکید و تایید یک عبارت است و در اکثر زبان های رایج در دنیا به طور یکسان استفاده می شود.
نکته : : کلید ترکیبی برای برچسب <b> کلید های Ctrl+B می باشد.مثال : نمونه کد و روش استفاده از برچسب <b> به صورت زیر می باشد:
<b>Youcode.ir</b>خروجی :
Youcode.ir
سازگاری در مرورگرهای مختلف :
| عنوان برچسب | |
|
|
|
|
|---|---|---|---|---|---|
<b> |
دارد | دارد | دارد | دارد | دارد |
تفاوت های استفاه در زبان های HTML 4.01 و HTML 5 :
هیچ تفاوت ساختاری در نسخه های HTML 4.01 و HTML 5 برای استفاده از برچسب <b> وجود ندارد و در هر دو به یک صورت مورد استفاده قرار می گیرد.
تنظیمات پیشفرض در استایل CSS :
تقریبا همگی مروگرها به طور پیشفرض برای این برچسب کدهای استایل CSS زیر را در نظر می گیرند، پس اگر می خواهید در فایل Style.css خود از برچسب <b> استفاده کنید می توانید از کدهای استایل زیر استفاده کنید :
b {
font-weight: bold;
}
برچسب <u> : (اصطلاحا Underline)
از آخرین تگ های پیکربندی متن که در این مطلب آموزش خواهیم داد برچسب <u> می باشد که از آن برای زیر خط دار کردن یا کشیده شدن یک خط صاف زیر عبارت مورد نظر استفاده می شود.
این روش برای تاکید و تایید مضاعف بوده و به عبارتی نوع تاکید آن بیشتر از برچسب های دیگر است و از آن برای این منظور بیشتر استفاده می شود.
نکته : : کلید ترکیبی برای برچسب <u> کلید های Ctrl+U می باشد.مثال : نمونه کد و روش استفاده از برچسب <u> به صورت زیر می باشد:
<u>Youcode.ir</u>خروجی :
Youcode.ir
سازگاری در مرورگرهای مختلف :
| عنوان برچسب | |
|
|
|
|
|---|---|---|---|---|---|
<u> |
دارد | دارد | دارد | دارد | دارد |
تفاوت های استفاه در زبان های HTML 4.01 و HTML 5 :
استفاده از برچسب <u> در نسخه ی HTML 4.01 مورد پسند نبوده است ولی در نسخه ی HTML 5 این برچسب تعریف جدیدی پیدا کرده است و از آن برای نشان دادن غلط های املایی و ساخت نشانه هایی به زبان چینی استفاده می شود.
تنظیمات پیشفرض در استایل CSS :
تقریبا همگی مروگرها به طور پیشفرض برای این برچسب کدهای استایل CSS زیر را در نظر می گیرند، پس اگر می خواهید در فایل Style.css خود از برچسب <u> استفاده کنید می توانید از کدهای استایل زیر استفاده کنید :
u {
text-decoration: underline;
}
مثال : در انتها می توانید یک نمونه کد و خروجی آن را مشاهده فرمایید :
<html> <head> <title> Welcome Coders </title> </head> <body> <i><p> <b>Learn Coding in Youcode.ir</b> </p></i> <u>This is HTML Language </u> </body> </html>خروجی :
Welcode Coders
Learn Coding in Youcode.ir
This is HTML Language
