آموزش HTML - کامنت گذاری

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

در صفحات وب ، ایده ی خوبی است که توضیحات را به صورت کامنت به کد HTML خود اضافه کنید، به خصوص در صفحات وب پیچیده که دارای بخش های مختلف و بسیاری می باشد .

همچنین هنگامی که کسی به کد شما ، نگاه می کند یادداشت های شما کمک می کند تا کد را درک کند و اصطلاحا کد خوانایی داشته باشید .

نظرات HTML بین تگ های --!> و <-- قرار می گیرد . بنابراین، هر محتوایی که در تگ های کامنت قرار داده شود، به عنوان یادداشت تلقی می شود و به طور کامل توسط مرورگر نادیده گرفته می شود.

مثال

<!DOCTYPE html>
<html>

   <head>  <!-- شروع عنصر عنوان -->
      <title>عنوان صفحه</title>
   </head> <!-- پایان عنصر عنوان -->
	
   <body>
      <p>
      محتوای صفحه در این قسمت قرار می گیرد
      <!-- این یک کامنت است که در هنگام نمایش صفحه وب ، مرورگر از آن صرفنظر می کند -->
       </p>
   </body>
	
</html>

همانطور که گفته شده مرورگر از نمایش کامنت صرف نظر می کند .

قواعد درست نوشتن کد کامنت

کامنت ها تو در تو ندارند ، یعنی نمی توان داخل یک کامنت ، کد کامنت دیگری را نوشت
ترجیحا در داخل کامنت از دو خط تیره متوالی (--) استفاده نکنید
در بین کاراکترهای کد های آغازین و پایانی کامنت فاصله نگذارید

مثال

در اینجا، کامنت ثبت شده یک کامنت معتبر است .

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

   <head>
      <title>مثال کامنت معتبر</title>
   </head>
	
   <body>
      <!--   این یک کامنت صحیح می باشد -->
      <p>محتوای صفحه در اینجا قرار می گیرد</p>
   </body>
	
</html>

همانطور که می بینید مرورگر کامنت را نمایش نمی دهید

کامنت نویسی در html

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

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

   <head>  
      <title>مثال یک کامنت غیر صحیح و نامعتبر</title>
   </head>
	
   <body>
      < !--   این یک کامنت صحیح نیست -->
      <p>محتوای صفحه در اینجا قرار می گیرد</p>
   </body>
	
</html>

همانطور که مشاهده می کنید بدلیل نامعتبر بودن کد کامنت ، توسط مرورگر شناسایی نشده و نمایش داده می شود

کامنت نویسی در html

نظرات چند خطی

تاکنون همه کامنت ها را در یک خط نوشته ایم ، اما html از کامنت های چند سطری هم پشتیبانی می کند .

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

مثال

<!DOCTYPE html>
<html>

   <head>  
      <title>کامنت های چند خطی</title>
   </head> 
	
   <body>
      <!-- 
         شما می توانید کامنت خود را
         در چند سطر بنویسید
         این نوع کامنت گذاری نیز صحیح می باشد
         و توسط مرورگر به عنوان کامنت تشخیص داده خواهد شد
      -->
      
      <p>محتوای صفحه در این قسمت قرار می گیرد</p>
   </body>
	
</html>

نظرات مشروط

نظرات مشروط فقط در اینترنت اکسپلورر (IE) در ویندوز کار می کنند اما توسط سایر مرورگرها نادیده گرفته می شوند. آنها از Explorer 5 به بعد پشتیبانی می شوند و می توانید از آنها برای ارائه دستورالعمل های مشروط به نسخه های مختلف IE استفاده کنید.

مثال

<!DOCTYPE html>
<html>

   <head>  
      <title>Conditional Comments</title>

      <!--[if IE 6]>
         Special instructions for IE 6 here
      <![endif]-->
   </head> 
   
   <body>
      <p>Document content goes here.....</p>
   </body>
	
</html>

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

استفاده از تگ کامنت

تعداد کمی از مرورگرها وجود دارند که از تگ <comment> برای نظر دادن بخشی از کد HTML پشتیبانی می کنند.

توجه - تگ <comment> در HTML5 منسوخ شده است. بنابراین از این عنصر استفاده نکنید.

مثال

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

   <head>
      <title>استفاده از تگ کامنت</title>
   </head>
	
   <body>
      <p>این یک <comment>کامنت</comment> نیست</p>
   </body>
	
</html>

اگر از اینترنت اکسپلورر استفاده می کنید، احتمالا کامنت نمایش داده نشود ، اما در سایر مرورگرها تاثیری نخواهد داشت

کد اسکریپت کامنت گذاری

اگرچه در یک آموزش جداگانه جاوا اسکریپت را با HTML یاد خواهید گرفت، اما در اینجا باید توجه داشته باشید که اگر از جاوا اسکریپت یا اسکریپت VB در کد HTML خود استفاده می کنید، توصیه می شود از روش های کامنت گذاری متناسب با آن زبان استفاده کنید ، زیرا که نحوه کامنت کردن کدهای HTML در داخل تگ اسکریپت نتیجه بخش نخواهد بود .

مثال

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

   <head>
      <title>کامنت کد اسکریپت</title>
      
      <script>
         <!-- 
            document.write("سلام بر همگی")
         //-->
      </script>
   </head>
	
   <body>
      <p>سلام بر همگی</p>
   </body>
	
</html>

در کد بالا شکل کامنت کردن کدهای جاوااسکریپت صحیح نمی باشد ، و کد مربوطه نمایش داده خواهد شد .

کامنت کردن کدهای CSS

اگرچه استفاده از استایل های CSS با HTML را در یک آموزش جداگانه یاد خواهید گرفت، اما در اینجا باید توجه داشته باشید که اگر از Cascading Style Sheet (CSS) در کد HTML خود استفاده می کنید، توصیه می شود که از روش های مخصوص کامنت گذاری مربوط به CSS استفاده نمایید تا نتیجه صحیح به دست آید .

مثال

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

   <head>
      <title>کامنت نویسی کدهای استایل</title>
      
      <style>
         <!--
            .example {
               border:1px solid #4a7d49;
            }
         //-->
      </style>
   </head>
	
   <body>
      <div class = "example">سلام بر همگی</div>
   </body>
	
</html>

در مثال بالا کامنت به شکل صحیح اجرا نخواهد شد و استایل مربوطه نمایش داده می شود .

متا تگ ها - درس قبلی

درس بعدی - تصاویر