مدونة رويالتي: أفضل 7 برامج تحرير HTML مجانية على الإنترنت لاختبار التعليمات البرمجية الخاصة بك

 

كل موقع تستخدمه يعتمد على HTML. بينما يحتاج مطورو الويب إلى مهارات في JavaScript و Python و CSS والبرمجة النصية من جانب الخادم ، فإن HTML يجمعها معًا.

بدون HTML ، لا يوجد ويب ، لذا فأنت بحاجة إلى معرفة كيفية إنشائه وتحريره. بدلاً من إعداد نظام اختبار كود HTML على جهاز الكمبيوتر الخاص بك ، من الأسهل اختبار الكود في المستعرض.

سواء كنت تتلاعب بمقتطفات HTML الصغيرة أو تصميمات مواقع الويب الكاملة ، فإن محرر HTML عبر الإنترنت مثالي.

لماذا يجب عليك استخدام محرر HTML على الإنترنت

يعد استخدام محرر HTML المستند إلى المستعرض أمرًا منطقيًا على شيء مثل Notepad ++ للأسباب التالية:

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

هذه النقطة الأخيرة مهمة للغاية. هذا يعني أنه يمكنك تطوير صفحة ويب بسهولة على جهاز كمبيوتر مثل Chromebook. يمكنك حتى استخدام جهاز Android اللوحي أو جهاز كمبيوتر بقيمة 50 دولارًا مثل Raspberry Pi.

ترميز HTML هو بوابة مباشرة يسهل الوصول إليها لفهم البرمجة والتطوير. تحتاج باستمرار إلى اختبار كود HTML الخاص بك – ما هو أفضل من النتائج في الوقت الفعلي في نافذة المتصفح؟

دعنا نلقي نظرة على بعض من أفضل برامج تحرير HTML المتوفرة حاليًا عبر الإنترنت.

1. CodePen

CodePen هي “بيئة تطوير اجتماعية” لمطوري الويب ، مما يعني في الأساس أنها محرر على الإنترنت مع إمكانات تعاون. يقدم تصميمًا بسيطًا. ستجد لوحة HTML ولوحة CSS ولوحة JavaScript ، بالإضافة إلى لوحة للمعاينة في الوقت الفعلي. يمكن ضبط جميع أبعاد اللوحة عن طريق سحب الحواف حولها.

يمكنك إنشاء “أقلام” ، والتي تشبه الملاعب الفردية لتعديل كود الويب. يمكن تجميع أقلام متعددة في مجموعات.

في حين أن التسجيل للاستخدام الأساسي مجاني ، تتطلب الأقلام والمجموعات الخاصة حساب Pro . يبدأ هذا من 8 دولارات شهريًا ويتضمن استضافة الموارد والموضوعات القابلة للتضمين والتعاون في الوقت الفعلي والوصول إلى IDE لتطوير الويب الخاص بـ CodePen.

كثير من الناس يعتبرون CodePen أفضل محرر HTML على الإنترنت. جربه لترى ما إذا كان يناسب احتياجاتك.

2. JSFiddle

JSFiddle هو إلى حد كبير ما يبدو عليه: صندوق رمل حيث يمكنك العبث بجافا سكريبت. ربما تعلم أن JavaScript يسير جنبًا إلى جنب مع HTML و CSS. هذا يعني أنه باستخدام JSFiddle ، يمكنك تحرير الثلاثة معًا مرة واحدة باستخدام واجهة تحرير JSFiddle.

يمكنك تخطي JavaScript تمامًا إذا كنت ترغب في ذلك.

الشيء الجميل في JSFiddle هو أنه يمكنك إضافة طلبات خارجية في الشريط الجانبي. يتيح لك ذلك تضمين ملفات JavaScript و CSS خارج الموقع لتحسين HTML. مفيد أيضًا هو الزر Tidy ، الذي ينظف تلقائيًا المسافة البادئة للرمز ، بينما يتيح النقر فوق Collaborate التعاون عبر الإنترنت في الوقت الفعلي.

الجانب السلبي الوحيد هو أنه يجب عليك النقر فوق الزر “تشغيل” لتحديث لوحة المعاينة.

3. JSBin

فكر في JSBin كبديل أبسط وأنظف لـ JSFiddle. يمكنك تغيير أي مجموعة من HTML و CSS و JavaScript ببساطة عن طريق تنشيط اللوحات مع شريط الأدوات في الأعلى. لتحقيق أقصى قدر من المرونة ، يمكنك أيضًا تمكين أو تعطيل لوحة المعاينة ولوحة وحدة التحكم كما هو مطلوب.

ولكن بينما يسمح لك JSFiddle بربط موارد CSS و JavaScript الخارجية ، فإن JSBin يقيدك بمكتبات JavaScript محددة مسبقًا. التحديد جيد ، لكنه يتراوح من jQuery إلى React إلى Angular والمزيد.

