كنا قد أعطينا نبذة مختصرة عن الروابط التشعبية فى لغة html والآن سنتطرق بمزيد
من التفصيل عنها
مثال على الروابط التشعبية
-
توجد الروابط التشعبية تقريبا فى جميع صفحات الانترنت.
- وسم الروابط التشعبية <a> وتأخذ الخاصية href وهى اختصار لجملة hyper text reference
قد تكون الروابط التشعبية على هيئة نص أو على هيئة صورة ويمكن لجميع عناصر Html أن تكون ارتباط تشعبي
وظيفة الروابط التشعبية تقوم بنقلك من موقع لأخر أو من صفحة لأخرى فى نفس الموقع
<a href="http://google.com"> this is google site</a>
ناتج المثال:
- يمكن عمل ارتباط تشعبي للانتقال من صفحة لأخرى فى نفس الموقع فمثلا لو كان الموقع يتكون من صفحتين page1 and page2,ونريد الانتقال إلى الصفحة page2
<a href="page2.html">اضغط هنا للانتقال للصفحة
الثانية</a>
ألوان الارتباط التشعبي
عندما نضع المؤشر فوق الرابط يتحول إلى شكل يد صغيرة ويتغير لونه .
وافتراضيا يكون لون الرابط باللون الأزراق والذى لم يسبق الضغط عليه وزيارته،
أما الروابط التى تمت زيارتها والضغط عليها فتتحول إلى اللون الأحمر
الارجوانى. والرابط النشط يتحول للون الأحمر
وبالطبع يمكن تغيير هذه الألوان كما فى المثال التالي:
<head>
<style>
a:link{color:black;
background-color:transparent;text-decoration:none}
a:visited{color:green;background-color:transparent;text-decoration:none}
a:hover{color:red;background-color:transparent;text-docoration:underline}
a:active{color:yellow;background-color:transparent:text-decoration:underline}
</style>
</head>
<body>
<a href="http://google.com"> this is google site</a>
</body>
</htmL>
مكان فتح الرابط
يمكن للرابط ان يفتح فى نفس الصفحة الأصلية أو فى نافذة جديدة أو فى علامة
تبويب جديدة وهناك خاصية تسمى target
هذه الخاصية تقوم بتحديد مكان فتح الرابط
<a href="www.google.com" target="_blank"> click here to go to
google site</a>
فى المثال السابق يتم فتح الرابط فى علامة تبويب جديدة أو فى صفحة
جديدة.
أما إذا أردنا أن يتم فتح الرابط فى نفس الصفحة نقوم بكتابة target="_self"
مثال:
<a href="www.google.com" target="_self"> click here to go to
google site</a>
الصورة كرابط
يمكن جعل الصورة ارتباط تشعبي وذلك بوضعها بين وسمى <a>
</a>
مثال لجعل صورة جوجل ارتباط تشعبي
<a href="htttp://www.google.com"><img
src="google.jpg"></a>
ناتج المثال:
إنشاء علامات مرجعية bookmarks
وذلك للانتقال من مكان معين فى صفحة الانترنت إلى مكان أخر محدد فى نفس
الصفحة ويكون مفيد فى حالة أن تكون صفحة الانترنت طويلة وتتم هذه العملية
على خطوتين
الخطوة الأولى: وذلك بانشاء id معين لأى عنصر من عناصر صفحة الويب التى
نريد الانتقال إليها
الخطوة الثانية : عمل رابط بالضغط على هذا id نقوم بالقفز إلى مكانه فى
صفحة الويب
مثال
<body>
<h1 id="first"> computer in
educations</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br>
<a href="#first">click her to
go to computer in educations </a>
</body>
ناتج المثال:
وبالضغط على الرابط الموجود اسفل الصفحة يتم القفز الى العنوان فى أول
الصفحة.
ولابد من وضع علامة # قبل اسم id فى رابط الصفحة
يمكن الانتقال أيضا إلى مكان معين فى صفحة اخرى فمثلا الصفحة الثانية
يوجد بها عنوان <h2>
هذا العنوان تم عمل id وتم تسميته second
وانا الأن فى الصفحة الأولى وأريد الانتقال إلى العنوان الثانى فى
الصفحة الثانية
وذلك عن طريق المثال الثالي:
<a href="page2.html#second">click her to go to h2 in scond
page </a>
الإيميل
يمكن عمل رابط عن طريق الايميل وذلك بوضع الايميل مكان الرابط ووضع كلمة mailto
مثال:
<a href="mailto:mail@yahoo.com">click her to send message to my email</a>
نلاحظ أنه بمجرد الضغط على الايميل يتم فتح برناج outlook لإرسال رسالة
إلى الإيميل المذكور فى الرابط
المشاركات
شكرا و كلام مفيد جدا
ردحذفشكر جدا ولكن ماذا أفعل إذا كانت الروابط الشعبية في موقعي لا تظهر بلون مميز واريد اختيار لون
ردحذفالرجاء شرح كيفية فتح الرابط في نافذة جديدة
ردحذفالسلام عليكم ي شباب ارجو افادتي في سؤالي السابق كيفية فتح الرابط في نافذة جديدة وليس في علامة تبويب جديدة وجزاكم الله خيراً
ردحذفشكرا جزيلاً لك
ردحذف