HTML - anchor Tag ... What is link? ما هي الوصلات التشعبية او الرابط

HTML - anchor  Tag <a> ... </a> What is link? ما هي الوصلات التشعبية او الرابط

HTML - anchor Tag <a> ... </a> What is link?

HTML - anchor  Tag <a> ... </a> What is link? ما هي الوصلات التشعبية او الرابط

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

ما هو الارتباط؟what is link or anchor tag


 هو اتصال من مصدر ويب إلى آخر ، والرابط له طرفان ، مرساة واتجاه.  يبدأ الرابط عند نقطة الارتساء "المصدر" ويشير إلى نقطة الارتساء "الوجهة" ، والتي قد تكون أي مصدر ويب مثل صورة أو مقطع فيديو أو مقطع صوتي أو برنامج أو مستند HTML أو عنصر داخل مستند HTML  .

 صيغة ارتباط HTML


 يتم تحديد الروابط في HTML باستخدام علامة "a".
صيغة ارتباط HTML

شريح صيغة او كود الرابط المرساة 

href: يتم استخدام خاصية href للتحديد
عنوان وجهة الارتباط المستخدم.
رابط نصي: رابط النص
هو الجزء المرئي من الارتباط.

مثال

<!DOCTYPE html> 
<html> 
 <h3>Example Of Adding a link</h3> 
   <body> 
      <p>Click on the following link</p> 
      <a href = "https://www.Devlopertechnology.blogspot.com ">GeeksforGeeks</a> 
   </body> 
      
</html>

مخرجات كود الرابط التشعبية الوصلة المرساة 


الروابط الداخلية

 الارتباط الداخلي هو نوع من الارتباط التشعبي الذي يكون هدفه أو وجهته مصدرًا ، مثل صورة أو مستند ، على نفس موقع الويب أو المجال.

تغير لون الارتباط او الوصلة المرساة

تظهر أنواع مختلفة من الروابط بتنسيقات مختلفة مثل:

 يظهر الرابط غير المرغوب فيه تحته خط ولون أزرق بشكل افتراضي.
 يظهر الارتباط الذي تمت زيارته مسطرًا وأرجواني اللون بشكل افتراضي.
 يظهر الارتباط النشط مسطرًا ولونه أحمر بشكل افتراضي.
 يمكن تغيير مظاهر الروابط باستخدام CSS.


<!DOCTYPE html> 
<html> 
<head> 
<style> 
a:link { 
    color: red; 
    background-color: transparent; 
} 
a:visited { 
    color: green; 
    background-color: transparent; 
} 
a:hover { 
    color: blue; 
    background-color: transparent; 
} 
a:active { 
    color: yellow; 
    background-color: transparent; 
} 
</style> 
</head> 
<body> 
  
<p>Changing the default colors of links</p> 
  
<p>Visited Link</p> 
<a href=<a href="https://www.Devlopertechnology.blogspot.com ">
Development Technology </a>  
  
<p>Link</p> 
  
<a href="https://facebook.com">facebook</a> 
  
<p>hovering effect</p> 
  
<a href="https://www.pinterest.se ">Pinterest </a> 
  
</body> 
</html>

مخرجات  كود تغير الوان الرابط او الوصلة المرساة

Visited Link لون الرابط اذا تم زيارته 

Link لون الرابط قبل الزيارة 

hovering effect لون الرابط عند الضغط عليه أو المرور بالماوس 


خاصية id:

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

 في هذه الصفحة ، قمت بوضع علامة مرجعية على علامة المرساة ، لذا قمت أولاً بعمل إشارة مرجعية مثل هذه
<a  id="bookmarkinsidepage">anchor tag</a>

Here the link will navigate to bookmark to top at anchor tag Visit anchor tag Section .
<a href="#bookmarkinsidepage"&gt  Visit anchor tag Section</a>

Anatomy of Hyperlink - anchor tag

هيكل  الارتباط التشعبي - علامة الربط

anchor-link-anatomy-hyperlink

في الرسم التوضيحي أعلاه ، تشير العلامة "<a" إلى بداية الارتباط.  يمكن أن تحتوي علامات الارتباط على صور أو نصوص أو كائنات أخرى ، توفر جميعها منطقة قابلة للنقر على الصفحة يمكن للمستخدمين المشاركة فيها للانتقال إلى صفحة أخرى.  هذا هو عنصر التنقل الأصلي للإنترنت - "الارتباطات التشعبية".  موقع إحالة الرابط يخبر المتصفح (ومحركات البحث) بالمكان الذي يشير إليه الرابط.  في هذا المثال ، تتم الإشارة إلى عنوان URL http://www.jonwye.com.  بعد ذلك ، الجزء المرئي من الرابط للزوار ، المسمى "نص الرابط" في عالم تحسين محركات البحث ، يصف الصفحة التي يشير إليها الرابط.  الصفحة المشار إليها تتعلق بالأحزمة المخصصة ، التي صنعها صديقي من واشنطن ، جون واي ، لذلك استخدمت نص المرساة "أحزمة جون واي ذات التصميم المخصص".  تغلق العلامة <a> الارتباط ، لذلك لن يتم تطبيق سمة الارتباط على العناصر الموجودة لاحقًا في الصفحة.
 هذا هو التنسيق الأساسي للرابط - وهو مفهوم بشكل بارز لمحركات البحث.  تعلم العناكب أنه يجب عليهم إضافة هذا الرابط إلى الرسم البياني لرابط المحركات على الويب ، واستخدامه لحساب المتغيرات المستقلة عن الاستعلام (مثل نظام ترتيب الصفحات من Google) ، ومتابعته لفهرسة محتويات الصفحة المشار إليها.


 كيفية اضافة رابط تشعبي قصير في اكسل 

يمكنك إضافة رابط تشعبي الي خلية في اكسيل Excell من خلال استخدام لوحة المفاتيح بالضغط على مفتاح ctrl و k
التطبيقات والأدوات التي تعمل مع اختصار إضافة رابط تشعبي
Word و Excel وتطبيقات Apple مثل Pages و Notes و Stickies و TextEdit ، بالإضافة إلى محرر مستندات Google و WordPress وربما أدوات أخرى

للقراءة عن