كيفية إضافة رابط إلى صورة

تنزيل المقال

تنزيل المقال

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

الخطوات

طريقة 1

طريقة 1 من 2:

كتابة كود إتش تي إم إل

تنزيل المقال

1. 
   1
   أنشئ ملف إتش تي إم إل. افتح محرّر نصوص ثم أنشئ ملفًا جديدًا واحفظ الملف باسم index.html.

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

   • إن كنت ترغب باستخدام محرّر نصوص مخصص للاستخدام مع لغة إتش تي إم إل، انقر هنا لتنزيل محرّر النصوص أتوم حيث يمكن استخدامه على أنظمة التشغيل ويندوز وماكنتوش ولينكس.

   • افتح قائمة التنسيق ثم انقر على خيار "إنشاء نص عادي" قبل البدء بكتابة ملف إتش تي إم إل إن كنت تستخدم برنامج تكست إديت حيث يضمن هذا الإعداد تحميل ملف إتش تي إم إل بشكل سليم في متصفّح الإنترنت.

   • لا تعد معالجات النصوص، مثل مايكروسوفت وورد، مناسبة لكتابة لغة إتش تي إم إل لأنها تضيف رموزًا غير مرئية وتنسيقًا يمكن أن يعطب ملف إتش تي إم إل بحيث لا يُعرض على متصفّح الإنترنت بصورة سليمة.
2. 
   2
   انسخ كود إتش تي إم إل المعياري والصقه. حدد وانسخ كود إتش تي إم إل المعروض أدناه ثم الصقه في ملف index.html الذي أنشأته.
   

   <a href="DESTINATION URL"><img src="IMAGE URL" /></a>
3. 
   3
   ابحث عن رابط الصورة. ابحث عن صورة على شبكة الإنترنت ثم انقر عليها بزر الفأرة الأيمن وانقر على خيار نسخ الصورة بمسماه في متصفح الإنترنت المستخدم.

   • يكون مسمى الخيار في متصفحات إنترنت إكسبلورر وفايرفوكس "نسخ عنوان الصورة"، في حين يستخدم متصفح كروم مسمى "نسخ رابط الصورة" ويستخدم متصفح سفاري مسمى "نسخ عنوان الصورة".
4. 
   4
   أضِف رابط الصورة. انقر مع السحب على نص "IMAGE URL" باستخدام مؤشر الفأرة ثم استخدم اختصار لوحة المفاتيح CTRL + V للصق رابط الصورة في ملف index.html.
5. 
   5
   أضِف رابط الوجهة. احذف نص "DESTINATION URL" في ملف index.html ثم اكتب مكانه https://www.google.com.

   • يمكنك استخدام أي رابط ترغب بوضعه كوجهة للنقر.
6. 
   6
   احفظ ملف إتش تي إم إل.
7. 
   7
   افتح ملف إتش تي إم إل في متصفح إنترنت. انقر بزر الفأرة الأيمن على ملف index.html ثم افتحه في متصفح إنترنت من اختيارك.

   • تأكد من كتابة اسم الملف بصورة سليمة في نافذة محرّر النصوص الذي تفتح ملف index.html فيه إن لم تتمكن من رؤية الصورة بعد أن تفتح المتصفح.

   • إن رأيت رموز إتش تي إم إل عوضًا عن رؤية صورة الخلفية بعد فتح المتصفح، يعني ذلك أنك حفظت index.html كملف نصي عادي، ويمكنك في هذه الحالة محاولة تحرير الملف في محرر نصوص مختلف.

طريقة 2

طريقة 2 من 2:

فهم كود إتش تي إم إل

تنزيل المقال

1. 
   1
   افهم وسم الرابط التشعبي. تتكون رموز اتش تي ام ال من وسوم افتتاحية وختامية يستخدم هذا الوسم بحيث يكون الوسم <a href=""> وسمًا افتتاحيًا ويكون الوسم </a> وسمًا ختاميًا. يسمى هذا الوسم وسم الرابط التشعبي ويستخدم لإضافة روابط إلى صفحة ويب.

   • يعمل الوسم <a على توجيه المتصفح إلى ترجمة رابط، وكلمة href اختصار لعبارة "مرجع إتش تي إم إل"، في حين يقوم جزء = بتوجيه المتصفح إلى تحويل كل ما بين علامتي الاقتباس " " إلى رابط. يمكنك إذًا كتابة أي رابط بين علامتي الاقتباس.
   • يوجه الوسم </a> متصفح الإنترنت إلى إغلاق وسم الرابط التشعبي.
   • يؤدي إضافة نص بين وسمي <a href=""> و </a> إلى جعل النص قابلًا للنقر على صفحة ويب، ويمكنك على سبيل المثال كتابة <a href="https://www.google.com">Google</a> لإنشاء رابط إلى موقع جوجل.
2. 
   2
   افهم وسم الصورة. يقوم الوسم <img> باختتام نفسه تلقائيًا، ويمكنك اختتام الوسم عن طريق كتابة <img src="" /> أو <img src=""></img>.

   • يعمل الوسم <img على توجيه المتصفح إلى ترجمة صورة، وكلمة src اختصار لكلمة "مصدر"، في حين يقوم جزء = بتوجيه المتصفح إلى أخذ كل ما بين علامتي الاقتباس " " للحصول على صورة من الرابط.
   • يعمل الوسم /> على توجيه المتصفح إلى إغلاق وسم الصورة.
   • يمكنك مثلًا استخدام الوسم {{samp[|<img src="https://www.google.com/images/srpr/logo11w.png" />}} للحصول على الصورة الموجودة في هذا الرابط وعرضها في صفحة الويب.
3. 
   3
   استخدم هذا الكود في أي مكان. يمكنك بعد التعرف على الكود استخدام وسم <a href="DESTINATION URL"><img src="IMAGE URL" /></a> لإضافة صور قابلة للنقر في أي صفحة ويب يمكنها ترجمة كود إتش تي إم إل.