آموزش کامنت ها در HTML
آموزش کامنت ها در HTML
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش کامنت ها در HTML خواهیم پرداخت.
کامنت قطعه ای از کد است که توسط هر مرورگر وب نادیده گرفته می شود. افزودن کامنت ها به کد HTML به ویژه در اسناد پیچیده، برای نشان دادن بخشهایی از یک سند و سایر یادداشت ها برای هر کسی که به کد نگاه می کند، روش خوبی است. کامنت ها به شما و دیگران در درک کد شما کمک می کند و خوانایی کد را افزایش می دهد.
کامنت ها در HTML در بین تگ <! – … -> قرار می گیرند. بنابراین، هر محتوایی که با تگ<! – … -> قرار داده شود، به عنوان کامنت تلقی می شود و توسط مرورگر کاملاً نادیده گرفته می شود.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!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 |
بدون نمایش محتوای داده شده به عنوان بخشی از کامنت ها، نتیجه زیر ایجاد می شود –
|
1 |
Document content goes here..... |
کامنت های معتبر در مقابل کامنت های نامعتبر
نظرات تو در تو نیستند، به این معنی که نمی توان یک نظر را در داخل نظر دیگری قرار داد. ثانیاً “-” توالی دو تایی ممکن است در داخل یک کامنت ظاهر نشود مگر به عنوان بخشی از تگ بسته شدن ->. همچنین باید مطمئن شوید که هیچ جایی در رشته شروع کامنت وجود ندارد.
مثال
در اینجا، کامنت داده شده یک کامنت معتبر است و توسط مرورگر پاک می شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>Valid Comment Example</title> </head> <body> <!-- This is valid comment --> <p>Document content goes here.....</p> </body> </html> |
خروجی
|
1 |
Document content goes here..... |
اما، خط زیر یک کامنت معتبری نیست و توسط مرورگر نمایش داده می شود. این به این دلیل است که بین براکت سمت چپ و علامت تعجب فاصله وجود دارد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Live Demo <!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> |
خروجی
|
1 2 |
< !-- This is not a valid comment --> Document content goes here..... |
کامنت های چند خطی
تاکنون کامنت های تک خطی را مشاهده کرده ایم، اما HTML از کامنت های چند خطی نیز پشتیبانی می کند.
می توانید چندین خط را با تگ باز <!– and ending tag –> شروع کرده که قبل از اولین سطر و انتهای خط آخر قرار داده شده نظر دهید که در مثال داده شده در زیر نشان داده شده است.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
Live Demo <!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> |
خروجی
|
1 |
Document content goes here..... |
کامنت های مشروط در HTML
کامنت های مشروط فقط در اینترنت اکسپلورر (IE) در ویندوز کار می کنند اما توسط مرورگرهای دیگر نادیده گرفته می شوند. آنها از Explorer 5 به بعد پشتیبانی می شوند و می توانید از آنها برای ارائه دستورالعمل های مشروط به نسخه های مختلف اینترنت اکسپلورر استفاده کنید.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!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> |
با شرایطی روبرو خواهید شد که باید بر اساس نسخه های مختلف اینترنت اکسپلورر سبک متفاوتی را اعمال کنید، در چنین شرایطی کامنت های مشروط مفید خواهد بود.
استفاده از تگ کامنت در HTML
تعداد کمی از مرورگرها هستند که از j’ <comment> برای نظر بخشی از کد HTML پشتیبانی می کنند.
توجه – <comment> در HTML5 منسوخ شد. از این عنصر استفاده نکنید
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Using Comment Tag</title> </head> <body> <p>This is <comment>not</comment> Internet Explorer.</p> </body> </html> |
اگر از IE استفاده می کنید، نتیجه زیر ایجاد می شود –
|
1 |
This is Internet Explorer. |
اما اگر از اینترنت اکسپلورر استفاده نمی کنید، نتیجه زیر حاصل می شود –
|
1 |
This is not Internet Explorer. |
کد اسکریپت کامنت
اگرچه در یک آموزش جداگانه جاوا اسکریپت را با HTML خواهید آموخت، اما در اینجا باید توجه داشته باشید که اگر از کد اسکریپت جاوا یا VB در کد HTML خود استفاده می کنید ، توصیه می شود آن کد اسکریپت را داخل کامنت ها HTML مناسب قرار دهید تا قدیمی باشد مرورگرها می توانند به درستی کار کنند.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>Commenting Script Code</title> <script> <!-- document.write("Hello World!") //--> </script> </head> <body> <p>Hello , World!</p> </body> </html> |
خروجی
|
1 2 |
Hello World! Hello , World! |
کامنت در برگه ها
اگرچه استفاده از برگه های سبک با HTML را در یک آموزش جداگانه یاد خواهید گرفت ، اما در اینجا باید توجه داشته باشید که اگر از (Cascading Style Sheet (CSS در کد HTML خود استفاده می کنید ، توصیه می شود که آن کد صفحه سبک را در داخل نظرات HTML مناسب قرار دهید تا مرورگرهای قدیمی بتوانند به درستی کار کنند.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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> |
خروجی
|
1 |
Hello , World! |
لیست جلسات قبل آموزش برنامه نویسی HTML
.svg)
دیدگاه شما