التعليقات (Comments) في HTML



6 نوفمبر، 2021 | تيتو 4 تك


  • التعليق هو جزء من الكود يتجاهله أي متصفح ويب. من الممارسات الجيدة إضافة تعليقات إلى كود HTML الخاص بك ، خاصة في المستندات المعقدة ، للإشارة إلى أقسام من المستند ، وأي ملاحظات أخرى لأي شخص يبحث في الكود. تساعدك التعليقات أنت والآخرين على فهم الكود الخاص بك وتزيد من قابلية قراءة الكود.

    توضع تعليقات HTML بين العلامات <! - ... ->. لذلك ، سيتم التعامل مع أي محتوى يتم وضعه مع علامات <! - ... -> على أنه تعليق وسيتم تجاهله تمامًا بواسطة المتصفح.

    مثال علي ذلك :

     

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

     

     

    enlightened التعليقات الصالحة  و التعليقات الغير الصالحة

     

    التعليقات لا تتداخل مما يعني أنه لا يمكن وضع تعليق داخل تعليق آخر. ثانيًا ، قد لا يظهر تسلسل الشرطة المزدوجة "-" داخل تعليق إلا كجزء من علامة الإغلاق ->. يجب عليك أيضًا التأكد من عدم وجود مسافات في بداية سلسلة التعليق.

    مثال
    هنا ، التعليق هو تعليق صالح وسيتم محوه بواسطة المتصفح.

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> مثال علي التعليق الصحيح </title>
       </head>
    	
       <body>
           <!--   This is valid comment -->
          <p>Document content goes here.....</p>
       </body>
    	
    </html>

     

    لكن السطر التالي ليس تعليقًا صالحًا وسيتم عرضه بواسطة المتصفح. هذا بسبب وجود مسافة بين قوس الزاوية اليسرى وعلامة التعجب.

     

    <!DOCTYPE html>
    <html>
    
       <head>  
          <title> مثال علي التعليق الخطأ </title>
       </head>
    	
       <body>
          <  !--   This is not a valid comment -->
          <p>Document content goes here.....</p>
       </body>
    	
    </html>
    

     

     

    enlightened  تعليقات متعددة الأسطر (Multiline)

     

    لقد رأينا حتى الآن تعليقات ذات سطر واحد ، لكن HTML تدعم التعليقات متعددة الأسطر أيضًا.

    يمكنك التعليق على أسطر متعددة بواسطة علامة البداية الخاصة <! - وعلامة النهاية -> الموضوعة قبل السطر الأول ونهاية السطر الأخير كما هو موضح في المثال التالي:

     

    <!DOCTYPE html>
    <html>
    
       <head>  
          <title> مثال علي تعليقات متعددة الأسطر </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>

     

     

    enlightened   التعليقات الشرطية (Conditional)

     

    تعمل التعليقات الشرطية فقط في Internet Explorer (IE) على Windows ولكن يتم تجاهلها من قبل المتصفحات الأخرى. يتم دعمها من Explorer 5 وما بعده ، ويمكنك استخدامها لإعطاء تعليمات شرطية لإصدارات مختلفة من IE.

     

    <!DOCTYPE html>
    <html>
    
       <head>  
          <title> مثال علي التعليقات الشرطية </title>
    
          <!--[if IE 6]>
             Special instructions for IE 6 here
          <![endif]-->
       </head> 
       
       <body>
          <p>Document content goes here.....</p>
       </body>
    	
    </html>
    

     

    ستواجه موقفًا ستحتاج فيه إلى تطبيق صفحة أنماط مختلفة بناءً على إصدارات مختلفة من Internet Explorer ، وفي مثل هذه الحالة ستكون التعليقات الشرطية مفيدة.

     

     

    enlightened  تعليق الكود النصي (Script Code)

     

    على الرغم من أنك ستتعلم JavaScript مع HTML ، ولكن هنا يجب عليك تدوين ملاحظة أنه إذا كنت تستخدم Java Script أو VB Script في كود HTML الخاص بك ، فمن المستحسن وضع رمز البرنامج النصي هذا داخل تعليقات HTML المناسبة .

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> مثال علي كود التعليق النصي </title>
          
          <script>
             <!-- 
                document.write("Hello World!")
              //-->
          </script>
       </head>
    	
       <body>
          <p>Hello , World!</p>
       </body>
    	
    </html>
    

     

     

    enlightened   تعليق صفحات الأنماط (CSS)

     

    على الرغم من أنك ستتعلم استخدام صفحات الأنماط المتتالية مع HTML ، ولكن هنا يجب عليك تدوين ملاحظة أنه إذا كنت تستخدم Cascading Style Sheet (CSS) في كود HTML الخاص بك ، فمن المستحسن وضع تعليق صفحة الأنماط هذا داخل تعليقات HTML المناسبة حتى تتمكن المتصفحات القديمة من العمل بشكل صحيح.

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> مثال علي تعليق صفحات الأنماط </title>
          
          <style>
             <!--
                .example {
                   border:1px solid #4a7d49;
                }
             //-->
          </style>
       </head>
    	
       <body>
          <div class = "example">Hello , World!</div>
       </body>
    	
    </html>