الروابط هي سمة مميزة للويب وستجدها في كل مكان.

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

ستجد العديد من أنواع الروابط على الويب.

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

تتناول هذه المقالة تعريف الارتباط التشعبي وكيفية إنشاء مجموعة متنوعة من الروابط المختلفة في HTML.

ما هو الارتباط التشعبي؟

الارتباط التشعبي، الذي (يسمى أيضًا ارتباط أو ارتباط الويب)، يحتوي على عنوان لوجهة ويعمل كمرجع للبيانات. يمكن للمستخدم متابعة الوجهة والانتقال إليها وتوجيهها بسهولة إما بالنقر فوق الارتباط أو النقر فوقه أو التمرير فوقه.

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

في الأساس، الارتباطات التشعبية هي مؤشرات قابلة للنقر على أحد الموارد.

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

كل نتيجة بحث في جوجل عبارة عن ارتباط تشعبي. عند النقر فوق أحدها، فإنك تترك صفحة البحث وتنتقل إلى النتيجة.

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

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

الارتباط التشعبي هو عنصر في مستند HTML.

النص التشعبي هو نص به ارتباطات تشعبية. يُطلق على النص المرتبط (الإشارة إلى البيانات) اسم نص الرابط.

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

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

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

نشأت الفكرة في البداية من المراجع العلمية والحواشي في الوثائق العلمية، ولكن هذا أدى إلى قابلية اكتشاف مواقع الويب الخاصة بالأشخاص الآخرين مع مرور الوقت.

يمكن للمستخدمين النقر بين صفحات ليس فقط موقع الويب الخاص بمؤلف واحد، ولكن من خلال مواقع الويب الخاصة بالمؤلفين الآخرين والانتقال من صفحة ويب إلى أخرى. يمكن لأي شيء أن يرتبط بأي شيء آخر، مما يجعل التنقل إلى أماكن مختلفة على الويب أمرًا سهلاً. وقد أتاح هذا للمستخدمين وصولاً أوسع إلى المعلومات.

تتكون شبكة الويب العالمية من تريليونات من الارتباطات التشعبية التي تربط تريليونات من صفحات الويب ببعضها البعض، مما يخلق شيئًا يمكن أن يشبه شبكة العنكبوت الكبيرة جدًا.

كيفية إنشاء ارتباط HTML

يمكنك إنشاء روابط باستخدام <a> العنصر المضمن، حيث يرمز الحرف “a” إلى علامة الارتساء.

فيما يلي مثال على علامة ارتباط HTML:

<a href="https://www.doctormega.com/">الصفحة الرئيسية</a>

دعنا نقسمها:

• يحتوي عنصر الارتباط على علامة فتح <a> وإغلاق </a>.
• النص الذي يراه المستخدمون ويمكنهم النقر عليه هو بين علامتي الفتح والإغلاق <a> في هذه الحالة الصفحة الرئيسية لدكتورميجا. يطلق عليه نص الارتباط ويجب أن يكون وصفيًا للمكان الذي ينتقل إليه الارتباط.
• في علامة الفتح، <a>، تمت إضافة سمة href، وهي اختصار لـ Hypertext Reference. تحدد قيمة السمة herf عنوان URL المطلوب الذي تريد أن يأخذ الارتباط المستخدمين إليه عند النقر فوق نص الارتباط.
• لا تنس علامة يساوي = وعلامات الاقتباس "" التي تتوافق مع سمة href.

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

بشكل افتراضي، سيكون للنص لون أزرق مع تسطير. ومع ذلك، يمكنك تغيير ذلك عن طريق إضافة أشكال CSS المختلفة.

على جهاز الكمبيوتر، عندما تقوم بالتمرير فوق ارتباط، يتغير المؤشر من سهم إلى يد للإشارة إلى أن شيئًا ما يمكن النقر عليه.

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

في هذه الحالة، تكون قيمة href عبارة عن عنوان URL مطلق – وهو عنوان ويب كامل للموقع مع اسم النطاق الخاص به.

كيفية الارتباط بصفحة مختلفة داخل الموقع

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

في مثل هذه الحالات، يكون لسمة href عنوان URL نسبي.

على سبيل المثال:

<nav>
    <ul>
        <li><a href="home.html">الصفحة الرئيسية</a></li>
        <li><a href="articles.html">المقالات</a></li>
        <li><a href="about-us.html">من نحن</a></li>
        <li><a href="contact.html">اتصل بنا</a></li>
    </ul>
</nav>

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

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

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

كيفية إنشاء ارتباط إلى قسم معين من الموقع

ماذا عن الوقت الذي نريد فيه رابطًا للانتقال إلى جزء معين من الصفحة؟

ربما ذكرت موضوعًا وتريد إحالة القراء إلى قسم لاحقًا في الصفحة حيث تتحدث عنه بمزيد من التفصيل.

يمكننا إنشاء روابط تربط المحتوى على نفس الصفحة.

أولاً ، انتقل إلى القسم الذي تريد أن ينتقل إليه الرابط ، وفي العلامة الافتتاحية أضف سمة id.

على سبيل المثال ، ربما لدينا فقرة نريد الإشارة إليها:

<p id="read-more">أفضل المدن التي يمكن زيارتها</p>

ثم في الرابط الخاص بك ، قم بإلحاق # والقيمة التي أعطيتها لسمة id ، في هذه الحالة read-more:

<a href="#read-more">اقرأ المزيد من المعلومات حول المدن التي يمكنك زيارتها هنا</a>

كيفية فتح رابط في علامة تبويب جديدة

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

بشكل افتراضي، يفتح المتصفح الروابط في نفس علامة التبويب.

يمكننا تغيير هذا الرابط:

<a href="https://www.doctormega.com/blog">الصفحة الرئيسية لمدونة دكتورميجا</a>

إلى هذا:

<a href="https://www.doctormega.com/blog" target="_blank">الصفحة الرئيسية لمدونة دكتورميجا</a>

يمكنك إضافة السمة target إلى علامة الفتح <a> وإعطائها القيمة _blank التي تفتح الروابط في علامة تبويب جديدة.

كيفية إنشاء روابط بريد إلكتروني

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

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

<a href="mailto:[email protected]">راسلني!</a>

هذه المرة تبدأ سمة href بـ mailto: ثم عنوان البريد الإلكتروني الذي تريد إرسال رسالة إليه.

لا يبدو الرابط افتراضيًا مختلفًا عن الروابط الأخرى التي تحدثنا عنها هنا. ولكن عند النقر عليه، يبدأ تلقائيًا في إنشاء بريد إلكتروني جديد باستخدام عميل البريد الإلكتروني الافتراضي للمستخدم.

عندما يحدث ذلك، يتم بالفعل ملء حقل “to” بعنوان البريد الإلكتروني الخاص بالمكان الذي تريد إرساله إليه.

خاتمة

في هذه المقالة، راجعنا تعريف الارتباط التشعبي وسبب كونه جزءًا مهمًا من الويب.

تعلمنا أيضًا كيفية إنشاء أنواع مختلفة من الروابط في HTML.

نأمل أن تكون قد أحببت المقال. إذا كنت تريد مزيدًا من التفاصيل حول HTML، فإننا نوصي بمراجعة مقالتنا التالية ما يجب على كل مبتدئ معرفته عن HTML: كيفية جعل HTML خطوة بخطوة