جدول المحتويات:
2025 مؤلف: John Day | [email protected]. آخر تعديل: 2025-01-13 06:56
قد يبدو هذا بسيطًا ، وقد أبدو سخيفًا لوضعه في Instructables ، لكن في الواقع ، ليس الأمر بهذه السهولة. هناك CSS ، و Jquery ، و HTML ، وبعض جافا سكريبت رائع ، و حسنًا ، كما تعلم.
الخطوة 1: إنشاء قلم
يوجد هذا الموقع الرائع الذي يسمى Codepen. في الماضي ، لمجرد البرمجة بتنسيق HTML ، كنت مضطرًا إلى ذلك
- قم بتشغيل مستكشف الملفات.
- انتقل إلى المستندات.
- قم بإنشاء ملف txt.
- أعد تسمية هذا الملف إلى "MyHTMLDoc.html".
- اضغط على موافق في مربع حوار التحذير.
- أغلق مستكشف الملفات.
- افتح Visual Studio الذي يستغرق خمس دقائق.
- افتح الملف في Visual Studio ، والذي يستغرق خمس دقائق أخرى. VS بطيء جدًا.
- يبدأ.
- عند الانتهاء ، يجب أن أفتح الملف في Edge لعرض عملي.
الآن ، كل ما عليك فعله هو
- إطلاق Edge.
- اذهب إلى
- في الزاوية العلوية اليمنى ، اضغط على قلم جديد.
- ابدأ الترميز.
انظر كم هو أسهل؟ فقط أدخل JS و CSS و HTML في المربعات الخاصة بها. تظهر النتائج تلقائيًا على اليمين.
في الواقع ، يعد Codepen أفضل بكثير ، لذا أوصيك بالبدء في إنشاء حسابك الآن. نعم ، أكره أن أكون الشخص الذي يعلن ، لكن لا يمكنني مساعدته. إنه أفضل بكثير لا يوجد شيء يمكنني القيام به حيال ذلك.
أو ، إذا كنت لا تريد إنشاء حساب ، يمكنك إنشاء قلم بدون حساب. يمكنك حفظ قلمك تحت اسم المستخدم "Captain Anonymous".
الخطوة 2: أضف المراجع
نظرًا لأننا سنستخدم Jquery وهذا الشيء الرائع (حقًا) المسمى "Balloon.css" ، يجب أن نضيف المراجع أولاً. إذا كنت جديدًا ، فسأخبرك بكيفية القيام بذلك في Codepen.
- انقر فوق الإعدادات.
- بناءً على ما إذا كان المرجع عبارة عن ورقة أنماط أو برنامج نصي ، انقر فوق CSS أو Javascript.
- ضمن Add External (Javascript أو CSS) ، أضف المراجع.
يضيف:
جيش تحرير بلوخ بلوخ: BLAAAAAAA !!!!
الآن قم بإزالة ذلك ووضع علامة HTML التي تربط إلى CDN المفضل لديك لـ Jquery و Balloon.css.
الخطوة 3: الكود
أدناه ، أضف هذا الرمز.
codepen.io/slate-coding/pen/oepQpX
انسخ / الصق الرمز على قلمك.
الخطوة 4: تغيير هذا الرمز ليناسب احتياجاتك
يمكنك العبث بالقلم بقدر ما تريد ليناسب احتياجاتك ، ثم نسخ الكود ولصقه في أي مكان تريده.
الخطوة 5: العرض
codepen.io/alexvgs/pen/oepQpX