تگ های متن HTML
در HTML تگ های مختلفی برای ایجاد متن داریم.
<b></b> متن درشت <strong></strong> متن درشت (مهم) <i></i> متن مورب <em></em> متن مورب (مهم) <small></small> متن کوچک <mark></mark> متن هایلایت <del></del> متن حذف شده <ins></ins> متن اضافه شده <sub></sub> متن زیر نویس <sup></sup> متن بالا نویس <br> خط شکن <hr> خط افقی <pre></pre> متن پیش چیدمان شده <bdo></bdo> بالعکس کردن جهت حروف <bdi></bdi> بالعکس کردن direction
تگ های b و strong
این دو تگ برای درشت کردن متن استفاده می شوند.
- strong و b از لحاظ ظاهری هیچ تفاوتی ندارند.
- تگ strong برای متن های پر اهمیت استفاده می شود.
- تگ b برای متن های بدون اهمیت که فقط می خواهیم ظاهر درشت داشته باشند، استفاده می شود.
نکته: از نظر موتورهای جستجو مانند گوگل، تگ <strong>، پراهمیت است.
<b>Bold</b>
<strong>Bold</strong>تگ های i و em
این دو تگ برای مورب کردن متن استفاده می شوند.
- i و em از لحاظ ظاهری هیچ تفاوتی ندارند.
- تگ em برای متن های پر اهمیت استفاده می شود.
- تگ i برای متن های بدون اهمیت که فقط می خواهیم ظاهر مورب داشته باشند، استفاده می شود.
نکته: از نظر موتورهای جستجو مانند گوگل، تگ <em>، پراهمیت است.
<i>Italic</i>
<em>Italic</em>تگ small
با تگ small می توان متن را کوچک کرد.
<small>Small</small>تگ mark
با تگ mark می توان متن را هایلایت کرد.
<mark>HTML</mark>تگ del و ins
با تگ del می توان متن را به صورت حذف شده (خط خورده) نشان داد.
<del>HTML 4</del>با تگ ins می توان متن را به صورت جایگزین (زیر خط) متن حذف شده (تگ del) نشان داد.
<del>299 تومان</del>
<ins>199 تومان</ins>نکته: یکی از کاربرد های تگ del و ins در نمایش قیمت محصول های تخفیف خورده است.
تگ های sub و sup
از تگ sub برای زیرنویس و از تگ sup برای بالا نویس استفاده می شود.
10<sub>2</sub>
10<sup>2</sup>تگ br
در HTML از تگ <br> برای خط شکن (line break) استفاده می شود. با استفاده از این تگ می توانیم از سطر جدید شروع کنیم.
در حالت کلی می توان گفت این تگ همانند دکمه Enter عمل می کند.
نکته: المان br، تگ پایان ندارد.
<p>
html اولین قدم <br>برای ساخت<br> یک وب سایت <br> می باشد
</p>تگ 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>
< > </ >
احسان اسلامی
