HTML

HTML Link Attributes
خصائص الروابط في لغة HTML

سوف تتعلم في هذا الدرس جميع الخصائص التي تضاف إلي عنصر <a> في لغة HTML مثل خاصية target التي تقوم بفتح الرابط في نافذة جديدة.

التاريخ

11 يناير 2022

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

1464

المواضيع

12
الشروحات chevron_left HTML Link Attributes chevron_left HTML

HTML Link Attributes
خصائص الروابط في لغة HTML

</> Links style color in HTML
ألوان الروابط في لغة HTML

يوجد ثلاث أشكال افتراضية تظهر بها links الروابط في صفحة HTML وهم كالآتي:

  • unvisited link الروابط التي لم تقم بزيارتها من قبل، تكون underline أسفلها خط  ولونها blue أزرق.
  • visited link الروابط التي قمت بزيارتها من قبل، تكون underline أسفلها خط ولونها purple بنفسجي.
  • active link الروابط التي تضغط عليها بزر mouse الفأرة دون ترك الزر، تكون underline أسفلها خط ولونها red أحمر.
Links color style

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

<a target="_blank" href="https://www.closetag.com/tutorial/php">Visit PHP tutorial page in closetag.com</a>
ملاحظات
  • تقوم المتصفحات بتحديد الألوان، لكي تساعد مستخدمي صفحات الويب، في معرفة الفرق بين الصفحات التي قاموا بزيارتها، والصفحات التي لم يقوموا بزيارتها من قبل.
  • يمكن تغيير الألوان الافتراضية، لأي لون آخر باستخدام لغة CSS حسب ما يتناسب مع style موقعك.

</> Target attribute in HTML links
خاصية Target بداخل الروابط في لغة HTML

في الوضع الافتراضي يقوم browser المتصفح بعرض الصفحة التي تريد الذهاب إليها في current tab نفس النافذة الحالية browser للمتصفح، و attribute [ Target ] هي الخاصية المسؤولة عن تحديد مكان عرض صفحة HTML الجديدة، وذلك حسب القيمة التي نضعها بداخلها.

حيث تبدأ جميع القيم بعلامة underscore [ _ ] باستثناء قيمة واحدة. 


القيم التي تكتب بداخل خاصية Target هي:

  • [ “_self” ] وهي القيمة الافتراضية، فإذا لن تقم بتحديد نوع attribute [ Target ] سيقوم المتصفح بفتح link الرابط في نفس النافذة، حتى إذا لم نقم بكتابة [ “_self” ].
  • [ “_blank” ] تعطي هذه القيمة أمر browser للمتصفح بفتح link الرابط في new tab نافذة جديدة.
  • [ “ _top” ] سنتعرف عليها في دروس لاحقة.
  • [ “ _parent” ] سنتعرف عليها في دروس لاحقة.
  • [ “targetframe” ] سنتعرف عليها في دروس لاحقة.

Target without [ _self ]

سوف يفتح المتصفح الصفحة الموجودة داخل href attribute في نفس النافذة الحالية بدون خاصية [ _self ].

<a href="https://www.closetag.com">Visit CloseTag :) </a>
Target [ _self ]

سوف يفتح المتصفح الصفحة الموجودة داخل href attribute في نفس النافذة الحالية، سواء تمت كتابة خاصية Target [ _self ] أو لم تتم كتابتها.

<a href="https://www.closetag.com" target="_self">Visit CloseTag :) </a>
Target [ _blank ]

سوف يقوم المتصفح بفتح الصفحة الموجودة داخل href attribute في نافذة جديدة، وستبقى النافذة الحالية بمحتواها الحالي معروضة أيضاً.

<a href="https://www.closetag.com" target="_blank">Visit CloseTag :) </a>
ملاحظة
  • يجب وضع القيم الخاصة بالخاصية [target] attribute ضمن علامات تنصيص مزدوجة[" "] أو مفردة[' '].

</> Link title attribute in HTML
خاصية title بداخل عنصر link الرابط في لغة HTML

لإظهار معلومات أو تفاصيل إضافية عند الوقوف mouse pointer بمؤشر الفأرة قليلاً على النصوص أو العناصر التي هي من النوع hyper text أي عنصر الرابط، يمكننا استخدام خاصية title attributes.

  • نقوم بإضافة معلومات نصية تظهر عند الوقوف mouse pointer بمؤشر الفأرة.
  • تُكتب هذه النصوص أو المعلومات الإضافية بداخل القيمة الخاصة بـ title attribute.
  • تكتب title attribute بجوار خاصية href بداخل open tag علامة البداية العنصر a.
  • خاصية title attribute اختيارية يمكن تجاهلها.
title attribute

يُكتب title في open tag علامة البدء بجوار خاصية href.

<a href="https://www.closetag.com" title="Welcome To CloseTag">Make box visible on mouse move above text</a>
معلومة هامة
إن attribute title سمة العنوان لا تُنفذ مع أجهزة التنقل باللمس بين محتوى الصفحة، مثل: أجهزة التابلت وأجهزة الآيباد.
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.