تم العثور على الروابط في صفحات الويب تقريبا. وصلات تسمح للمستخدمين النقر طريقهم من صفحة إلى أخرى.
HTML روابط الوصف
ارتباط تشعبي، أو مجرد الارتباط، هو إشارة إلى البيانات التي يمكن للقارئ أن يتبع مباشرة إما عن طريق النقر، والتنصت، أو تحوم.
ويشير ارتباط تشعبي إلى وثيقة كاملة أو لعنصر معين ضمن مستند. النص التشعبي هو نص مع الارتباطات التشعبية. ويطلق النص الذي يرتبط من مرساة النص.
نظام البرامج التي يتم استخدامها لعرض وخلق النص التشعبي هو نظام النص التشعبي، ولإنشاء ارتباط تشعبي هو ارتباط تشعبي (أو ببساطة لربط). ويقال إن صلات التالية المستخدم للتنقل أو تصفح النص التشعبي.
HTML وصلات - الارتباطات التشعبية
روابط HTML الارتباطات التشعبية.
ارتباط تشعبي هو نص أو صورة يمكنك النقر على، والقفز إلى وثيقة أخرى.
HTML وصلات - بناء الجملة
في HTML، يتم تعريف الروابط مع <a> العلامة:
<a href=" url "> link text </a>مثال
<a href="http://www.w3ii.com/html/default.html">Visit our HTML tutorial</a> انها محاولة لنفسك » و href تحدد السمة عنوان الوجهة (http://www.w3ii.com/html/default.html)
نص الارتباط هو الجزء المرئي (Visit our HTML tutorial) .
بالنقر على رابط النص، سوف نرسل لك إلى العنوان المحدد.
لايوجد نص الارتباط أن يكون النص. ويمكن أن يكون صورة HTML أو أي عنصر HTML الآخرين.
دون مائلة زائدة على عناوين فرعي، قد تولد طلبين إلى الملقم. والعديد من خوادم تضاف تلقائيا خط مائل زائدة إلى العنوان، ومن ثم خلق طلب جديد.
روابط محلية
على سبيل المثال تستخدم فوق لURL المطلق (A full web address) .
A الارتباط المحلي (link to the same web site) يتم تحديد مع URL النسبي (without http://www.... ) .
HTML وصلات - الألوان
عند تحريك الفأرة فوق الرابط، سوف أمرين يحدث عادة:
- سيتحول السهم الماوس إلى يد صغيرة
- وهذا اللون من العنصر رابطا
افتراضيا، ستظهر وصلة مثل هذا (in all browsers) :
- وجود صلة لم يسجل تحته خط والأزرق
- وصلة زار تحته خط والأرجواني
- وجود صلة نشطة تحته خط والأحمر
يمكنك تغيير الألوان الافتراضية، وذلك باستخدام الأساليب:
مثال
<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style> انها محاولة لنفسك » HTML وصلات - إن target سمة
و target تحدد السمة التي لفتح المستند المرتبط.
هذا المثال فتح المستند المرتبط في نافذة متصفح جديدة أو في علامة تبويب جديدة:
| قيمة الهدف | وصف |
|---|---|
| _blank | يفتح المستند المرتبط في نافذة جديدة أو تبويب |
| _self | يفتح المستند المرتبط في نفس الإطار الذي تم النقر عليه (this is default) |
| _parent | يفتح المستند المرتبط في الإطار الأصل |
| _top | يفتح المستند المرتبط في كامل الجسم من النافذة |
| framename | يفتح المستند المرتبط في إطار اسمه |
إذا تم تأمين صفحة الويب الخاصة بك في الإطار، يمكنك استخدام target="_top" للخروج من الإطار:
مثال
<a href="http://www.w3ii.com/html/default.html" target="_top">HTML5 tutorial!</a> انها محاولة لنفسك » HTML وصلات - صورة كارتباط
ومن الشائع استخدام الصور وصلات:
مثال
<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a> انها محاولة لنفسك » يضاف 0 لمنع IE9: الحدود (and earlier) من عرض الحدود حول الصورة.
روابط HTML - إنشاء إشارة مرجعية
وتستخدم العلامات HTML للسماح للقراء للانتقال إلى أجزاء معينة من صفحة ويب.
إرسال هي العملية إذا كان موقع الويب الخاص بك يحتوي على صفحات طويلة.
لجعل إشارة مرجعية، يجب أولا إنشاء مرجعية، ثم قم بإضافة وصلة إليها.
عند النقر فوق الارتباط، الصفحة سوف انتقل إلى موقع بالعلامة.
مثال
أولا، إنشاء علامة مع id السمة:
<h2 id="tips">Useful Tips Section</h2>ثم إضافة ارتباط إلى الإشارة المرجعية ("Useful Tips Section") ، من داخل نفس الصفحة:
<a href="#tips">Visit the Useful Tips Section</a>أو، إضافة ارتباط إلى العلامة ("Useful Tips Section") ، من صفحة أخرى:
ملخص الفصل
- استخدام HTML <a> عنصر لتحديد وجود صلة
- استخدام HTML href السمة لتحديد عنوان الرابط
- استخدام HTML target السمة لتحديد أين فتح المستند المرتبط
- استخدام HTML <img> عنصر (inside <a> ) لاستخدام صورة كرابط
- استخدام HTML id السمة ( id=" value ") لتحديد العناوين في الصفحة
- استخدام HTML href السمة ( href="# value ") لربط المرجعية
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 »
HTML ارتباط الكلمات
| بطاقة | وصف |
|---|---|
| <a> | يعرف ارتباط تشعبي |