آموزش Html - قسمت 3
نویسنده
صادق جعفری
تاریخ انتشار
پنج شنبه، 1403/03/17
تگ ها
#آموزش_HTML #صادق_جعفری #خطوط_افقی #تگ_pre #کاربرد_  #تگ_div #تگ_title #کامنت_گذاری #مشاهده_کدهای_HTML #تگ‌های_فرمت‌بندی_متن.

اشتراک گذاری
صادق جعفری
صادق جعفری

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

شبکه های اجتماعی من

سلام دوستان، صادق جعفری هستم و با قسمت سوم از دوره آموزش HTML در خدمت شما هستم. توی این بخش قصد داریم به موضوعات جدید و جالبی بپردازیم که کاربرد زیادی در طراحی صفحات وب دارن. شاید براتون سوال شده باشه که چطور می‌تونیم خطوط افقی توی صفحه بذاریم یا متن‌ها رو به صورت پیش‌فرمت‌شده نمایش بدیم. همچنین، می‌خوایم ببینیم   چی هست و چطور می‌تونیم ازش استفاده کنیم.

در ادامه، به بررسی تگ‌های مهمی مثل <div> و <title> می‌پردازیم و یاد می‌گیریم که چطور می‌تونیم کامنت‌هایی توی کدهامون بذاریم تا خوندن و مدیریت اونا راحت‌تر بشه. همچنین، می‌خوایم ببینیم چطور می‌تونیم کدهای HTML یه صفحه وب رو مشاهده کنیم و از تگ‌های فرمت‌بندی متن برای زیباسازی و سازماندهی محتوا استفاده کنیم. در نهایت، به بحث استایل‌دهی در HTML می‌پردازیم و با اصول فونت، رنگ، پس‌زمینه و چینش متن آشنا می‌شیم. آماده‌اید؟ بریم که شروع کنیم!

 

تگ </hr>

تگ </hr> در HTML برای ایجاد یک خط افقی در صفحه وب استفاده می‌شود. این خط معمولاً برای جدا کردن بخش‌های مختلف محتوا یا تاکید بر تغییر موضوع در یک متن به کار می‌رود. استفاده از تگ </hr> بسیار ساده است و به طور پیش‌فرض یک خط افقی با عرض 100% و ارتفاع 2 پیکسل در صفحه ایجاد می‌کند. این تگ یکی از تگ‌های خالی (self-closing) است، به این معنی که نیازی به تگ بسته ندارد.

ساختار تگ </hr> بسیار ساده است و به صورت زیر نوشته می‌شود:

<hr/>

مثال ساده از تگ </hr>

در این مثال، از تگ </hr> برای جدا کردن دو پاراگراف استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>Example of the hr tag</title>
</head>
<body>
    <p>This text is before the horizontal line.</p>
    <hr/>
    <p>This text is after the horizontal line.</p>
</body>
</html>

در این مثال، تگ </hr> یک خط افقی بین دو پاراگراف ایجاد می‌کند که به وضوح بخش‌های مختلف متن را از هم جدا می‌کند.

استفاده از CSS برای سفارشی‌سازی تگ </hr>

با استفاده از CSS، می‌توان ظاهر خط افقی ایجاد شده توسط تگ </hr> را سفارشی کرد. می‌توان ویژگی‌های مختلفی مانند رنگ، ضخامت، عرض و حاشیه را تغییر داد.

<!DOCTYPE html>
<html>
<head>
    <title>Example of hr tag with CSS</title>
    <style>
        .custom-hr {
            border: none;
            border-top: 2px dashed #00f;
            width: 50%;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <p>This is the text before the custom horizontal line.</p>
    <hr class="custom-hr"/>
    <p>This text is after the custom horizontal line.</p>
</body>
</html>

در این مثال، کلاس custom-hr به تگ </hr> اضافه شده است تا خط افقی با ویژگی‌های خاص مانند خط‌چین آبی، عرض 50% و حاشیه‌ی سفارشی نمایش داده شود.

ویژگی‌های تگ </hr>

تگ </hr> به طور پیش‌فرض ویژگی‌های زیادی ندارد، اما با استفاده از CSS می‌توان آن را سفارشی کرد. برخی از ویژگی‌های معمول که برای تگ </hr> استفاده می‌شوند عبارتند از:

color

  • رنگ خط افقی را مشخص می‌کند.
<hr style="color: red;"/>

width

  • عرض خط افقی را تعیین می‌کند.
<hr style="width: 50%;"/>

height

  • ارتفاع خط افقی را تعیین می‌کند.
<hr style="height: 5px;"/>

border

  • نوع حاشیه خط افقی را مشخص می‌کند.
<hr style="border: 1px solid black;"/>

margin

  • فاصله خط افقی از عناصر بالا و پایین آن را تعیین می‌کند.
<hr style="margin: 20px 0;"/>

مثال جامع از تگ </hr> با ویژگی‌های مختلف

<!DOCTYPE html>
<html>
<head>
    <title>A comprehensive example of the hr tag with CSS</title>
    <style>
        .styled-hr {
            border: none;
            border-top: 3px solid #ff6347;
            width: 80%;
            height: 5px;
            margin: 30px auto;
        }
    </style>
</head>
<body>
    <p>This is the text before the custom horizontal line.</p>
    <hr class="styled-hr"/>
    <p>This text is after the custom horizontal line.</p>
</body>
</html>

در این مثال، از ویژگی‌های مختلفی برای سفارشی‌سازی تگ </hr> استفاده شده است تا خط افقی با ظاهر دلخواه نمایش داده شود. این ویژگی‌ها به شما امکان می‌دهند تا تگ </hr> را به شکل و ظاهر مورد نیاز خود تنظیم کنید.

تگ </hr> یک ابزار ساده و موثر برای ایجاد خطوط افقی در صفحات وب است که می‌تواند به جدا کردن بخش‌های مختلف محتوا کمک کند. با استفاده از CSS می‌توان ظاهر این خط افقی را به شکل دلخواه سفارشی کرد و به طراحی زیباتر و منسجم‌تری دست یافت. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ </hr> کمک کرده باشد.

 

تگ <pre>

تگ <pre> در HTML برای نمایش متن به صورت پیش‌فرمت‌شده (preformatted) استفاده می‌شود. این تگ به ما این امکان را می‌دهد تا متن را دقیقاً به همان صورتی که در کد HTML نوشته شده است، با تمام فاصله‌ها، خطوط جدید و فضای‌های اضافی نمایش دهیم. تگ <pre> معمولاً برای نمایش کدهای برنامه‌نویسی، اسکریپت‌ها، یا هر متنی که نیاز به فرمت دقیق دارد، استفاده می‌شود. این تگ به مرورگر دستور می‌دهد که متن را با فونت ثابت (monospaced) نمایش دهد و تمام فاصله‌ها و خطوط جدید را حفظ کند.

ساختار تگ <pre> بسیار ساده است و به صورت زیر نوشته می‌شود:

<pre>
Preformatted text
This is a new line.
        This is a line with extra spaces.
</pre>

مثال ساده از تگ <pre>

در این مثال، از تگ <pre> برای نمایش متن با فرمت دقیق استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>Example of the pre tag</title>
</head>
<body>
    <pre>
      This is a pre-formatted text.
      All spaces and newlines are preserved here.
      This is a new line.
                       This line has extra spaced.
    </pre>
</body>
</html>

در این مثال، متن داخل تگ <pre> دقیقاً به همان صورتی که در کد HTML نوشته شده است، نمایش داده می‌شود.

کاربردهای تگ <pre>

تگ <pre> می‌تواند در موارد مختلفی کاربرد داشته باشد، از جمله:

  1. نمایش کدهای برنامه‌نویسی: برای نمایش کدهای HTML، CSS، JavaScript یا سایر زبان‌های برنامه‌نویسی.
  2. نمایش خروجی‌های متنی: برای نمایش خروجی‌های متنی از برنامه‌های کامپیوتری.
  3. نمایش متن با فرمت خاص: برای نمایش متنی که نیاز به حفظ فاصله‌ها و قالب‌بندی دقیق دارد.

مثال نمایش کد برنامه‌نویسی با تگ <pre>

در این مثال، از تگ <pre> برای نمایش کد HTML استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>Example of displaying the code with the pre tag</title>
</head>
<body>
    <pre>
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Sample page&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Hello World!&lt;/h1&gt;
        &lt;p&gt;This is a paragraph.&lt;/p&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    </pre>
</body>
</html>

در این مثال، کد HTML داخل تگ <pre> قرار گرفته و با استفاده از کاراکترهای escape شده (مانند &lt; و &gt;) نمایش داده شده است تا به درستی نمایش داده شود.

ویژگی‌های تگ <pre>

تگ <pre> به خودی خود ویژگی‌های خاصی ندارد، اما می‌توان با استفاده از CSS استایل‌دهی مناسبی به آن اضافه کرد تا ظاهر دلخواه ایجاد شود. برخی از ویژگی‌های معمول که برای تگ <pre> استفاده می‌شوند عبارتند از:

font-family

  • تعیین فونت مورد استفاده برای متن داخل تگ <pre>.
<pre style="font-family: monospace;">

color

  • تعیین رنگ متن داخل تگ <pre>.
<pre style="color: blue;">

background-color

  • تعیین رنگ پس‌زمینه برای متن داخل تگ <pre>.
<pre style="background-color: #f0f0f0;">

padding

  • تعیین فاصله داخلی (padding) برای متن داخل تگ <pre>.
<pre style="padding: 10px;">

مثال جامع از تگ <pre> با CSS

در این مثال، از CSS برای استایل‌دهی به تگ <pre> استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>A comprehensive example of the pre tag with CSS</title>
    <style>
        .code-block {
            font-family: monospace;
            color: #333;
            background-color: #f0f0f0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <pre class="code-block">
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Sample page&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Hello World!&lt;/h1&gt;
        &lt;p&gt;This is a paragraph.&lt;/p&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    </pre>
</body>
</html>

در این مثال، کلاس code-block به تگ <pre> اضافه شده است تا با استفاده از CSS استایل‌دهی خاصی به متن داخل آن اعمال شود.

تگ <pre> دارای چه attribute هایی است؟

تگ <pre> در HTML برای نمایش متن به صورت پیش‌فرمت‌شده (preformatted) استفاده می‌شود و به خودی خود دارای ویژگی‌های خاصی نیست، اما می‌تواند از ویژگی‌های عمومی HTML که برای سایر تگ‌ها نیز استفاده می‌شود، بهره‌برداری کند. در زیر به برخی از مهم‌ترین و پرکاربردترین attribute‌های تگ <pre> اشاره می‌کنیم:

1. id

ویژگی id یک شناسه یکتا به عنصر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این عنصر در CSS یا JavaScript استفاده کرد.

<pre id="code-example">
    This is a pre-formatted text.
</pre>

2. class

ویژگی class برای اختصاص یک یا چند کلاس CSS به عنصر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.

<pre class="code-block">
    This is a pre-formatted text.
</pre>

3. style

ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به عنصر استفاده می‌شود.

<pre style="color: blue; background-color: #f0f0f0;">
    This is a pre-formatted text.
</pre>

4. title

ویژگی title توضیحات اضافی در مورد عنصر فراهم می‌کند که وقتی کاربر موس را روی عنصر قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.

<pre title="This is a pre-formatted text.">
    This is a pre-formatted text.
</pre>

5. dir

ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.

<pre dir="rtl">
    This is a pre-formatted text.
</pre>

6. lang

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

<pre lang="fa">
    This is a pre-formatted text.
</pre>

مثال جامع با استفاده از attribute‌های مختلف

<!DOCTYPE html>
<html>
<head>
    <title>Comprehensive example of pre tag with attributes</title>
    <style>
        .code-block {
            font-family: monospace;
            color: #333;
            background-color: #f0f0f0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <pre id="example" class="code-block" style="font-size: 14px;" title="This is a pre-formatted text." dir="ltr" lang="fa">
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Sample page&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Hello World!&lt;/h1&gt;
        &lt;p&gt;This is a paragraph.&lt;/p&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    </pre>
</body>
</html>

در این مثال، از ویژگی‌های id, class, style, title, dir و lang برای سفارشی‌سازی تگ <pre> استفاده شده است. این ویژگی‌ها به توسعه‌دهندگان امکان می‌دهند تا کنترل بیشتری بر روی نمایش و رفتار این تگ داشته باشند و صفحات وب را به صورت دلخواه سفارشی کنند.

تگ <pre> یکی از تگ‌های مفید در HTML است که به ما امکان می‌دهد متن را به صورت پیش‌فرمت‌شده نمایش دهیم. این تگ برای نمایش کدهای برنامه‌نویسی، خروجی‌های متنی و هر متنی که نیاز به حفظ فاصله‌ها و قالب‌بندی دقیق دارد، بسیار کاربردی است.تگ <pre> به خودی خود ویژگی‌های خاصی ندارد، اما با استفاده از ویژگی‌های عمومی HTML می‌توان آن را سفارشی کرد و به شکل دلخواه درآورد. این ویژگی‌ها شامل id, class, style, title, dir و lang می‌شوند که به شما امکان می‌دهند تا کنترل بیشتری بر روی نمایش و رفتار این تگ داشته باشید. با استفاده از CSS می‌توان استایل‌دهی مناسبی به این تگ اضافه کرد و ظاهر دلخواه را ایجاد کرد. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <pre> کمک کرده باشد.

 

&nbsp چیست و چه کاربردی دارد؟

در دنیای HTML، فضای غیرقابل‌شکستن یا همان &nbsp; یکی از کاراکترهای ویژه‌ای است که به شما اجازه می‌دهد فاصله‌هایی ایجاد کنید که مرورگر نمی‌تواند آن‌ها را نادیده بگیرد یا در هنگام شکستن خط آن‌ها را حذف کند. این کاراکتر برای مواقعی که نیاز به حفظ فاصله‌های خاص در متن دارید، بسیار کاربردی است و به شما امکان می‌دهد تا محتوای وب را به شکلی دقیق‌تر و منظم‌تر نمایش دهید.

کاربردهای &nbsp

  1. حفظ فاصله‌های خاص در متن: ممکن است بخواهید چندین فاصله بین کلمات داشته باشید که مرورگر آن‌ها را حذف نکند. به کمک &nbsp; می‌توانید این فواصل را حفظ کنید.
  2. جلوگیری از شکست خط: برای مواقعی که می‌خواهید دو کلمه یا عنصر را در یک خط نگه دارید و اجازه ندهید که مرورگر آن‌ها را در خطوط مختلف بشکند.
  3. ایجاد فاصله در جداول و فرم‌ها: برای تنظیم دقیق‌تر فاصله‌ها در جداول و فرم‌ها و جلوگیری از تغییر ناخواسته ظاهر.

مثال ساده از &nbsp

در این مثال، از &nbsp; برای ایجاد چندین فاصله بین دو کلمه استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <p>This is an example&nbsp;&nbsp;&nbsp;with several blank spaces.</p>
</body>
</html>

در این مثال، سه &nbsp; بین کلمات "مثال است" و "با چندین فضای خالی" قرار دارد که باعث می‌شود سه فضای خالی متوالی ایجاد شود.

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

در این مثال، می‌خواهیم از شکستن خط بین کلمات "HTML" و "5" جلوگیری کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <p>The latest version of HTML&nbsp;5 It is very powerful.</p>
</body>
</html>

در این مثال، &nbsp; بین "HTML" و "5" قرار داده شده است تا از شکستن خط بین آن‌ها جلوگیری شود و هر دو در یک خط باقی بمانند.

ایجاد فاصله در جداول و فرم‌ها

در این مثال، از &nbsp; برای ایجاد فاصله در جدول استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>Example &nbsp; in the table</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>Cell 1</td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td>Cell 3</td>
        </tr>
    </table>
</body>
</html>

در این مثال، از &nbsp; برای ایجاد فاصله در یک سلول خالی جدول استفاده شده است.

&nbsp; یا فضای غیرقابل‌شکستن یک ابزار قدرتمند و مفید در HTML است که به شما کمک می‌کند تا کنترل بیشتری بر روی فاصله‌ها و نمایش متن در صفحات وب داشته باشید. این کاراکتر به شما اجازه می‌دهد تا فاصله‌های خاصی را در متن حفظ کنید، از شکست خط جلوگیری کنید و تنظیمات دقیق‌تری در جداول و فرم‌ها داشته باشید. با استفاده از &nbsp; می‌توانید محتوای وب خود را به شکلی حرفه‌ای‌تر و منظم‌تر نمایش دهید و تجربه کاربری بهتری ارائه دهید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از &nbsp; کمک کرده باشد.

 

تگ <div>

تگ <div> یکی از پرکاربردترین و اساسی‌ترین تگ‌ها در HTML است که برای ایجاد بخش‌ها یا کانتینرها در صفحات وب استفاده می‌شود. این تگ یک عنصر بلوکی (block-level element) است که به ما امکان می‌دهد محتوای وب را به بخش‌های مختلف تقسیم کنیم و آن‌ها را به صورت جداگانه استایل‌دهی و مدیریت کنیم. تگ <div> به تنهایی هیچ ویژگی ظاهری خاصی ندارد، اما با استفاده از CSS می‌توان به آن استایل و جلوه‌های بصری افزود.

ساختار تگ <div> بسیار ساده است و به صورت زیر نوشته می‌شود:

<div>
    <!-- The content inside the div tag -->
</div>

مثال ساده از تگ <div>

در این مثال، از تگ <div> برای ایجاد دو بخش مجزا استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>div tag example</title>
</head>
<body>
    <div>
        <h1>The title of the first part</h1>
        <p>This is the content of the first part.</p>
    </div>
    <div>
        <h1>The title of the second part</h1>
        <p>This is the content of the second part.</p>
    </div>
</body>
</html>

در این مثال، دو تگ <div> جداگانه ایجاد شده‌اند که هر کدام شامل یک عنوان و یک پاراگراف هستند.

استفاده از CSS برای استایل‌دهی به تگ <div>

یکی از مهم‌ترین کاربردهای تگ <div> استفاده از آن به همراه CSS برای استایل‌دهی و ساختاردهی بهتر صفحات وب است. با استفاده از CSS می‌توان به تگ‌های <div> رنگ، حاشیه، فاصله و دیگر ویژگی‌های ظاهری اضافه کرد.

<!DOCTYPE html>
<html>
<head>
    <title>div tag example with CSS</title>
    <style>
        .box {
            border: 2px solid black;
            padding: 10px;
            margin: 10px;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>The title of the first part</h1>
        <p>This is the content of the first part.</p>
    </div>
    <div class="box">
        <h1>The title of the second part</h1>
        <p>This is the content of the second part.</p>
    </div>
</body>
</html>

در این مثال، کلاس CSS box به هر دو تگ <div> اضافه شده است که به آن‌ها حاشیه، فاصله داخلی (padding)، فاصله خارجی (margin) و رنگ پس‌زمینه می‌دهد.

تگ <div> به عنوان کانتینر

تگ <div> معمولاً به عنوان یک کانتینر برای گروه‌بندی عناصر دیگر استفاده می‌شود. این ویژگی به ما امکان می‌دهد تا عناصر مختلف را در یک بخش قرار دهیم و به صورت یکجا به آن‌ها استایل‌دهی کنیم.

<!DOCTYPE html>
<html>
<head>
    <title>Example div tag as container</title>
    <style>
        .container {
            width: 80%;
            margin: auto;
            background-color: #e0e0e0;
            padding: 20px;
        }
        .header, .content, .footer {
            margin-bottom: 20px;
        }
        .header {
            background-color: #b0c4de;
            padding: 10px;
        }
        .content {
            background-color: #ffffff;
            padding: 10px;
        }
        .footer {
            background-color: #b0c4de;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Header</h1>
        </div>
        <div class="content">
            <p>This is the original content.</p>
        </div>
        <div class="footer">
            <p>This is a footnote.</p>
        </div>
    </div>
</body>
</html>

در این مثال، تگ <div> با کلاس container به عنوان یک کانتینر کلی استفاده شده است که سه بخش دیگر (سربرگ، محتوا و پانوشت) را درون خود جای داده است.

تگ <div> دارای چه attribute هایی است؟

تگ <div> به خودی خود ویژگی‌های خاصی ندارد، اما می‌تواند از attribute‌های عمومی HTML که برای سایر تگ‌ها نیز استفاده می‌شود، بهره‌برداری کند. این attribute‌ها به شما امکان می‌دهند تا کنترل بیشتری بر روی استایل، رفتار و شناسایی این تگ در صفحات وب داشته باشید. در زیر به برخی از مهم‌ترین و پرکاربردترین attribute‌های تگ <div> اشاره می‌کنیم:

1. id

ویژگی id یک شناسه یکتا به عنصر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این عنصر در CSS یا JavaScript استفاده کرد.

<div id="unique-div">
    This is a div with a unique ID.
</div>

2. class

ویژگی class برای اختصاص یک یا چند کلاس CSS به عنصر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.

<div class="box highlight">
    This is a div with classes "box" and "highlight".
</div>

3. style

ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به عنصر استفاده می‌شود.

<div style="color: blue; background-color: #f0f0f0;">
    This is a div with an inline style.
</div>

4. title

ویژگی title توضیحات اضافی در مورد عنصر فراهم می‌کند که وقتی کاربر موس را روی عنصر قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.

<div title="This is a div">
    This is a div with a title attribute.
</div>

5. lang

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

<div lang="fa">
    This is a div with Farsi language.
</div>

6. dir

ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.

<div dir="rtl">
    This is a right-to-left div.
</div>

7. data-*

ویژگی‌های data-* برای ذخیره داده‌های سفارشی در عناصر HTML استفاده می‌شوند. این ویژگی‌ها می‌توانند برای ذخیره اطلاعات اضافی که در CSS یا JavaScript مورد استفاده قرار می‌گیرند، استفاده شوند.

<div data-role="container" data-id="1234">
    This is a div with custom data properties.
</div>

مثال جامع با استفاده از attribute‌های مختلف تگ <div>

در این مثال، از attribute‌های مختلف برای سفارشی‌سازی تگ <div> استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>Comprehensive example of div tag with attributes</title>
    <style>
        .highlight {
            border: 2px solid red;
            background-color: #ffebcd;
            padding: 10px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div id="unique-div" class="highlight" style="text-align: center;" title="This is a div" dir="ltr" lang="fa" data-role="container" data-id="1234">
        <h1>Title</h1>
        <p>This is the content of the div.</p>
    </div>
</body>
</html>

 

تگ <div> یکی از قدرتمندترین و پرکاربردترین تگ‌های HTML است که به شما امکان می‌دهد تا ساختار و طراحی صفحات وب را به شکلی منظم و قابل مدیریت بسازید. با استفاده از این تگ و بهره‌گیری از CSS می‌توانید بخش‌های مختلفی را در صفحات وب ایجاد کنید و به آن‌ها استایل‌های مختلفی بدهید. این تگ به شما انعطاف‌پذیری زیادی در طراحی و توسعه وب می‌دهد و اساس بسیاری از ساختارهای پیچیده وب است. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <div> کمک کرده باشد.

 

تگ <title>

تگ <title> یکی از مهم‌ترین تگ‌ها در HTML است که عنوان یک صفحه وب را تعیین می‌کند. این تگ باید درون تگ <head> قرار گیرد و معمولاً در نوار عنوان (title bar) مرورگر و همچنین در نتایج موتورهای جستجو نمایش داده می‌شود. عنوان صفحه نقش مهمی در تجربه کاربری و بهینه‌سازی موتورهای جستجو (SEO) ایفا می‌کند، زیرا به کاربران و موتورهای جستجو کمک می‌کند تا محتوای صفحه را بهتر درک کنند.

ساختار تگ <title> بسیار ساده است و به صورت زیر نوشته می‌شود:

<!DOCTYPE html>
<html>
<head>
    <title>page title</title>
</head>
<body>
    <!-- Page content -->
</body>
</html>

مثال ساده از تگ <title>

در این مثال، یک صفحه وب با عنوان "صفحه نمونه" ایجاد شده است:

<!DOCTYPE html>
<html>
<head>
    <title>Sample page</title>
</head>
<body>
    <h1>Welcome to the sample page!</h1>
    <p>This is a simple example of using the title tag.</p>
</body>
</html>

در این مثال، عنوان "صفحه نمونه" در نوار عنوان مرورگر نمایش داده می‌شود.

اهمیت تگ <title> در SEO

تگ <title> نقش بسیار مهمی در بهینه‌سازی موتورهای جستجو (SEO) دارد. موتورهای جستجو از محتوای تگ <title> برای نمایش عنوان صفحه در نتایج جستجو استفاده می‌کنند. انتخاب عنوان مناسب و مرتبط با محتوای صفحه می‌تواند تأثیر زیادی در جذب کاربران و بهبود رتبه‌بندی صفحه در موتورهای جستجو داشته باشد.

مثال از استفاده بهینه از تگ <title> برای SEO

در این مثال، عنوانی که شامل کلمات کلیدی مرتبط با محتوای صفحه است، استفاده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>HTML training - title tag and its importance in SEO</title>
</head>
<body>
    <h1>HTML tutorial</h1>
    <p>In this article, we examine the title tag and its importance in search engine optimization (SEO).</p>
</body>
</html>

نمایش در نتایج جستجو

در این مثال، موتورهای جستجو از عنوان "آموزش HTML - تگ title و اهمیت آن در SEO" برای نمایش در نتایج جستجو استفاده می‌کنند. این عنوان دقیقاً نشان می‌دهد که محتوای صفحه درباره چیست و می‌تواند کاربران بیشتری را جذب کند.

تگ <title> و تجربه کاربری

علاوه بر اهمیت در SEO، تگ <title> نقش مهمی در تجربه کاربری نیز دارد. عنوانی که به خوبی بیانگر محتوای صفحه باشد، به کاربران کمک می‌کند تا بهتر بفهمند که در کدام صفحه قرار دارند و محتوای آن چیست.

مثال از استفاده مناسب تگ <title> برای تجربه کاربری

<!DOCTYPE html>
<html>
<head>
    <title>Contact us - sample company</title>
</head>
<body>
    <h1>Contact us</h1>
    <p>In this section you can find the contact information of the sample company.</p>
</body>
</html>

در این مثال، عنوان "تماس با ما - شرکت نمونه" به کاربران کمک می‌کند تا به سرعت بفهمند که این صفحه مربوط به بخش تماس با شرکت است.

نکات مهم در استفاده از تگ <title>

  1. کوتاه و مفید: عنوان باید کوتاه و مفید باشد، به طوری که به خوبی محتوای صفحه را بیان کند.
  2. استفاده از کلمات کلیدی: در عنوان صفحه از کلمات کلیدی مرتبط با محتوای صفحه استفاده کنید تا به بهبود SEO کمک کند.
  3. منحصر به فرد بودن: عنوان هر صفحه باید منحصر به فرد باشد و نباید در صفحات دیگر تکرار شود.

تگ <title> یکی از تگ‌های اساسی و بسیار مهم در HTML است که تأثیر زیادی بر تجربه کاربری و بهینه‌سازی موتورهای جستجو (SEO) دارد. با انتخاب عنوان مناسب، می‌توانید محتوای صفحه را به خوبی به کاربران و موتورهای جستجو معرفی کنید و جذب کاربران بیشتری داشته باشید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <title> کمک کرده باشد.

 

کامنت‌گذاری در HTML

کامنت گذاری یکی از ویژگی‌های مهم و مفید در HTML است که به توسعه‌دهندگان وب امکان می‌دهد توضیحات و یادداشت‌هایی را به کدهای خود اضافه کنند بدون اینکه این توضیحات در مرورگر نمایش داده شوند. کامنت‌ها می‌توانند به مستندسازی کد، فهم بهتر کد توسط دیگران و حتی خودتان در آینده کمک کنند. همچنین از کامنت‌ها می‌توان برای غیرفعال کردن موقت بخشی از کد استفاده کرد.

کامنت‌ها در HTML با <!-- شروع و با --> به پایان می‌رسند. هر چیزی که بین این دو علامت قرار گیرد به عنوان کامنت شناخته می‌شود و توسط مرورگر نادیده گرفته می‌شود.

<!-- This is a comment -->

مثال ساده از کامنت گذاری

در این مثال، از کامنت برای توضیح بخش‌های مختلف کد HTML استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>Example of commenting in HTML</title>
    <!-- Page meta tags -->
    <meta charset="UTF-8">
</head>
<body>
    <!-- This section contains the page header -->
    <header>
        <h1>Welcome to the sample page!</h1>
    </header>
    
    <!-- This section contains the main content of the page -->
    <main>
        <p>This is a paragraph.</p>
    </main>
    
    <!-- This section contains the page footer -->
    <footer>
        <p>© 2023 All rights reserved.</p>
    </footer>
</body>
</html>

استفاده از کامنت‌ها برای غیرفعال کردن کد

گاهی اوقات ممکن است بخواهید بخشی از کد را به طور موقت غیرفعال کنید. برای این کار می‌توانید از کامنت‌ها استفاده کنید. در این مثال، یک تگ <p> به صورت موقت غیرفعال شده است:

<!DOCTYPE html>
<html>
<head>
    <title>Example of disabling code with comments</title>
</head>
<body>
    <p>This paragraph is displayed.</p>
    <!-- <p>This paragraph is disabled and will not be displayed.</p> -->
</body>
</html>

نکات مهم در استفاده از کامنت‌ها

  1. مستندسازی کد: کامنت‌ها باید به درستی و با دقت استفاده شوند تا کد را مستند کرده و توضیحات مفیدی ارائه دهند.
  2. کامنت‌های طولانی: برای کامنت‌های طولانی می‌توانید از چندین خط استفاده کنید.
  3. عدم استفاده زیاد: از کامنت‌های بیش از حد استفاده نکنید، زیرا ممکن است خوانایی کد را کاهش دهد.

مثال جامع از کامنت گذاری در HTML

در این مثال، از کامنت‌ها برای توضیح کامل ساختار یک صفحه وب استفاده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>A comprehensive example of commenting in HTML</title>
    <!-- Basic page settings -->
    <meta charset="UTF-8">
    <meta name="description" content="This is an example of commenting in HTML.">
</head>
<body>
    <!-- Page header -->
    <header>
        <h1>Welcome to the sample page!</h1>
    </header>
    
    <!-- Original content -->
    <main>
        <!-- The first paragraph -->
        <p>This is a paragraph that explains the main content.</p>
        
        <!-- Image -->
        <img src="https://via.placeholder.com/150" alt="Sample image">
    </main>
    
    <!-- Footnote -->
    <footer>
        <p>© 2023 All rights reserved.</p>
    </footer>
</body>
</html>

کامنت گذاری در HTML یک ابزار قدرتمند برای مستندسازی و مدیریت کد است. با استفاده از کامنت‌ها می‌توانید کدهای خود را توضیح دهید، بخش‌های مختلف را مشخص کنید و حتی کدهایی را به طور موقت غیرفعال کنید. استفاده صحیح از کامنت‌ها می‌تواند به فهم بهتر کد و تسهیل فرآیند توسعه و نگهداری صفحات وب کمک کند. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از کامنت‌ها در HTML کمک کرده باشد.

 

چگونه می‌توان کدهای HTML یک صفحه وب را دید؟

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

روش‌های مشاهده کدهای HTML

  1. استفاده از ویژگی "View Page Source" در مرورگر
  2. استفاده از ابزارهای توسعه‌دهنده (Developer Tools)
  3. استفاده از افزونه‌ها و ابزارهای آنلاین

1. استفاده از ویژگی "View Page Source" در مرورگر

بیشتر مرورگرهای وب گزینه‌ای برای مشاهده کد منبع صفحه وب دارند. این گزینه معمولاً با نام "View Page Source" یا "View Source" شناخته می‌شود.

مراحل انجام کار:

  1. باز کردن صفحه وب: صفحه وبی را که می‌خواهید کدهای HTML آن را ببینید باز کنید.
  2. کلیک راست: روی هر قسمت از صفحه کلیک راست کنید تا منوی زمینه باز شود.
  3. انتخاب "View Page Source": گزینه "View Page Source" یا "View Source" را انتخاب کنید.

2. استفاده از ابزارهای توسعه‌دهنده (Developer Tools)

ابزارهای توسعه‌دهنده (Developer Tools) ابزارهای قدرتمندی هستند که در مرورگرهای وب تعبیه شده‌اند و به شما امکان می‌دهند تا به طور دقیق‌تر و جزئی‌تر کدهای HTML، CSS و JavaScript صفحات وب را بررسی کنید.

مراحل انجام کار:

  1. باز کردن صفحه وب: صفحه وبی را که می‌خواهید کدهای HTML آن را ببینید باز کنید.
  2. باز کردن Developer Tools: با فشار دادن کلیدهای F12 یا Ctrl + Shift + I (در ویندوز) یا Cmd + Option + I (در مک)، ابزارهای توسعه‌دهنده را باز کنید.
  3. رفتن به تب "Elements": در تب "Elements" می‌توانید کدهای HTML و ساختار DOM صفحه را مشاهده کنید.

3. استفاده از افزونه‌ها و ابزارهای آنلاین

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

مثال:

یکی از افزونه‌های محبوب مرورگر برای مشاهده کدهای HTML "HTML Viewer" است. با نصب این افزونه می‌توانید با یک کلیک کدهای HTML صفحه را مشاهده کنید.

مشاهده کدهای HTML یک صفحه وب یک راه عالی برای یادگیری و الهام‌گیری در طراحی و توسعه وب است. با استفاده از روش‌های مختلف مانند ویژگی "View Page Source"، ابزارهای توسعه‌دهنده و افزونه‌های مرورگر می‌توانید به راحتی کدهای HTML صفحات وب را مشاهده و بررسی کنید. این مهارت به شما کمک می‌کند تا بهتر بفهمید چگونه صفحات وب ساخته می‌شوند و بتوانید از تکنیک‌ها و ترفندهای مختلف استفاده کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از این ابزارها کمک کرده باشد.

 

تگ‌های Text Formatting در HTML

تگ‌های Text Formatting در HTML برای قالب‌بندی و استایل‌دهی به متن استفاده می‌شوند. این تگ‌ها به شما امکان می‌دهند تا متن را به صورت پررنگ، مورب، زیرخط‌دار، بزرگ‌تر، کوچک‌تر و با جلوه‌های دیگری نمایش دهید. استفاده از این تگ‌ها می‌تواند به بهبود خوانایی و جذابیت بصری محتوای وب کمک کند.

در زیر به برخی از پرکاربردترین تگ‌های Text Formatting در HTML اشاره می‌کنیم و نحوه استفاده از آن‌ها را با مثال توضیح می‌دهیم:

1. تگ <b> 

تگ <b> برای نمایش متن به صورت پررنگ (bold) استفاده می‌شود.

<!DOCTYPE html>
<html>
<head>
    <title>Tag example b</title>
</head>
<body>
    <p>This is a <b>bold text </b>.</p>
</body>
</html>

تگ <b>دارای چه attribute هایی است؟

1. id

ویژگی id یک شناسه یکتا به عنصر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این عنصر در CSS یا JavaScript استفاده کرد.

2. class

ویژگی class برای اختصاص یک یا چند کلاس CSS به عنصر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.

3. style

ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به عنصر استفاده می‌شود.

4. title

ویژگی title توضیحات اضافی در مورد عنصر فراهم می‌کند که وقتی کاربر موس را روی عنصر قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.

5. lang

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

6. dir

ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.

7. data-*

ویژگی‌های سفارشی data-* برای ذخیره اطلاعات سفارشی در عناصر HTML استفاده می‌شوند. این ویژگی‌ها می‌توانند توسط JavaScript برای افزودن قابلیت‌های تعاملی به صفحه استفاده شوند.

مثال جامع با استفاده از ویژگی‌های مختلف تگ <b>

در این مثال، از ویژگی‌های id, class, style, title, lang, dir, و data-* برای سفارشی‌سازی تگ <b> استفاده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>Comprehensive example of b tag with attributes</title>
    <style>
        .highlight {
            color: blue;
        }
    </style>
</head>
<body>
    <b id="unique-bold-text" class="highlight" style="font-size: 20px;" title="This is a bold text" lang="fa" dir="rtl" data-info="customData">
        This bold text is customized using various features.
    </b>
</body>
</html>

در این مثال، تگ <b> با استفاده از ویژگی‌های مختلف سفارشی‌سازی شده است تا به شما نشان دهد که چگونه می‌توانید از این ویژگی‌ها برای کنترل بیشتر بر روی نمایش و رفتار تگ <b> استفاده کنید.

تگ <b> در HTML به خودی خود ویژگی‌های خاصی ندارد، اما می‌تواند از ویژگی‌های عمومی HTML مانند id, class, style, title, lang, dir, و data-* استفاده کند. این ویژگی‌ها به شما امکان می‌دهند تا کنترل بیشتری بر روی نمایش و رفتار این تگ داشته باشید و صفحات وب خود را به شکلی منظم و حرفه‌ای طراحی کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <b> کمک کرده باشد.

 

2. تگ  <strong>

تگ <strong> در HTML برای نمایش متن به صورت پررنگ (bold) استفاده می‌شود، اما علاوه بر این، معنای معنایی (semantic meaning) بیشتری نیز به متن می‌بخشد. استفاده از تگ <strong> نشان‌دهنده اهمیت و تأکید بیشتر بر روی متن است، به طوری که موتورهای جستجو و فناوری‌های دسترسی مانند صفحه‌خوان‌ها نیز می‌توانند این تأکید را درک کنند و آن را به کاربران منتقل کنند. این ویژگی باعث می‌شود که تگ <strong> از نظر SEO و دسترسی اهمیت ویژه‌ای داشته باشد.

ساختار تگ <strong> بسیار ساده است و به صورت زیر نوشته می‌شود:

<strong>Bold and important text</strong>

مثال ساده از تگ <strong>

در این مثال، از تگ <strong> برای نمایش یک جمله به صورت پررنگ و با تأکید استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>Example of the strong tag</title>
</head>
<body>
    <p>This sentence is <strong>very important</strong> and should be paid attention to.</p>
</body>
</html>

تفاوت بین تگ <b> و <strong>

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

تگ <strong دارای چه attribute هایی است؟

1. id

ویژگی id یک شناسه یکتا به عنصر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این عنصر در CSS یا JavaScript استفاده کرد.

2. class

ویژگی class برای اختصاص یک یا چند کلاس CSS به عنصر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.

3. style

ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به عنصر استفاده می‌شود.

4. title

ویژگی title توضیحات اضافی در مورد عنصر فراهم می‌کند که وقتی کاربر موس را روی عنصر قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.

5. lang

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

6. dir

ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.

7. data-*

ویژگی‌های سفارشی data-* برای ذخیره اطلاعات سفارشی در عناصر HTML استفاده می‌شوند. این ویژگی‌ها می‌توانند توسط JavaScript برای افزودن قابلیت‌های تعاملی به صفحه استفاده شوند.

مثال جامع با استفاده از ویژگی‌های مختلف تگ <strong>

در این مثال، از ویژگی‌های id, class, style, title, lang, dir, و data-* برای سفارشی‌سازی تگ <strong> استفاده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>Comprehensive example of strong tag with attributes</title>
    <style>
        .highlight {
            color: blue;
        }
    </style>
</head>
<body>
    <strong id="important-text" class="highlight" style="font-size: 20px;" title="This is a bold and important text" lang="fa" dir="rtl" data-info="customData">
        This bold and important text is customized using various features.
    </strong>
</body>
</html>

در این مثال، تگ <strong> با استفاده از ویژگی‌های مختلف سفارشی‌سازی شده است تا به شما نشان دهد که چگونه می‌توانید از این ویژگی‌ها برای کنترل بیشتر بر روی نمایش و رفتار تگ <strong> استفاده کنید.

تگ <strong> در HTML یک ابزار قدرتمند برای نمایش متن به صورت پررنگ و با تأکید بیشتر است. این تگ علاوه بر تأثیر بصری، معنای معنایی بیشتری به متن می‌بخشد که می‌تواند برای SEO و دسترسی مفید باشد. با استفاده از ویژگی‌های عمومی HTML مانند id, class, style, title, lang, dir, و data-* می‌توانید کنترل کاملی بر روی نمایش و رفتار این تگ داشته باشید و صفحات وب خود را به شکلی حرفه‌ای و کاربرپسند طراحی کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <strong> کمک کرده باشد.

 

3. تگ <i>

تگ <i> در HTML برای نمایش متن به صورت مورب (italic) استفاده می‌شود. این تگ به صورت اصلی برای نمایش اصطلاحات فنی، عناوین کتاب‌ها، اسامی علمی و دیگر متونی که نیاز به تأکید بصری دارند، به کار می‌رود. تگ <i> می‌تواند به متن جلوه‌ای خاص بدهد و خوانایی آن را افزایش دهد. با این حال، اگر نیاز به تأکید معنایی بیشتری دارید، توصیه می‌شود از تگ <em> استفاده کنید.

ساختار تگ <i> بسیار ساده است و به صورت زیر نوشته می‌شود:

<i>Italic text</i>

مثال ساده از تگ <i>

در این مثال، از تگ <i> برای نمایش یک جمله به صورت مورب استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>Example of tag i</title>
</head>
<body>
    <p>This sentence is <i>italic</i> and should be noted.</p>
</body>
</html>

تفاوت بین تگ <i> و <em>

تگ <i> فقط متن را به صورت مورب نمایش می‌دهد و معنای معنایی خاصی به متن اضافه نمی‌کند. در مقابل، تگ <em> علاوه بر مورب کردن متن، تأکید معنایی بیشتری به آن می‌بخشد و می‌تواند برای تأکید بیشتر بر اهمیت متن استفاده شود.

تگ <i>دارای چه attribute هایی است؟

1. id

ویژگی id یک شناسه یکتا به عنصر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این عنصر در CSS یا JavaScript استفاده کرد.

2. class

ویژگی class برای اختصاص یک یا چند کلاس CSS به عنصر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.

3. style

ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به عنصر استفاده می‌شود.

4. title

ویژگی title توضیحات اضافی در مورد عنصر فراهم می‌کند که وقتی کاربر موس را روی عنصر قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.

5. lang

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

6. dir

ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.

7. data-*

ویژگی‌های سفارشی data-* برای ذخیره اطلاعات سفارشی در عناصر HTML استفاده می‌شوند. این ویژگی‌ها می‌توانند توسط JavaScript برای افزودن قابلیت‌های تعاملی به صفحه استفاده شوند.

مثال جامع با استفاده از ویژگی‌های مختلف تگ <i>

در این مثال، از ویژگی‌های id, class, style, title, lang, dir, و data-* برای سفارشی‌سازی تگ <i> استفاده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>Comprehensive example of i tag with attributes</title>
    <style>
        .highlight {
            color: green;
        }
    </style>
</head>
<body>
    <i id="unique-italic-text" class="highlight" style="font-size: 18px;" title="This is an italicized text" lang="fa" dir="rtl" data-info="customData">
        This italic text is customized using various features.
    </i>
</body>
</html>

در این مثال، تگ <i> با استفاده از ویژگی‌های مختلف سفارشی‌سازی شده است تا به شما نشان دهد که چگونه می‌توانید از این ویژگی‌ها برای کنترل بیشتر بر روی نمایش و رفتار تگ <i> استفاده کنید.

تگ <i> در HTML یک ابزار قدرتمند برای نمایش متن به صورت مورب است. این تگ می‌تواند به متن جلوه‌ای خاص بدهد و خوانایی آن را افزایش دهد. با استفاده از ویژگی‌های عمومی HTML مانند id, class, style, title, lang, dir, و data-* می‌توانید کنترل کاملی بر روی نمایش و رفتار این تگ داشته باشید و صفحات وب خود را به شکلی منظم و حرفه‌ای طراحی کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <i> کمک کرده باشد.

 

4. تگ <em>

تگ <em> در HTML برای تأکید کردن بر روی متن استفاده می‌شود و به متن جلوه‌ی مورب (italic) می‌دهد. این تگ علاوه بر تغییر ظاهر متن، به مرورگرها و فناوری‌های کمکی مانند صفحه‌خوان‌ها اعلام می‌کند که متن مورد نظر باید با تأکید بیشتری خوانده شود. این ویژگی باعث می‌شود که تگ <em> از نظر معنایی (semantic) اهمیت بیشتری نسبت به تگ <i> داشته باشد.

ساختار تگ <em> بسیار ساده است و به صورت زیر نوشته می‌شود:

<em>Text with emphasis</em>

مثال ساده از تگ <em>

در این مثال، از تگ <em> برای نمایش یک جمله به صورت مورب و با تأکید استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>Example of the em tag</title>
</head>
<body>
    <p>This sentence is <em>very important</em> and should be paid attention to.</p>
</body>
</html>

تگ <em>دارای چه attribute هایی است؟

1. id

ویژگی id یک شناسه یکتا به عنصر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این عنصر در CSS یا JavaScript استفاده کرد.

2. class

ویژگی class برای اختصاص یک یا چند کلاس CSS به عنصر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.

3. style

ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به عنصر استفاده می‌شود.

4. title

ویژگی title توضیحات اضافی در مورد عنصر فراهم می‌کند که وقتی کاربر موس را روی عنصر قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.

5. lang

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

6. dir

ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.

7. data-*

ویژگی‌های سفارشی data-* برای ذخیره اطلاعات سفارشی در عناصر HTML استفاده می‌شوند. این ویژگی‌ها می‌توانند توسط JavaScript برای افزودن قابلیت‌های تعاملی به صفحه استفاده شوند.

مثال جامع با استفاده از ویژگی‌های مختلف تگ <em>

در این مثال، از ویژگی‌های id, class, style, title, lang, dir, و data-* برای سفارشی‌سازی تگ <em> استفاده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>Comprehensive example of em tag with attributes</title>
    <style>
        .highlight {
            color: blue;
        }
    </style>
</head>
<body>
    <em id="important-text" class="highlight" style="font-size: 20px;" title="This is an emphatic text" lang="fa" dir="rtl" data-info="customData">
        This text is customized by emphasizing and using different features.
    </em>
</body>
</html>

در این مثال، تگ <em> با استفاده از ویژگی‌های مختلف سفارشی‌سازی شده است تا به شما نشان دهد که چگونه می‌توانید از این ویژگی‌ها برای کنترل بیشتر بر روی نمایش و رفتار تگ <em> استفاده کنید.

تگ <em> در HTML یک ابزار قدرتمند برای نمایش متن به صورت مورب و با تأکید معنایی بیشتر است. این تگ به مرورگرها و فناوری‌های کمکی اعلام می‌کند که متن باید با تأکید بیشتری خوانده شود، که این امر می‌تواند برای SEO و دسترسی مفید باشد. با استفاده از ویژگی‌های عمومی HTML مانند id, class, style, title, lang, dir, و data-* می‌توانید کنترل کاملی بر روی نمایش و رفتار این تگ داشته باشید و صفحات وب خود را به شکلی منظم و حرفه‌ای طراحی کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <em> کمک کرده باشد.

 

5. تگ <u>

تگ <u> در HTML برای زیرخط‌دار کردن متن استفاده می‌شود. این تگ به متن ظاهری زیرخط‌دار می‌دهد و معمولاً برای تأکید بر روی بخش‌های خاصی از متن یا نمایش لینک‌های نادیده‌گرفته‌شده به کار می‌رود. با این حال، در طراحی وب مدرن، استفاده از CSS برای ایجاد زیرخط‌دار کردن متن ترجیح داده می‌شود تا جداسازی بهتر بین محتوا و استایل صورت گیرد.

ساختار تگ <u> بسیار ساده است و به صورت زیر نوشته می‌شود:

<u>Underlined text</u>

مثال ساده از تگ <u>

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

<!DOCTYPE html>
<html>
<head>
    <title>Example of tag u</title>
</head>
<body>
    <p>This sentence is <u>underlined</u> and should be noted.</p>
</body>
</html>

تگ <u>دارای چه attribute هایی است؟

1. id

ویژگی id یک شناسه یکتا به عنصر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این عنصر در CSS یا JavaScript استفاده کرد.

2. class

ویژگی class برای اختصاص یک یا چند کلاس CSS به عنصر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.

3. style

ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به عنصر استفاده می‌شود.

4. title

ویژگی title توضیحات اضافی در مورد عنصر فراهم می‌کند که وقتی کاربر موس را روی عنصر قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.

5. lang

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

6. dir

ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.

7. data-*

ویژگی‌های سفارشی data-* برای ذخیره اطلاعات سفارشی در عناصر HTML استفاده می‌شوند. این ویژگی‌ها می‌توانند توسط JavaScript برای افزودن قابلیت‌های تعاملی به صفحه استفاده شوند.

مثال جامع با استفاده از ویژگی‌های مختلف تگ <u>

در این مثال، از ویژگی‌های id, class, style, title, lang, dir, و data-* برای سفارشی‌سازی تگ <u> استفاده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>Comprehensive example of u tag with attributes</title>
    <style>
        .highlight {
            color: green;
        }
    </style>
</head>
<body>
    <u id="unique-underline-text" class="highlight" style="font-size: 18px;" title="This is an underlined text" lang="fa" dir="rtl" data-info="customData">
        This underlined text is customized using various properties.
    </u>
</body>
</html>

در این مثال، تگ <u> با استفاده از ویژگی‌های مختلف سفارشی‌سازی شده است تا به شما نشان دهد که چگونه می‌توانید از این ویژگی‌ها برای کنترل بیشتر بر روی نمایش و رفتار تگ <u> استفاده کنید.

تگ <u> در HTML یک ابزار قدرتمند برای نمایش متن به صورت زیرخط‌دار است. این تگ می‌تواند به متن جلوه‌ای خاص بدهد و توجه بیشتری به آن جلب کند. با استفاده از ویژگی‌های عمومی HTML مانند id, class, style, title, lang, dir, و data-* می‌توانید کنترل کاملی بر روی نمایش و رفتار این تگ داشته باشید و صفحات وب خود را به شکلی منظم و حرفه‌ای طراحی کنید. با این حال، در طراحی وب مدرن، توصیه می‌شود که برای زیرخط‌دار کردن متن از CSS استفاده کنید تا جداسازی بهتری بین محتوا و استایل داشته باشید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <u> کمک کرده باشد.

 

6. تگ <ins>

تگ <ins> در HTML برای نشان دادن متن اضافه شده یا درج شده (inserted text) استفاده می‌شود. این تگ به متن ظاهری زیرخط‌دار (underline) می‌دهد تا به کاربران نشان دهد که این متن به محتوای موجود اضافه شده است. تگ <ins> می‌تواند در مواقعی که نیاز به نمایش تغییرات و به‌روزرسانی‌های یک سند یا صفحه وب دارید، بسیار مفید باشد.

ساختار تگ <ins> بسیار ساده است و به صورت زیر نوشته می‌شود:

<ins>Inserted text</ins>

مثال ساده از تگ <ins>

در این مثال، از تگ <ins> برای نمایش یک جمله به صورت زیرخط‌دار استفاده می‌کنیم تا نشان دهد که این متن به محتوای موجود اضافه شده است:

<!DOCTYPE html>
<html>
<head>
    <title>Example of the ins tag</title>
</head>
<body>
    <p>This sentence is <ins>newly added</ins> and should be noted.</p>
</body>
</html>

استفاده از تگ <ins> برای نمایش تغییرات

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

<!DOCTYPE html>
<html>
<head>
    <title>Example of displaying changes with the ins tag</title>
</head>
<body>
    <p>This is the main sentence.</p>
    <p>This sentence is <ins>newly added</ins>.</p>
</body>
</html>

تفاوت بین تگ <ins> و <u>

تگ <u> تنها برای زیرخط‌دار کردن متن استفاده می‌شود و هیچ معنای معنایی خاصی به متن اضافه نمی‌کند. در مقابل، تگ <ins> علاوه بر زیرخط‌دار کردن متن، به مرورگرها و فناوری‌های کمکی اعلام می‌کند که این متن به سند اضافه شده است. این تفاوت معنایی باعث می‌شود که استفاده از تگ <ins> در مواقعی که نیاز به نمایش تغییرات دارید، مناسب‌تر باشد.

تگ <ins>دارای چه attribute هایی است؟

1. id

ویژگی id یک شناسه یکتا به عنصر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این عنصر در CSS یا JavaScript استفاده کرد.

2. class

ویژگی class برای اختصاص یک یا چند کلاس CSS به عنصر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.

3. style

ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به عنصر استفاده می‌شود.

4. title

ویژگی title توضیحات اضافی در مورد عنصر فراهم می‌کند که وقتی کاربر موس را روی عنصر قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.

5. lang

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

6. dir

ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.

7. data-*

ویژگی‌های سفارشی data-* برای ذخیره اطلاعات سفارشی در عناصر HTML استفاده می‌شوند. این ویژگی‌ها می‌توانند توسط JavaScript برای افزودن قابلیت‌های تعاملی به صفحه استفاده شوند.

8. cite

ویژگی cite برای ارائه URL منبعی که متن درج شده از آن گرفته شده است، استفاده می‌شود.

9. datetime

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

مثال جامع با استفاده از ویژگی‌های مختلف تگ <ins>

در این مثال، از ویژگی‌های cite, datetime, id, class, style, title, lang, dir, و data-* برای سفارشی‌سازی تگ <ins> استفاده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>Comprehensive example of ins tag with attributes</title>
    <style>
        .highlight {
            color: blue;
        }
    </style>
</head>
<body>
    <ins cite="https://example.com" datetime="2023-06-08T14:00:00Z" id="unique-inserted-text" class="highlight" style="font-size: 20px;" title="This is an embedded text" lang="fa" dir="rtl" data-info="customData">
        This embedded text is customized using various features.
    </ins>
</body>
</html>

در این مثال، تگ <ins> با استفاده از ویژگی‌های مختلف سفارشی‌سازی شده است تا به شما نشان دهد که چگونه می‌توانید از این ویژگی‌ها برای کنترل بیشتر بر روی نمایش و رفتار تگ <ins> استفاده کنید.

تگ <ins> در HTML یک ابزار قدرتمند برای نمایش متن درج شده با تأکید بر تغییرات و اضافات است. این تگ به متن جلوه‌ای خاص می‌دهد و توجه بیشتری به آن جلب می‌کند. با استفاده از ویژگی‌های عمومی HTML مانند cite, datetime, id, class, style, title, lang, dir, و data-* می‌توانید کنترل کاملی بر روی نمایش و رفتار این تگ داشته باشید و صفحات وب خود را به شکلی منظم و حرفه‌ای طراحی کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <ins> کمک کرده باشد.

 

7. تگ <del>

تگ <del> در HTML برای نشان دادن متن حذف شده (deleted text) استفاده می‌شود. این تگ به معنای حذف یا خط زدن متن در یک سند است و معمولاً با یک خط از وسط متن همراه است. استفاده از تگ <del> می‌تواند در مواردی که نیاز به نمایش تغییرات یا حذف‌های انجام شده در متن دارید، بسیار مفید باشد. این تگ همچنین به مرورگرها و فناوری‌های کمکی اعلام می‌کند که این متن از سند اصلی حذف شده است.

ساختار تگ <del> بسیار ساده است و به صورت زیر نوشته می‌شود:

<del>Deleted text</del>

مثال ساده از تگ <del>

در این مثال، از تگ <del> برای نمایش یک جمله به صورت حذف شده استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>del tag example</title>
</head>
<body>
    <p>This sentence has been <del>deleted by the author</del>.</p>
</body>
</html>

تگ <del>دارای چه attribute هایی است؟

1. id

ویژگی id یک شناسه یکتا به عنصر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این عنصر در CSS یا JavaScript استفاده کرد.

2. class

ویژگی class برای اختصاص یک یا چند کلاس CSS به عنصر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.

3. style

ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به عنصر استفاده می‌شود.

4. title

ویژگی title توضیحات اضافی در مورد عنصر فراهم می‌کند که وقتی کاربر موس را روی عنصر قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.

5. lang

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

6. dir

ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.

7. data-*

ویژگی‌های سفارشی data-* برای ذخیره اطلاعات سفارشی در عناصر HTML استفاده می‌شوند. این ویژگی‌ها می‌توانند توسط JavaScript برای افزودن قابلیت‌های تعاملی به صفحه استفاده شوند.

8. cite

ویژگی cite برای ارائه URL منبعی که متن درج شده از آن گرفته شده است، استفاده می‌شود.

9. datetime

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

مثال جامع با استفاده از ویژگی‌های مختلف تگ <del>

در این مثال، از ویژگی‌های cite, datetime, id, class, style, title, lang, dir, و data-* برای سفارشی‌سازی تگ <del> استفاده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>Comprehensive example of del tag with attributes</title>
    <style>
        .highlight {
            color: gray;
        }
    </style>
</head>
<body>
    <del cite="https://example.com" datetime="2023-06-08T14:00:00Z" id="unique-deleted-text" class="highlight" style="font-size: 20px;" title="This is a deleted text" lang="fa" dir="rtl" data-info="customData">
       This deleted text is customized using various features.
    </del>
</body>
</html>

در این مثال، تگ <del> با استفاده از ویژگی‌های مختلف سفارشی‌سازی شده است تا به شما نشان دهد که چگونه می‌توانید از این ویژگی‌ها برای کنترل بیشتر بر روی نمایش و رفتار تگ <del> استفاده کنید.

تگ <del> در HTML یک ابزار قدرتمند برای نمایش متن حذف شده با تأکید بر تغییرات و حذف‌ها است. این تگ به متن جلوه‌ای خاص می‌دهد و توجه بیشتری به آن جلب می‌کند. با استفاده از ویژگی‌های عمومی HTML مانند cite, datetime, id, class, style, title, lang, dir, و data-* می‌توانید کنترل کاملی بر روی نمایش و رفتار این تگ داشته باشید و صفحات وب خود را به شکلی منظم و حرفه‌ای طراحی کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <del> کمک کرده باشد.

 

8. تگ <mark>

تگ <mark> در HTML برای برجسته کردن (highlight) متن استفاده می‌شود. این تگ معمولاً به متن پس‌زمینه‌ای زرد رنگ می‌دهد تا توجه خواننده را به آن بخش خاص جلب کند. استفاده از تگ <mark> می‌تواند در مواردی که نیاز به تأکید بر روی بخش‌های مهم متن دارید، بسیار مفید باشد. این تگ به معنای واقعی کلمه متن را برجسته می‌کند و می‌تواند به کاربرانی که به دنبال اطلاعات کلیدی هستند کمک کند تا سریع‌تر به هدف خود برسند.

ساختار تگ <mark> بسیار ساده است و به صورت زیر نوشته می‌شود:

<mark>Highlighted text</mark>

مثال ساده از تگ <mark>

در این مثال، از تگ <mark> برای برجسته کردن یک جمله استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>Mark tag example</title>
</head>
<body>
    <p>This sentence is <mark>very important</mark> and should be paid attention to.</p>
</body>
</html>

تگ <mark>دارای چه attribute هایی است؟

1. id

ویژگی id یک شناسه یکتا به عنصر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این عنصر در CSS یا JavaScript استفاده کرد.

2. class

ویژگی class برای اختصاص یک یا چند کلاس CSS به عنصر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.

3. style

ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به عنصر استفاده می‌شود.

4. title

ویژگی title توضیحات اضافی در مورد عنصر فراهم می‌کند که وقتی کاربر موس را روی عنصر قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.

5. lang

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

6. dir

ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.

7. data-*

ویژگی‌های سفارشی data-* برای ذخیره اطلاعات سفارشی در عناصر HTML استفاده می‌شوند. این ویژگی‌ها می‌توانند توسط JavaScript برای افزودن قابلیت‌های تعاملی به صفحه استفاده شوند.

مثال جامع با استفاده از ویژگی‌های مختلف تگ <mark>

در این مثال، از ویژگی‌های id, class, style, title, lang, dir, و data-* برای سفارشی‌سازی تگ <mark> استفاده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>Comprehensive example of mark tag with attributes</title>
    <style>
        .highlight {
            background-color: yellow;
            color: black;
        }
    </style>
</head>
<body>
    <p>
        This is a text with
        <mark id="unique-mark-text" class="highlight" style="font-size: 20px;" title="This is an outstanding text" lang="fa" dir="rtl" data-info="customData">
            Using different features
        </mark> 
        .
    </p>
</body>
</html>

در این مثال، تگ <mark> با استفاده از ویژگی‌های مختلف سفارشی‌سازی شده است تا به شما نشان دهد که چگونه می‌توانید از این ویژگی‌ها برای کنترل بیشتر بر روی نمایش و رفتار تگ <mark> استفاده کنید.

تگ <mark> در HTML یک ابزار قدرتمند برای برجسته کردن متن و جلب توجه خواننده به بخش‌های خاصی از محتوا است. این تگ به متن جلوه‌ای خاص می‌دهد و می‌تواند به کاربرانی که به دنبال اطلاعات کلیدی هستند کمک کند تا سریع‌تر به هدف خود برسند. با استفاده از ویژگی‌های عمومی HTML مانند id, class, style, title, lang, dir, و data-* می‌توانید کنترل کاملی بر روی نمایش و رفتار این تگ داشته باشید و صفحات وب خود را به شکلی منظم و حرفه‌ای طراحی کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <mark> کمک کرده باشد.

 

9. تگ <small>

تگ <small> در HTML برای نمایش متن با اندازه کوچک‌تر نسبت به متن عادی استفاده می‌شود. این تگ معمولاً برای نشان دادن اطلاعات فرعی، یادداشت‌ها یا جزئیات کمتر مهم استفاده می‌شود. استفاده از تگ <small> می‌تواند به خوانندگان کمک کند تا تفاوت بین اطلاعات اصلی و فرعی را بهتر تشخیص دهند.

ساختار تگ <small> بسیار ساده است و به صورت زیر نوشته می‌شود:

<small>Smaller text</small>

مثال ساده از تگ <small>

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

<!DOCTYPE html>
<html>
<head>
    <title>Example of small tag</title>
</head>
<body>
    <p>This sentence is <small>smaller in size</small> and should be paid attention to.</p>
</body>
</html>

تگ <small>دارای چه attribute هایی است؟

1. id

ویژگی id یک شناسه یکتا به عنصر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این عنصر در CSS یا JavaScript استفاده کرد.

2. class

ویژگی class برای اختصاص یک یا چند کلاس CSS به عنصر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.

3. style

ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به عنصر استفاده می‌شود.

4. title

ویژگی title توضیحات اضافی در مورد عنصر فراهم می‌کند که وقتی کاربر موس را روی عنصر قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.

5. lang

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

6. dir

ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.

7. data-*

ویژگی‌های سفارشی data-* برای ذخیره اطلاعات سفارشی در عناصر HTML استفاده می‌شوند. این ویژگی‌ها می‌توانند توسط JavaScript برای افزودن قابلیت‌های تعاملی به صفحه استفاده شوند.

مثال جامع با استفاده از ویژگی‌های مختلف تگ <small>

در این مثال، از ویژگی‌های id, class, style, title, lang, dir, و data-* برای سفارشی‌سازی تگ <small> استفاده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>A comprehensive example of the small tag with attributes</title>
    <style>
        .highlight {
            color: blue;
        }
    </style>
</head>
<body>
    <p>
        This is a text with
      <small id="unique-small-text" class="highlight" style="font-size: 0.8em;" title="This is a smaller text" lang="en" dir="rtl" data-info="customData">
        Using different features
      </small>
        .
    </p>
</body>
</html>

در این مثال، تگ <small> با استفاده از ویژگی‌های مختلف سفارشی‌سازی شده است تا به شما نشان دهد که چگونه می‌توانید از این ویژگی‌ها برای کنترل بیشتر بر روی نمایش و رفتار تگ <small> استفاده کنید.

تگ <small> در HTML یک ابزار قدرتمند برای نمایش متن به صورت کوچک‌تر و تأکید کمتر است. این تگ می‌تواند به شما کمک کند تا اطلاعات تکمیلی یا جزئیات کم‌اهمیت‌تر را به صورت بصری متمایز کنید. با استفاده از ویژگی‌های عمومی HTML مانند id, class, style, title, lang, dir, و data-* می‌توانید کنترل کاملی بر روی نمایش و رفتار این تگ داشته باشید و صفحات وب خود را به شکلی منظم و حرفه‌ای طراحی کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <small> کمک کرده باشد.

 

10. تگ <sub>

تگ <sub> در HTML برای نمایش متن به صورت زیرنویس (subscript) استفاده می‌شود. این تگ معمولاً برای فرمول‌های شیمیایی، متون علمی، ریاضیاتی و حتی یادداشت‌های پاورقی به کار می‌رود. متن درون تگ <sub> به اندازه کوچکتر و پایین‌تر از خط پایه قرار می‌گیرد تا نشان دهد که بخشی از متن اصلی نیست و به صورت توضیحی یا تکمیلی ارائه می‌شود.

ساختار تگ <sub> بسیار ساده است و به صورت زیر نوشته می‌شود:

<sub>Subtitle text</sub>

مثال ساده از تگ <sub>

در این مثال، از تگ <sub> برای نمایش یک فرمول شیمیایی استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>Sub tag example</title>
</head>
<body>
    <p>Chemical formula of water: H<sub>2</sub>O</p>
</body>
</html>

تگ <sub>دارای چه attribute هایی است؟

1. id

ویژگی id یک شناسه یکتا به عنصر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این عنصر در CSS یا JavaScript استفاده کرد.

2. class

ویژگی class برای اختصاص یک یا چند کلاس CSS به عنصر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.

3. style

ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به عنصر استفاده می‌شود.

4. title

ویژگی title توضیحات اضافی در مورد عنصر فراهم می‌کند که وقتی کاربر موس را روی عنصر قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.

5. lang

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

6. dir

ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.

7. data-*

ویژگی‌های سفارشی data-* برای ذخیره اطلاعات سفارشی در عناصر HTML استفاده می‌شوند. این ویژگی‌ها می‌توانند توسط JavaScript برای افزودن قابلیت‌های تعاملی به صفحه استفاده شوند.

مثال جامع با استفاده از ویژگی‌های مختلف تگ <sub>

در این مثال، از ویژگی‌های id, class, style, title, lang, dir, و data-* برای سفارشی‌سازی تگ <sub> استفاده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>Comprehensive example of sub tag with attributes</title>
    <style>
        .highlight {
            color: green;
        }
    </style>
</head>
<body>
    <p>
       Chemical formula of water:
         <span id="unique-sub-text" class="highlight" style="font-size: 0.8em;" title="This is a subtitle text" lang="fa" dir="rtl" data-info="customData">
          H<sub>2</sub>O
         </span>
    </p>
</body>
</html>

در این مثال، تگ <sub> با استفاده از ویژگی‌های مختلف سفارشی‌سازی شده است تا به شما نشان دهد که چگونه می‌توانید از این ویژگی‌ها برای کنترل بیشتر بر روی نمایش و رفتار تگ <sub> استفاده کنید.

تگ <sub> در HTML یک ابزار قدرتمند برای نمایش متن به صورت زیرنویس است. این تگ می‌تواند به شما کمک کند تا اطلاعات علمی، فرمول‌ها و متون ریاضیاتی را به صورت خوانا و قابل فهم نمایش دهید. با استفاده از ویژگی‌های عمومی HTML مانند id, class, style, title, lang, dir, و data-* می‌توانید کنترل کاملی بر روی نمایش و رفتار این تگ داشته باشید و صفحات وب خود را به شکلی منظم و حرفه‌ای طراحی کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <sub> کمک کرده باشد.

 

11. تگ <sup>

تگ <sup> در HTML برای نمایش متن به صورت بالانویس (superscript) استفاده می‌شود. این تگ معمولاً برای فرمول‌های ریاضی، متون علمی، شیمیایی و حتی یادداشت‌های مرجع به کار می‌رود. متن درون تگ <sup> به اندازه کوچکتر و بالاتر از خط پایه قرار می‌گیرد تا نشان دهد که بخشی از متن اصلی نیست و به صورت توضیحی یا تکمیلی ارائه می‌شود.

ساختار تگ <sup> بسیار ساده است و به صورت زیر نوشته می‌شود:

<sup>superscript text</sup>

مثال ساده از تگ <sup>

در این مثال، از تگ <sup> برای نمایش یک فرمول ریاضی استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>Example of the sup tag</title>
</head>
<body>
    <p>The famous formula: E = mc<sup>2</sup></p>
</body>
</html>

تگ <sup>دارای چه attribute هایی است؟

1. id

ویژگی id یک شناسه یکتا به عنصر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این عنصر در CSS یا JavaScript استفاده کرد.

2. class

ویژگی class برای اختصاص یک یا چند کلاس CSS به عنصر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.

3. style

ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به عنصر استفاده می‌شود.

4. title

ویژگی title توضیحات اضافی در مورد عنصر فراهم می‌کند که وقتی کاربر موس را روی عنصر قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.

5. lang

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

6. dir

ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.

7. data-*

ویژگی‌های سفارشی data-* برای ذخیره اطلاعات سفارشی در عناصر HTML استفاده می‌شوند. این ویژگی‌ها می‌توانند توسط JavaScript برای افزودن قابلیت‌های تعاملی به صفحه استفاده شوند.

مثال جامع با استفاده از ویژگی‌های مختلف تگ <sup>

در این مثال، از ویژگی‌های id, class, style, title, lang, dir, و data-* برای سفارشی‌سازی تگ <sup> استفاده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>Comprehensive example of sup tag with attributes</title>
    <style>
        .highlight {
            color: green;
        }
    </style>
</head>
<body>
    <p>
        The famous formula: E = mc
        <sup id="unique-sup-text" class="highlight" style="font-size: 0.8em;" title="This is a superscript text" lang="fa" dir="rtl" data-info="customData">
            2
        </sup>
    </p>
</body>
</html>

در این مثال، تگ <sup> با استفاده از ویژگی‌های مختلف سفارشی‌سازی شده است تا به شما نشان دهد که چگونه می‌توانید از این ویژگی‌ها برای کنترل بیشتر بر روی نمایش و رفتار تگ <sup> استفاده کنید.

تگ <sup> در HTML یک ابزار قدرتمند برای نمایش متن به صورت بالانویس است. این تگ می‌تواند به شما کمک کند تا اطلاعات علمی، فرمول‌ها و متون ریاضیاتی را به صورت خوانا و قابل فهم نمایش دهید. با استفاده از ویژگی‌های عمومی HTML مانند id, class, style, title, lang, dir, و data-* می‌توانید کنترل کاملی بر روی نمایش و رفتار این تگ داشته باشید و صفحات وب خود را به شکلی منظم و حرفه‌ای طراحی کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <sup> کمک کرده باشد.

 

12. تگ <abbr>

تگ <abbr> در HTML برای نمایش اختصارات (abbreviations) استفاده می‌شود. این تگ به مرورگرها و موتورهای جستجو کمک می‌کند تا اختصار را شناسایی کرده و معنای کامل آن را درک کنند. با استفاده از ویژگی title، می‌توانید توضیح یا شکل کامل اختصار را ارائه دهید که وقتی کاربر موس را روی اختصار قرار می‌دهد، به صورت یک ابزارک (tooltip) نمایش داده می‌شود. این تگ می‌تواند به بهبود دسترسی و تجربه کاربری کمک کند.

ساختار تگ <abbr> بسیار ساده است و به صورت زیر نوشته می‌شود:

<abbr title="Abbreviation explanation">Abbreviation</abbr>

مثال ساده از تگ <abbr>

در این مثال، از تگ <abbr> برای نمایش یک اختصار استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>Example of abbr tag</title>
</head>
<body>
    <p>The <abbr title="HyperText Markup Language">HTML</abbr> tag is one of the most widely used markup languages.</p>
</body>
</html>

در این مثال، وقتی کاربر موس را روی "HTML" قرار می‌دهد، عبارت "HyperText Markup Language" نمایش داده می‌شود.

تگ <abbr>دارای چه attribute هایی است؟

1. id

ویژگی id یک شناسه یکتا به عنصر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این عنصر در CSS یا JavaScript استفاده کرد.

2. class

ویژگی class برای اختصاص یک یا چند کلاس CSS به عنصر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.

3. style

ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به عنصر استفاده می‌شود.

4. title

ویژگی title توضیحات اضافی در مورد عنصر فراهم می‌کند که وقتی کاربر موس را روی عنصر قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.

5. lang

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

6. dir

ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.

7. data-*

ویژگی‌های سفارشی data-* برای ذخیره اطلاعات سفارشی در عناصر HTML استفاده می‌شوند. این ویژگی‌ها می‌توانند توسط JavaScript برای افزودن قابلیت‌های تعاملی به صفحه استفاده شوند.

مثال جامع با استفاده از ویژگی‌های مختلف تگ <abbr>

در این مثال، از ویژگی‌های id, class, style, title, lang, dir, و data-* برای سفارشی‌سازی تگ <abbr> استفاده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>Comprehensive example of abbr tag with attributes</title>
    <style>
        .highlight {
            color: green;
            text-decoration: underline dotted;
        }
    </style>
</head>
<body>
    <p>
        tag
       <abbr id="html-abbr" class="highlight" style="font-size: 1.2em;" title="HyperText Markup Language" lang="en" dir="ltr" data-info="HTML">
         HTML
       </abbr>
         It is one of the most widely used markup languages.
    </p>
</body>
</html>

در این مثال، تگ <abbr> با استفاده از ویژگی‌های مختلف سفارشی‌سازی شده است تا به شما نشان دهد که چگونه می‌توانید از این ویژگی‌ها برای کنترل بیشتر بر روی نمایش و رفتار تگ <abbr> استفاده کنید.

تگ <abbr> در HTML یک ابزار قدرتمند برای نمایش اختصارات با توضیحات اضافی است. این تگ می‌تواند به بهبود دسترسی و تجربه کاربری کمک کند و به مرورگرها و موتورهای جستجو کمک کند تا معنای دقیق اختصارات را درک کنند. با استفاده از ویژگی‌های عمومی HTML مانند title, id, class, style, lang, dir, و data-* می‌توانید کنترل کاملی بر روی نمایش و رفتار این تگ داشته باشید و صفحات وب خود را به شکلی منظم و حرفه‌ای طراحی کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <abbr> کمک کرده باشد.

 

13. تگ <strike>

تگ <strike> در HTML برای نمایش متنی که باید خط‌زده شود، استفاده می‌شود. این تگ معمولاً برای نشان دادن متن‌هایی که دیگر معتبر نیستند یا به نوعی باید از دید خواننده به عنوان محتوای حذف‌شده نمایش داده شوند، به کار می‌رود. در واقع، این تگ باعث می‌شود که یک خط از وسط متن عبور کند.

با این حال، تگ <strike> در نسخه‌های جدیدتر HTML منسوخ شده و جای خود را به تگ <s> داده است. اما هنوز در برخی از صفحات قدیمی یا برای سازگاری با مرورگرهای قدیمی استفاده می‌شود.

ساختار تگ <strike> بسیار ساده است و به صورت زیر نوشته می‌شود:

<strike>striked text</strike>

مثال ساده از تگ <strike>

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

<!DOCTYPE html>
<html>
<head>
    <title>Example of strike tag</title>
</head>
<body>
    <p>This sentence <strike>should be struck out</strike> because it is no longer valid.</p>
</body>
</html>

تگ <strike>دارای چه attribute هایی است؟

1. id

ویژگی id یک شناسه یکتا به عنصر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این عنصر در CSS یا JavaScript استفاده کرد.

2. class

ویژگی class برای اختصاص یک یا چند کلاس CSS به عنصر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.

3. style

ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به عنصر استفاده می‌شود.

4. title

ویژگی title توضیحات اضافی در مورد عنصر فراهم می‌کند که وقتی کاربر موس را روی عنصر قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.

5. lang

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

6. dir

ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.

7. data-*

ویژگی‌های سفارشی data-* برای ذخیره اطلاعات سفارشی در عناصر HTML استفاده می‌شوند. این ویژگی‌ها می‌توانند توسط JavaScript برای افزودن قابلیت‌های تعاملی به صفحه استفاده شوند.

مثال جامع با استفاده از ویژگی‌های مختلف تگ <strike>

در این مثال، از ویژگی‌های id, class, style, title, lang, dir, و data-* برای سفارشی‌سازی تگ <strike> استفاده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>A comprehensive example of the strike tag with attributes</title>
    <style>
        .highlight {
            color: green;
        }
    </style>
</head>
<body>
    <p>
        This is a sentence that includes
        <strike id="unique-strike-text" class="highlight" style="font-size: 1.2em;" title="This is an underlined text" lang="fa" dir="rtl" data-info="customData">
         underlined text
        </strike>
         .
    </p>
</body>
</html>

در این مثال، تگ <strike> با استفاده از ویژگی‌های مختلف سفارشی‌سازی شده است تا به شما نشان دهد که چگونه می‌توانید از این ویژگی‌ها برای کنترل بیشتر بر روی نمایش و رفتار تگ <strike> استفاده کنید.

تگ <strike> در HTML یک ابزار قدرتمند برای نمایش متن خط‌زده است و می‌تواند به شما کمک کند تا اطلاعاتی که دیگر معتبر نیستند یا باید از دید خواننده حذف شوند را به شکلی مناسب نمایش دهید. با استفاده از ویژگی‌های عمومی HTML مانند id, class, style, title, lang, dir, و data-* می‌توانید کنترل کاملی بر روی نمایش و رفتار این تگ داشته باشید. با این حال، به خاطر داشته باشید که تگ <strike> منسوخ شده و استفاده از تگ <s> به جای آن توصیه می‌شود. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <strike> کمک کرده باشد.

 

14. تگ <tt>

تگ <tt> در HTML برای نمایش متن به صورت تایپ شده (teletype) یا با فونت تک فاصله (monospace) استفاده می‌شود. این تگ معمولاً برای نمایش کدهای برنامه‌نویسی یا هر متنی که نیاز به نمایش با فونت ثابت داشته باشد، به کار می‌رود. با این حال، تگ <tt> در نسخه‌های جدیدتر HTML منسوخ شده و جای خود را به تگ‌های دیگری مانند <code>, <pre>, و <samp> داده است.

ساختار تگ <tt> بسیار ساده است و به صورت زیر نوشته می‌شود:

<tt>Typed text</tt>

مثال ساده از تگ <tt>

در این مثال، از تگ <tt> برای نمایش یک جمله به صورت تایپ شده استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>tt tag example</title>
</head>
<body>
    <p>This sentence is displayed <tt>in typed font</tt>.</p>
</body>
</html>

تگ <tt>دارای چه attribute هایی است؟

1. id

ویژگی id یک شناسه یکتا به عنصر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این عنصر در CSS یا JavaScript استفاده کرد.

2. class

ویژگی class برای اختصاص یک یا چند کلاس CSS به عنصر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.

3. style

ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به عنصر استفاده می‌شود.

4. title

ویژگی title توضیحات اضافی در مورد عنصر فراهم می‌کند که وقتی کاربر موس را روی عنصر قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.

5. lang

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

6. dir

ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.

7. data-*

ویژگی‌های سفارشی data-* برای ذخیره اطلاعات سفارشی در عناصر HTML استفاده می‌شوند. این ویژگی‌ها می‌توانند توسط JavaScript برای افزودن قابلیت‌های تعاملی به صفحه استفاده شوند.

مثال جامع با استفاده از ویژگی‌های مختلف تگ <tt>

در این مثال، از ویژگی‌های id, class, style, title, lang, dir, و data-* برای سفارشی‌سازی تگ <tt> استفاده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>Comprehensive example of tt tag with attributes</title>
    <style>
        .highlight {
            color: green;
        }
    </style>
</head>
<body>
    <p>
       This is a sentence that includes
       <tt id="unique-tt-text" class="highlight" style="font-size: 1.2em;" title="This is a typed text" lang="fa" dir="rtl" data-info="customData">
       Typed text
       </tt>
       .
    </p>
</body>
</html>

در این مثال، تگ <tt> با استفاده از ویژگی‌های مختلف سفارشی‌سازی شده است تا به شما نشان دهد که چگونه می‌توانید از این ویژگی‌ها برای کنترل بیشتر بر روی نمایش و رفتار تگ <tt> استفاده کنید.

تگ <tt> در HTML یک ابزار قدرتمند برای نمایش متن به صورت تایپ شده یا با فونت تک فاصله است. این تگ می‌تواند به شما کمک کند تا کدهای برنامه‌نویسی یا متون دیگری که نیاز به نمایش با فونت ثابت دارند را به صورت خوانا و قابل فهم نمایش دهید. با استفاده از ویژگی‌های عمومی HTML مانند id, class, style, title, lang, dir, و data-* می‌توانید کنترل کاملی بر روی نمایش و رفتار این تگ داشته باشید. با این حال، به خاطر داشته باشید که تگ <tt> منسوخ شده و استفاده از تگ‌های جایگزین مانند <code>, <pre>, و <samp> توصیه می‌شود. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <tt> کمک کرده باشد.

 

15. تگ <big>

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

ساختار تگ <big> بسیار ساده است و به صورت زیر نوشته می‌شود:

<big>Larger text</big>

مثال ساده از تگ <big>

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

<!DOCTYPE html>
<html>
<head>
    <title>Example of big tag</title>
</head>
<body>
    <p>This sentence will be displayed <big>larger</big>.</p>
</body>
</html>

تگ <big>دارای چه attribute هایی است؟

1. id

ویژگی id یک شناسه یکتا به عنصر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این عنصر در CSS یا JavaScript استفاده کرد.

2. class

ویژگی class برای اختصاص یک یا چند کلاس CSS به عنصر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.

3. style

ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به عنصر استفاده می‌شود.

4. title

ویژگی title توضیحات اضافی در مورد عنصر فراهم می‌کند که وقتی کاربر موس را روی عنصر قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.

5. lang

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

6. dir

ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.

7. data-*

ویژگی‌های سفارشی data-* برای ذخیره اطلاعات سفارشی در عناصر HTML استفاده می‌شوند. این ویژگی‌ها می‌توانند توسط JavaScript برای افزودن قابلیت‌های تعاملی به صفحه استفاده شوند.

مثال جامع با استفاده از ویژگی‌های مختلف تگ <big>

در این مثال، از ویژگی‌های id, class, style, title, lang, dir, و data-* برای سفارشی‌سازی تگ <big> استفاده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>A comprehensive example of the big tag with attributes</title>
    <style>
        .highlight {
            color: green;
        }
    </style>
</head>
<body>
    <p>
        This is a sentence that includes
        <big id="unique-big-text" class="highlight" style="font-size: 1.2em;" title="This is a larger text" lang="en" dir="rtl" data-info="customData">
        Larger text
        </big>
        .
    </p>
</body>
</html>

در این مثال، تگ <big> با استفاده از ویژگی‌های مختلف سفارشی‌سازی شده است تا به شما نشان دهد که چگونه می‌توانید از این ویژگی‌ها برای کنترل بیشتر بر روی نمایش و رفتار تگ <big> استفاده کنید.

تگ <big> در HTML یک ابزار ساده برای نمایش متن به صورت بزرگ‌تر است و می‌تواند به شما کمک کند تا بخش‌های مهم و نیازمند جلب توجه را در متن خود برجسته کنید. با استفاده از ویژگی‌های عمومی HTML مانند id, class, style, title, lang, dir, و data-* می‌توانید کنترل کاملی بر روی نمایش و رفتار این تگ داشته باشید. با این حال، به خاطر داشته باشید که تگ <big> منسوخ شده و استفاده از CSS به جای آن توصیه می‌شود. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <big> کمک کرده باشد.

 

امیدوارم که از قسمت سوم آموزش HTML لذت برده باشید. تو این قسمت، با چندتا از تگ‌های مهم و پرکاربرد HTML آشنا شدیم که بهتون کمک می‌کنن صفحات وب‌تون رو حرفه‌ای‌تر و منظم‌تر بسازید. از خطوط افقی با تگ <hr> شروع کردیم و دیدیم چطور می‌تونیم بخش‌های مختلف صفحه رو از هم جدا کنیم. بعدش به تگ <pre> پرداختیم که برای نمایش متن‌های فرمت‌دهی شده مثل کدها و شعرها خیلی کاربرد داره.

همچنین با &nbsp; آشنا شدیم که چطور می‌تونیم فاصله‌های غیرقابل‌شکستن ایجاد کنیم و تگ‌های <div> و <title> رو بررسی کردیم که چطور می‌تونن به سازماندهی و عنوان‌دهی بهتر صفحات وب کمک کنن. با نحوه کامنت گذاری در HTML آشنا شدیم و فهمیدیم چطور می‌تونیم کدها رو مستند کنیم یا قسمت‌هایی از کد رو موقتا غیرفعال کنیم. در نهایت، یاد گرفتیم چطور کدهای HTML یک صفحه وب رو ببینیم و با تگ‌های Text Formatting آشنا شدیم که به ما کمک می‌کنن تا متن‌های زیباتری بسازیم. امیدوارم این مطالب براتون مفید بوده باشه و بتونید ازشون تو پروژه‌هاتون استفاده کنید. تا قسمت بعدی، موفق باشید!

ارسال دیدگاه