ظاهر و قالب بندی مطالب
این یک متن برجسته شده است
ای یک متن خوابانده شده است
این یک متن بالا نوشته شده است
تگ های قالب بندی در HTML
در فصل قبل درباره تغییر خصوصیات ظاهری محتوای داخل تگ های HTML با استفاده از خصوصیات مربوط به ویژگی style مطالبی را آموختید.
در اسناد HTML المان هایی هستند که به صورت مستقل خصوصیت ظاهری متن ها را به صورت مستقل تعریف می کنند.
برای مثال در HTML با استفاده از تگ های <b> و <i> می توانید خصوصیات متن را از حالبت پیش فرض به ترتیب به حالت های برجسته (Bold) و خوابیده (Italic) تغییر ظاهر دهید.
المان های تغییر دهنده قالب بندی متن ها برای حالت های مختلفی از ظاهر متن طراحی شده اند که در زیر فهرست شده است:
- متن های برجسته (Bold)
- متن های با اهمیت (Important)
- متن های خوابیده (Italic)
- متن های تاکید شده که مشابه (Emphasized)
- متن های مشخص شده با رنگ پس زمینه (Marked)
- متن های کوچک (Small)
- متن های خط خورده (Deleted)
- متن های تاکید شده با زیر خط دار شدن (Inserted)
- متن های پایین نوشته شده (Subscripts)
- متن های بالا نوشته شده (Superscripts)
تگ های قالب بندی Bold و Strong در HTML
برای برجسته کردن حروف متن از تگ <b> استفاده می شود. این تگ خصوصیت برجسته شدن (Bold) شدن را تعریف می کند بدون آن که اهمیت مضاعفی از لحاظ رتبه بندی در متن به آن بدهد. منظور از رتبه بندی یا درجه اهمیت و قدرت، مورد تاکید قرار گرفتن برای موتورهای جستجو است.
مثال
<p>این یک پاراگراف با متن معمولی است.</p>
<p><b>این یک پاراگراف با متن برجسته است</b>.</p>
خودتان آزمایش کنید »
تگ <strong> علاوه بر برجسته (Bold) کردن حروف متن مثل تگ <b>، معنای قوی تر و با اهمیت تر بودن نسبت به سایر قسمت های متن را برای موتورهای جستجو دارد.
مثال
<p>این یک پاراگراف با متن معمولی است.</p>
<p><strong>این یک پاراگراف با متن برجسته قدرتمندتر است</strong>.</p>
خودتان آزمایش کنید »
تگ های قالب بندی خوابیده و تاکید شده در HTML
برای خواباندن حروف متن از تگ <i> استفاده می شود. این تگ خصوصیت خوابانده کردن (Italic) را تعریف می کند بدون آن که اهمیت مضاعفی از لحاظ رتبه بندی در متن به آن بدهد.
مثال
<p>این یک پاراگراف با متن معمولی است.</p>
<p><i>این یک پاراگراف با متن خوابیده است</i>.</p>
خودتان آزمایش کنید »
تگ <em> علاوه بر خواباندن (Italic) کردن حروف متن مثل تگ <i>، روی آن متن تاکید می کند و برای موتورهای جستجو مهمتر از سایر قسمت های متن تشخیص داده می شود.
مثال
<p>این یک پاراگراف متن معمولی است.</p>
<p><em>این یک پاراگراف متن خوابیده و تاکید شده است.</em>.</p>
خودتان آزمایش کنید »
 |
تگ های <b> و <strong> از لحاظ ظاهری در مرورگر شبیه به هم نمایش داده می شوند. این حالت برای تگ های <i> و <em> نیز همین طور است.
با این حال، تگ های <b> و <i> عملیات برجسته کردن و خواباندن حروف را انجام می دهند و این در حالی است که تگ های <strong> و <em> معنی پر اهمیت و تاکید بر متن را علاوه بر تغییر ظاهری به موتورهای جستجو نیز نشان می دهند.
|
تگ قالب بندی کوچک کننده در HTML
برای کوچک تر کردن اندازه متن از تگ <small> استفاده می شود.
تگ قالب بندی مشخص کننده در HTML
برای مشخص کردن یا علامت زدن بخشی از یک متن از تگ <mark> استفاده می شود.
مثال
<h2>این المان باعث
<mark>مشخص کردن و به چشم آمدن</mark> متن در صفحات وب می شود</h2>
خودتان آزمایش کنید »
تگ قالب بندی خط زننده متن در HTML
برای خط زدن یا حالت حذف ردن و خط خوردگی یک متن از تگ <del> استفاده می شود.
تگ قالب بندی زیرخط دار کننده متن در HTML
برای زیر خط دار کردن و تاکید بر یک متن از تگ <ins> استفاده می شود.
تگ قالب بندی بالانویس کننده متن در HTML
برای بالاتر بردن متن از خط کرسی یا بالانویس کردن یک متن از تگ <sup> استفاده می شود.
مثال
<h2>این المان باعث
<sup>رونویس شدن با اندازه کوچک تر</sup> متن در صفحات وب می شود</h2>
خودتان آزمایش کنید »
تگ قالب بندی زیرنویس کننده متن در HTML
برای پایین آوردن متن از خط کرسی یا زیرنویس کردن یک متن از تگ <sub> استفاده می شود.
مثال
<h2>این المان باعث
<sub>زیرنویس شدن با اندازه کوچک تر</sub> متن در صفحات وب می شود</h2>
خودتان آزمایش کنید »
مرجع تگ ها و المان های HTML
در زیر جدولی از عناصر، المان ها یا همان تگ های HTML را ملاحظه می فرمایید که به دسته بندی قالب بندی متن در HTML مربوط است.
| نام تگ HTML |
توضیح درباره تگ HTML |
| <b> |
متن داخل خود را به صورت برجسته (Bold) نمایش می دهد |
| <em> |
متن داخل خود را به صورت خوابیده و با درجه تاکید برای موتورهای جستجو (Emphasized) نمایش می دهد |
| <i> |
متن داخل خود را به صورت خوابیده (Italic) نمایش می دهد |
| <small> |
متن داخل خود را به صورت کوچک تر (Small) نمایش می دهد |
| <strong> |
متن داخل خود را به صورت برجسته و با درجه اهمیت بیشتر برای موتورهای جستجو (Strong/Important) نمایش می دهد |
| <sub> |
متن داخل خود را به صورت زیرنویس و کوچک تر (Sub scripted) نمایش می دهد |
| <sup> |
متن داخل خود را به صورت بالانویس و کوچک تر (Super scripted) نمایش می دهد |
| <ins> |
متن داخل خود را به صورت زیرخط دار و تاکید شده (Inserted) نمایش می دهد |
| <del> |
متن داخل خود را به صورت خط خورده یا حذف شده (Deleted) نمایش می دهد |
| <mark> |
متن داخل خود را به صورت مشخص شده و علامت خورده (Marked/Highlighted) نمایش می دهد |