قالببندی HTML
آنچه در این مقاله میخوانید
Toggleقالب بندی HTML، فرایند قالب بندی متن برای ظاهر و احساسی بهتر است. HTML میتواند قالب بندی متن را بدون استفاده از CSS در اختیار ما قرار می دهد. تگهای قالب بندی زیادی در HTML وجود داردکه از این تگها برای بولدکردن متن ، مورب یا زیر خط دار استفاده می شود.به منظور چگونگی نمایش متن در HTML و XHTML راههایی وجوددارد که در وبسایت تاتوره به آنها اشاره خواهیمکرد.
در HTML، تگهای قالببندی به دودسته تقسیمبندی میشوند:
- تگهای فیزیکی: برای بخشیدن ظاهر بصری به متن
- تگهای منطقی: برای افزودن مقداری ارزش منطقی یا معنایی به متن استفاده می شوند.
توجه: برخی از تگهای فیزیکی و منطقی وجود دارند که ممکن است ظاهری یکسانی داشته باشند ، اما در معنا متفاوت خواهند بود.
در ادامه در وبسایت تاتوره 14 تگ قالببندی HTML یادخواهیم گرفت:
نام المنت | تشریح |
---|---|
<b> | تگ فیزیکی که برای بولدکردن متنی که بینش نوشته میشود استفاده میشود. |
<strong> | تگ منطقی که به مرورگر میفهماند که متنی خاص مهم است. |
<i> | تگ فیزیکی که برای مورب نوشتن(italic) متن استفاده می شود. |
<em> | تگ منطقی که برای مورب نمایش دادن محتوا استفاده می شود. |
<mark> | تگی برای هایلایتکردن متن |
<u> | تگی که برای زیرخط دار کردن نوشته استفاده میشود. |
<tt> | تگی که برای نمایش متن در teletype استفاده می شود. (در HTML5 پشتیبانی نمی شود) |
<strike> | تگی که برای رسم یک خط مقطع از متن استفاده می شود. (در HTML5 پشتیبانی نمی شود) |
<sup> | محتوا را کمی بالاتر از حد معمول نشان می دهد. |
<sub> | محتوا را کمی زیر خط طبیعی نشان می دهد. |
<del> | تگی که برای نمایش محتوای حذف شده استفاده می شود. |
<ins> | تگی که محتوای اضافه شده را نمایش می دهد. |
<big> | تگی که برای افزایش سایز فونت با یک واحد مشخص استفاده میشود. |
<small> | تگی که برای کاهش سایز فونت به اندازه یک واحد از سایز فونت پایه استفاده می شود. |
1) متن بولدشده
المنتهای قالببندی <b> و <strong>
المنت <b> تگ فیزیکی است که متن را در فونت بولدشده، بدئن در نظر گرفتن اهمیت منطقی نشان میدهد. یعنی اگر چیزی بین <b> …….. </b> بنویسید، آنرا بولد شده نشان میدهد.
<p> <b>Write Your First Paragraph in bold text.</b></p>
تگ <strong> یک تگمنطقی است که محتوا را بولد شده نشان میدهد و مرورگر را اهمیت منطقی این تگ باخبر میکند.
مثلا:
<p><strong>This is an important content</strong>, and this is normal content</p>
مثال:
<!DOCTYPE html> <html> <head> <title>formatting elements</title> </head> <body> <h1>Explanation of formatting element</h1> <p><strong>This is an important content</strong>, and this is normal content</p> </body> </html>
2) متن مورب (Italic)
المنتهای قالببندی <i> و <em>
المنت <i> یک المنت فیزیکی است که محتوای محصورشده را با فونت مورب بدون تاکیدی بر اهمیت نشان میدهد.
مثلا:
<p> <i>Write Your First Paragraph in italic text.</i></p>
تگ <em> یک المنت منطقی است که محتوای محصور شده را بافونت مورب با تاکید بر اهمیت معنایی نشان می دهد.
مثلا:
<p><em>This is an important content</em>, which displayed in italic font.</p>
مثال:
<!DOCTYPE html> <html> <head> <title>formatting elements</title> </head> <body> <h1>Explanation of italic formatting element</h1> <p><em>This is an important content</em>, which displayed in italic font.</p> </body> </html>
3) قالب بندی HTML مشخص شده(HTML Marked formatting)
اگر می خواهید متنی را علامت گذاری یا هایلایت ، باید محتوا را در <mark> ……… <mark/> بنویسید.
مثلا:
<h2> I want to put a <mark> Mark</mark> on your face</h2>
4)متن زیرخط دار( Underlined Text)
اگر بین المنتهای <u>………<u/> متنی بنویسید، زیر آن متن خطدار خواهدشد.
مثلا:
<p> <u>Write Your First Paragraph in underlined text.</u></p>
5) متن استرایک(Strike Text)
هر نوشتهایی درون المنت <strike>…………………..<strike/>، بر روی آن خط نازکی کشیده خواهدشد.
مثلا:
<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
6) فونت تک فاصلهایی( Monospaced Font)
اگر می خواهید عرض هر حرف یکسان باشد ، باید محتوا را در المنت <tt> …………. <tt/> بنویسید.
توجه: ما می دانیم که بیشتر فونتها به عنوان فونتهایی با عرض متغیر شناخته می شوند زیرا کلمات مختلف دارای عرضهای متفاوت هستند. (به عنوان مثال: ‘w’ از ‘i’ پهنتر است). فونت Monospaced فضای مشابهی را بین هر حرف فراهم می کند.
مثلا:
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
7) متن فوق خطی(Superscript Text)
اگر محتوا را در المنت <sup> ………….. <sup/> قرار دهید، فوق خطی نشان داده می شود. به این معنی که نیمی از ارتفاع یک کاراکتر بالاتر از کاراکترهای دیگر نمایش داده می شود.
مثلا:
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
8) متن زیرنویس( Subscript Text)
اگر محتوا را در المنت <sub> ………….. <sub/> قرار دهید ، در زیرمتن نشان داده می شود. به این معنی که نیمی از ارتفاع کاراکتر زیر شخصیت های دیگر نمایش داده می شود.
مثلا:
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
9) متن حذفشده(Deleted Text)
هر چیزی که در <del> ………. <del/> قرار دهید به عنوان متن حذف شده نمایش داده می شود.
مثلا:
<p>Hello <del>Delete your first paragraph.</del></p>
10)متن درج شده( Inserted Text)
هر چیزی که درون <ins> ………. <ins/> قرار دهید به عنوان متن درج شده نمایش داده می شود.
مثلا:
<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>
11)متن بزرگتر( Larger Text)
اگر می خواهید اندازه فونت خود را بزرگتر از بقیه متن قرار دهید ، محتوا را در <big> ……… <big/> بنویسید. در اینصورت اندازه فونت جدید از فونت قبلی بزرگتر می شود.
مثلا:
<p>Hello <big>Write the paragraph in larger font.</big></p>
12)متن کوچکتر( Smaller Text)
اگر می خواهید اندازه فونت خود را کوچکتر از بقیه متن قرار دهید ، محتوا را در تگ <small>………<small/> بنویسید. در اینصورت اندازه فونت جدید از فونت قبلی کوچکتر میشود.
مثلا:
<p>Hello <small>Write the paragraph in smaller font.</small></p>
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.