شرح التعليقات في HTML | استخدام الكومنت في الكود وأهميته
أهلاً وسهلاً بيكم يا شباب، يا رب تكونوا بخير وسلام دايمًا. في درس النهارده، هنتكلم عن حاجة مهمة جدًا في أي لغة برمجة، وهي التعليقات - Comments، وبالتحديد في لغة HTML.
سواء كنت بتتعلم HTML أو CSS أو JavaScript أو حتى Python، دايمًا هتلاقي إن كل لغة لها طريقة خاصة لكتابة التعليقات. والتعليقات دي مش إلزامية، لكن وجودها في الكود بيساعدك جدًا في التنظيم والفهم، سواء ليك أو لأي حد تاني هيشتغل على نفس المشروع بعدك.
1. إزاي نكتب تعليق في HTML؟
خلينا نبدأ بمثال بسيط. لنفترض إني كتبت كود فيه عنصر من نوع
<h1> وكتبت جواه أي نص، زي مثلاً "هذا عنوان
الموقع". لما أعرض الصفحة في المتصفح، هلاقي العنصر ظهر بشكل طبيعي.
لكن لو حبيت أكتب تعليق يوضح إن الجزء ده خاص بعنوان الموقع، أو حبيت أسيب لنفسي ملاحظة، ساعتها بستخدم التعليق.
صيغة التعليق في HTML بتكون بالشكل ده:
<!-- هذا تعليق -->يعني:
-
ببدأ بـ
<!-- -
وأكتب النص اللي عايزه
-
وأنهيه بـ
-->
وده بيكون مفيد سواء ليك، أو لأي مطور تاني ممكن يراجع الكود بعدك.
2. هل التعليق بيظهر في الموقع؟
الإجابة لأ، التعليق ما بيظهرش أبدًا في صفحة الويب المعروضة. هو بيكون موجود بس جوه الكود.
لو عملت Reload للصفحة، مش هتشوفه في المتصفح، لكن لو عملت Inspect (عن طريق كليك يمين على الصفحة واختيار "Inspect" أو "فحص العنصر")، هتقدر تشوف الكود من جوه، وهتلاقي التعليق ظاهر بلون مختلف، غالبًا باللون الأخضر.
3. فايدة التعليقات
التعليقات ليها استخدامات كتير، منها:
-
توضيح وظيفة جزء معين من الكود.
-
ترك ملاحظات لنفسك للمراجعة لاحقًا.
-
تسهيل الفهم على زميل تاني شغال معاك في نفس المشروع.
-
إخفاء جزء من الكود مؤقتًا من غير ما تحذفه.
4. إزاي نخفي جزء من الكود باستخدام تعليق؟
خلينا نقول إني عندي مجموعة عناصر <h1>، وكلها
بتظهر في الصفحة. لكن أنا حابب أخفي أول واحد منهم علشان أركّز على
الباقي.
ببساطة، بضيف التعليق قبل وبعد الجزء اللي عايز أخفيه كده:
<!--
<h1>عنوان مخفي</h1>
-->كده، العنصر ده مش هيظهر في الصفحة، لأنه داخل تعليق. وده مفيد جدًا لما تكون بتجرب حاجات وعايز تخلي الكود موجود بس من غير ما يظهر.
5. اختصار التعليقات في Visual Studio Code
لو بتستخدم محرر الأكواد Visual Studio Code، تقدر تعمل تعليق بسرعة عن طريق الاختصار:
-
Ctrl + / (أو Ctrl + زر الظاء في بعض لوحات المفاتيح العربية)
حدد الجزء اللي عايز تعمله تعليق، واضغط الاختصار، وهيتحوّل لتعليق تلقائي. ولو عايز تلغي التعليق، اضغط نفس الاختصار تاني.
6. ملاحظات إضافية
-
تقدر تكتب التعليق بأي لغة، عربي أو إنجليزي، بدون أي مشاكل.
-
التعليقات مش بتأثر على كود الموقع ولا سرعته في التحميل.
-
الأفضل دايمًا تستخدم تعليقات واضحة ومختصرة، علشان تكون مفيدة وقت مراجعة الكود.
سؤال الدرس:
جرب بنفسك تكتب تعليق في كود HTML، وشاركنا في التعليقات:
إيه فايدة التعليقات بالنسبالك لما تيجي تراجع كودك بعد فترة؟
ختام الفيديو:
أتمنى تكونوا استفدتوا من درس النهارده، ولو لسه عندك أي سؤال اكتبه في التعليقات وهرد عليك إن شاء الله. متنساش تعمل لايك واشتراك في القناة وتفعل زر الجرس علشان توصلك باقي الدروس.
أشوفكم في فيديو جديد، والسلام عليكم ورحمة الله وبركاته.
شاهد فيديو توضيحي