القائمة الرئيسية

الصفحات

تعديل المشاركة

الروابط في HTML الروابط التشعبيه Anchor

Almonther Almolikey
(0)
تابعنا ليصلك كل جديد

 الروابط في لغة  HTML الروابط التشعبيه Anchor 

روابط HTML هي ارتباطات تشعبية يمكنك النقر فوق الارتباط ويقوم بنقلك إلى مستند آخر.

ملاحظة: عند تحريك الماوس فوق ارتباط ، يتحول سهم الماوس إلى يد صغيرة مالم يقوم المبرمج بتغير شكل المؤشر عن طريق اكواد الCSS.

ملاحظة: لا يجب أن يكون الرابط نصاً. يمكن أن يكون الارتباط صورة أو أي عنصر HTML آخر!

الروابط التشعبية في لغة html


الرروابط في HTML  بناء جملة الرابط

وسم HTML <a>   يحدد  الارتباط التشعبي. يكون شكله على النحو التالي : 

‎<a href="URL">نص الرابط</a>‎

حيث URl هو عنوان الرابط المراد الانتقال اليه

السمة الأكثر أهمية للوسم  <a>  هي الخاصية  href، والتي تشير إلى وجهة الرابط او بمعنى اخر تحمل هذه الخاصية الرابط المراد فتحه عند النقر على هذا الرابط

و استخدام  النص كرابط هو جزء من شأنها أن تكون واضحة للقارئ كما هو بالمثال التالي.

سيؤدي النقر فوق نص الارتباط إلى إرسال القارئ إلى عنوان URL المحدد.

مثال

يوضح هذا المثال كيفية إنشاء ارتباط إلى thedigitalyemen.com: 
‎<a href="https://www.thedigitalyemen.com/">‎زيارة موقع ‏thedigitalyemen.com</a>‎


مظهر الروابط في صفحة الانترنت:

تتبع روابط HTML بشكل افتراضي التنسيق التالي,

حالة الرابط

التنسيق

لم تتم زيارته

ازرق ومسطر تحته

تمت زيارته

بنفسجي ومسطر تحته

نشط

احمر ومسطر تحته

يمكن التحكم بالوان الروابط من خلال شفرات CSS

الرابط التشعبي يعتبر رابط نشط من وقت نقر المستخدم على الرابط التشعبي

نصيحة: يمكن بالطبع تصميم الروابط في html باستخدام CSS ، للحصول على مظهر آخر!

خاصية الهدف target في روابط HTML

بشكل افتراضي ، سيتم فتح الصفحة المرتبطة بالارتباط التشعبي (الرابط) في نافذة المتصفح الحالية.  لتغيير هذا ، يجب تحديد هدف آخر للارتباط عبر الخاصية target .

الخاصية target تحدد كيف سيتم فتح المستند المرتبط.

تدعم علامة الارتساء جميع السمات العامة وسمات الأحداث. بالإضافة إلى ذلك ، فإنه يدعم أيضًا السمات التالية ،

 

الخاصية

القيم الممكن ان تاخذها الخاصية

عمل الخاصية

href

أي عنوان URL صالح

يحدد مصدر الوجهة

target

_self

_blank

_parent

_top

 يحدد السياق الذي سيفتح فيه المورد المرتبط. يفتح "_blank" نافذة جديدة ، ويحمل "_top" أو "_parent" المحتوى في نفس النافذة ، ويحمل "_self" محتوى الرابط في النافذة الحالية. القيمة الافتراضية هي "_self".

name

أي سلسلة صالحة

يسمي الارتباط الحالي ، بحيث يمكن أن يكون وجهة لارتباط آخر, كانت مستخدمه في HTML 4

اما الان يمكن استخدام ال ID وذلك من اجل تعريف مكان هذا الارتباط 

hreflang

رمز لغة صالح يتكون من حرفين مثل ar

يحدد لغة المورد المرتبط.   قراءة الشرح المفصل

Access key

اي حروف أبجدية أو رقم أو رمز على لوحة المفاتيح

يمكننا تحديد اختصار لوحة المفاتيح لتفعيل الرابط. على سبيل المثال ، إذا حددت "M" كمفتاح وصول ، فسيؤدي الضغط ctrl + M أو shift + M (حسب المتصفح) إلى تنشيط الارتباط وكانك قمت بالنقر عليه.

rel

قيم مفصولة بسلسلة أو مسافة

يحدد العلاقة بين المستند الحالي والمستند المحدد في href.

download

 لا تاخذ قيمة

يوجه المتصفح لتنزيل المورد المرتبط بدلاً من فتحه. مثال:
<a href="/images/myw3schoolsimage.jpg" download>

