كود التنقل بين الصفحات HTML | دروس HTML5

 

الروابط في HTML


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


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

الروابط في HTML تسمى الارتباطات التشعبية.

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

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

صياغة الروابط في HTML 

في HTML ، يتم تحديد الروابط بواسطة علامة <a>

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

رابط لعرض دروس HTML الخاصة بموق Arabicness: 

<a href="http://www.arabicness.com/content/p1">Visit our HTML tutorial</a>

تحدد سمة href عنوان الوجهة (http://www.arabicness.com/content/p1) للارتباط.

يظهر نص الرابط في المتصفح (قم بزيارة برنامج HTML التعليمي).

سيؤدي النقر فوق الارتباط إلى نقلك إلى عنوان الوجهة.

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

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

يتم تحديد الارتباط المحلي (الرابط الذي يكون عنوانه المقصود هو نفس موقع الويب) باستخدام عنوان URL نسبي:

<a href="/content/p1">Visit our HTML tutorial</a>

سيكون للكود أعلاه نفس نتيجة المثال السابق.


ألوان وصلة HTML

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

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

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

<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

تحدد الخاصية الهدف مكان فتح الصفحة.

يمكن أن تحتوي الخاصية الهدف على القيم التالية:

_blank: يفتح صفحة الوجهة في نافذة أو علامة تبويب جديدة في المتصفح
_self: يفتح صفحة الوجهة في نفس النافذة أو علامة التبويب حيث تم النقر فوق الارتباط (هذه هي القيمة الافتراضية للروابط)
_parent: يفتح صفحة الوجهة في الإطار الأصل
_top: يفتح صفحة الوجهة في كامل نص النافذة في المتصفح.    
Framename: يفتح صفحة الوجهة في إطار معين

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

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

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

<a href="www.arabicness.com/content/p1" target="_top" >Visit our HTML tutorial</a>

إضافة رابط على الصورة HTML

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

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

إنشاء إشارة مرجعية بتنسيق HTML 

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

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

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

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

مثال 

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

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

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

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

 أو إذا لم يكن الرابط الخاص بنا على نفس الصفحة المرجعية ، فسنقوم بذلك من خلال البنية التالية:

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

طرق خارجية 

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

يظهر استخدام العنوان المطلق في المثال أدناه.

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

يرتبط المثال التالي بصفحة في مجلد html لموقع الويب الحالي.

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

في المثال أدناه، الارتباط بصفحة في نفس المجلد مثل الصفحة الحالية.

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


كلمات مفتاحية: