أضف صورة بتنسيق HTML

مؤلف: Christy White
تاريخ الخلق: 4 قد 2021
تاريخ التحديث: 1 تموز 2024
Anonim
[ تعلم Html ] درس #06 - تعلم كل ما يخص الصور وكيفية وضع صور في موقعك
فيديو: [ تعلم Html ] درس #06 - تعلم كل ما يخص الصور وكيفية وضع صور في موقعك

المحتوى

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

لتخطو

الطريقة الأولى من 1: إدراج الصور باستخدام HTML

  1. قم بتحميل صورتك على موقع استضافة مجاني ، مثل Photobucket أو TinyPic ، والذي يسمح بالربط السريع. يسمح الارتباط الساخن بالارتباط المباشر للصورة بخادم الموقع ؛ قام بعض المزودين بحظر هذا لأن الارتباط السريع يستخدم عرض النطاق الترددي الخاص بهم ويشغل مساحة على خوادمهم.
    • إذا كان لديك حساب استضافة مدفوع ، فقم بتحميل الصور مباشرة إلى الخادم حيث يتم وضع موقع الويب الخاص بك. هذا دائمًا أكثر موثوقية من الموقع المجاني ولا يجب أن يكون مكلفًا على الإطلاق.
  2. افتح مستندًا جديدًا في محرر نصوص (على سبيل المثال، Notepad / Notepad) أو افتح الصفحة في موقع الويب / ملف التعريف الخاص بك حيث يمكنك تغيير كود HTML مباشرة.
  3. ابدأ بامتداد IMG بطاقة شعار. ال IMG العلامة فارغة ، مما يعني عدم الحاجة إلى علامة إغلاق. ومع ذلك ، بالنسبة للتحقق من صحة XHTML ، لا يزال بإمكانك وضع مسافة وشرطة مائلة أمامها أكثر من لافتة.
    • img />
  4. هناك العديد من السمات المتاحة ، ولكن هناك سمة واحدة فقط ضرورية:src. هذا هو الموقع / العنوان ، أو أيضًا عنوان URL لصورتك.
    • img src = "URL للصورة" />
  5. بعد ذلك عليك أن بديل اضف ميزة. يعرض هذا نصًا بديلاً ، في حالة فشل تحميل الصورة. هذه أيضًا خدمة للمكفوفين تستخدم قارئات الشاشة.
    • إذا قمت بتمرير المؤشر فوق صورة ، فسيظهر هذا النص أيضًا كتلميح أداة ، ولكن هذا هو الحال فقط في Internet Explorer. الحل الذي يعمل مع جميع المتصفحات (Firefox وآخرون.) هو عليه لقب سمة للاستخدام بالإضافة إلى بديل. (يمكنك حذف الأخير إذا كنت لا تريد أن تحتوي الصورة على تلميح أداة.)

كمثال:img src = "URL of image" alt = "فقط في حالة" title = "Tooltip" />


  1. الآن يمكنك الإشارة إلى حجم الصورة بامتداد ارتفاع و العرض السمة ، وتحديد البكسل أو النسبة المئوية. لاحظ أن تغيير الحجم بهذه الطريقة يغير حجم العرض فقط ، وليس حجم الصورة نفسها. لتقصير وقت تحميل صورة ، من الأفضل ، خاصة مع الصور الكبيرة ، تغيير حجمها مسبقًا باستخدام برنامج تحرير الصور أو باستخدام خدمة عبر الإنترنت مثل PicResize.com.
    • img src = "URL of image" alt = "فقط في حالة" title = "Tooltip" height = "50٪" width = "50٪" />
    • img src = "عنوان URL للصورة" alt = "فقط في حالة" title = "تلميح الأداة" height = "25px" width = "50px" />

نصائح

  • تُعطى قيمة هذه السمات إما بالبكسل ، أو كنسبة مئوية ، من 1-100٪.
  • يمكن وضع الصورة في أي مكان على صفحة الويب ، باستخدام سمات التنسيق المختلفة مثل أعلى ، أسفل ، وسط ، يمين ، يسار ، إلخ.
  • تُستخدم خاصية hspace لإدراج مسافة أفقية على يسار ويمين الصورة ، بينما تُستخدم خاصية vspace لإفساح المجال أعلى وأسفل الصور والكائنات الأخرى.
  • لا تنغمس كثيرًا في الصور. هذا يبدو فوضوي وغير محترف.
  • تعد صور GIF مناسبة للشعارات أو الرسوم المتحركة ، ولكن هذا النوع من الملفات أقل ملاءمة للصور والصور الأخرى ذات الألوان المتعددة.
    • تدعم صور GIF ألوان 8 بت بحد أقصى 256 لونًا للصورة. لذلك من المتوقع ألا يكون استنساخ رسم توضيحي ملون 16 أو 24 بت أو صورة بنفس الجودة.
    • تدعم صور GIF أيضًا الشفافية. جزء واحد من الشفافية ممكن ، مما يعني أنه يمكن جعل لون واحد شفافًا.
    • يتم دعم التداخل أيضًا بواسطة صور GIF مما يعني أن زائر الموقع سيحصل على فكرة عن الشكل الذي ستبدو عليه الصورة قبل تحميلها بالكامل.
    • يدعم تنسيق GIF أيضًا الرسوم المتحركة.
  • تأكد من أن عنوان URL يوضح تنسيق ملف الصورة (.webp .gif وما إلى ذلك).

تحذيرات

  • لا Hotlink!