عناصر قالب بندی متون در HTML


نویسنده:
سه شنبه 9 اردیبهشت 1399
قالب بندی متون در HTML

عناصر زیادی در HTML برای قالب بندی متون وجود دارند که تا این درس شما تنها با عنصر p آشنا شدید که کارش ایجاد یک پاراگراف است.

اصلا قالب بندی متون یعنی چه؟ فرض کنید می‌خواهید یک عبارت ریاضی در صفحه وب خود بنویسید که باید از توان در آن استفاده کنید. چگونه باید اینکار را انجام داد؟ با استفاده از عناصر قالب بندی متون.

همانطور که گفتیم عناصر زیادی برای قالب‌بندی متون وجود دارند که ما در این آموزش کاربردی‌ترین آنها را معرفی خواهیم کرد.

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

عنصر <b> متن درونش را بصورت ضخیم نمایش می‌دهد.

عنصر <strong> هم متن درونش را بصورت ضخیم نمایش می‌دهد. علاوه بر این، عبارتی که درون این عنصر نوشته می‌شود، از اهمیت بالاتری نسبت به متون اطراف برخوردار است.

نکته: خروجی این دو عنصر باهم هیچ تفاوتی ندارند. تفاوت آنها در میزان اهمیت عبارت درون آنهاست. موتورهای جستجو به عبارت درون عنصر <strong> اهمیت بیشتری می‌دهند.

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

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

عنصر <i> عبارت درونش را بصورت کج (Italic) نمایش می‌دهد.

عنصر <em> عبارت درونش را بصورت کج (Italic) نمایش می‌دهد و حالت تاکید شده (Emphasized) به آن می‌دهد.

نکته: خروجی این دو عنصر باهم هیچ تفاوتی ندارند. تفاوت آنها در میزان اهمیت عبارت درون آنهاست. موتورهای جستجو به عبارت درون عنصر <em> اهمیت بیشتری می‌دهند.


عنصر <mark> در HTML

عنصر <mark> عبارت درونش را بصورت هایلایت شده نمایش می‌دهد.


عنصر <del> در HTML

عنصر <del> یک عبارت حذف شده را تعیین می‌کند. در خروجی یک خط روی عبارتی که درون این عنصر نوشته شود کشیده می‌شود.


عنصر <sub> در HTML

عنصر <sub> یک متن زیر‌نویس (Subscripted) تعریف می‌کند. عبارتی که درون این عنصر نوشته شود کمی پایین‌تر از سایر متون نمایش داده می‌شود.


عنصر <sup> در HTML

عنصر <sup> یک متن بالانویس (Superscripted) تعریف می‌کند. عبارتی که درون این عنصر نوشته شود کمی بالا‌تر از سایر متون نمایش داده می‌شود.

خروجی ۲ کد ابتدایی در همان بخش مشخص شده اما برای مشاهده‌ی خروجی ۴ کد بالا به تصویر زیر توجه کنید:

عناصر قالب بندی متون در HTML

دیدگاهتان را بنویسید

22 پاسخ به “عناصر قالب بندی متون در HTML”

  1. soniya گفت:

    سلام. خیلی ممنونم از امورش کامل و جامعتون همچنین خسته نباشید میگم بهتون.

  2. فرانک گفت:

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

  3. teimoor گفت:

    سلام به نظرتون از سایت w3schools استفاده کنم؟ زبانم چندان خوب نیست

  4. سامره گفت:

    سلام اموزشهاتون عالی هستند.واقعا ممنونم بابت آموزش مفید ورایگانتون

  5. آرین گفت:

    بسیار بسیار عالی بود. من امروز هفت درس را خواندم و لذت بردم (:

  6. محمد گفت:

    سلام. چگونه رنگ هایلایت رو در عنصر mark تغییر بدیم؟

  7. me گفت:

    وقتی مارک میکنیم چجور تایین کنیم چه رنگی مارک کنه ؟!

  8. me گفت:

    سلام دوباره.
    چجوری میتونیم ببریم خط بعد نوشته هارو ؟؟

  9. نرگس گفت:

    سلام وقتتون بخیر و ممنون از آموزش خوب و کاملتون
    فقط کاش برای هر عنصر حالت نمایش آن در وبسایت را هم قرار میدادید

  10. محمد حسن گفت:

    سلام وعرض ادب کارتون واقعا عالی هست خیلی ممنون
    فقط یک سوال دشتم آیا آموزش جاوا اسکریپت هم دارین؟

  11. راضیه گفت:

    عرض سلام و خسته نباشید دارم خدمت همه عوامل این سایت.کارتون حرف نداره خیلی زحمت میکشید واقعا سپاسگزارم بابت آموزش رایگان و روانتون.انشالله که همیشه موفق باشید و ما رو در بالابردن دانشمون کمک کنید

دیدگاهتان را بنویسید