عناصر صفحة الويب Body tags جزء 5
الروابط Links في صفحة الويب
كيف يتم انشاء الروابط Links في صفحة الويب ..؟! وماهي أشكال الروابط بين صفحات الويب..؟؟!! ما أهمية الروابط في صفحات الويب ..؟؟!!
أغلب مواقع الإنترنت والتطبيقات او كلها لابد أن تستخدم الروابط Links للربط صفحتها .إن الروابط في HTML هي أحد العناصر الأساسية التي تساهم في بناء الويب وتعزيز التفاعل بين الصفحات. فكيف يتم استخدام الروابط بشكل صحيح وفقًا للأساليب والمعايير القياسية،. في هذا المقال سنتعرف على طريقة إنشاء روابط Links بين صفحات الويب وكيف يتم ربط صفحات الويب، لنبدأ…
الروابط في صفحة الويب
الروابط عناصر أساسية في صفحات الويب تسمح بربط الصفحات معًا وتوجيه المستخدمين بينها. تعتبر الروابط واحدة من العوامل الرئيسية التي تمكّن التنقل والاستكشاف على الإنترنت. و تحتوي روابط HTML على نص قابل للنقر (عادةً كلمة أو جملة) وعنوان URL (رابط) الذي يشير إلى الصفحة المرتبطة
و نعني بالروابط Links الارتباط التشعبي Hyperlink بين صفحات الويب التنقل بين أو أجزاء الصفحة الواحدة. و أشهر أوسمة الـ HTML التي تستخدم مع الروابط الوسم <a> ، بينما استخدام الوسم <link> في جلب الملفات الأخرى لصفحة الويب . فيما يلي شرح لطريقة انشاء واستخدام الروابط في صفحات HTML:
الوسم<a>
للتنقل بين صفحات الويب لابد أولا من ربط هذه الصفحات مع بعضها البعض بإضافة ارتباط تشعبي Hyperlink ويمكن ان يكون الرابط ظاهراً على الصفحة ويمكن أن يظهر على شكل نص او صورة او فيديو وبمجرد النقر يتم الانتقال للصفحة الأخرى.
يستخدم الوسم <a> لبناء هذه الروابط ويأخذ السمة href Attribute للإشارة الى الصفحة المراد الانتقال إليها. مثلاً يأخذ عنوان URL الخاص بالصفحة المراد الانتقال لها ،لاحظ /ي المثال التالي:
<a href="index.html">Home Page </a>
يمكن أن يستخدم الوسم <a> في أشكال متعددة <a> هو وسم ثنائي Block Element ( انظر مقال مقدمة في HTML ) بين فتحة <a> وإغلاقه <a/> يتم إضافة الشكل الذي يظهر عليه الرابط على الصفحة سواء نص او صورة او ايقونة ..الخ فيما يلي بعض الأشكال مع الأمثلة :
روابط النص (Text Links)
لإنشاء رابط النص في HTML ، يتم استخدام عنصر <a> وتعيين النص المراد عرضه بين علامتي الفتح والإغلاق. ثم يتم استخدام href Attribute لتحديد عنوان URL للصفحة المراد الانتقال إليها عند النقر على الرابط.كما يتضح معنا في المثال التالي:
...........
<a href="https://example.com">site name</a>
...........
روابط الصور (Image Links):
يمكن أيضًا استخدام الصورة كرابط للربط في صفحات HTML. بدلاً من استخدام نص،وفي هذه الحالة يتم وضع عنصر <img> داخل عنصر <a> لإنشاء رابط صورة.كما يتضح معنا في المثال التالي:
...........
<a href="https://example.com">
<img src="image.jpg" alt="imageName">
</a>
...........
روابط داخل الصفحة
في HTML يمكن استخدام الروابط للانتقال إلى أماكن محددة داخل نفس الصفحة. يتم تحقيق ذلك باستخدام السمة href مع عنوان URL يشير إلى العنصر المستهدف داخل الصفحة باستخدام معرف (ID)..
ولعمل رابط المعرف ID علينا أن نقوم بإعطاء جزء الصفحة المراد الانتقال له معرف خاص بواسطة id Attribute ثم بناء الرابط في مكان الاستدعاء بواسطة الوسم <a> حيث تكون القيمة المعطاة للـ href هي اسم المعرف id مسبوق بعلامة المربع "#" . عادة تعُطى هذه المعرفات للعناوين الرئيسية في الصفحة. ويوضح المثال التالي طريقة بنا رابط محلي اسم المعرف.كما هو موضح في المثال التالي:
<!--Doing id for Heading 2-->
<h2 id ="h2"> Heading 2</h2>
<!---Doing link to the Heading 2-->
<p>look for <a href ="#h2">Move To Heading 2</a></p>
فتح صفحة في علامة تبويب جديدة
لفتح رابط في علامة تبويب جديدة بدلاً من نافذة المستعرض الحالية، يتم استخدام السمة target مع قيمة _blank.كما هو موضح في المثال التالي:
...........
<a href="https://example.com" target="_blank">Open link in a new tab</a>
...........
روابط بالنص الذي ينتهي بامتداد ملف
يمكن استخدام الروابط لربط ملفات مثل مستندات PDF أو صور أو ملفات صوتية. يجب تحديد نوع الملف باستخدام السمة href واستخدام امتداد الملف. مما يفيد في نشرو مشاركة الملفات. ويوضح المثال التالي طريقة ربط الملفات لصفحة ويب:
...........
<a href="document.pdf">تحميل المستند PDF</a>
...........
طُرق استخدام الروابط في HTMl
تتوفر طريقتان لإستخدام الروابط في صفحات HTML وهي أما استخدام الروابط الكاملة (Absolute URLs) والروابط النسبية (Relative URLs) وهما طريقتان مختلفتان لتعريف العناوين التي تربط بين صفحات الويب في صفحات HTML. فيما يلي شرح لكلاً منهما:
الرابط الكامل Absolute link
الروابط الكاملة (Absolute URLs) في صفحات HTML هي العناوين التي تحتوي على عنوان URL كامل لصفحة الويب المستهدفة، بما في ذلك بروتوكول الاتصال (مثل HTTP أو HTTPS) واسم النطاق والمسار الكامل للصفحة (مثل www.example.com). فيما يلي بعض الأمثلة على الروابط الكاملة في صفحات HTML:
1. رابط كامل لصفحة خارج الموقع:
...........
<a href="https://www.example.com/page1.html">Name page 1</a>
...........
2. رابط كامل لصفحة في الموقع:
...........
<a href="https://www.example.com/about.html">ِِAbout Us</a>
...........
3. رابط كامل لصورة في الموقع:
...........
<img src="https://www.example.com/images/pic.jpg" alt="imageName">
...........
باستخدام الروابط الكاملة مع صفحات الويب، يمكن للمستخدمين الوصول إلى صفحات الويب خارج الموقع بشكل صحيح، وكذلك الوصول إلى ملفات الوسائط مثل الصور ومقاطع الفيديو.
الرابط النسبي Relative links
الروابط النسبية (Relative links) في صفحات HTML هي العناوين التي تستخدم مسارًا نسبيًا بدلاً من استخدام عنوان URL كامل. تُستخدم الروابط النسبية لربط صفحات الويب في نفس الموقع أو للربط بملفات أخرى في نفس المجلد الأساسي أو المجلدات الفرعية.و هناك ثلاثة أنواع رئيسية للروابط النسبية في صفحات HTML وهي:
1. الروابط النسبية البسيطة (Simple Relative Links):
و تُستخدم الروابط النسيبة البسيطة لربط صفحات الويب الموجودة في نفس المجلد الرئيسي للموقع. يتم ذكر اسم الصفحة فقط دون أي مسارات إضافية. كما يتضح في المثال التالي:
...........
<a href="about.html">صفحة حول الموقع</a>
...........
2. الروابط النسبية مع مجلد فرعي (Relative Links with Subfolder):
تُستخدم مع المجلدات الفرعية لربط صفحات الويب الموجودة في مجلد فرعي داخل الموقع. يتم ذكر اسم المجلد واسم الصفحة المستهدفة. كما في المثال التالي:
...........
<a href="products/page1.html">الصفحة 1</a>
...........3. الروابط النسبية مع الرجوع (Relative Links with Parent Navigation):
تُستخدم للربط بين صفحات الويب في مجلد فرعي إلى المجلد الأب أو المستوى الأعلى باستخدام "..". هذا يفيد عندما تكون الصفحة المستهدفة في مجلد فرعي وترغب في الرجوع إلى المجلد الأب. ويوضح المثال التالي استخدام الرابط النسبي للعودة الى الخلف:
...........
<a href="../index.html">الصفحة الرئيسية</a>
...........
إن استخدام الروابط النسبية يوفر بعض الفوائد، منها مايلي:
- المرونة: يمكنك إعادة ترتيب المجلدات والصفحات دون الحاجة إلى تعديل جميع الروابط المرتبطة بها.
- السهولة: يمكنك استخدام العناوين النسبية بشكل أسرع وأسهل بدلاً من كتابة عناوين URL الكاملة.
- قابلية النقل: يمكنك نقل الموقع بأكمله إلى مكان آخر على الخادم أو إلى نطاق آخر دون تعديل روابط الصفحات الداخلية.
مع أن استخدام الروابط النسبية مع HTML يجعل عملية تطوير وصيانة الموقع أكثر سهولة ومرونة، حيث يمكنك ترتيب المجلدات والصفحات دون الحاجة إلى تعديل جميع الروابط المرتبطة بها.إلا أنه يجب أن تتأكد من استخدام العناوين النسبية بحذر وفحص صحة الروابط بعد تغيير هيكل الموقع لضمان أنها تعمل بشكل صحيح.
الوسم<link >
بينما يستخدم الوسم <a> لربط صفحات الويب مع بعضها البعض يستخدم الوسم <link> لربط صفحة الويب مع الملفات الاخرى التي تعمل على صفحة الويب مثل ملفات CSS (انظر مقال أوسمة رأس الصفحة Head Tags)يتم استخدامه عادةً في جزء الـ <head> للصفحة .
الوسم <link> في HTML يُستخدم لإنشاء وصلة (رابط) بين صفحة HTML الحالية ومستند آخر. مثلاً لإنشاء وصلات التنسيق (CSS) أو وصلات الأيقونات (favicon) أو وصلات الخطوط (fonts) وغيرها من المستندات الخارجية المرتبطة بالصفحة.وفي حالة الارتباط يتم تعريف محتوى الملف المرتبط مع في في صفحة الـ HTML الحالية أي أن جميع الاكواد في ملف الـ CSS ستكون معرفة في صفحة الـ HTML .
يتم تحديد نوع الوصلة المستخدمة في الوسم <link> باستخدام rel Attribute وتحديد عنوان الوصلة باستخدام السمة href. وفيما يلي بعض الاستخدامات الشائعة للوسم <link>:
1. روابط التنسيق CSS:
يُستخدم <link> لربط صفحة HTML بملفات CSS الخارجية لتنسيق المظهر والتنسيقات البصرية للصفحة. عادةً ما يتم تحديد القيمة "stylesheet" للسمة rel ويتم تحديد مسار الملف الخارجي للتنسيق بواسطة السمة href كما يوضح المثال التالي :
...........
<link rel="stylesheet" type="text/css" href="style.css">
...........
3. روابط الأيقونات (Favicon):
يُستخدم <link> لربط صفحة HTML بأيقونة الموقع (favicon)، وهي الأيقونة التي تظهر في علامة التبويب أو عنوان URL للصفحة. يتم تحديد القيمة "icon" للسمة rel ويتم تحديد مسار الأيقونة بواسطة السمة href ويتم الإستخدام كما هو موضح في المثال التالي:
...........
<link rel="icon" href="favicon.ico">
...........
3. روابط الخطوط (Fonts):
يُستخدم <link> لربط صفحة HTML بخطوط خارجية للاستخدام في الصفحة. يتم تحديد القيمة "stylesheet" للسمة rel ويتم تحديد مسار ملف الخط الخارجي بواسطة السمة href كما في المثال التالي:
...........
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
...........
Link Attributes
بالإضافة إلى السمات rel , href يمكن مع <link> استخدام السمات media و type حيث تعمل كل منهما وظيفة محددة ، وتكون وظائفهما كتالي:
سمة النوع Type Attribute:
تقوم type Attribute بتحدد نوع MIME للمستند المرتبط. وهو مفيد بشكل خاص عند الارتباط بملفات غير HTML مثل XML أو JSON أو PDF. على سبيل المثال:
...........
<link rel="alternate" href="data.xml" type="application/xml">
<link rel="stylesheet" href="styles.css" type="text/css">
...........
في المثال يربط <link> الأول مستند XML بديل، بينما يربط <link> الثاني بملف CSS.
سمة الوسائط Media Attribute:
يمكن أن يتضمن الوسم <link> السمة media Attribute، التي تحدد نوع الوسائط المقصود بها المستند المرتبط. يتم استخدام السمة media بشكل شائع عند ربط أوراق الأنماط لأجهزة الوسائط المختلفة أو أحجام الشاشات. على سبيل المثال:
...........
<link rel="stylesheet" href="styles.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
...........
في هذه الحالة <link> الأول مخصص لأنماط الشاشة، بينما <link> الثاني مخصص لأنماط الطباعة.
و باستخدام السمات المناسبة مثل rel و href و media و type، يمكن للمطورين تحديد وتخصيص المستندات المرتبطة بصفحاتهم بشكل دقيق. وهناك استخدامات أخرى لوسم <link>، مثل وصلات تحسين محركات البحث (SEO) ووصلات إلى ملفات الأصوات والفيديو وما إلى ذلك. يعمل وسم <link> كعنصر فارغ فقط، ولا يحتاج إلى عنصر نهاية (</link>).
تطبيق استخدام العناصر <a> و <link> على الرابط هنا.
أهمية الروابط في صفحات HTML
الروابط هي أحد العناصر الأساسية التي والمهمة في صفحات HTML، وتوفر العديد من الفوائد والأهمية،منها مايلي:
- توفير التنقل والارتباط بين الصفحات: تسمح الروابط بتوصيل المستخدمين بسهولة من صفحة إلى أخرى داخل الموقع أو خارجه. يمكن للروابط أن تكون عناصر في القائمة أو أزرار أو نصوص تحوي روابطًا تسهل على المستخدمين الانتقال بين الصفحات والوصول إلى المحتوى المرتبط.
- بناء هيكلية الموقع: تساعد الروابط في بناء هيكلية الموقع وتنظيم المحتوى. من خلال ربط الصفحات المختلفة ببعضها البعض، يتم تشكيل شبكة من الصفحات المترابطة، مما يسهم في تحسين تجربة التصفح ويسمح بالانتقال السلس بين المحتوى المتعلق.
- تحقيق الاستدلال والمصداقية: تعمل الروابط على توفير الاستدلال والمصداقية للمحتوى. عندما يتم ربط صفحة معينة بمصادر موثوقة ومواقع ذات سمعة جيدة، يتحسن سمعة الموقع ويزيد المصداقية والثقة لدى المستخدمين ومحركات البحث.
- تحسين تجربة المستخدم: توفر الروابط تجربة تصفح سلسة ومريحة للمستخدمين. يمكن للمستخدمين الانتقال بسهولة إلى المحتوى الذي يهمهم والتنقل بين الصفحات بسرعة. كما يمكن للروابط أن توجه المستخدمين إلى موارد إضافية ذات صلة وتوفر المزيد من المعلومات.
- تحسين تجربة البحث والتسويق: يمكن استخدام الروابط بشكل فعال لتحسين تجربة البحث والتسويق عبر الويب. يمكن للروابط الداخلية أن تساعد في تحسين تصنيف محركات البحث وزيادة ظهور الموقع في نتائج البحث. كما يمكن استخدام الروابط الخارجية للترويج للمحتوى وزيادة عدد الزيارات والتواصل مع جمهور أوسع.
تعتبر الروابط في صفحات HTML تمثل العمود الفقري للويب، حيث تربط الصفحات والمحتوى معًا وتمكن المستخدمين من الانتقال بين الصفحات واستكشاف المحتوى. تعزز الروابط أيضًا التنقل والتجربة العامة للمستخدمين وتسهم في تنظيم هيكلية الموقع وتعزيز مصداقيته. بالاستفادة الجيدة من الروابط في صفحات HTML، يمكن تحسين تجربة المستخدم وزيادة وصول المحتوى وتعزيز البحث والتسويق عبر الويب.
بفضل الروابط في HTML، يمكننا بناء هياكل مواقع الويب المترابطة وتوفير تجربة تصفح سلسة للمستخدمين. وتعزز الروابط الفعالة قابلية التنقل وتحسين تجربة المستخدم وإتاحة الوصول إلى المحتوى المتعلق. لذا، يجب على المطورين الاستفادة الكاملة من إمكانيات الروابط في HTML واختيار النوع المناسب من الروابط وفقًا لاحتياجات المشروع.