Pages: 1 2

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

نشرت من قبل jabism في

السلام عليكم و رحمة الله

       مرحبا بكم من جديد مع دروس HTML

دروس html

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

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

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

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

ما هو الرابط
ما هو الرابط إذن ؟   إنه كلمة، جُملةٌ أونص يمكنك النقـر عليه للانتقال إلى صفحة أخرى، داخلية أو خارجية.

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

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

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

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

مؤشر الروابط

رابط  ل jabism.com

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

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

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

 

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

 

 

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

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

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

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

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

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

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

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

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

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

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

عندما لا يكون لنا عنوان في 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  ستتضمن  العلامة  (#) متبوعة  باسم نقطة الارتساء التي اخترناها آنفاً، على سبيل المثال:

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

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

 

 

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

فضلا تابع الدرس 


jabism

عبدالرحيم ح.س من شمال المغرب . تقني "الهندسة المدنية" ، مارست البرمجة منذ 2001، خبرتي مع الويب والإعلاميات : تمتد من سنة 2000 ، خبرة مهمة في الفلاش والفوتوشوب ومشاكل الويندوز .

0 تعليق

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *