نوشتن نظر کلیک کنید

HTML – قالب بندی (Formatting)

آخرین بروزرسانی: ۱۱ اسفند ۱۴۰۲

Formatting به شما امکان می‌دهد تا صفحات وب خود را به زیبایی و قابل فهمی قالب بندی کنید. در این بخش، می‌توانید از تگ‌ها و ویژگی‌های مختلف استفاده کنید تا متن، تصاویر، جداول و سایر عناصر را در صفحات وب خود به نحو مناسب قالب بندی کنید.

تگ Bold Text

تگ Bold Text در HTML برای تمیز کردن یک بخش از متن به صورت ضخیم استفاده می‌شود. برای این کار از تگ‌های <b> یا <strong> استفاده می‌شود.

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

<!DOCTYPE html>
<html>
<head>
    <title>مثال تگ Bold Text</title>
</head>
<body>
    <p>این یک <b>مثال</b> از استفاده از تگ Bold Text در HTML است.</p>
    <p>این یک <strong>مثال دیگر</strong> از استفاده از تگ Strong در HTML است.</p>
</body>
</html>

همچنین بخوانید : آموزش تگ b

تگ Italic Text

تگ Italic Text در HTML برای تمیز کردن یک بخش از متن به صورت کج استفاده می‌شود. برای این کار از تگ‌های <i> یا <em> استفاده می‌شود.

در این مثال، تگ <i> برای ایجاد متن کج و تگ <em> برای تاکید بر اهمیت متن استفاده شده است.

<!DOCTYPE html>
<html>
<head>
    <title>مثال تگ Italic Text</title>
</head>
<body>
    <p>این یک <i>مثال</i> از استفاده از تگ Italic Text در HTML است.</p>
    <p>این یک <em>مثال دیگر</em> از استفاده از تگ Emphasized در HTML است.</p>
</body>
</html>

تگ Underlined Text

در HTML، تگ <u> برای تمیز کردن یک بخش از متن به صورت زیرخط‌دار استفاده می‌شود. در ادامه یک مثال کامل برای نمایش متن زیرخط‌دار در HTML آورده شده است:

در این مثال، تگ <u> برای ایجاد متن زیرخط‌دار استفاده شده است.

<!DOCTYPE html>
<html>
<head>
    <title>مثال تگ Underlined Text</title>
</head>
<body>
    <p>این یک <u>مثال</u> از استفاده از تگ Underlined Text در HTML است.</p>
</body>
</html>

تگ Strike Text

در HTML، تگ <strike> برای نشان دادن متنی که قرار است از توضیحات حذف شود، استفاده می‌شود. در زیر یک مثال کامل برای نمایش متن با خط خورده (Strike Text) در HTML آمده است:

در این مثال، تگ <strike> برای نمایش متن با خط خورده استفاده شده است.

<!DOCTYPE html>
<html>
<head>
    <title>مثال تگ Strike Text</title>
</head>
<body>
    <p>این یک <strike>مثال</strike> از استفاده از تگ Strike Text در HTML است.</p>
</body>
</html>

تگ Monospaced Font

در HTML، تگ <tt> (و گاهی <code>) برای نمایش متن با فونت Monospaced استفاده می‌شود. این نوع فونت همه‌ی حروف و کاراکترها را با عرض یکسان نشان می‌دهد، که معمولاً برای نمایش کدها یا متن‌های فرمت‌دار استفاده می‌شود. در زیر، یک مثال کامل برای نمایش متن با فونت Monospaced در HTML آمده است:

در این مثال، تگ <tt> برای نمایش متن با فونت Monospaced استفاده شده است.

<!DOCTYPE html>
<html>
<head>
    <title>مثال تگ Monospaced Font</title>
</head>
<body>
    <p>این یک متن با فونت <tt>Monospaced</tt> است. این فونت همه‌ی حروف و کاراکترها را با عرض یکسان نشان می‌دهد.</p>
</body>
</html>

تگ Superscript Text

در HTML، تگ <sup> برای نمایش متن به صورت Superscript (متن بالانویس) استفاده می‌شود. این تگ متن را به صورت بالای متن اصلی نمایش می‌دهد، که معمولاً برای نمایش اعداد بالانویس یا حروف کوچک استفاده می‌شود. در زیر، یک مثال کامل برای نمایش متن به صورت Superscript در HTML آمده است:

در این مثال، تگ <sup> برای نمایش عدد ۲ به صورت Superscript استفاده شده است.

<!DOCTYPE html>
<html>
<head>
    <title>مثال تگ Superscript Text</title>
</head>
<body>
    <p>عدد <sup>2</sup> در ریاضیات نمایانگر مربع است.</p>
    <p>نمایش H<sub>2</sub>O برای آب است.</p>
</body>
</html>

تگ Subscript Text

در HTML، تگ <sub> برای نمایش متن به صورت Subscript (متن زیرنویس) استفاده می‌شود. این تگ متن را به صورت زیر متن متن اصلی نمایش می‌دهد، که معمولاً برای نمایش اعداد زیرنویس یا حروف کوچک استفاده می‌شود. در زیر، یک مثال کامل برای نمایش متن به صورت Subscript در HTML آمده است:

در این مثال، تگ <sub> برای نمایش حروف “۲” به صورت Subscript استفاده شده است.

<!DOCTYPE html>
<html>
<head>
    <title>مثال تگ Subscript Text</title>
</head>
<body>
    <p>شیمیایی H<sub>2</sub>O نمایانگر آب است.</p>
</body>
</html>

تگ Inserted Text

در HTML، تگ <ins> برای نمایش متن به صورت متن وارد شده (Inserted Text) استفاده می‌شود. این تگ معمولاً برای نمایش متنی که به متن اصلی اضافه شده است، مانند متن جدید یا اضافه شده به متن اصلی، استفاده می‌شود. در زیر، یک مثال کامل برای نمایش متن به صورت Inserted Text در HTML آمده است:

در این مثال، تگ <ins> برای نمایش متن “متن اضافه شده” به عنوان متن وارد شده استفاده شده است.

<!DOCTYPE html>
<html>
<head>
    <title>مثال تگ Inserted Text</title>
</head>
<body>
    <p>این <ins>متن اضافه شده</ins> به متن اصلی اضافه شده است.</p>
</body>
</html>

تگ Deleted Text

در HTML، تگ <del> برای نمایش متن به صورت متن حذف شده (Deleted Text) استفاده می‌شود. این تگ معمولاً برای نمایش متنی که از متن اصلی حذف شده است، مانند متنی که قابلیت آن را از دست داده‌ایم یا متنی که دیگر اعتباریت آن نداریم، استفاده می‌شود. در زیر، یک مثال کامل برای نمایش متن به صورت Deleted Text در HTML آمده است:

در این مثال، تگ <del> برای نمایش متن “متن حذف شده” به عنوان متن حذف شده استفاده شده است.

<!DOCTYPE html>
<html>
<head>
    <title>مثال تگ Deleted Text</title>
</head>
<body>
    <p>این <del>متن حذف شده</del> از متن اصلی حذف شده است.</p>
</body>
</html>

تگ Larger Text

در HTML، شما می‌توانید از تگ <big> برای نمایش متن به صورت بزرگتر (Larger Text) استفاده کنید. این تگ معمولاً برای بزرگ‌نمایی متن در موارد خاص، مانند عناوین یا بخش‌های مهم، استفاده می‌شود.

در زیر یک مثال کامل برای نمایش متن به صورت بزرگتر با استفاده از تگ <big> آمده است:

<!DOCTYPE html>
<html>
<head>
    <title>مثال تگ Larger Text</title>
</head>
<body>
    <p>این یک <big>متن بزرگتر</big> است که در HTML استفاده می‌شود.</p>
</body>
</html>

در این مثال، تگ <big> برای نمایش متن “متن بزرگتر” به عنوان متن بزرگتر استفاده شده است.

تگ Smaller Text

در HTML، شما می‌توانید از تگ <small> برای نمایش متن به صورت کوچک‌تر (Smaller Text) استفاده کنید. این تگ معمولاً برای نمایش متن‌هایی که نیاز به توجه کمتری دارند، مانند توضیحات کوچک، استفاده می‌شود.

در زیر یک مثال کامل برای نمایش متن به صورت کوچک‌تر با استفاده از تگ <small> آمده است:

<!DOCTYPE html>
<html>
<head>
    <title>مثال تگ Smaller Text</title>
</head>
<body>
    <p>این یک <small>متن کوچکتر</small> است که در HTML استفاده می‌شود.</p>
</body>
</html>

گروه‌بندی محتوا (Grouping Content)

در HTML، شما می‌توانید از تگ‌های <div> و <span> برای گروه‌بندی محتوا استفاده کنید. این تگ‌ها برای ایجاد بخش‌های مختلف در صفحه و یا برای تغییر ویژگی‌های خاص بر روی محتوا مورد استفاده قرار می‌گیرند.

1. تگ <div>:

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

– هدف از استفاده از این تگ افزایش سازماندهی و ساختاردهی صفحه است.

– معمولاً با استفاده از CSS، می‌توانید به تگ <div> سبک‌های خاصی را اعمال کنید.

2. تگ <span>:

– این تگ برای تغییر ویژگی‌های خاص بر روی یک قسمت کوچک‌تر از متن یا محتوا استفاده می‌شود.

– معمولاً برای تغییر فونت، رنگ متن، یا سبک متن استفاده می‌شود.

– مانند تگ <div>، می‌توانید با CSS به تگ <span> سبک‌های مختلفی را اعمال کنید.

در زیر یک مثال ساده برای هر دو تگ <div> و <span> آمده است:

در این مثال، از تگ <div> برای گروه‌بندی بخش‌های مختلف صفحه و از تگ <span> برای تغییر ویژگی‌های خاص روی متن استفاده شده است.

<!DOCTYPE html>
<html>
<head>
    <title>مثال تگ‌های Grouping Content</title>
    <style>
        /* CSS برای تغییر سبک تگ‌ها */
        .container {
            border: 2px solid black;
            padding: 10px;
            margin-bottom: 10px;
        }
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- تگ <div> برای گروه‌بندی بخش‌های مختلف -->
    <div class="container">
        <h2>این یک بخش از صفحه است</h2>
        <p>این یک متن درون بخش است.</p>
    </div>

    <!-- تگ <span> برای تغییر ویژگی‌های خاص روی متن -->
    <p>این یک متن <span class="highlight">با رنگ قرمز و مشخص</span> است.</p>
</body>
</html>

HTML – قالب بندی (Formatting)

تگ Bold Text

همچنین بخوانید : آموزش تگ b

تگ Italic Text

تگ Underlined Text

تگ Strike Text

تگ Monospaced Font

تگ Superscript Text

تگ Subscript Text

تگ Inserted Text

تگ Deleted Text

تگ Larger Text

تگ Smaller Text

گروه‌بندی محتوا (Grouping Content)

پست های مرتبط

مطالعه این پست ها رو از دست ندین!

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

HTML – قالب بندی (Formatting)

تگ Bold Text

همچنین بخوانید : آموزش تگ b

تگ Italic Text

تگ Underlined Text

تگ Strike Text

تگ Monospaced Font

تگ Superscript Text

تگ Subscript Text

تگ Inserted Text

تگ Deleted Text

تگ Larger Text

تگ Smaller Text

گروه‌بندی محتوا (Grouping Content)

پست های مرتبط

مطالعه این پست ها رو از دست ندین!

JavaScript – رویدادها (Events)

JavaScript – سازنده‌های شیء (Object Constructors)

JavaScript – نمایش شیء (Object Display)

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید