مواقع الويب لا تشبه أي وسيط اتصال جاء قبلها. أحد الأشياء الرئيسية التي تميز مواقع الويب بصرف النظر عن تنسيقات الوسائط السابقة مثل الطباعة والإذاعة وحتى التلفزيون هو مفهوم "الارتباط التشعبي".
الروابط التشعبية ، المعروفة أيضًا باسم "الروابط" ، هي التي تجعل الويب ديناميكيًا. وعلى عكس المنشور المطبوع الذي يمكنه الإشارة إلى مقال آخر أو مورد آخر ، يمكن لمواقع الويب استخدام هذه الروابط لإرسال الزوار إلى تلك الصفحات والموارد الأخرى. لا يوجد وسيط بث يمكن القيام بذلك. يمكنك سماع إعلان على الراديو أو عرض على التلفزيون ، ولكن لا توجد ارتباطات تشعبية يمكن أن تنقلك إلى الشركات في تلك الإعلانات بالطريقة التي يمكن أن يقوم بها موقع الويب بسهولة. الروابط حقا هي أداة رائعة للتواصل والتفاعل!
في كثير من الأحيان ، الروابط الموجودة على موقع الويب هي محتوى نصي يوجه الزوار إلى صفحات أخرى من نفس الموقع. يُعد التنقل في موقع الويب أحد الأمثلة على الروابط النصية عمليًا ، ولكن الروابط لا تحتاج إلى أن تكون قائمة على النص. يمكنك أيضًا ربط الصور بسهولة على موقع الويب الخاص بك. دعونا ننظر في كيفية القيام بذلك ، تليها بعض الحالات التي تريد فيها استخدام الارتباطات التشعبية المستندة إلى الصور.
كيفية ربط صورة
أول شيء ستحتاج إلى القيام به هو وضع الصورة نفسها في مستند HTML الخاص بك. من الاستخدامات الشائعة للارتباط المستند إلى الصور هو رسم شعار الموقع الذي يتم ربطه بعد ذلك بالصفحة الرئيسية للموقع. في كود المثال الخاص بنا أدناه ، فإن الملف الذي نستخدمه هو SVG لشعارنا. يعد هذا خيارًا جيدًا نظرًا لأنه سيتيح عرض صورتنا بدقة مختلفة ، مع الحفاظ على جودة الصورة وحجم ملف صغير بشكل عام.
فيما يلي كيفية وضع صورتك في مستند HTML:
حول علامة الصورة ، يمكنك الآن إضافة رابط الارتساء ، وفتح عنصر الارتساء قبل الصورة وإغلاق المرساة بعد الصورة. يشبه هذا كيفية ارتباط النص ، فقط بدلاً من التفاف الكلمات التي تريد أن تكون ارتباطًا بعلامات الربط ، يمكنك التفاف الصورة. في المثال أدناه ، نحن نربط مرة أخرى بالصفحة الرئيسية لموقعنا ، والتي هي "index.html".
عند إضافة HTML إلى صفحتك ، لا تضع أي مسافات بين علامة الربط وعلامة الصورة. إذا قمت بذلك ، فإن بعض المتصفحات ستضيف القليل من علامات التجزئة إلى جانب الصورة ، والتي ستبدو غريبة.
ستعمل صورة الشعار الآن أيضًا كزر صفحة رئيسية ، وهو إلى حد كبير معيار ويب هذه الأيام. لاحظ أننا لا نقوم بتضمين أية أنماط مرئية ، مثل عرض الصورة وارتفاعها ، في ترميز HTML الخاص بنا. سنترك هذه الأنماط المرئية إلى CSS ونحافظ على فصل نظيف لبنية HTML وأنماط CSS.
بمجرد وصولك إلى CSS ، يمكن أن تتضمن الأنماط التي تكتبها لاستهداف رسم الشعار هذا تحجيم الصورة ، بما في ذلك الأنماط المتجاوبة للصور الودية متعددة الأجهزة بالإضافة إلى أي مرئيات ترغب في إضافتها إلى الصورة / الرابط ، مثل الحدود أو CSS انخفاض الظلال. يمكنك أيضًا إعطاء صورة أو ربط سمة صنف إذا كنت بحاجة إلى "خطافات" إضافية لاستخدامها مع أنماط CSS.
استخدام الحالات لصلاحيات الصور
لذا ، فإن إضافة رابط صورة أمر سهل للغاية. كما رأينا للتو ، كل ما عليك فعله هو التفاف الصورة مع علامات الربط المناسبة. قد يكون سؤالك التالي "متى يمكنك فعل ذلك بالفعل إلى جانب مثال رابط الشعار / الصفحة الرئيسية المذكور أعلاه؟"
إليك بعض الأفكار:
- الصور المصغرة في معرض ترتبط بإصدارات أكبر من تلك الصور.
- الصور المستخدمة لوحدها لتمثيل المحتوى ، مثل صور المنتجات لموقع ويب للتجارة الإلكترونية.
- الصور التشويقية التي تشكل جزءًا من محتوى آخر ، مثل مقالة مدونة أو نشرة صحفية ، والتي تغري الناس بملاحظة ذلك المحتوى ، تمنحه منطقة مستهدفة للنقر أو النقر لقراءة المقالة كاملة.
- صور الرموز التي يتم استخدامها كأزرار للاتصال بوظائف أو صفحات معينة داخل الموقع.
- روابط وسائل التواصل الاجتماعي التي تستخدم الشعارات المعروفة لمختلف مواقع الشبكات الاجتماعية المهمة لهذا الموقع أو الشركة.
- تعد الصور المستخدمة كأزرار لوظائف معينة ، مثل عمليات إرسال النماذج (أفضل الممارسات - من منظور أداء موقع الويب ، والأزرار المصممة تمامًا باستخدام CSS خيارًا أفضل من أزرار الصور).
تذكير عند استخدام الصور
يمكن أن تلعب الصور دورًا مهمًا في نجاح موقع الويب. ذكر أحد الأمثلة المذكورة أعلاه استخدام الصور إلى جانب محتوى آخر لجذب الانتباه إلى هذا المحتوى وجعل الناس يقرؤونه.
عند استخدام الصور ، يجب أن تضع في اعتبارها اختيار الصورة المناسبة لاحتياجاتك ، وهذا يشمل موضوع الصورة الصحيح والتنسيق ، وكذلك التأكد من أن أي صور تستخدمها على موقع الويب الخاص بك يتم تحسينها بشكل صحيح لتسليم الموقع. قد يبدو هذا كثيرًا من العمل فقط لإضافة صور ، لكن العائد يستحق ذلك! يمكن للصور أن تضيف الكثير إلى نجاح الموقع.
لا تتردد في استخدام الصور المناسبة على موقعك ، واربط تلك الصور عند الحاجة إلى إضافة بعض المحتوى بشكل تفاعلي ، ولكن ضع في اعتبارك أيضًا أفضل ممارسات هذه الصور واستخدم هذه الرسومات / الروابط بشكل صحيح ومسؤول في أعمال تصميم الويب.
