Mr. A7meD KaMeL

11- الروابط التشعبية Hyperlinks – HTML Links

محتوى الموضوع

بسم الله الرحمن الرحيم

المحاضرة الحادية عشر: الروابط التشعبية HTML Links – Hyperlinks

توجد روابط في جميع صفحات الويب تقريبا. حيث تسمح للزائر بالتنقل من صفحة الى اخرى.

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

عند تحريك سهم الفأرة (الماوس) فوق الرابط يتحول السهم الى شكل يد صغيرة.

وقد يكون الرابط اي عنصر من عناصر الصفحة، وليس النص فقط، فقد يكون صورة، وعند الضغط على الصورة يتم الانتقال الى صفحة اخرى.


تركيبة الرابط:

يتم كتابة كود الرابط في صفحة الويب HTML كما يلي:

<a href="url"> محتوى الرابط هنا </a>

حيث ان الوسم الخاص بإنشاء رابط في الصفحة هو <a>.

ولوسم الرابط خاصية href وهي الخاصية التي تحدد الهدف الذي سيتم الانتقال اليه عند الضغط على محتوى الرابط.

انظر الى المثال التالي:

<a href="http://www.ni10gl.com> اضغط هنا لفتح الموقع </a>

وفي هذا المثال، تم انشاء رابط محتواه هو نص (( اضغط هنا لفتح الموقع ))، وهدف الرابط هو http://www.ni10gl.com.

والذي سيظهر في المتصفح هو النص (( اضغط هنا لفتح الموقع ))، وعند الضغط على هذا النص سيتم فتح الرابط http://www.ni10gl.com.

 

وحيث ان المحتوى قد يكون صورة او اي عنصر آخر من عناصر الصفحة فإن المحتوى نفسه قد يتغير، فبدلاً كتابة نص في محتوى الرابط يمكن وضع عنصر الصورة المطلوبة، وسيكون ذلك كما في الكود التالي:

<a href="http://www.ni10gl.com">
     <img src="img/logo.png">
</a>

والذي سيظهر في المتصفح هو الصورة نفسها (محتوى الرابط)، وعند الضغط على تلك الصورة سيتم الانتقال الى الموقع http://www.ni10gl.com.


مسار الرابط:

يعتبر مسار الرابط هو الهدف الذي سيتم الانتقال اليه عند الضغط على محتوى الرابط.

ويتم تحديده باستخدام خاصية href كما هو موضح بالاعلى.

وفي الامثلة بالاعلى تم استخدام المسار http://www.ni10gl.com ليكون هو هدف الرابط عند الضغط عليه، ويعتبر الهدف في تلك الحالة هدف خارجي، اي انه يتم كتابة رابط الهدف بالكامل بإحتوائه على البروتوكول  http.

اما اذا كان الهدف المطلوب هو فتح صفحة اخرى موجودة في نفس الموقع الحالي، فيتم كتابة الرابط بشكل مختلف (( كما تعلمنا سابقا في المحاضرة الخاصة بخصائص عناصر صفحة الويب ))، بنفس طريقة كتابة مسار ربط صفحة التنسيقات css.

لاحظ المثال التالي:

<a href="blog.html"> المدونة </a>

ففي هذا المثال، تم نشاء رابط محتواه كلمة (( المدونة )) واذا تم الضغط على الرابط سوف يتم فتح صفحة المدونة والتي هي باسم blog.html.

وكما تعلمنا سابقا في محاضرة خصائص عناصر صفحة الويب، هذا المسار الموضح في المثال هو مسار صفحة blog.html والتي هي موجودة بجانب الصفحة المفتوحة حالياً.

اما اذا كانت الصفحة المراد ربطها موجودة في مجلد بجانب صفحة الويب الحالية فيكون الكود كما يلي:

<a href="folder/blog.html"> المدونة </a>

حيث ان صفحة المدونة موجودة في مجلد اسمه folder موجود بجانب الصفحة الحالية، وصفحة blog.html موجودة في هذا المجلد.

ولمزيد من التفاصيل حول كتابة المسارات يرجى العودة الى المحاضرة الثالثة: خصائص عناصر صفحة الويب بالضغط هنا.


الاشارة المرجعية Bookmark:

الاشارة المرجعية هي الرابط الموجود في صفحة ما، وعند الضغط عليه بزر الفأرة (الماوس) يتم الانتقال الى عنصر آخر موجود في نفس الصفحة الحالية.

لاحظ المثال التالي:

<a href="#chapter1"> الجزء الأول </a>
<a href="#chapter2"> الجزء الثاني </a>



<p id="chapter1"> محتوى الجزء الأول هنا </p>
<p id="chapter2"> محتوى الجزء الثاني هنا </p>

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

وهكذا في الرابط الذي محتواه (( الجزء الثاني )).

ولاحظ عنصري الفقرتين (( فقرة الجزء الاول وفقرة الجزء الثاني )) كل منهما تم تمييزهما بـ id منفرد، حيث ان عنصر فقرة الجزء الاول له id اسمه chapter1، وعنصر فقرة الجزء الثاني له id اسمه chapter2.

ولاحظ في الرابطين اللذان تم انشاؤهما كإشارات مرجعية، في رابط الجزء الاول تم كتابة هدف (مسار) الرابط وهو الـ id الخاص بعنصر فقرة الجزء الاول مسبوقا بعلامة #.


خاصية فتح الرابط target:

عند الضغط على رابط ما في صفحة الويب، من الطبيعي انه يتم فتح مسار الرابط في نفس الصفحة الحالية.

وهذا يعني ان خاصية فتح الرابط target قيمتها هي self_ ،وهي القيمة الافتراضية.

اما لفتح مسار الرابط في صفحة تبويب او نافذة جديدة في المتصفح، تكون قيمة الخاصية هي blank_

لذا فمن اهم قيم خاصية فتح الرابط target  هما القيمتين self_   و   blank_

ويتم كتابة الكود كما يلي:

<a href="http://www.ni10gl.com" target="_blank"> محتوى الرابط </a>
<a href="http://www.ni10gl.com" target="_self"> محتوى الرابط </a>

وهناك قيم أخرى لخاصية فتح الرابط، سيتم دراستها في دروس لاحقة.


نهاية المحاضرة

 

 

 

تاريخ الموضوع: أبريل 22, 2017 9:35 م
اسم الكاتب A7meD KaMeL - NiGh10GaLe
نبذة عن الكاتب

مهندس كمبيوتر - مصمم مواقع - مدرب كمبيوتر - مدرب ICDL بمركز التدريب الاداري والاستشارات بكلية التجارة بجامعة المنصورة - مدرب تصميم مواقع - مدرب لكورس الربح من الانترنت.

اترك تعليقاً