قالب‌بندی و نحوه نمایش متن در HTML
 

قالب‌بندی و نحوه نمایش متن در HTML

در این مقاله آموزشی HTML با تگ‌هایی که نحوه نمایش و قالب‌بندی متن را در اسناد html تغییر می‌دهند مثل b و strong و i و em و mark و small و del و ins و sub و sup آشنا می‌شوید.
جمعه، 17 دی 1400 | Article Rating

قالب‌بندی متن یا Formating در HTML

با تگ‌ها و عناصر html زیر می‌توانید طرز نمایش و مفهوم متن در اسناد html را تغییر داده و تعیین کنید:

  • <b> - ضخیم یا بولد کردن متن
  • <strong> - یک متن مهم که مشابه تگ b آن را صخیم نمایش می‌دهد
  • <i> - مایل کردن یا ایتالیک کردن متن
  • <em> - با این تگ روی یک متن تاکید می‌کنیم. متن تاکید شده
  • <mark> - برای انتخاب شده نمایش دادن یا مارک شده بودن متن استفاده می‌شود
  • <small> - متن را از هر اندازه‌ای که هست کوچکتر نمایش می‌دهد
  • <del> - روی متن خط می‌کشد گویی آن متن حذف شده است
  • <ins> - متنی که زیر آن خط کشیده و مشخص شده باشد
  • <sub> - متن زیرنویس مثل درج یک علامت کوچک پایین متن اصلی
  • <sup> - متن بالانویس مثل نمایش عدد توان در اعداد

تگ‌های <b> و <strong> در HTML

تگ <b> در HTML متن را پررنگ یا ضخیم می‌کند بدون این که هیچ اهمیت یا تاکیدی برای ربات‌های موتورهای جستجو ایجاد کند ولی تگ <strong> علاوه بر پررنگ و ضخیم‌تر کردن متن به ربات‌ها و کرالرهای موتورهای جستجو می‌گوید که این کلمه مهمی در این صفحه محسوب می‌شود و به آن توجه کنید:

  • </>
    <p>این یک متن است که <b>این بخش آن صرفا پررنگ</b> نمایش داده شده است.</p>
    <p>ولی در این متن بر روی <strong>این بخش علاوه بر پررنگ بودن تاکید</strong> هم شده است.</p>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!



تگ‌های <i> و <em> در HTML

تگ <i> در HTML بخشی از متن را به شکل یا حالت متفاوتی نمایش می‌کند. معمولا محتوای داخل این تگ به صورت مورب نمایش داده می‌شود. این تفاوت ظاهری اما حالت تاکیدی و قابل توجه برای ربات‌ّای موتورهای جستجو ندارد.

نکته: تگ <i> اغلب برای نشان دادن یک اصطلاح فنی، عبارتی از زبان دیگر، یک فکر، نام یک چیز و غیره استفاده می شود.

تگ <em> در HTML نتیجه وظاهری شبیه به تگ <i> دارد با این تفاوت که متنی تاکید شده را تعریف می‌کند. محتوای داخل معمولا به صورت مورب نمایش داده می‌شود و برای موتورهای جستجو مهم تلقی می‌شود.

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

  • </>
    <p>این یک متن است که <i>این بخش آن صرفا مورب</i> نمایش داده شده است.</p>
    <p>ولی در این متن بر روی <em>این بخش علاوه بر مورب بودن تاکید</em> هم شده است.</p>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!



تگ‌های <small> در HTML

تگ <small> در HTML محتوای درونش را کوچکتر از متن جاری نمایش می‌دهد:

  • </>
    <p>این یک متن پاراگراف با اندازه قلم پیش‌فرض است. </p>
    <p><small>و این متن با قلم کوچک‌تر از اندازه پیش‌فرض نمایش داده شده است. </small></p>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!



تگ‌های <mark> در HTML

تگ <mark> در HTML متنی را تعریف می کند که باید علامت گذاری یا برجسته شود:

  • </>
    <p>این یک متن پاراگراف ساده و علامت‌گذاری نشده است. </p>
    <p><mark>و این متن در این پاراگراف علامت‌گذاری شده است. </mark></p>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!



تگ‌های <del> و <ins> در HTML

تگ <del> در HTML متنی را تعریف می کند که نشان می‌دهد این متن حذف شده و قلم گرفته شده است. مرورگرها معمولا با کشیدن یک خط روی متن آن را نشان می‌دهدند. ولی تگ <ins> در HTML متنی را نشان می‌دهد که گویا به یک متن اضافه شده و یا نشان دهنده یک متن مهم است. مرورگرها معمولا با کشید یک خطر در زیر حروف این شکل را نمایش می‌دهند:

  • </>
    <p>در این پاراگراف یک <del> متن خط خورده </del> به معنی حذف شده و <ins> متن اضافه شده </ins> به معنی تاکید یا جا افتاده را نشان می‌دهد.</p>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!



