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

تنزيل المقال

تنزيل المقال

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

الخطوات

جزء 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="How.com.vn العربية: كلبي يأكل طعامه المفضل">
   • إن لم تكن الصورة مهمة لمحتوى الصفحة، ضمّن الخاصية alt دون نص (alt="How.com.vn العربية: ").
7. 
   7
   احفظ التغييرات. احفظ ملف اتش تي ام ال على موقعك الإلكتروني. زر الصفحة التي حرّرتها للتو أو أعِد تحميل الصفحة إن كنت فتحتها بالفعل حيث يفترض أن ترى الصورة الآن. إن كان حجم الصورة غير صحيح أو لم تكن راضيًا عنها لأي سبب آخر، انتقل إلى القسم التالي.

جزء 2

جزء 2 من 2:

تعديلات اختيارية

تنزيل المقال

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

   • <img src="http://example.com/example.png" alt="How.com.vn العربية: اعرض هذا النص" 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 حيث إن الصيغ الأخرى قد لا تظهر بشكل سليم على كل المتصفحات.

تحذيرات

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