كيفية إنشاء صورة GIF متحركة وإضافتها إلى HTML
آخر تحديث في 22 نوفمبر 2023 by بيتر وود
في عالم تصميم الويب وإنشاء المحتوى المتطور باستمرار، تعد القدرة على دمج العناصر المرئية والرسوم المتحركة الجذابة في صفحات الويب مهارة قيمة. تعد صور GIF واحدة من أكثر أشكال الرسوم المتحركة جاذبية واستخدامًا على نطاق واسع على الإنترنت. سواء كنت ترغب في إضافة الفكاهة، أو إنشاء عناصر تفاعلية، أو ببساطة تحسين المظهر المرئي لموقع الويب الخاص بك، فإن معرفة كيفية إضافة صور GIF إلى HTML تعد مهارة أساسية لأي مطور ويب أو منشئ محتوى. في هذا الدليل النموذجي، سيتم توجيهك عبر الخطوات بسلاسة دمج صور GIF في كود HTML حتى تتمكن من إضفاء الحيوية على محتوى الويب الخاص بك.
الجزء 1: كيفية إنشاء رسوم متحركة GIF لإضافتها بتنسيق HTML
قبل إضافة الرسوم المتحركة بتنسيق GIF إلى HTML، تحتاج أولاً إلى الرسوم المتحركة بتنسيق GIF. إذا وجدت صورة GIF متحركة مناسبة جدًا على موقع الويب، فيمكنك حفظ الرابط الخاص بها مباشرةً لاستخدامه لاحقًا، ولكن إذا لم تجد صورة GIF متحركة مناسبة، فيمكنك إنشاء صورة GIF متحركة بنفسك لإضافتها إلى موقع الويب. WidsMob GIF هو صانع ومحرر للرسوم المتحركة بتنسيق GIF يسمح لك بإنشاء أي رسوم متحركة بتنسيق GIF تريدها من خلال ملفات الفيديو والصور.
1. استيراد ملفات MP4 وMKV وWEBM وMPEG والعديد من أنواع ملفات الفيديو الأخرى.
2. قم بتخصيص محتوى الرسوم المتحركة GIF ومعاينتها على الفور.
3. اضبط إعدادات HSL الخاصة برسوم GIF المتحركة للحصول على أفضل تجربة مشاهدة.
4. أضف نصًا إلى الرسوم المتحركة GIF للحصول على شرح مساعد.
الخطوة الأولى: تحميل وتثبيت WidsMob GIF على حاسوبك. بعد التثبيت الناجح، قم بتشغيل البرنامج. انقر على فيديو إلى GIF الموجود على الصفحة الرئيسية للبرنامج، وحدد ملف الفيديو في مربع الحوار المنبثق، ثم قم باستيراده إلى البرنامج. بعد استيراد الفيديو بنجاح، سيتم إنشاء رسوم GIF المتحركة تلقائيًا وبدء تشغيلها.
الخطوة الأولى: سيكون محتوى الفيديو أكثر تعقيدًا بعض الشيء، لذا يمكنك التفكير في إعادة تحديد محتوى الرسوم المتحركة بتنسيق GIF. يوجد جدول زمني أسفل مربع المعاينة لرسوم GIF المتحركة. يمكنك تحديد محتوى رسوم GIF المتحركة من خلال مربعات التحديد الموجودة على طرفي الخط الزمني، أو إدخال وقت البدء ووقت التشغيل لرسوم GIF المتحركة على كلا الطرفين. انقر على بلايستشن أيقونة لمعاينة تشغيل الرسوم المتحركة GIF.
الخطوة الأولى: انقر على تعديل الفيديو زر. في منطقة التحرير على اليمين، ستظهر لك 3 خيارات لضبط HSL لرسوم GIF المتحركة. ضبط شريط التمرير تباين ولاحظ التغييرات في الوقت الفعلي لرسوم GIF المتحركة على اليسار. إذا كنت ترغب في الحصول على أفضل تجربة مشاهدة، فأنت بحاجة إلى التعاون بشكل مباشر مع الخيارين الآخرين.
الخطوة الأولى: بالنسبة لرسوم GIF المتحركة المضافة بتنسيق HTML، قد تحتاج إلى إضافة نص للمساعدة في الشرح. انقر على إضافة نص الموجود في الزاوية اليمنى العليا من مربع المعاينة، وأدخل نصًا في مربع الحوار المنبثق، وقم بتعيين لون النص والخط والحجم وما إلى ذلك. انقر فوق الزر OK الزر، ويتم إضافة النص رسميًا إلى الرسوم المتحركة GIF.
الخطوة الأولى: حدد النص الموجود على رسم GIF المتحرك مباشرةً واسحبه لتعديل موضع النص على رسم GIF المتحرك. بالنسبة للرسوم المتحركة بتنسيق GIF بتنسيق HTML، يمكنك ضبط شريط التمرير جودة in إعدادات GIF للحصول على صورة GIF متحركة عالية الجودة. بعد التحرير اضغط على تصدير GIF زر لتصدير الرسوم المتحركة GIF وإدراجها في HTML.
الجزء 2: كيفية إضافة صورة GIF متحركة إلى HTML
الآن بعد أن أصبح لديك رسم متحرك بتنسيق GIF، فإن الشيء التالي الذي يجب عليك فعله هو إضافة رسم GIF المتحرك بنجاح إلى ملف HTML لضمان إمكانية تشغيله بسلاسة على الويب. ومع ذلك، قد تختلف إعدادات العرض لمتصفحات الويب المختلفة، وتحتاج إلى الاستمرار في المحاولة لضمان أفضل تجربة مشاهدة.
الخطوة الأولى: تأكد من وضع ملف الرسوم المتحركة GIF في نفس ملف الدليل الذي يحتوي على كود HTML. لفتح ملف HTML، يمكنك اختيار محرر نصوص أو بيئة تطوير متكاملة. ابحث عن الكود الموجود في الكود الخاص بك والذي يحتاج إلى إدراج رسوم متحركة بتنسيق GIF. بشكل عام، يمكنك استخدام علامة لإدراج الرسوم المتحركة GIF.
الخطوة الأولى: أضف src إلى img لتحديد مسار تخزين ملف الرسوم المتحركة GIF. المسار النسبي هو عنوان الملف المخزن في نفس الدليل مثل HTML. لا تنس كتابة اسم وتنسيق صورة GIF المتحركة. تسمح لك المسارات المطلقة بإضافة صور GIF متحركة تم تحميلها على موقع الويب.
الخطوة الأولى: في سمة img، يمكنك تعيين سمة alt، والتي يمكن أن توفر وصفًا موجزًا لرسوم GIF المتحركة. عندما يفشل تحميل الرسوم المتحركة GIF، سيتم عرض النص للحصول على المساعدة.
الخطوة الأولى: اعتمادًا على إعدادات العرض الخاصة بالويب، قد تحتاج إلى ضبط العرض والارتفاع. يحتوي HTML على وظيفة السمة هذه.
الخطوة الأولى: احفظ ملف HTML مع إضافة الرسوم المتحركة GIF، ويمكنك فتحه في متصفح الويب حتى تتمكن من معاينة الرسوم المتحركة GIF التي يتم تشغيلها على صفحة الويب. يجب تشغيل ملفات GIF المتحركة تلقائيًا في معظم المتصفحات دون الحاجة إلى تعليمات برمجية إضافية.
الجزء 3. الأسئلة الشائعة حول GIF إلى HTML
الخاتمة
لقد تعلمت الآن كيفية إضافة صور GIF إلى HTML، ونأمل أن يساعدك هذا الدليل على تحسين محتوى الويب الخاص بك وإشراك جمهورك من خلال الرسوم المتحركة الجذابة. يعد الويب مساحة ديناميكية، والقدرة على تضمين صور GIF تفتح عالمًا من الإمكانيات الإبداعية. سواء كنت تستخدم صور GIF للترفيه أو التعليم أو لتحسين تجربة المستخدم، تذكر أن تحافظ على الرسوم المتحركة ذات الصلة والأداء الأمثل والمتسقة مع التصميم العام لموقعك.