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

تگ های عنوان

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

مثال

<!DOCTYPE html>
<html dir="rtl">

   <head>
      <title>مثال تگ های عنوان</title>
   </head>
	
   <body>
      <h1>این عنوان با تگ شماره 1 هست</h1>
      <h2>این عنوان با تگ شماره 2 هست</h2>
      <h3>این عنوان با تگ شماره 3 هست</h3>
      <h4>این عنوان با تگ شماره 4 هست</h4>
      <h5>این عنوان با تگ شماره 5 هست</h5>
      <h6>این عنوان با تگ شماره 6 هست</h6>
   </body>
	
</html>

این مثال نتیجه زیر را ایجاد خواهد کرد :

تگ های عنوان در HTML

تگ پاراگراف

تگ p برای ایجاد پاراگراف استفاده می شود . متن پاراگراف بین جفت تگ آغازین و پایانی p قرار می گیرد .

مثال:

<!DOCTYPE html>
<html dir="rtl" >

   <head>
      <title>مثال پاراگراف</title>
   </head>
	
   <body>
      <p>این پاراگراف اول ماست</p>
      <p>اینجا محتوای دومین پاراگراف قرار گرفته</p>
      <p>و اینجا هم پاراگراف سوم ماست</p>
   </body>
	
</html>

این کد به صورت زیر در مرورگر اجرا خواهد شد :

پاراگراف در html

تگ شکستن خط

تگ شکستن خط برای رفتن به خط جدید استفاده می شود. یعنی همان نقطه سر خط . با این فرق که نقطه ندارد .

هر زمان که از تگ br استفاده کنید ، ادامه محتوا از خط بعدی شروع می شود . تگ br جزو معدود تگ هایی هست که تگ پایانی ندارد و از یک بخش تشکیل شده است.

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

مثال:

<!DOCTYPE html>
<html dir="rtl" >

   <head>
      <title>مثال نقطه سر خط :)</title>
   </head>
	
   <body>
       <p>
         سلام
         <br />
         خرید شما
          با موفقیت
          ارسال شد
         <br />
         ممنون
         <br />
         فروشگاه اینترنتی برادران جعفری به جز محمود
       </p>
   </body>
	
</html>

این کد در مرورگر به شکل زیر نمایش داده خواهد شد :

رفتن به خط بعدی در html

وسط چین کردن محتوا

برای این که یک پاراگراف را در وسط صفحه قراردهید ، می تونید از تگ center استفاده کنید

مثال

<!DOCTYPE html>
<html dir="rtl">

   <head>
      <title>مثال وسط چین کردن</title>
   </head>
	
   <body>
      <p>این متن وسط چین نیست</p>
      
      <center>
         <p>این متن وسط چین هست</p>
      </center>
   </body>
	
</html>

این کد در مرورگر به شکل زیر نمایش داده خواهد شد :

وسط چین کردن متن در Html

خطوط افقی

برای ایجاد یک خط افقی در صفحه از تگ hr استفاده می کنیم .

مثال

<!DOCTYPE html>
<html dir="rtl" >

   <head>
      <title>مثال خط افقی</title>
   </head>
	
   <body>
      <p>این پاراگراف ، پاراگراف اول ماست و باید بالای خط قرار بگیره</p>
      <hr />
      <p>پاراگراف دوم هم در پایین خط قرار میگیره</p>
   </body>
	
</html>

این کد به شکل زیر نمایش داده می شود :

خط افقی در html

تگ hr هم مانند تگ br جزو تگ های تک بخشی هست که تگ پایانی ندارد .

حفظ قالب بندی

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

مثال

<!DOCTYPE html>
<html dir="rtl">

   <head>
      <title>حفظ قالب بندی متن</title>
   </head>
	
   <body>
      <pre>
        اگر آن تُرک شیرازی به دست آرد دل ما را                 به خال هِندویَش بخشم سمرقند و بخارا را
        بده ساقی مِیِ باقی که در جنت نخواهی یافت                 کنار آب رُکن آباد و گُلگَشت مُصَّلا را
      </pre>
   </body>
	
</html>

نتیجه به شکل زیر خواهد بود

فاصله های بدون شکست

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

<!DOCTYPE html>
<html dir="rtl">

   <head>
      <title>مثال فاصله و فضای بدون شکست</title>
   </head>
	
   <body>
      <p>
World&nbsp;Wide&nbsp;Web
به معنای وب جهان گستر می باشد
</p>
   </body>
	
</html>

در این حالت عبارت World Wide Web همیشه در یک خط و متصل نمایش داده می شود

کاربرد nbsp در html

ساخت اولین صفحه وب - درس قبلی

درس بعدی - عناصر و تگ ها