HTML Comments
التعليقات في لغة HTML
في هذا الدرس، سنتعرف على التعليقات في لغة HTML وكيفية استخدامها لكتابة ملاحظات تساعد في فهم الأكواد مستقبلاً وتهميش أجزاء لاختبار الصفحة. سنغطي التعليقات المتداخلة، سواء بسطر واحد أو متعددة الأسطر، بالإضافة إلى اختصارات لوحة المفاتيح والقواعد الأساسية لتنظيم الكود بفعالية.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Comments
التعليقات في لغة HTML
</>
HTML Comments
التعليقات في لغة HTML
التعليقات HTML comments هي أجزاء من النص داخل مستند HTML لا تُعرض في المتصفح، لكنها تسمح بترك ملاحظات أو تفاصيل وتوضيحات مباشرة في الكود. وتُعتبر التعليقات أداة تنظيمية مهمة لمطوري المواقع، حيث تساعد في فهم هيكل الكود وتنظيمه داخل صفحة HTML. وتتيح هذه التعليقات للمطورين توثيق العمل وتسهيل فهم الكود عند مراجعته أو تعديله في المستقبل.
على سبيل المثال، يمكن للمطور إضافة تعليق عند بداية الصفحة ونهايتها، كأن يكتب [Start of page] في البداية و[End of page] في النهاية.
وكذلك عند بداية ونهاية أي قسم، وذلك لمساعدة المطور على تذكر أماكن البداية والنهاية، حيث إنه بعد مرور فترة زمنية قد ينسى المطور بنية الأكواد البرمجية، فتُسهّل التعليقات عملية التذكر والتعديل على المشروع مستقبلًا.
كما يمكن استخدام التعليقات لتعطيل أي جزء أجزاء عناصر HTML، مما يمنع عدم تنفيذه وظهوره في المتصفح. ويمكن إضافة عدد غير محدود من التعليقات في صفحة HTML وفي أي مكان.
ملاحظات هامة
- أي نص أو عنصر يوضع داخل تعليق [comment] في صفحة HTML لا يظهر في المتصفح، لأن المتصفحات تتجاهل تعليقات HTML.
- بينما يُمكن أن تكون التعليقات مفيدة في شرح الأوامر البرمجية، يجب استخدامها بحكمة؛ فالتعليقات المفرطة أو المكتوبة بشكل سيئ يمكن أن تجعل قراءة وفهم الكود أكثر صعوبة.
</>
?Why use comments in HTML
لماذا تُستخدم التعليقات في لغة HTML؟
تُستخدم التعليقات في لغة HTML لـ:
1. توثيق الكود البرمجيDocumenting Code: التعليقات تعمل كملاحظات توضيحية في الكود، تساعد في تذكيرك وإعلام الآخرين بوظيفة الكود وكيفية عمله، مما يسهل فهمه لاحقًا.
2. تنظيم الكود Organizing Code: تُساعد التعليقات في سهولة قراءة الكود البرمجي ومنع تداخل الأوامر، حيث يعتبرها معظم مطوري الويب وسيلة فعالة لتنظيم الكود.
3. شرح الغرض Explaining Purpose: تُستخدم التعليقات لوصف النتيجة المقصودة من الأوامر البرمجية أو لشرح سبب استخدام أمر برمجي معين.
4. توضيح الأجزاء المعقدة Clarifying Complex Parts: تُزوّد التعليقات توضيحًا للأجزاء أو الأسطر المعقدة من الكود، مما يسهل على المطورين الآخرين فهم تلك الأجزاء بسرعة.
</>
HTML Comments Syntax
طريقة كتابة التعليقات في لغة HTML
1. علامة الفتح [open tag]: تبدأ التعليقات في HTML باستخدام علامة الفتح التي تتكون من علامة أقل من [>]، تليها علامة تعجب [!]، ثم علامتي ناقص [--]. الشكل النهائي هو [--!>].
2. المحتوى [content]: يمكن أن يحتوي التعليق على نص أو عنصر أو أكثر يتم وضعه بين علامات الفتح والإغلاق. هذا المحتوى لن يظهر في صفحة الويب عند عرضه عبر المتصفح.
3. علامة الإغلاق [close tag]: تختتم التعليقات بعلامة الإغلاق التي تبدأ بعلامتي ناقص [--] وتنتهي بعلامة أكبر من [<]. الشكل النهائي هو [<--].
الشكل النهائي لبنية التعليق: <-- content --!>.
HTML Comments Syntax
طريقة كتابة التعليقات Comments في لغة HTML.
<!-- Comments are not displayed in the browser -->
Add A Comment
يمكنك إضافة تعليق في أي مكان داخل صفحة HTML.
<!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser -->
ملاحظة
لا تظهر تعليقات HTML في المتصفح، لكن يجب أن تضع في اعتبارك أن أي شخص يمكنه عرض جميع عناصر HTML من خلال خيار [عرض مصدر الصفحة view page source] أو باستخدام الاختصار [Ctrl+U] في معظم المتصفحات. هذا يشمل أيضًا جميع التعليقات المكتوبة ضمن الأكواد الخاصة بتصميم الواجهة الأمامية للموقع.
</>
Single-Line Comment In HTML
كتابة تعليق سطر واحد في HTML
قد يتكون التعليق من سطر واحد، أي يمتد على سطر واحد فقط، ولن يتم عرض هذا السطر على المتصفح.
Single-Line Comments In HTML
يوجد في المثال التالي تعليق مكوّن من سطر واحد يشير إلى بداية إضافة موقع شريط المهام داخل صفحة HTML، ولن يتم عرض هذا السطر في المتصفح.
<body>
<!-- Add the navbar here -->
<h1>About me</h1>
<p>I am learning to code with closeTag.</p>
<p>I am going through each and every one of their awesome and super helpful certifications. </p>
<p>I am on my way to becoming a fullstack web developer!</p>
<h2>Work Experience</h2>
</body>
ملاحظة هامة
نستخدم تعليقًا من سطر واحد عندما نريد شرح وتوضيح الغرض من الكود الذي يليه، أو لإضافة ملاحظات حول أجزاء معينة من صفحة الويب.
</>
Nested Comments In HTML
التعليق المُتداخل في HTML
يمكنك إضافة تعليقات في منتصف جملة أو سطر من التعليمات البرمجية في HTML. والنص الموجود بين علامات التعليق [<-- --!>] لن يُعرض في المتصفح، بينما يبقى النص الموجود خارج العلامة كما هو دون تأثير.
Nested Comments In HTML
إضافة تعليقات في منتصف جملة أو سطر من التعليمات البرمجية.
<p>I am <!--going to be--> a web developer</p>
</>
Multi-Line Comment In HTML
كتابة تعليق متعدد الأسطر في لغة HTML
يمكن أن تمتد التعليقات عبر عدة سطور باستخدام نفس الصيغة.
لكن يجب عليك التأكد من وضع علامة الفتح open tag عند بداية السطر الأول وعلامة الإغلاق close tag عند نهاية السطر الأخير.
Multi-Line Comments in HTML
مثال لتعليق متعدد الأسطر,
<!-- This is going to be my portfolio.
It will show off the projects that I'm most proud of.
I could go on and on about what I want to add
because I am writing a multi-line comment here -->
</>
Comments Keyboard Shortcut In HTML
اختصارات لوحة المفاتيح لإضافة التعليقات في لغة HTML
يمكنك إضافة التعليقات باستخدام اختصارات لوحة المفاتيح Keyboard بسهولة، وستحتاج إلى استخدام هذه الاختصارات بشكل متكرر. إليك اختصارات التعليقات:
- لمستخدمي Mac: اضغط على [Cmd + /].
- لمستخدمي Windows و Linux: اضغط على [Ctrl + /].
لإضافة تعليق على سطر واحد:
حدد السطر ثم اضغط على مفتاتيح الاختصار المُلائمة لجهازك في محرر النصوص.
لإضافة تعليق متعددة الأسطر:
قم بتحديد النص أو الأكواد التي تريد تعليقها، ثم اضغط على نفس مجموعة المفاتيح، وسيتم تحويل كل سطر قمت بتحديده إلى تعليق.
</>
Rules for using comments in HTML
قواعد استخدام التعليقات في لغة HTML
قواعد استخدام التعليقات مع الأمثلة Rules for using comments with examples:
1. لا يمكن وضع تعليق داخل تعليق آخر في HTML.
مثال خاطئ: <-- هذا تعليق <-- داخل تعليق آخر --!> --!>
2. لا يجوز استخدام تسلسل [--] داخل تعليق، إلا في نهايته لإغلاقه.
مثال خاطئ: <-- هذا غير -- صالح --!>
3. يفضل عدم وجود مسافات بعد علامة الفتح [ --!>] وقبل علامة الإغلاق [<-- ] في النص المعلق مباشرة.
مثال غير مفضل: <-- تعليق مع مسافة --!>
مثال مفضل: <--تعليق بدون مسافة--!>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
