كيف تستعمل صورة كرابط

1- الصور والروابط:

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

** مثال:

صورة برابط

صورة عادية بدون رابط

2- إضافة صورة كرابط:

رأينا في الدرس السابق الخاص بالروابط أن النصية أن الكود أو التركيبة الخاصة بالرابط النصي تبدو بهذا الشكل:

<a href="عنوان url ">نص الرابط</a>

الرابط النصي:

 .   هذا الكود يعطينا    مدونة فلفلاي      <a href="http://www.folfoly.com/ ">مدونة فلفلاي</a>

ولدمج الصورة مع الرابط يكفي تعويض النص برابط الصورة (رفع صورة على بلوجر ونسخ رابطها؟) والذي ليصبح بهذا الشكل:

<a href="http://www.folfoly.com/ "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6kvc5ibWDKCUwYP92Mp-me90GoB_fMFhhlQtmKyir0VfNUZfloxOebWWXw7kFaRs5OKNjq8T2T9l3nl6my7IWuj4hePlPIVjojQGwRRS6W2w8kULxNS2_-KsYXbP2tOm5kOrwhtgCrUk/s1600/logo-small.png"></a>

ليعطينا :

وكل ما فعلناه هو تعويض نص "مدونة فلفلاي" برابط الصورة: 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6kvc5ibWDKCUwYP92Mp-me90GoB_fMFhhlQtmKyir0VfNUZfloxOebWWXw7kFaRs5OKNjq8T2T9l3nl6my7IWuj4hePlPIVjojQGwRRS6W2w8kULxNS2_-KsYXbP2tOm5kOrwhtgCrUk/s1600/logo-small.png">

الآن كلما نقر أحدهم على الصورة سيفتح الرابط ويمكن إضافة بعض العناصر الأخرى للتحكم اكثر بالرابط.

 3- عناصر أخرى لإغناء الرابط بالصورة:

 ** فتح الرابط في نافذة جديدة:  يتم ذلك بإضافة عنصر أخر مع رابط الصورة وهو  target="_blank" ليصبح الرابط:

<a href="http://www.folfoly.com/ " target="_blank"><img src="http://3.bp.blogspot.com/-

Fm_DqakyngE/U5l3qmxxDgI/AAAAAAAACGs/yFcxtb1QzXw/s1600/logo-small.png"></a>

** إضافة معلومات عن الصورة:  يتم إضافة معلومات عن الصورة حيث بمجرد المرور عليها بفأرة الحاسوب حتى تظهر هذه المعلومات على شكل نص. للقيام بذلك نضيف هذا الوسم alt="نص" لكن هذه المرة داخل رابط الصورة ليصبح:

<a href="http://www.folfoly.com/ " target="_blank"><img src="http://3.bp.blogspot.com/-

Fm_DqakyngE/U5l3qmxxDgI/AAAAAAAACGs/yFcxtb1QzXw/s1600/logo-small.png" alt="وصف الصورة" ></a>

أهمية الوصف تكمن في أمرين، الأول هو عندما لا يتم تحميل الصور وإظهارها فيتم إظهار النص. والأمر الثاني والمهم هو بالنسبة لمواقع البحث فهذا يساعدها لتصنيف صور مدونتك.

هذا ما يتعلق بدمج الصور مع الروابط، حيث تستطيعون من الآن فصاعدا استعمال الصور كروابط على مدوناتكم. إذا كانت لديكم أية أسئلة لا تترددوا في طرح أسئلتكم عبر التعليقات اسفله.

تعلم كل شيء حول روابط HTML

1 - ما هي روابط الhtml أو Hyperlinks:

روابط html

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

هذا رابط         هذا ليس برابط

كل الروابط تبدأ بوسم  <a  وأهم عناصر روابط الhtml هو href لأنه يحدد وجهة الرابط، أي الصفحة أو الملف الذي سيسمح بفتحه أو التنقل إليه.

2- تركيب رابط html مع المثال:

 ** التركيبة أو العناصر المكونة لرابطhtml:

الكود أو التركيبة الخاصة برابط html هي كالتالي:

<a href="عنوان url ">نص الرابط</a>

يبدأ ب <a وينتهي ب  </a>. المكون href   هو الذي يحتوي الرابط وهو أهم العناصر كما قلنا سابقا. ثم نص الرابط الذي يظهر على المتصفح ليتم النقر عليه.

** المثال:

هذاالكود سيعطينا النتيجة التالية كرابط   مدونة فلفلاي  <a href="http://www.folfoly.com/ ">مدونة فلفلاي</a>

+ الرابط ليس بالضرورة أن يكون دائما نصا. بل يمكن استعمال صورة كرابط كذلك.

4- عنصر terget الموجه لروابط html :

عنصر terget يسمح  بالتحكم بوجهة الرابط وطريقة فتحه. بحيث يمكن فتح الرابط على نافذة جديدة عوض نفس الصفحة التي يتواجد عليها:

<a href="http://www.folfoly.com/ " target="_blank">مدونة فلفلاي</a>

قمنا بإضافة target  ليتم فتح الرابط في نافذة جديدة.
لنجرب الأمر:  رابط يفتح على نافذة جديدة   رابط يفتح على نفس الصفحة

! هام:

لا تنسى إضافة رمز السلاش / في نهاية الروابط، لأنك عندما لا تفعل ذلك فالخادم يقوم بمهمتين: البحث عن الرابط ثم إضافة السلاش. وهذا الأمر يثقل من سرعة موقعك أو مدونتك.

هذا كل ما يتعلق بروابط html كبداية، سنحاول في دروس قادمة تناول طريقة استعمال صورة كرابط ومزايا أخرى تهم الروابط وكيفية جعلها صديقة سيو SEO والتحكم فيها بشكل كامل.