تعتبر فكرة "الروابط" أو الارتباطات التشعبية كما هو معروف تقنيًا في مصطلحات تصميم الويب.
بالإضافة إلى المساعدة في جعل الويب على ما هو عليه اليوم ، فإن الروابط والصور هي بسهولة أكثر الأشياء شيوعًا في إضافة الأشياء على صفحات الويب. لحسن الحظ ، من السهل إضافة هذه العناصر (اثنان فقط علامات HTML الأساسية) ويمكن أن تجلب الإثارة والتفاعل لما يمكن أن يكون صفحات ذات نص عادي. في هذه المقالة ، ستتعرف على علامة (Anchor) ، وهي العلامة الفعلية عنصر HTML تستخدم لإضافة روابط إلى صفحات الموقع.
إضافة الروابط
يُطلق على الرابط اسم الارتساء في HTML ، وبالتالي فإن العلامة التي تمثله هي علامة A. بشكل عام ، يشير الأشخاص ببساطة إلى هذه الإضافات على أنها "روابط" ، ولكن الرابط هو ما تتم إضافته بالفعل إلى أي صفحة.
عند إضافة ارتباط ، يجب أن تشير إلى ملف عنوان صفحة الويب التي تريد أن ينتقل إليها المستخدمون عند النقر أو النقر (إذا كانوا على شاشة تعمل باللمس) على هذا الرابط. أنت تحدد هذا مع السمة.
ال href تشير السمة إلى "مرجع النص التشعبي" والغرض منها هو إملاء عنوان URL الذي تريد أن ينتقل إليه الرابط المحدد. بدون هذه المعلومات ، يكون الارتباط عديم الفائدة لأنه يخبر المتصفح بوجوب إحضار المستخدم في مكان ما ، ولكن لن تتوفر معلومات الوجهة عن المكان الذي يجب أن يكون فيه "مكان ما" يكون. هذه العلامة وهذه السمة يسيران جنبا إلى جنب.
يمكنك ربط أي شيء تقريبًا في صفحة HTML الخاصة بك ، بما في ذلك الصور. ما عليك سوى إحاطة عناصر HTML أو العناصر التي تريد أن تكون رابطًا مع العلامات والعلامات. يمكنك أيضًا إنشاء ملفات روابط العناصر النائبة من خلال ترك ال href السمة - ولكن تأكد فقط من العودة وتحديث معلومات href لاحقًا وإلا فلن يفعل الرابط أي شيء عند الوصول إليه.
يجعل HTML5 من الصالح ربط عناصر على مستوى الكتلة مثل الفقرات و DIV عناصر. يمكنك إضافة علامة ارتساء حول منطقة أكبر بكثير ، مثل قسم أو قائمة تعريف ، وستكون هذه المنطقة بأكملها "قابلة للنقر". يمكن أن يكون هذا مفيدًا بشكل خاص عند محاولة إنشاء مناطق إصابة أكبر وأكثر ملائمة للأصابع على موقع ويب.
بعض الأشياء التي يجب تذكرها عند إضافة الروابط
- العلامة النهائية هي مطلوب. إذا نسيت تضمينه ، فسيتم أيضًا ربط كل ما يتبع هذا الرابط ، حتى يغلق رابط آخر العلامة.
- في معظم الأوقات ، من الأفضل ربط صور فردية ونطاقات نصية قصيرة ، بدلاً من ربط مجموعات نصية كبيرة. يمكن أن تضيف الروابط ألوانًا وأنماط تسطير إلى صفحتك يصعب قراءتها. بالطبع ، يمكنك استخدام CSS لتغيير أنماط الروابط هذه وتعديل الألوان أو إزالة التسطير ، ولكن لا يزال من الجيد أن تضع في اعتبارك هذه الحقيقة.
- تأكد من التحقق من الروابط الخاصة بك حتى لا تسوء. يمكن أن يجعل Link Rot كلاً من المستخدمين ومحركات البحث يعتبرون موقعك غير صالح. استخدم مدقق الارتباط بانتظام للتحقق من الروابط الموجودة على صفحاتك. هذا صحيح بشكل خاص عند الارتباط بمواقع الطرف الثالث (تلك التي لا تديرها) والتي قد تغير صفحاتها بمرور الوقت ، مما يترك لك روابط معطلة. سيجد مدقق الارتباط هذه الروابط الميتة حتى تتمكن من إجراء أي تحديثات ضرورية.
- تجنب النص مثل "انقر هنا" في الارتباط الخاص بك. تذكر أن الأشخاص الذين لديهم شاشات تعمل باللمس لا يمكنهم "النقر" ، لذا يبدو هذا النص وكأنه منتج من حقبة ماضية وهو في الحقيقة غير ملائم لشبكة الويب التي تتمحور حول أجهزة متعددة اليوم.
أنواع أخرى من الروابط المثيرة للاهتمام
ال أ العنصر ينشئ رابطًا قياسيًا إلى مستند آخر ، ولكن هناك أنواعًا أخرى من الروابط التي قد تكون مهتمًا بها:
- الروابط الداخلية أو المراسي: هذه روابط إلى مكان ما داخل صفحة الويب ، وليس بالضرورة الجزء العلوي.
- خرائط الصور: تتيح خرائط الصور إنشاء روابط على الصور المعينة إلى مناطق معينة من الصورة. يمكن استخدامها للألعاب أو التنقل الإبداعي. غالبًا ما تراها مع الخرائط حيث تكون المناطق على الخريطة قابلة للنقر. لاحظ أن خرائط الصور لا تُستخدم في معظم مواقع الويب الحديثة ، ويرجع ذلك جزئيًا إلى أن يمكن أن تسبب مشاكل على الأجهزة المحمولة.
- العنصر: يُستخدم هذا العنصر لربط المستندات والصفحات الأخرى بالعنصر الحالي. لن تنشئ منطقة قابلة للنقر على صفحة الويب الخاصة بك ، لكن من المفيد فهمها.