تقديم
كتب هذا المقال أشرف عبدالدايم مطور واجهة المستخدم في TieLabs سابقاً، 95% من كود CSS الموجود في قالب جنة من كتابة أشرف :)
كما علمنا أن HTML هي اختصار لـ HyperText Markup Language كلمة Hypertext تعني HyperLinks وهذا هو المفهوم المختلف عن باقي برامج الكمبيوتر، حيث أن الفكر السائد في كافة برامج الكمبيوتر هو أنها تعمل بالطريقة الخطية، أي أنك لا تستطيع الإنتقال الإ خطوةً بعد خطوة بشكل متسلسل ومتتابع. وكلمة HyperLinks تعني امكانية تنقلك لاي مكان على شبكة الويب وفي أي وقت.
الروابط هي جزء أساسي في صفحات الويب، حيث ان الويب تم إنشاؤه أصلاً ليكون بمثابة شبكة معلوماتية من الوثائق المرتبطة ببعضها البعض.
الروابط في HTML من العناصر الضمنية (Inline) أي التي يمكن أن تتعايش مع عناصر أخرى في نفس السطر. ويمكننا إنشاء رابط بإستخدام الوسم <a> وهو اختصار لـ anchor. ونستخدم الخاصية href وهي اختصار لـ (Hypertext Reference) لتحديد رابط الصفحة التي نريد الذهاب إليها عند الضغط على الرابط.
| 1 2 3 4 5 | <p> To search for something, visit <a href="http://www.google.com">Google</a>. </p> |
إذن، فالروابط هي التفاعل الأساسي في صفحات الويب، حيث يمكنك التنقل من صفحة لأخرى من خلال الضغط على الروابط التشعيبية.
علمنا أننا نحدد الجهة التي نريد الذهاب إليها من خلال الخاصية href وهناك ثلاث جهات يمكننا الذهاب إليها عند الضغط على الرابط:
- الإنتقال لجزئيات أخرى في نفس الصفحة وتسمى (anchor targets).
- الإنتقال لصفحة أخرى في نفس الموقع، وتسمى (relative URLs).
- الإنتقال إلى موقع أخر، وتسمى (absolute URLs).
الإنتقال لجزئيات أخرى في نفس الصفحة (anchor targets)
في الأونة الأخيرة انتشر استخدام هذة الفكرة كثيراً فيما يسمى بـ (Landing Page) أي المواقع ذات الصفحة الواحدة حيث يمكنك التنقل بين أجزاء الصفحة بإستخدام الـ anchor targets، كثيراً ما تجد رابط في نهاية صفحات الموقع ينقلك لأعلى الصفحة، هذا أيضاً anchor targets
على سبيل المثال:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head>..</head> <body id="top"> <header>Header</header> <main> <article> .. </article> <aside> .. </aside> </main> <footer> <a href="#top">Top</a> </footer> </body> </html> |
الرابط <“a href=”#top> لدية الخاصية href وقيمتها هي قيمة الخاصية id للعنصر الذي نود الذهاب إليه في نفس الصفحة في المثال السابق، عندما تقوم بالضغط على الرابط <“a href=”#top> يتم نقلك إلى بداية العنصر <“a id=”top>
الإنتقال لصفحة أخرى في نفس الموقع (Relative URLs)
عندما تريد الإنتقال لصفحة أخرى في نفس الموقع تستخدم الراوبط النسبية (Relative URLs) نسبةً إلى ماذا؟ نسبة إلى نفس الصفحة التي تحوي هذا الرابط.
إليك المثال التالي: قم بإنشاء مشروع يتكون من ثلاثة صفحات:
-Your site folder (your-site.com)
—home.html
—contact.html
—about.html
ماذا لو كان الرابط في صفحة home.html وتريد الإنتقال لصفحة about.htm؟
لانك تريد الإنتقال إلى صفحة أخرى في نفس المجلد/الموقع، فهذا ما يسمى بالروابط النسبية Relative ويمكنك فعل ذلك بكل سهولة:
| 1 2 3 | Go to the <a href="about.html">About Page</a>. |
– ماذا لو أن المشروع الذي قمت بإنشاء لديه العديد من الصفحات وقمت بتنظيمها داخل مجلدات كالتالي:
-Your site folder (your-site.com)
—home.html
—contact.html
—about.html
—services folder
——service-1
——service -2
——service-3
وتريد الإنتقال للصفحة service-2 من صفحة home.html
| 1 2 3 | <a href="services/service-2.html"> service #2 Page</a> |
هكذا، تقوم بوضع مسار الصفحة كاملاً.
ماذا لو كنت في صفحة service-2 وتريد الإنتقال إلى صفحة about.html ، هذه طريقة عكسية للمسار، أي أنك تريد الرجوع للخلف، هنا تستخدم نقطتين متتابعتين للرجوع خطوة واحده للخلف، هكذا:
| 1 2 3 | <a href="../about.html"> service #2 Page</a> |
إذا قمت برفع مشروعك على شبكة الإنترنت، وأصبح عنوان موقعك http://your-website-domain.com
-your-website-domain.com
—index.html
—contact.html
—about.html
ومن صفحة index.html تريد الإنتقال إلى صفحة contact.html
| 1 2 3 | <a href="http://your-website-domain.com/contact.html">Contact Page</a> |
الإنتقال إلى موقع أخر (Absolute URLs)
ليس الأمر مثل الروابط النسبية (relative URLs) أي لا يمكنك استخدم اسم صفحة في موقع آخر للإنتقال إليها، لكن لابد من استخدام رابط الصفحة كاملاً على الموقع الآخر مثل هذا:
| 1 2 3 | http://other-website-domain.com/html/contact.html |
ورابط الصفحة على الموقع الآخر يحتوي على ثلاثة أجزاء:
- البروتوكول http://
- اسم النطاق other-website-domain.com
- مسار الصفحة html/contact.html
ولكي تصل إلى أي صفحة على موقع آخر لابد أن يحتوي رابط الصفحة على الثلاثة الأجزاء هذة. وغالباً ما تستخدم الروابط المطلقة، كي تشير إلى مواقع أخرى داخل موقعك، مثلاً تريد إضافة روابط لحساباتك على الشبكات الإجتماعية:
| 1 2 3 4 5 6 7 | <p> Find us on <a href=“https://www.facebook.com/TieLabs/”>Facebook</a> Find us on <a href=“https://twitter.com/tielabs">Twitter</a> Find us on <a href=“https://www.instagram.com/tielabs/">Instagram</a> </p> |
أين يفتح الرابط؟ ماذا لو أحببت أن تفتح الروابط الخارجية في تبويبات جديدة في المتصفح، بدلاً من تحميلها في نفس التبويب كي تضمن أن موقعك مازال مفتوحاً أمام الزائر. هذا هو دور الخاصية target
الخاصية target
الخاصية target تحدد أين سيتم فتح الرابط:
- في تبويب جديد في المتصفح blank_
- في نفس التبويب في المتصفح self_ (وهذة هي القيمة الإفتراضية)
هذة القيم الأشهر استخداماً للخاصية target وهناك قيم أخرى تستخدم مع عناصر iframe (النادرة الإستخدام) مثل القيمة
parent_ و top_ و framename.
| 1 2 3 | Find us on <a href="https://www.facebook.com/TieLabs/" target="_blank">Facebook</a> |
أي أن صفحة TieLabs على فيسبوك سيفتح في تبويب جديد بدلاً من التحميل في نفس التبويب الموجود فيه الرابط.
هل الرابط يكون دائما نصي (كلمة أو مجموعة من الكلمات)؟ هل يمكنني استخدام الصور بدلاً من النصوص؟
روابط الصور Images as Links
ماذا لو أردت استبدال كلمة Facebook في المثال السابق ووضع أيقونة فيسبوك مكان الكلمة، أي عندما تضغط على أيقونة فيسبوك يتم الإنتقال إلى حساب TieLabs على فيسبوك.
يمكنك فعل ذلك بكل بساطة بإستبدال كلمة Facebook بعنصر الصورة داخل الوسم <a> هكذا:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <ul class="social-media"> <li> <a href="https://www.facebook.com/TieLabs/" target="_blank"> <img src="https://mo3aser.com/wp-content/uploads/2018/07/facebook.png"> </a> </li> <li> <a href="https://www.linkedin.com/company/tielabs/" target="_blank"> <img src="https://mo3aser.com/wp-content/uploads/2018/07/linkedin.png"> </a> </li> <li> <a href="https://twitter.com/tielabs" target="_blank"> <img src="https://mo3aser.com/wp-content/uploads/2018/07/twitter.png"> </a> </li> </ul> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .social-media{ list-style: none; text-align: center; } .social-media li{ float: none; display: inline-block; margin: 10px; transition: 0.3s; } .social-media li:hover{ transform: translatey(-5px); } |
الشبكات الإجتماعية في المثال السابق عبارة عن صور، ولكن صورة موجودة داخل رابط تشعيبي، لذلك ستعمل الصورة تماماً كما يعمل النص الموجود داخل الرابط التشعيبي.
الملخص
- استخدم العنصر <a> لإنشاء رابط جديد.
- استخدم الخاصية id مع بعض الأجزاء في الصفحة لتعينها كجهات يمكنك الإنتقال إليها من خلال الروابط.
123<div id="top"> - استخدم الخاصية href بقيمة مسبوقة برمز # + قمية خاصية id لجزء معين في الصفحة للإنتقال إليها مباشرةً.
123<a href="#top"> - الروابط النسبية Relative Links تعني الإنتقال من صفحة لصفحة أخرى في نفس الموقع.
- الروابط المطلقة Absolute Links تعني الإنتقال من صفحة في موقع ما لصفحة أخرى في موقع آخر.
- استخدم الخاصية href لتحديد وجهة الرابط، رابط الصفحة التي ستنذهب إليها.
- استخدم الخاصية target لتعيين أين يفتح الرابط، في نفس التبويب أم في تبويب جديد؟
- استخدم عنصر الصورة <img> (داخل عنصر الرابط <a> ) لجعل الصور رابط بدلاً من النص.