title

سلسلة نصية

 يحدد عنوان الارتباط الذي يظهر للمستخدم كتلميح عند تمرير مؤشر الماوس على الرابط.

tabindex

أي رقم بين 0 إلى 32767

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


عناوين URL المطلقة و عناوين URL النسبية في روابط html

كلا المثالين أعلاه يستخدمان عنوان URL مطلق (عنوان ويب كامل) في الخاصية href.

الارتباط المحلي (رابط إلى صفحة داخل نفس موقع الويب) بعنوان URL نسبي ( بدون جزء "https: // www": )

مثال:

<h2>‎رابط مطلق‎</h2> 
‎<p><a href="https://www.thedigitalyemen.com/">‎اليمن التقني‎</a></p> 
‎<p><a href="https://www.google.com/">‎جوجل‎</a></p> 
‎ 
‎<h2>‎رابط محلي‎</h2> 
‎<p><a href="html_images.asp">HTML Images</a></p> 
‎<p><a href="/search/label/HTML">HTML Tutorial</a></p>‎


استخدم صورة في روابط html كارتباط  تشعبي HTML -

لاستخدام صورة كرابط ، فقط ضع وسم <img>  داخل وسم <a>:

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

انشاء رابط في html الى عنوان بريد إلكتروني

استخدم mailto: داخل الخاصية href لإنشاء ارتباط يفتح برنامج البريد الإلكتروني للمستخدم (للسماح لهم بإرسال بريد إلكتروني جديد الى البريد المحدد داخل الخاصية href):
مثال:
<a href="mailto:digitalyemen2030@gmail.com">راسلنا</a>

إنشاء رابط html الى رقم هاتف  HTML

يتم استخدام هذا النوع من الروابط من اجل المستخدم يقوم بالضغط على الرابط بدل من نسخ الرقم الى الهاتف واجراء المكالمة وذلك عبر استخدام tel:
<a href="tel:+1(555)5309">(555) 5309</a>

tel:  يختلف سلوك الارتباط باختلاف إمكانيات الجهاز:

  • تتصل الأجهزة الخلوية بالرقم تلقائيًا.
  • تحتوي معظم أنظمة التشغيل على برامج يمكنها إجراء مكالمات ، مثل Skype أو FaceTime.
  • يمكن لمواقع الويب إجراء مكالمات هاتفية مع registerProtocolHandler، مثل web.skype.com.
  • تشمل السلوكيات الأخرى حفظ الرقم في جهات الاتصال ، أو إرسال الرقم إلى جهاز آخر.

راجع RFC 3966 للحصول على البنية والميزات الإضافية والتفاصيل الأخرى حول tel:نظام URL.

ااستخدام الروابط في لغة html من اجل التنقل بين اجزاء الصفحة الصفحة 

يمكن استخدام الروابط من اجل التنقل في الصفحة وذلك عبر ما يسمى بال id وهو اسم فريد يسند لوسم واحد فقط 
يتم استخدامه للتنقل بين عناوين الصفحة عادةً عندما يكون المحتوى كبير انظر الى الجدول الموجود اول المقال 
يتم ذالك عن طريق الاتي 
اولا نقوم بالذهاب الى الوسم الذي نريد الانتقال اليه و اعطاءه معرف فريد مثل id="specialID"  سوف تتعرف على id اكثر في دروس CSS اعرف الان انه معرف فريد لا يمكن لاثنين من العناصر ان يكون لهم نفس المعرف id
ثانيا نقوم باضافة الرابط في المكان الذي نريد و اعطاء الخاصية href قيمة ال id يجب ان يسبق اسم المعرف رمز # من اجل التعرف عليه انه id 
مثال:

‎<h1 id="maintitle"> العنوان الرئيسي</h1>
<p> هنا سوف يكون النص الطبيعي ونحن سوف نقوم بعمل رابط بالنهاية <br />
لنقلنا الى اول الصفحة حيث ان العنوان الرئيسي يكون موجود في اول الصفحة 
</p>
<a href="#maintitle" > انتقل الى اول الصفحة</a>

اذا قمت بتنفيذ الكود السابق عند الضغط على انتقل الى اول الصفحة سوف يقوم بنقلك الى اول الصفحة 
قم بالضعط على الرابط التالي لمعرفة كيف انقلني الى اول صفحة
ونكون في هذا الجزء قد انهينا شرح الروابط في لغة html 

أخر المواضيع من قسم : HTML

تعليقات

إرسال تعليق

البحث في هذه المدونة الإلكترونية

جدول المحتويات