۲۰ شهریور ۱۴۰۲

آموزش کامل تگ های html در 1ساعت

HTML تگ
90 / 100
قدرت گرفته توسط Rank Math SEO

تگ های HTML چیست؟

تگ ها (Tags) در HTML عبارتند از عناصر بنیادی که برای تعریف ساختار و محتوای صفحات وب استفاده می‌شوند. هر تگ با استفاده از نام خود، یک المان خاص را در صفحه تعریف می‌کند. تگ‌ها درون علامتات زوج “<>” قرار می‌گیرند و می‌توانند خصوصیات (Attributes) را نیز داشته باشند.

تگ <!DOCTYPE>

تگ <!DOCTYPE> در HTML به منظور تعیین نوع و نسخهٔ استاندارد HTML مورد استفاده قرار می‌گیرد. این تگ به مرورگرها اعلام می‌کند که کدام نسخهٔ HTML در صفحهٔ وب استفاده شده است و به آن‌ها کمک می‌کند تا صفحه را به درستی نمایش دهند.

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

مقدار تگ <!DOCTYPE> معمولاً به شکل زیر است:

<!DOCTYPE html>

این مقدار به مرورگر اطلاع می‌دهد که از استاندارد HTML5 استفاده شده است.

استفاده از تگ <!DOCTYPE> مهم است زیرا این تگ به مرورگر اطلاعات مربوط به ساختار صفحه را می‌دهد و به طور مستقیم تأثیری بر روی رفتار و نمایش صفحه دارد. عدم استفاده صحیح از این تگ ممکن است منجر به نمایش نادرست و ناهماهنگی در صفحه شود.

توصیه می‌شود که همواره از تگ <!DOCTYPE> استفاده کنید و مناسب‌ترین مقدار آن را بر اساس نسخهٔ HTML استفاده شده در صفحه انتخاب کنید.

html تگ

تگ <html>

تگ <html> در HTML یک تگ اصلی است و تمام محتوای صفحه وب را در خود قرار می‌دهد. این تگ بیانگر این است که محتوای صفحه وب داخل یک سند HTML قرار دارد.

تگ <html> باید به عنوان تگ ابتدایی در هر صفحه HTML استفاده شود و همچنین باید با تگ </html> به عنوان تگ پایانی ختم شود.

تگ <head>:

تگ </head>و<head> در HTML، یک تگ اصلی است که درون تگ <html> قرار می‌گیرد. این تگ برای تعریف و ارائه اطلاعات مربوط به صفحه استفاده می‌شود و شامل عناصری مانند عنوان صفحه، استایل‌ها، اسکریپت‌ها، متا تگ‌ها و اطلاعات مربوط به موتورهای جستجو است.

تگ <title>

تگ <title> در HTML برای تعیین عنوان صفحه استفاده می‌شود. محتوای داخل این تگ در نوار عنوان مرورگر نمایش داده می‌شود و همچنین توسط موتورهای جستجو برای نمایش عنوان صفحه در نتایج جستجو استفاده می‌شود.

تگ <title> باید در داخل تگ <head> قرار گیرد. معمولاً تگ <title> در ابتدای بخش <head> قرار می‌گیرد و می‌توانید در هر صفحه HTML فقط یک تگ <title> داشته باشید.

محتوای داخل تگ </title>و<title> باید توصیفی کوتاه و مختصر از محتوای صفحه باشد. این عنوان باید برای کاربران و موتورهای جستجو قابل فهم باشد و موضوع اصلی صفحه را به خوبی منعکس کند.

HTML body

تگ <body>

تگ </body> <body> در HTML برای تعریف محتوای قابل مشاهده در صفحه وب استفاده می‌شود. همه عناصری که بصورت مستقیم به کاربر نمایش داده می‌شوند مانند متن، تصاویر، لینک‌ها، جداول و فرم‌ها باید درون تگ <body> قرار گیرند.

تگ‌های <h1>تا <h6>

تگ‌های <h1> تا <h6> در HTML برای تعریف سرفصل‌ها و عناوین در صفحه وب استفاده می‌شوند. این تگ‌ها از <h1> که بزرگترین و مهمترین سرفصل را نشان می‌دهد تا <h6> که کوچکترین سرفصل را نمایش می‌دهد، درجه‌بندی شده‌اند.

در زیر توضیحی کامل از استفاده از تگ‌های <h1> تا <h6> در HTML آمده است:

  • <h1>: این تگ برای تعریف سرفصل اصلی صفحه استفاده می‌شود. این سرفصل باید بیانگر موضوع اصلی صفحه باشد و در صفحات وب فقط یک بار استفاده شود.
  • <h2>: این تگ برای تعریف سرفصل فرعی استفاده می‌شود. این سرفصل بیانگر بخش‌های مهم و زیرموضوعات صفحه می‌باشد.
  • <h3> تا <h6>: این تگ‌ها برای تعریف سرفصل‌های کوچکتر و زیرمجموعه‌های سرفصل‌های قبلی استفاده می‌شوند. هرچه عدد بعد از “h” در تگ کوچکتر باشد، سرفصل کوچکتری را نشان می‌دهد.

تگ <p>

تگ </p>و<p> در HTML برای تعریف یک پاراگراف متن استفاده می‌شود. این تگ به مرورگر اطلاع می‌دهد که متن درون آن باید به عنوان یک پاراگراف نمایش داده شود و فاصله‌های مناسبی بین پاراگراف‌ها ایجاد کند.

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

نحوه استفاده از تگ <p> در HTML به صورت زیر است:

<p>متن پاراگراف</p>

در این مثال، متن مورد نظر را درون تگ <p> قرار می‌دهیم. هنگامی که مرورگر صفحه را نمایش می‌دهد، متن داخل تگ <p> به صورت پاراگراف نمایش داده می‌شود و فاصله‌های مناسبی از بالا و پایین متن ایجاد می‌شود.

تگ <a>

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

نحوه استفاده از تگ <a> در HTML به صورت زیر است:

<a href="آدرس_لینک">متن_لینک</a>

در اینجا، ویژگی href برای تعیین آدرس مقصد لینک استفاده می‌شود. این آدرس می‌تواند یک URL (آدرس وب)، آدرس یک فایل، آدرس ایمیل و یا آدرس داخلی صفحه باشد. متن داخل تگ <a>، یعنی متن_لینک، نمایش داده می‌شود و با کلیک بر روی آن، کاربر به آدرس مشخص شده در href منتقل می‌شود.

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

<a href="https://www.example.com">صفحه اصلی</a>

همچنین، می‌توانید لینک‌های داخلی صفحه را ایجاد کنید. برای این کار، می‌توانید به عنوان href یک آیدی یا نام بخش مورد نظر در صفحه را قرار دهید. سپس با کلیک بر روی لینک، صفحه به بخش مورد نظر منتقل می‌شود. مثال زیر را در نظر بگیرید:

<a href="#section1">رفتن به بخش 1</a>

در این مثال، با کلیک بر روی لینک، صفحه به بخشی با آیدی یا نام section1 منتقل می‌شود.

تگ <a> همچنین می‌تواند دارای ویژگی‌های دیگری مانند target و title باشد. ویژگی target برای تعیین روش باز شدن لینک استفاده می‌شود (مانند باز شدن در پنجره جدید) و ویژگی title برای نمایش یک متن توضیحی در هنگام توقف ماوس روی لینک استفاده می‌شود.

<a href="https://www.example.com" target="_blank" title="باز کردن در پنجره جدید">صفحه اصلی</a>

در این مثال، لینک به صفحه اصلی باز می‌شود در پنجره جدید و هنگام توقف ماوس روی لینک، متن “باز کردن در پنجره جدید” نمایش داده می‌شود.

توجه داشته باشید که استفاده از تگ <a>نیازمند بسته شدن تگ با تگ </a> است. به عنوان مثال:

<a href="https://www.example.com">صفحه اصلی</a>

در مثال بالا، تگ <a> باز شده است و متن لینک “صفحه اصلی” را دربرمی‌گیرد. وقتی کاربر بر روی لینک کلیک می‌کند، به آدرس https://www.example.com منتقل می‌شود.

تگ <img>

تگ <img> در HTML برای نمایش تصاویر در صفحات وب استفاده می‌شود. با استفاده از این تگ، می‌توانید تصاویر را به صفحه اضافه کنید و آن‌ها را در قالب برگه‌ها و محتواهای وب نمایش دهید.

نحوه استفاده از تگ <img> در HTML به صورت زیر است:

<img src="آدرس_تصویر" alt="متن_جایگزین">

در اینجا، ویژگی src برای تعیین آدرس تصویر استفاده می‌شود. این آدرس می‌تواند یک URL (آدرس وب) یا آدرس محلی (نسبت به پرونده HTML) باشد. ویژگی alt نیز برای تعیین متن جایگزین تصویر استفاده می‌شود که در صورتی که تصویر بارگذاری نشود یا قابل دسترسی نباشد، نمایش داده می‌شود.

برای مثال، اگر می‌خواهید یک تصویر با نام “example.jpg” را در صفحه نمایش دهید، می‌توانید کد زیر را استفاده کنید:

<img src="example.jpg" alt="تصویر نمونه">

در این مثال، تصویر با آدرس “example.jpg” در صفحه نمایش داده می‌شود و متن جایگزین “تصویر نمونه” در صورت عدم بارگذاری تصویر نمایش داده می‌شود.

تگ <img> همچنین می‌تواند دارای ویژگی‌های دیگری مانند width و height باشد. این ویژگی‌ها برای تعیین عرض و ارتفاع تصویر به پیکسل استفاده می‌شوند. می‌توانید از این ویژگی‌ها برای تنظیم اندازه تصویر در صفحه استفاده کنید. به عنوان مثال:

<img src="example.jpg" alt="تصویر نمونه" width="300" height="200">

در این مثال، تصویر با عرض 300 پیکسل و ارتفاع 200 پیکسل در صفحه نمایش داده می‌شود.

توجه داشته باشید که تگ <img> تگی بدون بسته شدن است، به این معنی که بعد از تگ > هیچ تگ بسته‌کننده‌ای نمی‌آید.

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

نحوه استفاده از تگ <img> در HTML به صورت زیر است:

<img src="آدرس_تصویر" alt="متن_جایگزین">

در اینجا، ویژگی src برای تعیین آدرس تصویر استفاده می‌شود. این آدرس می‌تواند یک URL (آدرس وب) یا آدرس محلی (نسبت به پرونده HTML) باشد. ویژگی alt نیز برای تعیین متن جایگزین تصویر استفاده می‌شود که در صورتی که تصویر بارگذاری نشود یا قابل دسترسی نباشد، نمایش داده می‌شود.

مثالی از استفاده از تگ <img>:

<img src="https://example.com/image.jpg" alt="توضیح تصویر">

در این مثال، تصویر با آدرس “https://example.com/image.jpg” در صفحه نمایش داده می‌شود و در صورتی که تصویر بارگذاری نشود، متن “توضیح تصویر” به عنوان متن جایگزین نمایش داده می‌شود.

تگ <img> همچنین می‌تواند دارای ویژگی‌های دیگری مانند width و height باشد. این ویژگی‌ها برای تعیین ابعاد تصویر به پیکسل استفاده می‌شوند. می‌توانید از این ویژگی‌ها برای تنظیم عرض و ارتفاع تصویر استفاده کنید.

مثال:

<img src="https://example.com/image.jpg" alt="توضیح تصویر" width="300" height="200">

در این مثال، تصویر با آدرس “https://example.com/image.jpg” با عرض 300 پیکسل و ارتفاع 200 پیکسل در صفحه نمایش داده می‌شود.

توجه کنید که تگ <img> تگی بدون بسته شدن است، به این معنی که بعد از تگ > هیچ تگ بسته کننده‌ای نمی‌آید.

تگ <img> می‌تواند بیشتر از یک ویژگی داشته باشد و می‌توانید از آن برای تنظیمات دیگری مانند محلی‌سازی تصویر (با استفاده از ویژگی srcset) و تعیین متن جایگزین برای موتورهای جستجو (با استفاده از ویژگی title و alt) استفاده کنید.

تگ <td>،<table>و <tr> 

تگ‌های <table>، <tr> و <td> در HTML برای ساختاردهی و نمایش جداول در صفحات وب استفاده می‌شوند. با استفاده از این تگ‌ها، می‌توانید جداولی را با سطرها و ستون‌ها بسازید و اطلاعات را در قالب جدول در سایت خود نمایش دهید.

  1. تگ <table>:
    تگ <table> برای ایجاد جدول استفاده می‌شود. این تگ باید داخل تگ‌های <body> قرار گیرد و تمام محتوای جدول را در بین تگ‌های <table> و </table> قرار دهید. برای مثال:
<table>
  <!-- محتوای جدول -->
</table>
  1. تگ <tr>:
    تگ <tr> برای ساخت سطرها در جدول استفاده می‌شود. هر سطر جدول باید بین تگ‌های <tr> و </tr> قرار گیرد. برای مثال:
<table>
  <tr>
    <!-- سطر اول -->
  </tr>
  <tr>
    <!-- سطر دوم -->
  </tr>
</table>
  1. تگ <td>:
    تگ <td> برای ساخت سلول‌ها در جدول استفاده می‌شود. هر سلول جدول باید بین تگ‌های <td> و </td> قرار گیرد. سلول‌ها درون سطرها قرار می‌گیرند. برای مثال:
<table>
  <tr>
    <td>سلول 1</td>
    <td>سلول 2</td>
  </tr>
  <tr>
    <td>سلول 3</td>
    <td>سلول 4</td>
  </tr>
</table>

در مثال بالا، یک جدول با دو سطر و دو ستون ساخته شده است. هر سطر دارای دو سلول است که مقادیر متنی “سلول 1″، “سلول 2″، “سلول 3” و “سلول 4” را نمایش می‌دهند.

در طراحی جداول، می‌توانید از تگ‌های دیگری مانند <th> (سربرگ ستون) و ترکیب تگ‌های <td> و <th> برای ساخت سربرگ‌ها و بدنه جدول استفاده کنید. همچنین، می‌توانید از ویژگی‌هایی مانند colspan و rowspan برای تعیین ادغام سلول‌ها در جدول و تنظیمات دیگری مانند رنگ پس‌زمینه و حاشیه‌بندی جدول استفاده کنید.

نمونه‌ای از استفاده از این تگ‌ها در ساختار یک جدول:

<table>
  <tr>
    <th>سربرگ 1</th>
    <th>سربرگ 2</th>
  </tr>
  <tr>
    <td>سلول 1</td>
    <td>سلول 2</td>
  </tr>
  <tr>
    <td>سلول 3</td>
    <td>سلول 4</td>
  </tr>
</table>

در این مثال، از تسربرگ‌های <th> برای سربرگ‌های ستون‌ها استفاده شده است و از تگ‌های <td> برای سلول‌های بدنه جدول استفاده شده است.

تگ‌های <ul> و <li>

تگ‌های <ul> و <li> در HTML برای ساختاردهی و نمایش لیست‌ها در صفحات وب استفاده می‌شوند. با استفاده از این تگ‌ها، می‌توانید لیست‌های نامرتب (unordered lists) را ایجاد کنید و موارد لیست را به صورت مرتب شده در صفحه نمایش دهید.

تگ <ul>:
تگ <ul> برای ایجاد لیست نامرتب استفاده می‌شود. این تگ باید داخل تگ‌های <body> قرار گیرد و تمام موارد لیست را در بین تگ‌های <ul> و </ul> قرار دهید. هر آیتم لیست باید بین تگ‌های <li> و </li> قرار گیرد. برای مثال:

<ul>
  <li>مورد 1</li>
  <li>مورد 2</li>
  <li>مورد 3</li>
</ul>

در مثال بالا، یک لیست نامرتب با سه مورد ساخته شده است. هر مورد لیست درون تگ <li> قرار دارد.

تگ <li>:
تگ <li> برای تعریف موارد لیست درون لیست‌های نامرتب استفاده می‌شود. همچنین، این تگ نیز برای تعریف موارد لیست درون لیست‌های مرتب (ordered lists) نیز استفاده می‌شود. مثال استفاده از تگ <li> درون تگ <ul> را در بالا دیده‌اید.

نمونه‌ای از استفاده از این تگ‌ها در ساختار یک لیست نامرتب:

<ul>
  <li>مورد 1</li>
  <li>مورد 2</li>
  <li>مورد 3</li>
</ul>

در این مثال، یک لیست نامرتب با سه مورد ساخته شده است.

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

به علاوه، تگ <ul> و تگ <li> همچنین در کنار تگ‌های دیگری مانند <ol> (لیست مرتب) و تگ <dl> (لیست تعریف) مورد استفاده قرار می‌گیرند تا نوع لیست مورد نظر را ایجاد کنند.

تگ <hr> و تگ <br>

تگ <hr> و تگ <br> در HTML برای افزودن خط افقی و ایجاد شکست خط در صفحات وب استفاده می‌شوند. این تگ‌ها به شما امکان می‌دهند بین متن‌ها و المان‌های دیگر در صفحه جداکننده‌ها یا فاصله‌هایی ایجاد کنید.

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

<p>متن قبل از خط افقی</p>
<hr>
<p>متن بعد از خط افقی</p>

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

تگ <br>:
تگ <br> برای ایجاد شکست خط در صفحه استفاده می‌شود. این تگ بدون بسته شدن تگ دارد و به صورت تکی استفاده می‌شود. وقتی این تگ در صفحه قرار می‌گیرد، یک شکست خط (یعنی رفتن به خط بعدی) را در جایگاه خود ایجاد می‌کند. برای مثال:

<p>متن اولیه<br>متن در خط جدید</p>

در مثال بالا، تگ <br> بین دو خط متن قرار گرفته است و باعث شکست خط و قرار گرفتن متن در خط جدید می‌شود.

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

مطالب مشابه :

طراحی سایت در گرگان

شرکت طراحی سایت در گرگان

طراحی سایت فروشگاهی در گرگان فقط 3 دقیقه

وردپرس چیست؟ 4 شگفتیه وردپرس در گرگان

لطفا به این مقاله امتیاز بدید !❤️

دیدگاه‌ها (1)

صفهیه عمرانی 20 شهریور 1402 - 11:03 ب.ظ

غالی
نایس
بیوتی

دیدگاه شما

نشانی ایمیل شما منتشر نخواهد شد.