تگ های متن HTML
در HTML تگ های مختلفی برای ایجاد متن داریم.
تگ های b و strong
این دو تگ برای درشت کردن متن استفاده می شوند.
- strong و b از لحاظ ظاهری هیچ تفاوتی ندارند.
- تگ strong برای متن های پر اهمیت استفاده می شود.
- تگ b برای متن های بدون اهمیت که فقط می خواهیم ظاهر درشت داشته باشند، استفاده می شود.
نکته: از نظر موتورهای جستجو مانند گوگل، تگ <strong>، پراهمیت است.
نمونه کد
در این نمونه کد تگ b و strong با هم مقایسه شده اند.
<b>Bold</b><strong>Bold</strong>تگ های i و em
این دو تگ برای مورب کردن متن استفاده می شوند.
- i و em از لحاظ ظاهری هیچ تفاوتی ندارند.
- تگ em برای متن های پر اهمیت استفاده می شود.
- تگ i برای متن های بدون اهمیت که فقط می خواهیم ظاهر مورب داشته باشند، استفاده می شود.
نکته: از نظر موتورهای جستجو مانند گوگل، تگ <em>، پراهمیت است.
تگ small
با تگ small می توان متن را کوچک کرد.
تگ mark
با تگ mark می توان متن را هایلایت کرد.
تگ del و ins
با تگ del می توان متن را به صورت حذف شده (خط خورده) نشان داد.
با تگ ins می توان متن را به صورت جایگزین (زیر خط) متن حذف شده (تگ del) نشان داد.
نکته: یکی از کاربرد های تگ del و ins در نمایش قیمت محصول های تخفیف خورده است.
تگ های sub و sup
از تگ sub برای زیرنویس و از تگ sup برای بالا نویس استفاده می شود.
تگ br
در HTML از تگ <br> برای خط شکن (line break) استفاده می شود. با استفاده از این تگ می توانیم از سطر جدید شروع کنیم.
در حالت کلی می توان گفت این تگ همانند دکمه Enter عمل می کند.
نکته: المان br، تگ پایان ندارد.
تگ hr
تگ <hr> مخفف کلمه Horizontal Rule می باشد.
از این تگ برای ایجاد یک خط افقی در سند های html استفاده می شود.
نکته: المان hr، تگ پایان ندارد.
نمونه کد
<p>html اولین قدم برای ساخت یک وب سایت می باشد</p><hr><p>html ساختار صفحات وب را درست می کند</p>تگ pre
تگ <pre> مخفف کلمه PreFormatted می باشد، که برای نمایش متن از پیش چیدمان شده استفاده می شود.
به زبان ساده تر اگر شما بخواهید متنی را در html بنویسید و به همان صورت که نوشته اید (با فاصله ها و فضای اضافی) در مرورگر اجرا شود باید از تگ <pre> استفاده کنید.
نمونه کد
<pre> متن نوشته شده با یک فونت اولیه و با عرض ثابت نمایش داده میشود این متن فاصله ها و شکستگی های خط را، حفظ می کند</pre>تگ bdo
تگ bdo برای برعکس کردن کاراکتر های یک متن استفاده می شود.این تگ دارای ویژگی dir می باشد و دو مقدار دریافت می کند:
- ltr: جهت حروف فارسی (زبان های راست به چپ) را بالعکس می کند
- rtl: جهت حروف انگلیسی (زبان های چپ به راست) را بالعکس می کند.
برای مثال در جمله زیر از تگ bdo برای کلمه PNLdev استفاده شده است.
PNLdev
نمونه کد
<bdo dir="rtl">english text in rtl bdo.</bdo><bdo dir="rtl">متن فارسی در حالت راست به چپ.</bdo><bdo dir="ltr">english text in ltr bdo.</bdo><bdo dir="ltr">متن فارسی در حالت چپ به راست.</bdo>نکته: تگ bdo مخفف Bi Directional Override است.
تگ bdi
تگ bdi برای نادیده گرفتن جهت متن استفاده می شود.
در صورت استفاده از کلمات انگلیسی یا عبارت های ریاضی، که از چپ به راست نوشته می شوند و
ترکیب آن ها با، کلمات فارسی که از راست به چپ نوشته می شوند. مشکلی در نمایش بعضی کلمات پیش می آید.
نمونه کد
<li>متد round() اعداد را گرد می کند.</li><li>متد <bdi>round()</bdi> اعداد را گرد می کند.</li>نکته: به صورت کلی تگ bdi، جهت متن را بالعکس می کند.
نکته: تگ bdi مخفف Bi-Directional Isolation است.
خلاصه درس
- HTML تگ های زیادی برای توسعه محتوا در اختیار ما گذاشته است.
- این تگ ها شامل <del> , <ins> , <small> و ... هستند.
تمرین
تگ های پایان عناصر زیر کامل کنید.
سپس یک متن CSS3 را جایگزین کلمه CSS کنید. ( این کار را با تگ های ins و del انجام دهید )
<small> CSS 3 < >
<del>
< > </ >
احسان اسلامی
