مشاوره رایگان
دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

آموزش کامنت در HTML به همراه مثال و توضیح کامل


Comment یک قطعه کدی است که توسط مرورگرهای وب نادیده گرفته می شود. به ویژه در اسناد (document) پیچیده، برای نشان دادن بخش هایی از یک سند(document) و درج یادداشت هایی برای هر کسی که به کد شما نگاه می کند.

 به عنوان تمرین، ایده ی خوبی است که Comment های خود را به کدهای HTML تان اضافه کنید. Comment به شما و دیگران کمک می کند تا کد شما بیشتر درک شود و همچنین خوانایی کد را نیز افزایش می دهد.

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

مثال :

<!DOCTYPE html>

<html>



   <head>  <!-- Document Header Starts -->

      <title>This is document title</title>

   </head> <!-- Document Header Ends -->

           

   <body>

      <p>Document content goes here.....</p>

   </body>

           

</html>

کدبالا، چنین نتیجه ای را بدون نمایش مطالب ارائه شده به عنوان comment ارائه می دهد –

 

کامنت های معتبردر مقابل کامنت های نامعتبر

commentها نمی توانند تو در تو (nest ) باشند، این بدین معنی است که یک comment را نمی توان در comment دیگری قرار داد.

دوم اینکه خط تیره دوتایی (double-dash)  "--"  نباید هیچ گاه داخل comment دیده شود. بجز مواردی که بخشی از برچسب بستن یا Closing باشند( -->).

همچنین شما باید اطمینان حاصل کنید که هیچ فضایی در آغاز رشته comment وجود نداشته باشد.

مثال:

 در اینجا، comment داده شده یک comment معتبر (valid) است و توسط مرورگر پاک می شود.

<!DOCTYPE html>
<html>

 
   <head>
      <title>Valid Comment Example</title>
   </head>
            
   <body>
      <!--   This is valid comment -->
      <p>Document content goes here.....</p>
   </body>
            
</html>

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

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

<!DOCTYPE html>
<html>

 
   <head>  
      <title>Invalid Comment Example</title>
   </head>
            
   <body>
      < !--   This is not a valid comment -->
      <p>Document content goes here.....</p>
   </body>
            
</html>

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

 

 

نظرات چند خطی (Multiline Comments)

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

 

شما می توانید خطوط چندگانه را با تگ آغازین <! - و تگ پایانی -> در سند (document) قرار دهید. این تگ ها باید قبل از خط اول و انتهای آخرین خط همانطور که در مثال زیر نشان داده شده است، در سند (document) قرار بگیرند.

<!DOCTYPE html>
<html>

 
   <head>  
      <title>Multiline Comments</title>
   </head> 
            
   <body>
      <!-- 
         This is a multiline comment and it can
         span through as many as lines you like.
      -->
      
      <p>Document content goes here.....</p>
   </body>
            
</html>

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

کامنت های شرطی(Conditional Comments)

نظرات شرطی تنها در اینترنت اکسپلورر (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>

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

استفاده از برچسب comment

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

نکته : تگ <comment> در HTML5 غلط است. از این عنصر استفاده نکنید.

مثال:

<!DOCTYPE html>
<html>

 
   <head>
      <title>Using Comment Tag</title>
   </head>
            
   <body>
      <p>This is <comment>not</comment> Internet Explorer.</p>
   </body>
            
</html>

اگر از اینترنت اکسپلورر استفاده می کنید، آن نتیجه زیر را تولید می کند –

Document content goes here.....

اما اگر از اینترنت اکسپلورر استفاده نمی کنید، نتیجه زیر را تولید می کند -

This is Internet Explorer.

کد اسکریپت در comment

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

<!DOCTYPE html>
<html>
 
   <head>
      <title>Commenting Script Code</title>
      
      <script>
         <!-- 
            document.write("Hello World!")
         //-->
      </script>
   </head>
            
   <body>
      <p>Hello , World!</p>
   </body>
            
</html>

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

Hello World!

Hello , World!

صفحات طراحی برای commentها

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

مثال :

<!DOCTYPE html>
<html>
 
   <head>
      <title>Commenting Style Sheets</title>
      
      <style>
         <!--
            .example {
               border:1px solid #4a7d49;
            }
         //-->
      </style>
   </head>
            
   <body>
      <div class = "example">Hello , World!</div>
   </body>
            
</html>

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

 

فصلِ: 5 , تعداد قسمت ها: 177 , سطح: صفر تا صد

این فصل در یک نگاه:

در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…

HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می‌…
فصلِ: 3 , تعداد قسمت ها: 25 , سطح: صفر تا صد

این فصل در یک نگاه:

فصل سوم…

آموزش طراحی ریسپانسیو مدرن و جذابتر نسبت به بوتسرپ (همراه با ساخت صفحه اصلی و پنل یک آژانس مسافربری) آموزش پروژه محور فریمورک متریالایز برای اولین بار بین وب سایت های آموزشی آموزش تمامی …
فصلِ: 5 , تعداد قسمت ها: 77 , سطح: متوسط

این فصل در یک نگاه:

ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…

این مجموعه با تلفیقی از فریمورک bootstrap  و کد های html و css  ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ: 11 , تعداد قسمت ها: 162 , سطح: صفر تا صد

این فصل در یک نگاه:

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

در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ: 4 , تعداد قسمت ها: 240 , سطح: صفر تا صد

این فصل در یک نگاه:

طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…

توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap  و به صورت تضمینی  و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ: 4 , تعداد قسمت ها: 368 , سطح: صفر تا صد

این فصل در یک نگاه:

مباحث تکمیلی فریم ورک لاراول…

فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ: 1 , تعداد قسمت ها: 155 , سطح: صفر تا صد

این فصل در یک نگاه:

مباحث مقدماتی فریم ورک react.js…

توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js  و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ: 1 , تعداد قسمت ها: 15 , سطح: متوسط

این فصل در یک نگاه:

رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…

 اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …

تولید شده توسط کلیک سایت

پشتیبانی آنلاین
آماده پاسخگویی هستیم
انتخاب تصویر جهت ارسال:
در حال ضبط صدا

(جهت توقف و یا لغو ضبط از دکمه های زیر استفاده کنید)

توقف و ارسال :
لغو ضبط
در حال حاضر تمامی کارشناسان آفلاین هستند. همواره می توانید با شماره تلگرام / واتساپ 09010005000 به صورت آنلاین با ما در ارتباط باشید. جهت ورود به واتساپ کلیک کنید
0 پیام جدید
پشتیبان در حال تایپ ...
ارسال تصویر ضبط صدا
0 کارشناسان آنلاین می باشند
این گفت و گو توسط پشتیبان به اتمام رسید