HTML الروابط

الروابط في جميع صفحات الويب تقريبًا. تتيح الروابط للمستخدمين النقر من صفحة إلى أخرى.

روابط HTML – الارتباطات التشعبية

روابط HTML هي روابط تشعبية.

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

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

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

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

يتم تعريف الارتباطات التشعبية <a>بعلامة HTML :

<a href="url">link text</a>

<a href="https://www.pltformspot.com/html/">زيارة موقعنا</a>

و hrefتحدد عنوان الوجهة ( https://pltformspot.com ) من الارتباط.

و ربط النص هو الجزء المرئي (زيارة موقعنا).

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

الروابط المحلية

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

يتم تحديد رابط محلي (رابط لنفس موقع الويب) بعنوان URL نسبي (بدون https: // www ….).

<a href="html_images.asp">HTML Images</a>

ألوان وصلة HTML

بشكل افتراضي ، سيظهر الرابط في جميع المتصفحات بالشكل التالي :

• سيكون باللون الازرق
• عند الإشارة علية سوف يكون تحتة خط و يتحول للون البنفسجي
• ادا تمت زيارتة سوف يكون لونة احمر

يمكنك تغيير الألوان الافتراضية ، باستخدام CSS:

<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>

غالبًا ما يتم تصميم الارتباطات كأزرار ، باستخدام CSS:

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

روابط HTML – السمة الهدف

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

يمكن أن يكون واحد من القيم التالية:

• _blank – يفتح المستند المرتبط في نافذة أو علامة تبويب جديدة
• _self – يفتح المستند المرتبط في نفس النافذة / علامة التبويب عند النقر فوقه (هذا افتراضي)
• _parent – يفتح المستند المرتبط في إطار
• _top – يفتح المستند المرتبط في النص الكامل للنافذة
• framename – يفتح المستند المرتبط في إطار مسمى

سيفتح هذا المثال المستند المرتبط في نافذة / علامة تبويب متصفح جديدة:

<a href="https://www.pltformspot.com/" target="_blank">Visit pltformspot!</a>

نصيحة: إذا كانت صفحة الويب الخاصة بك مقفلة في إطار ، فيمكنك استخدام target="_top"للخروج من الإطار:

<a href="https://www.pltformspot.com/html/" target="_top">HTML5 tutorial!</a>

روابط HTML – صورة كرابط

من الشائع استخدام الصور كروابط:

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

ملاحظة: border:0; تتم إضافة لمنع IE9 (والإصدارات السابقة) من عرض حد حول الصورة (عندما تكون الصورة رابط).

ربط العناوين

titleتحدد معلومات إضافية حول عنصر. يتم عرض المعلومات غالبًا كنص تلميح للأدوات عندما يتحرك الماوس فوق العنصر.

<a href="https://www.pltformspot.com/html/" title="Go to pltformspot HTML section">Visit our HTML Tutorial</a>

روابط HTML – إنشاء إشارة مرجعية

يتم استخدام إشارات HTML المرجعية للسماح للقراء بالانتقال إلى أجزاء محددة من صفحة الويب.

يمكن أن تكون الإشارات المرجعية مفيدة إذا كانت صفحة الويب طويلة جدًا.

لإنشاء إشارة مرجعية ، يجب أولاً إنشاء الإشارة المرجعية ، ثم إضافة رابط إليها.

عند النقر على الرابط ، ستنتقل الصفحة إلى الموقع مع الإشارة المرجعية.

أولاً ، قم بإنشاء إشارة مرجعية باستخدام id:

<h2 id="C4">Chapter 4</h2>

ثم ، أضف رابطًا إلى الإشارة المرجعية (“الانتقال إلى الفصل 4”) ، من داخل نفس الصفحة:

<a href="#C4">Jump to Chapter 4</a>

أو أضف رابطًا إلى الإشارة المرجعية (“الانتقال إلى الفصل 4”) ، من صفحة أخرى:

<a href="html_demo.html#C4">Jump to Chapter 4</a>

المسارات الخارجية

يمكن الرجوع إلى الصفحات الخارجية بعنوان URL كامل أو بمسار متعلق بصفحة الويب الحالية.

يستخدم هذا المثال عنوان URL كاملاً للربط بصفحة الويب:

<a href="https://www.platformspot.com/html/default.asp">HTML tutorial</a>

يرتبط هذا المثال بصفحة موجودة في مجلد html على موقع الويب الحالي:

<a href="/html/default.asp">HTML tutorial</a>

يرتبط هذا المثال بصفحة موجودة في نفس المجلد مثل الصفحة الحالية:

<a href="default.asp">HTML tutorial</a>

ملخص الفصل

• استخدم <a> لتعريف الارتباط
• استخدم href لتعريف عنوان الرابط
• استخدم target لتحديد مكان فتح المستند المرتبط
• استخدم <img> (داخل <a>) لاستخدام صورة كارتباط
• استخدم id (id = ” value “) لتحديد الإشارات المرجعية في الصفحة
• استخدم href (href = “# value “) للارتباط بالإشارة المرجعية

HTML وصلة العلامات