تگ‌های <sub> و <sup> در HTML

تگ <sub> در HTML متن زیرنویس را تعریف می کند. متن زیرنویس نیم کاراکتر زیر خط معمولی ظاهر می شود و گاهی اوقات با فونت کوچکتر قابل مشاهده است. متن زیرنویس را می توان برای فرمول های شیمیایی مانند H2O استفاده کرد که باید عدد 2 را کمی پایین‌تر از H و O نوشت. از طرفی برعکس این نوع قالب نوشتاری تگ <sup> در HTML متن بالانویس را تعریف می کند. متن بالا‌نویس نیم کاراکتر بالاتر از خط معمولی ظاهر می‌شود و گاهی اوقات با فونت کوچک‌تری ارائه می‌شود. متن بالانویس را می توان در ریاضی برای عدد توان مثل 10 به توان 2 استفاده کرد که در ریاضی عدد 2 که توان است بالاتر نوشته می‌شود. در مثالی دیگر می‌توان از آن برای شماره‌گذاری توضیحات یک عبارت در متن که در پاورقی به آن اشاره شده است استفاده کرد، مانند WWW[1] که عدد [1] را کوچکتر و در بالای WWW می‌نویسند تا بعدا در پایان متن در پاورقی با اشاره به [1] توضیحی درباره WWW داده شود:

  • </>
    <p>در این پاراگراف یک حرف زیرنویس را برای فرمول شیمیایی نمایش می‌دهیم: H<sub>2</sub>O</p>
    <p>در این پاراگراف یک حرف زیرنویس را برای فرمول شیمیایی نمایش می‌دهیم: Crypto Currency<sup>[1]</sup>.</p>
    <br>
    <br>
    <hr>
    <p>[1]: به ارزهای دیجیتالی که توسط فناوری بلاک چین رمزگذاری شده‌اند Crypto Currency گفته می‌شود.</p>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!



معرفی برخی خدمات مرتبط با راه اندازی کسب و کار آنلاین کارگزاران تجارت الکترونیک ایران

در صورتی که مایل به معرفی خدمات طراحی سایت ما به دوستان خود هستید لطفا این صفحه را برای ایشان به اشتراک بگذارید. همچنین می‌توانید اطلاعات بیشتری درباره خدمات ما در زمینه طراحی سایت فروشگاهی همچون طراحی سایت عطر، طراحی سایت شخصی، طراحی سایت شرکتی، طراحی سایت سازمانی با ورود به این صفحات به دست آورید. این که وب سایت مورد نظر شما از چه نوعی باشد را به ما بسپارید. بسته به امکانات و نیاز شما بهترین را برای شما انتخاب می‌کنیم. چه از نوع طراحی سایت با دی ان ان DNN (دات نت نیوک) باشد و چه از نوع طراحی سایت با وردپرس Wordpress می‌توانید از طریق صفحات مربوط به آن اطلاعات بیشتری کسب کرده و همه خدمات خود را از میزبانی وب و خرید هاست گرفته تا طراحی اپلیکیشن موبایل و آموزش طراحی سایت و سئو سایت SEO، آن را با خیال راحت به ما بسپارید. نکته قابل توجه این است که ما با هدف افزایش درآمد و رساندن شما به اهدافی که مد نظر دارید این کار را انجام می‌دهیم و این موضوع بسیار متفاوت است با این که بخواهید فقط یک سایت داشته باشید! چون هر طراحی سایتی شما را به اهداف‌تان نمی‌رساند. تخصص ما تجارت الکترونیک و راه اندازی کسب و کار آنلاین است و طراحی سایت تنها بخشی از این خدمات محسوب می‌شود. عکاسی 360 درجه از محصول و طراحی سیستم اختصاصی یکپارچه ERP و راهبری و چگونگی انجام کار برای رسیدن به درآمد آنلاین چیزی است که بسیاری از طراحان سایت نمی‌دانند. این در حالی است که هدف ما از طراحی سایت تمرکز روی به نتیجه رسیدن اهداف شما است نه طراحی سایت! کارگزار خدمات فناوری اطلاعات خود را به درستی و با دقت انتخاب کنید.

تصاویر
ثبت امتیاز
اشتراک گذاری
نظر جدید

تصویر امنیتی
کد امنیتی را وارد نمایید:

این صفحه را به دوستان خود معرفی کنید

با به اشتراک گذاری این صفحه، یک فرصت خوب به دوستان خود هدیه می‌دهید