إضافة صور إلى موقعك الإلكتروني أو ملفك الشخصي على شبكات التواصل الاجتماعي طريقة رائعة لتجديد صفحتك والرمز البرمجي لإضافة الصور بسيط للغاية وعادة ما يكون أحد أوائل الدروس التي يتعلمها دارس لغة اتش تي ام ال.

جزء 1
جزء 1 من 2:
إدراج صورة

  1. 1
    ارفع صورتك. هناك العديد من خدمات استضافة الصور المجانية مثل ألبومات بيكاسا وامج جور وفليكر وفوتوباكت. اقرأ الشروط بحرص حيث إن بعض الخدمات تقلل جودة الصور أو تحذف الصورة إن استعرضها الكثير من الأشخاص (حيث إن ذلك يؤدي إلى استهلاك معدّل نقل البيانات لدى المُضيف).
    • تسمح لك بعض خدمات استضافة المدونات برفع الصور باستخدام أدوات إدارة المدونة.
    • إن كنت قد دفعت لقاء استضافة ويب، ارفع الصورة إلى موقعك الموقع الإلكتروني باستخدام خدمة اف تي بي. يُنصح بإنشاء مجلد صور للحفاظ على تنظيم ملفاتك.[١]
    • إن كنت ترغب باستخدام الصورة على موقع إلكتروني آخر، اطلب إذن صاحب الصورة. إن سمح لك صاحب الصورة، نزّل الصورة ثم ارفعها إلى موقع استضافة صور.
  2. 2
    افتح ملف اتش تي ام ال. افتح مستند اتش تي ام ال لصفحة الويب التي ستُعرض فيها الصورة.
    • يمكنك الكتابة في المنشور مباشرة إن كنت تحاول إدراج صورة في منتدى حيث تستخدم العديد من المنتديات نظام إدراج خاص غير لغة اتش تي ام ال. اطلب مساعدة مرتادي المنتدى الآخرين إن لم تنجح الطريقة.
  3. 3
    ابدأ بالوسم img. ابحث عن الجزء الذي ترغب بإدراج الصورة فيه ضمن جسم صفحة اتش تي ام ال ثم اكتب الوسم <img> فيه. هذا الوسم وسم فارغ مما يعني أنه لا يحتاج إلى وسم اختتامي وسيكون كل شيء تحتاجه لعرض الصورة بين القوسين المثلثين.
    • <img>
  4. 4
    ابحث عن رابط صورتك. زر صفحة الويب التي تستضيف صورتك وانقر بزر الفأرة الأيمن (أو النقر مع الضغط على الزر control على نظام ماكنتوش) ثم اختر "نسخ رابط الصورة". يمكنك أيضًا النقر على خيار "عرض الصورة" لعرض الصورة وحدها ثم انسخ رابط الصورة من شريط العنوان.
    • إن حملت الصورة إلى دليل صور في موقعك الإلكتروني، يمكنك الوصول إليها من خلال الرابط /images/اسم الملف ويمكن أن يكون دليل الصور بداخل مجلد آخر إن لم ينجح ذلك ويمكنك تجربة الدليل الرئيسي.
  5. 5
    ضع رابط الصورة في خاصية src. لعلك تعرف بالفعل أن خواص اتش تي ام ال توضع بداخل الوسوم لتعديلها والخاصية src اختصار لكلمة "مصدر" وهي تُعلم المتصفّح بمكان البحث لإيجاد الصورة. اكتب src=" " والصق رابط الصورة بين علامتي التنصيص. إليك مثال على ذلك:
    • <img src="http://www.exampleimagehost.com/my-cute-dog.jpg">
  6. 6
    أضِف خاصية alt. يمتلك رمز اتش تي ام ال كل ما يحتاجه لعرض الصورة الآن، إلا أن الأفضل هو إضافة خاصية alt أيضًا حيث تُعلم هذه الخاصية المتصفّح بالنص الذي يجب عرضه عند فشل تحميل الصورة. الأهم من ذلك أن هذه الخاصية تساعد محرّكات البحث على معرفة موضوع الصورة وتسمح لبرامج قراءة الشاشة بوصف الصورة للأشخاص الذين يعانون من مشاكل في الرؤية.[٢] اتبع المثال التالي مع تغيير النص الموجود بداخل علامات التنصيص:
    • <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="Wiki How To العربية: كلبي يأكل طعامه المفضل">
    • إن لم تكن الصورة مهمة لمحتوى الصفحة، ضمّن الخاصية alt دون نص (alt="Wiki How To العربية: ").[٣]
  7. 7
    احفظ التغييرات. احفظ ملف اتش تي ام ال على موقعك الإلكتروني. زر الصفحة التي حرّرتها للتو أو أعِد تحميل الصفحة إن كنت فتحتها بالفعل حيث يفترض أن ترى الصورة الآن. إن كان حجم الصورة غير صحيح أو لم تكن راضيًا عنها لأي سبب آخر، انتقل إلى القسم التالي.

