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

       مرحبا بكم من جديد مع دروس 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  بمسافات أو أحرف خاصة ، استخدم الأحرف والأرقام فقط قدر الإمكان حتى يتم التعرف على القيمة من قبل جميع المتصفحات.

مازال في الدرس بقية 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

تلخيص مختصر

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

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

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

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

<a href="page2.html">.

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

<a href="#ancre">.

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

العودة

لا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء.

jabism

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

0 تعليق

اترك تعليقاً

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

عدد المشاهدات لهذه المقالة : 313