HTML المحررات
مفهوم المحرر
المحرر (Editor) هو برنامج برمجي يُستخدم لتعديل محتويات الملفات النصية، سواء كانت بسيطة مثل الملاحظات أو متقدمة مثل الأكواد البرمجية. يتميز المحرر بواجهة تسهل التعامل مع النصوص من خلال أدوات متنوعة مثل القص واللصق، البحث والاستبدال، وكذلك تخصيص النصوص وفقًا للتنسيق المطلوب.
تأتي أنظمة التشغيل عادةً مزودة بمحررات نصوص مدمجة. على سبيل المثال، نظام التشغيل ويندوز يحتوي على محرر نصوص شهير يسمى Notepad. هذا المحرر خفيف الوزن وسهل الاستخدام، وهو مخصص للعمليات البسيطة مثل كتابة الملاحظات أو تحرير النصوص الخالية من التنسيقات المعقدة. ومع ذلك، فهو يفتقر إلى الميزات المتقدمة مثل تمييز الأكواد البرمجية أو دعم العديد من التنسيقات، مما يجعله غير مثالي للمبرمجين.
في المقابل، نجد أن نظام التشغيل ماك يأتي بمحرر نصوص يُعرف بـ TextEdit، الذي يدعم النصوص الغنية (Rich Text) إلى جانب النصوص العادية، مما يجعله خيارًا جيدًا للمستخدمين الذين يحتاجون إلى تنسيق النصوص بطريقة احترافية. يستطيع المستخدمون من خلال TextEdit إنشاء مستندات تحتوي على صور وروابط، وهو يدعم التنسيقات المختلفة مثل RTF و HTML، ما يمنحه مرونة أكثر من Notepad.
أما في نظام لينكس، فتختلف المحررات المتاحة حسب التوزيعة المستخدمة. من بين المحررات الشائعة نجد Gedit وLeafpad. يتميز Gedit بواجهة بسيطة وسهلة الاستخدام ولكنه يحتوي على ميزات قوية تجعله مناسبًا لتحرير الأكواد البرمجية، مثل دعم تمييز الأكواد لمختلف لغات البرمجة وإمكانية استخدام إضافات لتحسين الوظائف. أما Leafpad فهو محرر بسيط للغاية، يُستخدم للمهام اليومية التي لا تحتاج إلى تعقيد، ويمتاز بسرعته وخفة وزنه على النظام.
من الجدير بالذكر أن هناك العديد من المحررات النصية الأخرى التي يمكن تنزيلها واستخدامها بناءً على احتياجات المستخدم. بعض هذه المحررات المتقدمة مثل Visual Studio Code أو Sublime Text، تُستخدم على نطاق واسع في البرمجة وتتميز بقدرتها على التعامل مع المشاريع الكبيرة وتقديم وظائف مثل التصحيح التلقائي، والإكمال الذكي للكود، ودعم العديد من اللغات البرمجية.
في النهاية، يعتبر اختيار المحرر المناسب أمرًا شخصيًا يعتمد على متطلبات العمل. يمكن للمستخدمين الذين يبحثون عن البساطة استخدام المحررات المدمجة في النظام، بينما يُفضل المبرمجون والمستخدمون المتقدمون المحررات المتخصصة التي تقدم ميزات إضافية تدعم إنتاجيتهم وتوفر بيئة عمل مريحة.
المحررات الافتراضية التي تأتي مع أنظمة التشغيل ليست الخيار الأمثل لكتابة أكواد HTML و CSS و Javascript، حيث إنها لا تقدم الدعم اللازم لكتابة الكود بشكل فعال. هذه المحررات تفتقر إلى ميزات مثل تصحيح الأخطاء التلقائي أو تمييز الأكواد بالألوان المميزة، مما يجعل عملية البرمجة أقل سلاسة مقارنةً بالمحررات المتخصصة التي توفر بيئة عمل أفضل للمبرمجين.
في هذا الدرس، ستتعلم كيفية كتابة الأكواد باستخدام برنامج VSCode وكيفية تجربتها مباشرة في محرر الويب الخاص بموقع هرمش.
اختيار محرر مناسب لكتابة الأكواد
عند العمل على كتابة الأكواد، من المهم أن تختار محرر نصوص يتميز بتنسيق جيد للألوان، ويوفر لك دعمًا أثناء كتابة الكود. لاختيار المحرر المناسب، لاحظ الفرق بين كيفية ظهور الأكواد في المحرر الافتراضي مثل Notepad الموجود في نظام Windows، وكيفية عرضها في محرر متطور مثل VSCode، الذي يمكنك تحميله وتثبيته بسهولة.
ملاحظة الفارق
في برنامج Notepad، يظهر الكود بلون واحد، مما يجعل قراءته وتحريره أكثر صعوبة.
الكود في برنامج Notepad يظهر بلون واحد كالتالي.
لكتابة كود HTML على الحاسوب يمكنك استخدام أي محرر تريده و لكننا ننصحك باستخدام VSCode على وجه الخصوص لأنه من أفضل و أقوى المحررات المجانية الموجودة و أسهلها في الإستخدام.
إليك روابط التحميل المباشرة للبرامج التي تم ذكرها
1. Notepad (لنظام Windows):
Notepad يأتي مدمجًا مع نظام التشغيل Windows ولا يحتاج إلى تنزيل. يمكنك فتحه من خلال البحث عن "Notepad" في شريط البحث في ويندوز.
2. TextEdit (لنظام macOS):
TextEdit هو محرر نصوص مدمج مع نظام macOS، ويأتي مثبتًا مع النظام. يمكن العثور عليه من خلال البحث في التطبيقات أو باستخدام Spotlight.
Gedit هو محرر نصوص شائع في توزيعات لينكس، خاصة توزيعات Gnome. يمكنك تنزيله من خلال مدير الحزم الخاص بتوزيعتك.
4. Leafpad (لنظام Linux):
Leafpad هو محرر نصوص بسيط في توزيعات لينكس. يمكنك العثور عليه في مستودعات الحزم لبعض التوزيعات.
5. Visual Studio Code (محرر نصوص متعدد المنصات):
كل من هذه البرامج يتوفر على مواقعها الرسمية، وبعضها يأتي مدمجًا مع نظام التشغيل نفسه مثل Notepad وTextEdit.
عند تجربة الكود على الحاسوب، في كل مرة تقوم بإجراء تعديل على ملف الـ HTML يجب أن تقوم بتحديث الصفحة المفتوحة في المتصفح مرة واحدة حتى يظهر لك نتيجة آخر تحديث للملف.
تجربة الكود مباشرةً في موقعنا
لتجربة الكود في موقعنا سواء كنت تستخدم حاسوب أو هاتف، يمكنك إستخدام محرر الويب الذي قمنا بتجهيزه لك مسبقاً.
عند كتابة أي كود في هذا المحرر يمكنك النقر على زر التشغيل حتى يعرض لك النتيجة بكل سهولة.
بالإضافة لذلك، أي كود نقوم بشرحه لك لاحقاً في الدورة ستجد تحته زر يسمح لك بتجربة الكود مباشرةً في موقعنا.
أنقر على زر "جرب الكود" الموضوع تحت الكود التالي حتى يتم فتحه بداخل محرر هرمش و ترى نتيجة تشغيله مع إمكانية التعديل عليه.