جزء 2
جزء 2 من 2:
تعديلات اختيارية

  1. 1
    غيّر حجم الصورة. للحصول على أفضل النتائج، أعِد تحجيم الصورة باستخدام برنامج تحرير صور مجاني ثم حمل النسخة الجديدة من الصورة. يؤدي ضبط العرض والطول باستخدام رموز اتش تي ام ال إلى توجيه المتصفح إلى تقليص أو تمديد الصورة، الأمر الذي قد يكون متباينًا بين المتصفحات المختلفة ويمكن أن يؤدي إلى أخطاء عرض (نادرًا).[٤] استخدم هذا التنسيق إن كنت ترغب بتعديل سريع ومفيد:
    • <img src="http://example.com/example.png" alt="Wiki How To العربية: اعرض هذا النص" width=200 height=200> (عدد وحدات بكسل أو عدد وحدات "بكسل سي اس اس" المناسبة للهواتف المحمولة في لغة اتش تي ام ال 5.)[٥] [٦]
    • أو <img src="http://example.com/example.png" width=100% height=10%> (نسبة من أبعاد صفحة الويب، أو نسبة من عنصر اتش تي ام ال المحتوي على الصورة.)
    • سيحافظ المتصفح على نسبة الطول إلى العرض إن أدخلت خاصية واحدة فقط (الطول أو العرض).
  2. 2
    أضِف بيانات إرشادية. يمكن استخدام خاصية العنوان title لإضافة تعليق إضافي أو معلومات حول الصورة. يمكنك مثلًا ذكر اسم المصور هنا. عادة ما يُعرض هذا النص عندما يحرّك الزائر مؤشر الفأرة فوق الصورة.
    • <img src="http://example.com/example.png" title="ملتقطة بواسطة فلان الفلاني">
  3. 3
    حول الصورة إلى رابط. أدرج وسم الصورة بداخل وسم الرابط التشعبي <a></a> لتحويل الصورة إلى رابط وإليك مثال على ذلك:
    • <a href="http://www.urloflink.com"><img src="http://urlofimage.com/image.gif"></a>

أفكار مفيدة

  • صور جيف مناسبة للشعارات وصور الكارتون في حين أن صور جي بي اي جي مناسبة للصور الأكثر تعقيدًا مثل الصور الفوتوغرافية.
  • احرص على تضمين صيغة الصورة (.jpg, .gif, etc) في الرابط.
  • احفظ نسخة احتياطية من الصورة على جهاز الكمبيوتر لاستخدامها عند الضرورة.
  • يجب في معظم الحالات الالتزام بالصيغ gif أو jpeg أو jpg أو png[٧] حيث إن الصيغ الأخرى قد لا تظهر بشكل سليم على كل المتصفحات.

تحذيرات

  • لا تسرق معدل نقل البيانات عن طريق إدخال رابط الصورة من موقع شخص آخر حيث يؤدي ذلك إلى استهلاك معدّل نقل البيانات على موقع الشخص الآخر دون إيصال أي زوار إلى صفحته. أضِف إلى ذلك أيضًا أن الصورة ستختفي من موقعك الإلكتروني إن تعطّل الموقع المحملة عليه. إن لاحظ صاحب الصورة ما تفعله، يمكنه حتى أن يغيّر الصورة التي تظهر على موقعك الإلكتروني.[٨]

مقالات ذات صلة في ويكي هاو

Wiki How To العربية: اختراق موقع إلكتروني باستخدام رموز اتش تي ام ال بسيطةاختراق موقع إلكتروني باستخدام رموز اتش تي ام ال بسيطة
Wiki How To العربية: قراءة أكواد باركود الدولية المكونة من 12 رقماقراءة أكواد باركود الدولية المكونة من 12 رقما
Wiki How To العربية: إدراج خط منقط في برنامج ووردإدراج خط منقط في برنامج وورد
Wiki How To العربية: تحويل ملف من صيغة الباوربوينت إلى صيغة نسق المستندات المنقولةتحويل ملف من صيغة الباوربوينت إلى صيغة نسق المستندات المنقولة
Wiki How To العربية: إدراج لون خلفية في لغة الترميز HTMLإدراج لون خلفية في لغة الترميز HTML
Wiki How To العربية: تنزيل برنامج Microsoft Wordتنزيل برنامج Microsoft Word
Wiki How To العربية: إدراج خط في برنامج مايكروسوفت ووردإدراج خط في برنامج مايكروسوفت وورد
Wiki How To العربية: كتابة صفحة HTMLكتابة صفحة HTML
Wiki How To العربية: استخدام برنامج الرسام في الويندوزاستخدام برنامج الرسام في الويندوز
Wiki How To العربية: إنشاء برنامج كمبيوترإنشاء برنامج كمبيوتر
Wiki How To العربية: عمل فيديوهات يوتيوب بجودة احترافيةعمل فيديوهات يوتيوب بجودة احترافية
Wiki How To العربية: ضبط صورة خلفية في لغة اتش تي ام الضبط صورة خلفية في لغة اتش تي ام ال
Wiki How To العربية: التظاهر بقيامك بالقرصنة الإلكترونيةالتظاهر بقيامك بالقرصنة الإلكترونية
Wiki How To العربية: تعلم لغة HTMLتعلم لغة HTML

المزيد حول هذا المقال

يُكتب المحتوى على ويكي هاو بأسلوب الويكي أو الكتابة التشاركية؛ أي أن أغلبية المقالات ساهم في كتابتها أكثر من مؤلف، عن طريق التحرير والحذف والإضافة للنص الأصلي. ساهم 33 فرد في إنشاء هذا المقال. تعاونوا سويًا، دون أن يهتم بعضهم بذكر هويته الشخصية، على تحرير المقال والتطوير المتواصل لمحتواه. تم عرض هذا المقال ١٠٬٥٩٨ مرة/مرات.
تصنيفات: برمجيات

كيفية إدراج الصور باستخدام لغة اتش تي ام ال - Wiki How العربية

إضافة صور إلى موقعك الإلكتروني أو ملفك الشخصي على شبكات التواصل الاجتماعي طريقة رائعة لتجديد صفحتك والرمز البرمجي لإضافة الصور بسيط للغاية وعادة ما يكون أحد أوائل الدروس التي يتعلمها دارس لغة اتش تي ام ال.

تم عرض هذه الصفحة ١٠٬٥٩٨ مرة.

هل ساعدك هذا المقال؟