تعد إضافة الصور إلى موقع الويب الخاص بك أو ملف تعريف الوسائط الاجتماعية طريقة رائعة لتحديث صفحتك، كما أن كود إضافة الصور بسيط للغاية وعادة ما يكون أحد الدروس الأولى التي يتعلمها متعلم HTML.
خطوات
أضف صورة
1 قم بتحميل صورتك. هناك العديد من خدمات استضافة الصور المجانية مثل ألبومات Picasa و Imgure و Flickr و Photobucket. اقرأ المصطلحات بعناية لأن بعض الخدمات تقلل من جودة الصورة أو تحذف صورة إذا شاهدها الكثير من الأشخاص (وهذا يستهلك عرض النطاق الترددي للمضيف).
- تسمح لك بعض خدمات استضافة المدونات بتحميل الصور باستخدام أدوات إدارة المدونة.
- إذا كنت قد دفعت مقابل استضافة الويب، فقم بتحميل الصورة إلى موقع الويب الخاص بك. يوصى بإنشاء مجلد صور للحفاظ على تنظيم ملفاتك. X موارد البحث
- إذا كنت ترغب في استخدام الصورة على موقع ويب آخر، فاطلب إذن مالك الصورة. إذا سمح لك مالك الصورة، فقم بتنزيل الصورة ثم تحميلها إلى موقع استضافة الصور.
2 افتح ملف HTML. افتح مستند HTML لصفحة الويب حيث سيتم عرض الصورة.
- إذا كنت تحاول إدراج صورة في منتدى، فيمكنك الكتابة مباشرة في المنشور، حيث تستخدم العديد من المنتديات نظام إدراج خاصًا بخلاف HTML. اطلب المساعدة من مستخدمي المنتدى الآخرين إذا لم تنجح.
3 ابدأ بـ img. ابحث عن جزء صفحة HTML حيث تريد إدراج الصورة، ثم اكتب ملف
علامة فيه. هذه العلامة عبارة عن علامة فارغة، مما يعني أنها لا تحتاج إلى علامة إغلاق، وسيتم وضع كل ما تحتاجه لعرض الصورة بين قوسين مثلث.
4 ابحث عن ارتباط صورتك. انتقل إلى صفحة الويب التي تستضيف صورتك، وانقر بزر الماوس الأيمن (أو انقر مع الضغط على مفتاح التحكم في جهاز Mac) واختر “نسخ رابط الصورة”. يمكنك أيضًا النقر فوق خيار “عرض الصورة” لعرض الصورة وحدها ثم نسخ رابط الصورة من شريط العناوين.
- إذا قمت بتحميل الصورة إلى دليل الصور على موقع الويب الخاص بك، فيمكنك الوصول إليها على / images / filename. يمكن أن يكون دليل الصور داخل مجلد آخر. إذا لم يفلح ذلك، يمكنك تجربة الدليل الجذر.
5 ضع رابط الصورة في خاصية src. ربما تعلم بالفعل أنه يتم وضع سمات HTML داخل العلامات لتعديلها. السمة src هي اختصار لكلمة “source”، وهي تخبر المتصفح بمكان البحث عن الصورة. اكتب src = “https//en.wikihow.com/” والصق رابط الصورة بين علامتي اقتباس. هذا مثال
6 أضف خاصية بديل. يحتوي رمز HTML الآن على كل ما يحتاجه لعرض الصورة، ولكن من الأفضل إضافة خاصية alt أيضًا. تخبر هذه الخاصية المتصفح بالنص الذي سيتم عرضه عند فشل تحميل الصورة. الأهم من ذلك، أن هذه الميزة تساعد محركات البحث على معرفة ما تدور حوله الصورة وتسمح لقارئات الشاشة بوصف الصورة للأشخاص الذين يعانون من مشاكل في الرؤية. X Research Source اتبع المثال التالي مع تغيير النص داخل علامات الاقتباس
- إذا لم تكن الصورة مهمة لمحتوى الصفحة، فقم بتضمين سمة النص البديل بدون نص (alt = “”). X موارد البحث
7 احفظ التغييرات. احفظ ملف HTML على موقع الويب الخاص بك. قم بزيارة الصفحة التي قمت بتحريرها للتو، أو أعد تحميل الصفحة إذا كنت قد فتحتها بالفعل. يجب أن ترى الصورة الآن. إذا كان حجم الصورة غير صحيح أو لم تكن راضيًا عنها لأي سبب آخر، فانتقل إلى القسم التالي.
تعديلات اختيارية
1 قم بتغيير حجم الصورة. للحصول على أفضل النتائج، قم بتنزيل النسخة الجديدة من الصورة. يؤدي تعيين العرض والارتفاع باستخدام كود HTML إلى توجيه المتصفح لتقليص الصورة أو تمديدها، الأمر الذي قد يختلف بين المتصفحات المختلفة ويمكن أن يؤدي إلى أخطاء في العرض (نادرًا). مصدر بحث X استخدم هذا التنسيق إذا كنت تريد تحريرًا سريعًا ومفيدًا
(عدد البكسل أو “وحدات البكسل css” الملائمة للجوّال في H TML 5.) X Search Resource X Search Resource- أو (النسبة المئوية لأبعاد صفحة الويب، أو النسبة المئوية لعنصر HTML الذي يحتوي على الصورة.)
- سيحافظ المتصفح على نسبة العرض إلى الارتفاع إذا أدخلت خاصية واحدة فقط (ارتفاع أو عرض).
2 أضف بيانات الكيفية. يمكن استخدام خاصية العنوان لإضافة تسميات توضيحية أو معلومات إضافية حول الصورة. على سبيل المثال، يمكنك ذكر اسم المصور هنا. يتم عرض هذا النص عادةً عندما يحرك الزائر مؤشر الماوس فوق الصورة.
3 تحويل الصورة إلى ارتباط. أدخل علامة الصورة داخل علامة الارتباط التشعبي لتحويل الصورة إلى رابط. هذا مثال
أفكار مفيدة
- تعد ملفات GIF مناسبة للشعارات والصور الكرتونية، بينما تعد ملفات JPEG مناسبة للصور الأكثر تعقيدًا مثل الصور الفوتوغرافية.
- تأكد من تضمين تنسيق الصورة (.jpg، .gif، وما إلى ذلك) في الرابط.
- احفظ نسخة احتياطية من الصورة على جهاز الكمبيوتر الخاص بك لاستخدامها عند الضرورة.
- في معظم الحالات، يجب أن تلتزم بتنسيق gif أو jpeg أو jpg أو png X مصدر البحث الخاص بي، حيث قد لا يتم عرض التنسيقات الأخرى بشكل صحيح على جميع المتصفحات.
تحذيرات
- لا تسرق عرض النطاق الترددي عن طريق إدراج رابط الصورة من موقع شخص آخر لأن هذا سيستهلك النطاق الترددي لموقع الشخص الآخر دون جذب أي زوار إلى صفحته. بالإضافة إلى ذلك، ستختفي الصورة من موقع الويب الخاص بك إذا تعطل الموقع الذي تم تحميلها عليه. إذا لاحظ مالك الصورة ما تفعله، فيمكنه حتى تغيير الصورة التي تظهر على موقع الويب الخاص بك. X موارد البحث