وضع زر نسخ إلى الحافظة على صفحة ويب: 5 خطوات (بالصور)

جدول المحتويات:

الخطوة 1: إنشاء قلم
الخطوة 2: أضف المراجع
الخطوة 3: الكود
الخطوة 4: تغيير هذا الرمز ليناسب احتياجاتك
الخطوة 5: العرض

فيديو: وضع زر نسخ إلى الحافظة على صفحة ويب: 5 خطوات (بالصور)

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:39

قد يبدو هذا بسيطًا ، وقد أبدو سخيفًا لوضعه في 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

موصى به:

ESP8266 مراقبة درجة حرارة Nodemcu باستخدام DHT11 على خادم ويب محلي - احصل على درجة حرارة الغرفة ورطوبتها على متصفحك: 6 خطوات

ESP8266 مراقبة درجة حرارة Nodemcu باستخدام DHT11 على خادم ويب محلي | احصل على درجة حرارة الغرفة ورطوبتها على متصفحك: مرحبًا يا شباب اليوم سنصنع الرطوبة & amp؛ نظام مراقبة درجة الحرارة باستخدام ESP 8266 NODEMCU & amp؛ جهاز استشعار درجة الحرارة DHT11. سيتم الحصول على درجة الحرارة والرطوبة من مستشعر DHT11 & amp؛ يمكن رؤيته على متصفح أي صفحة ويب ستتم إدارتها

صفحة ويب Node.js الجزء 2: 7 خطوات

صفحة ويب Node.js الجزء 2: مرحبًا بكم في الجزء 2 !! هذا هو الجزء الثاني من البرنامج التعليمي لتطبيق موقع Node.js الخاص بي. لقد قسمت هذا البرنامج التعليمي إلى جزأين لأنه يفصل بين أولئك الذين يحتاجون فقط إلى مقدمة موجزة وأولئك الذين يريدون درسًا تعليميًا كاملاً على صفحة ويب

صفحة ويب Bare Bones: 10 خطوات

صفحة ويب Bare Bones: سنقوم اليوم بإنشاء صفحة ويب بسيطة جدًا وعظام عارية من البداية. سنتحدث عن عناصر HTML ، وتصميم صفحة الويب الخاصة بك (الألوان ، والخطوط ، والمحاذاة ، وما إلى ذلك) ، وأخيرًا كيفية إدراج صورة في صفحة الويب الخاصة بك! بنهاية هذه التعليمات

وحدة WiFi رقم 2 ESP8266-NODEMCU بقيمة 3 دولارات - دبابيس لاسلكية تتحكم من خلال صفحة ويب: 9 خطوات (مع صور)

ESP8266-NODEMCU وحدة WiFi رقم 2 بقيمة 3 دولارات - دبابيس لاسلكية تتحكم من خلال صفحة ويب: وصل عالم جديد من هذه الحوسبة الدقيقة وهذا الشيء هو ESP8266 NODEMCU. هذا هو الجزء الأول الذي يوضح كيف يمكنك تثبيت بيئة esp8266 في بيئة arduino IDE من خلال فيديو بدء التشغيل وكأجزاء في