معرفی تگ های اصلی در HTML با مثال و نمونه کد

برچسب های عنوان (Heading Tags)

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

مثال :

      <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>

 

کد فوق نتیجه زیر را تولید می کند :

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

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

  <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>

کد فوق نتیجه زیر را تولید می کند –

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

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

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

در برچسب < br />، یک فضای خالی بین کاراکترهای br و اسلش جلوی آن وجود دارد که اگر این فضا را نادیده بگیرید، مرورگرهای قدیمی تر در رندر نمودن شکستِ خط، به خطا برخواهند خورد. در صورتی که از کاراکتر اسلش جلو استفاده نکنید و فقط از <br> استفاده کنید، در XHTML معتبر نخواهد بود.

مثال :

 <p>Hello<br />
         You delivered your assignment ontime.<br />
         Thanks<br />
         Mahnaz</p>

 

کد فوق نتیجه زیر را تولید می کند –

Hello
You delivered your assignment on time.
Thanks
Mahnaz

در مرکز قرار دادن متن (Centering Content)

شما می توانید از برچسب <center> برای قرار دادن هر گونه محتوا در مرکز صفحه یا هر سلول جدول استفاده کنید.

مثال:

  <p>This text is not in the center.</p>
      
      <center>
         <p>This text is in the center.</p>
      </center>

 

کد فوق نتیجه زیر را تولید می کند –

This text is not in the center.

This text is in the center.

 

خطوط افقی (Horizontal Lines)

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

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

 <p>This is paragraph one and should be on top</p>
      <hr />
      <p>This is paragraph two and should be at bottom</p>

 

تگ <hr /> باز هم یک نمونه از یک عنصر خالی است. در این تگ شما نیاز ندارید تا برچسب ها را باز و بسته کنید، زیرا هیچ چیز بین آنها وجود ندارد.

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

حفظ قالب بندی (Formatting)

گاهی اوقات، شما می خواهید متن، فرمت دقیق خود را از لحاظ نحوه نوشته شدن در سند HTML حفظ نماید. در این موارد، شما می توانید از پیش برچسب یعنی پریفرمت <pre> استفاده کنید.

هر متنی که بین تگ <pre> باز و تگ بسته </ pre> قرار بگیرد، قالب بندی سند منبع را حفظ می کند.

مشاهده مقالات تکمیلی در وب سایت آموزشی کلیک سایت