على الرغم من أن JSBin مجاني ولا يتطلب حسابًا ، فستحتاج إلى حساب Pro للحصول على الميزات المتقدمة. وتشمل هذه الحاويات الخاصة والتضمينات المخصصة واستضافة الموارد ومزامنة Dropbox وعناوين URL للصفحات المنشورة عبر JSBin.

4. نسيج ليفي

يشبه Liveweave بصريًا برامج التحرير السابقة ، مع واجهة مستخدم رائعة. مثل JSFiddle ، يسمح Liveweave بالتعاون في الوقت الفعلي ، ومثل JSBin ، فإنه يسمح لك بالاتصال بمصادر خارجية سابقة الإنشاء مثل jQuery.

لكن لديها أيضًا بعض الميزات الفريدة. ينشئ Lorem Ipsum Generator نصًا نائبًا في موضع المؤشر الحالي. يوفر CSS Explorer أداة WYSIWYG لإنشاء أنماط CSS ويساعدك Color Explorer على تحديد الألوان المثالية. وفي الوقت نفسه ، يسمح لك محرر المتجهات بإنشاء رسومات متجهة لموقعك.

5. HTMLhouse

يعد HTMLhouse خيارًا جيدًا إذا كنت تهتم فقط بـ HTML (على سبيل المثال ، بدون CSS أو JavaScript). نظيف وأقل حدًا ، يتم تقسيمه عموديًا بالتحرير على اليسار والمعاينة في الوقت الفعلي على اليمين.

من المفيد القدرة على نشر HTML الخاص بك ومشاركته بشكل خاص (عبر عنوان URL خاص) أو بشكل عام (يضاف إلى صفحة تصفح HTMLhouse ). إنه بسيط ولكنه فعال ، وهذا بالضبط هو المكان الذي يأتي فيه محرر HTML عبر الإنترنت ويتفوق.

لاحظ أن HTMLhouse تم إنشاؤه وتشغيله بواسطة الأشخاص في Write.as ، وهي أداة كتابة على الإنترنت خالية من الإلهاء. ضع ذلك في الاعتبار إذا كنت تخطط لكتابة محتوى موقعك.

6. HTMLG

يتبع خيار HTMLG آخر نفس نمط استخدام التعليمات البرمجية وأجزاء المعاينة لـ HTML. ومع ذلك ، لا تتضمن هذه الأداة CSS و JavaScript في نفس المشروع الموحد. بدلاً من ذلك ، إذا كنت تريد تحريرها ، فسيتعين عليك فتح علامة تبويب جديدة وتحريرها كمشاريع منفصلة.

هذا يجعلها مثالية لتحرير HTML البسيط واختبار الكود في المتصفح ؛ أقل إذا كنت تريد دمج تغييرات CSS.

لاحظ أنه يوجد حد 300 كلمة إذا كنت تختبر صفحات ويب كاملة باستخدام HTMLG. لزيادة ذلك ، يمكنك الاشتراك في الإصدار المميز الخالي من الإعلانات ، بدءًا من 5.80 دولارًا شهريًا.

7. Dabblet

يقدم Dabblet نظرة مختلفة قليلاً على برامج تحرير HTML عبر الإنترنت ، حيث يقسم الشاشة إلى جزأين ، بدلاً من ثلاثة / أربعة أجزاء. لذلك ، لديك طريقة عرض لـ HTML والنتيجة وعرض منفصل (لكن مرتبط) لـ CSS والنتيجة.

هذا يوفر مساحة أكبر ، مما يعطي رؤية أوضح للكود والمعاينة. بالإضافة إلى ذلك ، يبرز مدقق HTML و CSS المدمج في w3.org أي مشاكل.

إذا كنت بحاجة إلى مساحة سطح مكتب مجانية لاختبار رمز موقعك ، فقد يكون هذا هو أفضل محرر HTML لك.

استخدم أفضل برامج تحرير HTML على الإنترنت لتحسين مهاراتك

إذا كان تعرّفك الوحيد إلى HTML هو ما تعلمته قبل عشر سنوات ، فقد حان الوقت الآن لتعويض ذلك. تم إصدار HTML5 في عام 2014 وقدمت مجموعة من المعايير والميزات الجديدة. لست متأكدا من أين تبدأ؟ تحقق من عناصر HTML5 الأساسية الجديدة هذه.

هل ترغب في تعلم الممارسات الجيدة في تصميم وتطوير مواقع الويب HTML5؟ تحقق من هذه المواقع للحصول على أمثلة عالية الجودة لترميز HTML . يجب عليك أيضًا التحقق من هذه الأدوات الأخرى لترقية مهارات تطوير الويب لديك .

اقرأ المقال كاملاً: أفضل 7 برامج تحرير HTML مجانية على الإنترنت لاختبار الكود الخاص بك