آموزش Html؛ آموزش کار با قالب بندی متن در Html

آموزش Html؛ آموزش کار با قالب بندی متن در Html

در این مطلب در جلسه چهارم با آموزش Html؛ آموزش کار با قالب بندی متن در Html در خدمت شما هستیم. لطفا با ما همراه باشید…

آموزش قالب بندی متن در Html

چند مورد ساده را در زیر مشاهده می نمایید

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>

خروجی به شکل زیر هست

This text is bold

This text is italic

This is subscript and superscript

در مطلب آموزشی قبل در مورد خصوصیت پاراگراف و استایل در HTML توضیح کامل دادیم. زبان HTML همچنین عناصر خاصی برای تعریف متن با معنای مشخص دارد. این زبان از عناصری مانند <b> و <i> برای قالب بندی خروجی مانند متن bold (برجسته) یا ایتالیک استفاده می‌کند. عناصر قالب بندی برای نمایش انواع خاصی از متن طراحی شده‌اند. در ادامه چند نوع از آن‌ها را مشاهده می‌کنید:

  • <b>: برجسته کردن متن

  • <strong>: متن مهم

  • <i>: متن ایتالیک

  • <em>: تاکید بر متن

  • <mark>: متن علامت گذاری شده

  • <small>: متن کوچک

  • <del>: متن پاک شده

  • <ins>: متن وارد شده

  • <sub>: متن زیر

  • <sup>: متن رو

 

عنصر <b> و عنصر <strong> در HTML

عنصر <b> متن را بدون هیچ‌گونه اهمیت یا تاکید بیشتر، پررنگ و برجسته می‌کند

 <b>This text is bold</b> 
پیش نمایش

 

عنصر <strong> به متن قدرت داده و اهمیت معنایی به آن می‌بخشد

 <strong>This text is strong</strong> 
پیش نمایش

 

عناصر <i> و <em> در HTML

عنصر <i> در HTML متن را بدون اختصاص هرگونه اهمیت بیشتر به حالت ایتالیک تبدیل می‌کند:

 <i>This text is italic</i>
پیش نمایش

 

عنصر <em> در HTML بدون اختصاص اهمیت معنایی، متن را به صورت تاکیدی تبدیل می‌کند

 <em>This text is emphasized</em>
پیش نمایش

به یاد داشته باشید که مرورگرها متن <strong> را به صورت <b> و متن <em> را به صورت <i> نمایش می‌دهند. البته در معنای این تگ‌ها تفاوت‌هایی وجود دارد. تگ‌های <b> و <i> متن برجسته و ایتالیک را تعریف می‌کنند اما تگ‌ها <strong> و <em> به معنای مهم بودن متن است.

 

عنصر <small> در HTML

عنصر <small> در HTML کوچک‌تر بودن متن را در یک سند HTML تعریف می‌کند

 <h2>HTML <small>Small</small> Formatting</h2>
پیش نمایش

 

عنصر <mark> در HTML

عنصر <mark> در HTML متن نشانه‌گذاری شده و هایلایت شده را تعریف می‌کند

<h2>HTML <mark>Marked</mark> Formatting</h2>
پیش نمایش

 

عنصر <del> در HTML

عنصر <del> در HTML متن پاک شده یا حذف شده را مشخص می‌کند

 <p>My favorite color is <del>blue</del> red.</p>
پیش نمایش

 

عنصر <ins> در HTM

عنصر <ins> در HTML متن وارد شده یا افزوده شده را مشخص می‌کند

 <p>My favorite <ins>color</ins> is red.</p>

پیش نمایش

عنصر <sub> در HTML

عنصر <sub> در HTML متن در زیر خط قرار گرفته را مشخص می‌کند

 <p>This is <sub>subscripted</sub> text.</p>
پیش نمایش

 

عنصر <sup> در HTML

عنصر <sup> در HTML متن بالاتر از خط قرار گرفته را مشخص می‌کند

 <p>This is <sup>superscripted</sup> text.</p>
پیش نمایش

 

در انتهای این جلسه حود را بیازمایید

تمرین1 تمرین2 تمرین3 تمرین4 تمرین5

 

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

5/5 - (13 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

بزرگترین پک آموزشی طراحی وب و تمام زبان های برنامه نویسی

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

بازخوردهای خود را برای ما ارسال کنید

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.