كيفية عمل ارتباطات HTML تشعبية باستخدام سمة HREF على العلامات

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

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

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

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

ما هو الارتباط؟

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

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

و aالعلامة تساعدنا إنشاء ثلاثة أنواع رئيسية من الروابط التالية: طريق وصلة داخلية، ارتباط خارجي، وصلة الربط. ومع ذلك ، يمكننا الآن الغوص في كيفية إنشاء ارتباط داخلي في القسم التالي.

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

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

الآن ، بالنظر إلى أن المجلد الخاص بنا منظم على النحو التالي:

├── folder1 | └── page2.html ├── page1.html ├── index.html 

لدينا هنا ثلاث حالات استخدام ، وسنقوم بإنشاء مثال لكل منها.

تصفح إلى الصفحات على نفس المستوى

  • index.html
Browse to Page 1 

كما ترى ، فإن الصفحة page1.htmlعلى نفس المستوى ، وبالتالي فإن مسار hrefالسمة هو مجرد اسم الصفحة.

استعرض للوصول إلى الصفحات الموجودة في مجلد آخر

  • page1.html
Browse to Page 2 

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

عظيم! دعنا الآن نتعمق في حالة الاستخدام الأخيرة.

تصفح من صفحة موجودة في مجلد إلى الجذر

  • page2.html
Browse to the Home Page 

الآن ، هنا للانتقال إلى index.htmlالصفحة ، يجب أن ننتقل أولاً إلى مستوى أعلى قبل التمكن من التصفح إلى تلك الصفحة.

لقد قمنا الآن بتغطية الروابط الداخلية ، لذا دعنا ننتقل ونقدم كيفية التنقل إلى الروابط الخارجية.

كيفية إنشاء روابط خارجية

من المفيد دائمًا أن يكون لديك القدرة على التنقل إلى مواقع الويب الخارجية أيضًا.

Browse to Google 

كما ترى هنا ، للانتقال إلى Google ، يتعين علينا تحديد عنوان URL الخاص به إلى hrefالسمة.

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

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

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

انتقل في نفس الصفحة

Go to the anchor 

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

هنا ، بدلاً من ارتباط الصفحة ، لدينا مرجع لعنصر. عندما نضغط على الرابط ، سيبحث عن عنصر بنفس الاسم بدون علامة التصنيف ( about). إذا وجدت هذا المعرف ، فإنه يتصفح إلى هذا الجزء.

انتقل إلى صفحة أخرى

Go to the anchor 

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

استنتاج

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

شكرا للقراءة.

لا تتردد في التواصل معي!

النشرة الإخبارية لمدونة تويتر GITHUB LINKEDIN DEV

الصورة بواسطة JJ Ying على Unsplash