HTMLالمحررات
- مفهوم المحرر
- استخدام محرر جيد للعمل
- خطوات تحميل و تثبيت و استخدام VSCode
- تجربة الكود مباشرةً في موقعنا
مفهوم المحرر
المحرر ( Editor ) هو أي برنامج يمكن استخدامه للتعديل على محتوى الملفات النصية.
أنظمة التشغيل عادةً ما يكون فيها محرر نصوص ( Text Editor ) جاهز، فمثلاً في نظام ويندوز يوجد محرر جاهز إسمه Notepad، و في نظام ماك يوجد محرر جاهز إسمه TextEdit، و في نظام لينكس يوجد محرر جاهز إسمه Gedit أو Leafpad أو غيرهما على حسب التوزيعة التي تستخدمها.
المحررات الإفتراضية التي تأتي مع أنظمة التشغيل ليست أفضل محررات يمكن استخدامها لكتابة كود HTML و CSS و Javascript لأنها لا تساعدك في كتابة الكود و تصحيح الأخطاء الموجودة فيه و لا تظهر لك ألوان جميلة كما تفعل باقي المحررات المخصصة لذلك.
في هذا الدرس ستتعلم كيفية كتابة الكود بواسطة برنامج VSCode و كيفية تجربته بشكل مباشر في محرر الويب الخاص بموقع هرمش.
استخدام محرر جيد للعمل
عند استخدام محرر بهدف كتابة كود، قم دائماً باختيار محرر ألوانه جيدة و يكون بنفس الوقت يساعدك أثناء كتابة الكود.
لتدرك ضرورة ذلك، لاحظ كيف يظهر الكود في برنامج Notepad الإفتراضي الموجود في ويندوز و كيف يظهر الكود نفسه في برنامج جيد مثل VSCode الذي يمكنك تحميله و تثبيته بنفسك.
الكود في برنامج Notepad يظهر بلون واحد كالتالي.
نفس الكود السابق في برنامج VSCode يظهر بشكل جميل جداً و سهل القراءة كالتالي.
لكتابة كود HTML على الحاسوب يمكنك استخدام أي محرر تريده و لكننا ننصحك باستخدام VSCode على وجه الخصوص لأنه من أفضل و أقوى المحررات المجانية الموجودة و أسهلها في الإستخدام.
خطوات تحميل و تثبيت و استخدام VSCode
هنا وضعنا لك كل الخطوت اللازمة التي تجعلك قادر على إنشاء ملفات HTML على حاسوبك بسهولة تامة باستخدام برنامج VSCode.
خطوات تحميل و تثبيت برنامج VSCode
شاهد الخطوات التالية لتتعلم كيف تقوم بتحميل و تثبيت برنامج VSCode الملائم لحاسوبك.
خطوات إنشاء ملف HTML
هنا وضعنا خطوات إنشاء ملف HTML بواسطة برنامج VSCode و من ثم مشاهدة نتيجته بواسطة المتصفح.
ملاحظة: عليك إتباع هذه الخطوات في كل مرة تريد فيها تجربة الكود على الكمبيوتر.
عند تجربة الكود على الحاسوب، في كل مرة تقوم بإجراء تعديل على ملف الـ HTML يجب أن تقوم بتحديث الصفحة المفتوحة في المتصفح مرة واحدة حتى يظهر لك نتيجة آخر تحديث للملف.
تجربة الكود مباشرةً في موقعنا
لتجربة الكود في موقعنا سواء كنت تستخدم حاسوب أو هاتف، يمكنك إستخدام محرر الويب الذي قمنا بتجهيزه لك مسبقاً.
عند كتابة أي كود في هذا المحرر يمكنك النقر على زر التشغيل حتى يعرض لك النتيجة بكل سهولة.
بالإضافة لذلك، أي كود نقوم بشرحه لك لاحقاً في الدورة ستجد تحته زر يسمح لك بتجربة الكود مباشرةً في موقعنا.
أنقر على زر "جرب الكود" الموضوع تحت الكود التالي حتى يتم فتحه بداخل محرر هرمش و ترى نتيجة تشغيله مع إمكانية التعديل عليه.
مثال
<html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
