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


نویسنده:
سه شنبه ۹ اردیبهشت ۱۳۹۹
قالب بندی متون در 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

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

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

  1. راضیه گفت:

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

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

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

  3. نرگس گفت:

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *