آموزش HTML - تگ های پایه

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

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

به عنوان مثال، اگر متنی را درون تگ پاراگراف (<p></p>) قرار دهیم، مرورگر آن را به عنوان یک پاراگراف مجزا نمایش می‌دهد. در این آموزش، تمامی تگ‌های پایه در HTML را بررسی خواهیم کرد.

تگ‌های تیتر (Heading Tags)

تگ‌های تیتر برای تعریف عناوین و تیترهای اسناد استفاده می‌شوند. شما می‌توانید از اندازه‌های مختلفی برای تیترهای خود استفاده کنید. HTML دارای ۶ سطح از تیترها است که از عناصر <h1>، <h2>، <h3>، <h4>، <h5> و <h6> استفاده می‌کنند. هنگام نمایش هر تیتر، مرورگر یک خط قبل و یک خط بعد از آن تیتر اضافه می‌کند.

مثال

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

<!DOCTYPE html>
<html>
<head>
   <title>Heading Example</title>
</head>
<body>
   <h1>This is heading 1</h1>
   <h2>This is heading 2</h2>
   <h3>This is heading 3</h3>
   <h4>This is heading 4</h4>
   <h5>This is heading 5</h5>
   <h6>This is heading 6</h6>
</body>
</html>

تگ پاراگراف (Paragraph Tag)

تگ <p> روشی را برای ساختاردهی متن شما در پاراگراف‌های مختلف ارائه می‌دهد. هر پاراگراف از متن باید بین یک تگ بازکننده <p> و یک تگ بسته‌کننده </p> قرار گیرد.

مثال

مثال زیر استفاده از تگ پاراگراف (<p>) را نشان می‌دهد، در اینجا ما ۳ پاراگراف تعریف می‌کنیم −

<!DOCTYPE html>
<html>
<head>
   <title>Paragraph Example</title>
</head>
<body>
   <p>Here is a first paragraph of text.</p>
   <p>Here is a second paragraph of text.</p>
   <p>Here is a third paragraph of text.</p>
</body>
</html>

تگ شکستن خط (Line Break Tag)

تگ <br> برای ایجاد شکستگی خط در متن استفاده می‌شود. این تگ محتوای بعد از خود را مجبور می‌کند تا در خط بعدی ظاهر شود. این تگ زمانی استفاده می‌شود که بخواهید متن به خط جدیدی برود بدون اینکه پاراگراف جدیدی آغاز شود.

توجه: تگ <br> یک تگ خالی (Empty Tag) است و نیازی به تگ بسته‌کننده ندارد.

مثال

مثال زیر استفاده از تگ شکست خط (<br>) را نشان می‌دهد −

<!DOCTYPE html>
<html>
<head>
   <title>Line Break Example</title>
</head>
<body>
   <p>Hello<br>You delivered your assignment on time.<br>Thanks<br>Mahnaz</p>
</body>
</html>

تگ مرکزچین (Center Tag)

در HTML، چیدمان و تراز متون باید به جای تگ‌های منسوخ‌شده، با استفاده از CSS مدیریت شود. تگ <center> که قبلاً برای وسط‌چین کردن محتوا در صفحه وب استفاده می‌شد، در HTML5 منسوخ شده است. شما می‌توانید از ویژگی text-align: center; در CSS برای وسط‌چین کردن متن یا عناصر درون‌خطی (Inline) استفاده کنید.

مثال

مثال زیر نحوه وسط‌چین کردن یک پاراگراف با استفاده از CSS را نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Centering Content Example</title>
   <style>
      .center-text {
         text-align: center;
      }
   </style>
</head>
<body>
   <p>This text is not in the center.</p>
   <p class="center-text">This text is in the center.</p>
</body>
</html>

تگ خط افقی (Horizontal Rule Tag)

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

توجه: همانند تگ <br>، تگ <hr> نیز یک تگ خالی است و نیازی به تگ بسته‌کننده ندارد.

مثال

مثال زیر یک خط افقی بین دو پاراگراف رسم می‌کند −

<!DOCTYPE html>
<html>
<head>
   <title>Horizontal Line Example</title>
</head>
<body>
   <p>This is paragraph one and should be on top.</p>
   <hr>
   <p>This is paragraph two and should be at bottom.</p>
</body>
</html>

با اجرای مثال بالا، می‌توانید یک خط مستقیم را ببینید که دو پاراگراف را از هم جدا می‌کند.

تگ <hr /> نمونه‌ای از یک عنصر خالی (Empty) است که در آن نیازی به تگ‌های بازکننده و بسته‌کننده ندارید، زیرا چیزی قرار نیست بین آن‌ها قرار گیرد.

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

تگ حفظ قالب‌بندی (Preserve Formatting Tag)

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

مثال

مثال زیر استفاده از تگ <pre> را نشان می‌دهد. در اینجا کدی را نمایش می‌دهیم که باید قالب‌بندی آن دقیقاً مانند آنچه داخل تگ <pre> نوشته شده حفظ شود −

<!DOCTYPE html>
<html>
<head>
   <title>Preserve Formatting Example</title>
</head>
<body>
   <pre>
      function testFunction( strText ){
         alert (strText)
      }
   </pre>
</body>
</html>

function testFunction( strText ){
 alert (strText)
}

فاصله‌های نشکستنی (Non-breaking Spaces)

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

فرض کنید می‌خواهید از عبارت "12 Angry Men" استفاده کنید. در اینجا، شما نمی‌خواهید مرورگر کلمات "12, Angry" و "Men" را در دو خط جداگانه بشکند −

نمونه‌ای از این تکنیک در فیلم "12 Angry Men" ظاهر می‌شود.

در مواردی که نمی‌خواهید مرورگر کاربر متن را بشکند، باید به جای فاصله معمولی از انتیتی فاصله نشکستنی &nbsp; استفاده کنید. به عنوان مثال، هنگام کدنویسی "12 Angry Men" در یک پاراگراف، باید از کدی شبیه به کد زیر استفاده کنید −

مثال

مثال زیر استفاده از انتیتی &nbsp; را نشان می‌دهد −

<!DOCTYPE html>
<html>
<head>
   <title>Nonbreaking Spaces Example</title>
</head>
<body>
   <p>An example of this technique appears in the movie "12 Angry Men."</p>
   <p>An example of this technique appears in the movie "12&nbsp;&nbsp;&nbsp;Angry Men."</p>
</body>
</html>

با اجرای مثال بالا، جمله: An example of this technique appears in the movie "12 Angry Men." دو بار نمایش داده می‌شود. از آنجا که ما ۳ کاراکتر " " بین 12 و men اضافه کرده‌ایم، در بار دوم می‌توانید سه فاصله را مشاهده کنید.

تگ‌های لیست‌بندی (Listing Tags)

تگ‌های <ul> و <ol> لیست‌های بدون ترتیب و مرتب‌شده را ایجاد می‌کنند، و برای نمایش آیتم‌های لیست از تگ <li> استفاده می‌شود.

مثال

مثال زیر استفاده از تگ‌های لیست‌بندی را نشان می‌دهد −

<!DOCTYPE html>
<html>
<head>
   <title>Listing Tags Example</title>
</head>
<body>
  <h2>Unordered list</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <h2>Ordered list</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>  
</body>
</html>