إنشاء الروابط ب HTML

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

إقرأ أيضـاً: « كيفية إدراج الروابط في مقالات وصفحات ووردبريس »

 ≡ روابط مساعدة:  

• إكتشف كيف تعمل مواقع الويب
• تعلم كيف تنشئ موقعك بلغة HTML
• إنشاء أول صفحة الويب بلغة
• تنظيم و ترتيب النص ب HTML 1
• محرر نصوص وأكواد لبرمجة المواقع
• محرر نصوص وأكواد البرمجة Sublime text

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

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

ولكننا مازلنا نعاني من أمور كثيرة  لم نتعلمها  كي  نبني موقعاً  مميزاً 💡  حسناً ،في جميع الحالات كانت صفحتنا   ب HTML  صفحة غير عادية لأنها أصبحت مقروؤة  على الويب.

ولكن السؤال الذي ظل لحد الآن  محيّراً لدى الكثيرين، هو : كيف نذهب من صفحة إلى أخرى، علماً  أن موقع الويب يتكون من عدة صفحات؟  💡 

إذن، الحـل هو الذي سنتناوله اليوم في الدرس الخـاص بالرّوابط  ! سنتعلم خلالها كيفية إنشاء الروابط ب HTML. بين صفحاتنا حتى يصبح موقعنا متنوعاً في صفحاته و مواضعه.

يمكننا إنشاء رابط من  صفحة إلى أخرى :مثال  من page1.html إلى page2.html ، وكذلك  يمكننا الانتقال  إلى موقع  آخر خارج موقعنا ، مثال:  https://www.facebook.com/Jabism.do.  و بالنسبة لكلا الحالتين نستعمل نفس الطريقة، سنــــرى  😯 

رابط الانتقال إلى موقع آخر

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

سأقترح عليكم كتابة شفرة  الرابط الذي يؤدي إلى  موقع jabism.com ، كما هو الحال في الشكل التالي:

رابط  ل jabism.com

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

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

نبدأ بالرابط الذي سيقودنا لزيارة  موقع https://jabism.com

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

هذا رابط موقعي ، أما إذا  كنت تريد الارتباط بموقع آخر خارجي ، فما عليك سوى نسخ عنوانه (يعني URL) الذي يبتدئ ب   http:// . 

إنشاء الروابط ب HTML بين الصفحات من نفس الموقع

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

طيِّب! ، في الوقت الحالي ، قُـمْ بإنشاء موقعك على جهاز الكمبيوتر الخاص بك، وستكون  أنت الشخص الوحيد الذي يمكنه رؤيته  وليس لديه “عنوان ويب الذي يبتدئ  ب http: //  مثل معظم المواقع ، و هذا لن يمنعنا من الاستمرار في إنشاء موقع حتى نراه جاهزاً ثم ننقله إلى الويب  بإذن الله .

إنشاء صفحتان في نفس المجلد

أظن أنكم استطعتم  لحد الآن من إنشاء صفحة الويب بامتداد HTML

في البداية سننشئ ملفين بامتداد HTML بإسمين مختلفتين.على سبيل المثال:  page1.html  و  page2.html. و نضعهما في نفس المجلد الذي سنسمه مثلاً  monsite

هنا نضع ملفاتنا التي سنشتغل عليها ، و هذا المجلد سيكون بمتابة موقع

الآن وصلنا إلى مرحلة إنشاء الربط بين الصفحات ، كيف يتم ذلك ؟

عندما لا يكون لنا عنوان في http: //   فإننا نربط فقط بين ملفين . ما داما في مجلد واحد   ، فالأمر سهل جداً  فقط  تذكر أننا نستعمل <a> و href  . على سبيل المثال، نفتح الملف page1.html  ونكتب بداخله ( المكان الذي نريده أن يكو ن رابطاً للصفحة الثانية )  ما يلي:    <a href="page2.html">.

إذن سنستخدم في شفرة الروابط  إما  page1.html  للوصول إليها   أو page2.html للوصول اليها أيضاً.

طريقة  كتابة الروابط  لصفحات في نفس المجلد:

عند التطبيق ستلاحظ أن الذي يظهر في صفحتك هو :

في page1    أهلاً و مرحبا بك  في صفحتي   الثــانية 

في page 2    أرجو العودة  لصفحتي   الأولــى 

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

تصبح الأمور صعبة بعض الشيء إذا كانت الصفحات في مجلدات مختلفة. من الناحية المثالية ، لا ينبغي أن تكون متباعدة للغاية (في مجلد فرعي على سبيل المثال).

تخيل أن الصفحة page2.html موجودة في مجلد  فرعي ، كما في الشكل التالي، كيف سيكتب الرابط، شاهد الصورة أولاً:

ملف page2.html موجود بداخل مجلد jabism

هنا وضعنا الملف  page2.html  بداخل المجلد الذي أسميناه  مثلاً  jabism ( ويمكنك تسميته بما تشاء)

في هذه الحالة ، يجب كتابة الرابط على النحو التالي:

أما إذا كان هناك عدة مجلدات فرعية ، مثلا ً داخل مجلد jabism  يوجد مجلد  prog وداخله يوجد ملف page2.html فسنكتب هذا:

و لكن ماذا لو أن الملف غير موجود في  مجلد فرعي  و نريد أن نكتب الرابط بشكل عكسي  للوصول إلى   مجلد “الأصل”؟

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

الملخص في وثيقة مصورة

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

و يلخص الشكل التالي الروابط  ذات صلة  المختلفة و طريقة الوصول إليها :

مختلف الروابط  – الذهاب  للملفات في المجلد الأصلي و الفرعي

رابط  لعناوين داخل نفس الصفحة (روابط الارتساء )

هذا النوع من الروابط  يُمَكِّـنُـك  من الانتقال إلى الفقرات داخل نفس  صفحة  HTML قد تستعملها إذا كان محتوى الصفحة طويلاً  جداً .

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

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

استخدم الوسم id   لتسمية نقطة الارتساء  داخل الصفحة . هذا سيساعدنا على ربط  نقطة الارتساء  مثلا :

ثم ،نقوم  بإنشاء رابط كالمعتاد ، ولكن هذه المرة العلامة href  ستتضمن  العلامة  (#) متبوعة  باسم نقطة الارتساء التي اخترناها آنفاً، على سبيل المثال:

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

في ما يلي مثال على صفحة تحتوي على نصوص كثيرة وتستخدم  نقاط الارتساء  (ضع أي شيء في النص ليكون طويلاً):

مازال في درس إنشاء الروابط ب HTML بقية تابع…

روابط نحو نقط الإرتساء في صفحات أخرى

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

من الناحية العملية ، من السهل القيام بذلك:  فقط أكتب اسم الصفحة ، متبوعًا بعلامة  الدييز (#) ، متبوعةً  باسم  نقطة الارتساء.

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

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

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

إقرأ أيضاً:

• أضف روابط الإرتساء في مقالات ووردبريس يدوياً
• كيفية إضافة العناوين تلقائياً كروابط الإرساء في الوردبريس

بعض الاستخدامات  العملية للروابط:

سأحاول أن أبَـيِّـن هنا بعض الحالات العملية لاستخدام الروابط. على سبيل المثال :

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

في الواقع لا أعلم !  حسناً ، دعونا نرى كل هذا هنا، فقط يلزمك شيئاً من التركيز و كل شيئ سيصبح مألوفاً 💡 

رابط يعرض تلميحاً مكتوباً عند تمرير مؤشر الماوس عليه

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

و النتيجة ستكون مشابهة لهذا الشكل:

تلميـح ( موقع جابيسم يرحب بكم )

قد يكون  هذا التلميج  مساعداً مفيداً لإبلاغ الزائر بمحتوى الرابط  حتى قبل النقر عليه.

و هنا سنعيد كتابتها بطريقة  أكثر وضوحاً:

رابط يفتح نافذة جديدة

أحياناً يكون عليك إلزام الزائر بفتح الرابط  في نافذة جديدة. و للقيام بذلك ، نضيف target="_blank"  إلى العلامة  <a>.

مع ذلك  لاحظ أنه من غير المستحسن إساءة استخدام هذه التقنية لأنها تعطل الإبحار على الموقع . يمكن للزائر نفسه أن يقرر ما إذا كان يريد فتح الرابط في نافذة جديدة. سيتم ذلك ب Shift + النقر على الرابط لفتح نافذة جديدة  أو Ctrl + النقر لفتحه داخل  تبويب جديدة.

رابط لإرسال بريد إلكتروني

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

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

إقرأ أيضاً: إنشاء الروابط الخاصة في الووردبريس

رابط لتنزيل  البرامج أو الملفات المضغوطة

هنـاك الكثير منكم يتساءل كيف يتم تحميل ملف مضغوط من النت … في الحقيقة ، ليس هناك جديد يدعو للاستغراب، فقط  يجب  تحديد اسم الملف المراد تحميله مثلاً Notepad.zip

والطريقة بسيطة ،  ضع هذا الملف في نفس مجلد  الموقع  أو في مجلد  فرعي ثم اكتب الرابط بهذا الشكل:

و هكذا سيتم التحميل ➡ 

تلخيص مختصر لكيفية إنشاء الروابط ب HTML

 – تسمح لك الروابط بتغيير الصفحات ويتم كتابتها بشكل افتراضي باللون الأزرق وتحته خط.

 – لإدراج رابط ، استخدم العلامة <a> مع href  للإشارة إلى عنوان الصفحة الهدف. مثال:

<a href="https://jabism.com">.

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

<a href="page2.html">.

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

<a href="#ancre">.

إلى هنا نكون قد  أنهينا درس إنشاء الروابط ب HTML .. و إلى اللقاء في درس قادم بإذن الله

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

دروة تدريبية في لغة HTML5 و CSS3 دروس HTML5 الحدود الدائرية border-radius في CSS تنسيق النصوص ب CSS إضافة اللَّون في CSS إنشاء قوائم نقطية ومرقمة بألوان مختلفة في الووردبريس إنشاء خط فاصل أفقي hr