إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

لغة html/css - إنشاء الروابط

8 تعليقات

في الفصل السابق ، تعلمتَ كيف تُنشأ صفحة HTML بسيطة . حسنا ، إنها ليست بتلك الروعة التي توقعتَها لكنها مع ذلك تبقي صفحة HTML .
كما تعلم ، تتكون المواقع من عدة صفحات الويب . كيف يتم الإنتقال من صفحة إلى أخرى ؟ بمساعدة رابط موجه ! في هذا المقال نحن بصدد تعلم طريقة إنشاء الروابط بين صفحاتنا .
أنا أفترض أنك تعرف ما هو الرابط : إنه نص حيث يمكننا النقر عليه للإنتقال إلى صفحة ويب أخرى .
يمكننا إنشاء رابط في الصفحة a.html للإنتقال إلى الصفحة b.html ، كما يمكن إنشاء روابط توجه إلى مواقع أخرى ( كـGoogle أو Facebook ) . ففي كلتا الحالتين تعمل الروابط بنفس الطريقة .

الفهرس
  1. رابط نحو موقع اخر .
  2. رابط نحو صفحة أخرى في نفس الموقع .
  3. رابط نحو جزء من نفس الصفحة .

رابط نحو موقع اخر

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

مرحبا أدعوك لزيارة مدونة عاشق النت ، إنها مدونة جميلة

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

<a href="http://3asq.blogspot.com">مدونة عاشق النت</a>

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

<p>مرحبا أدعوك لزيارة <a href="http://3asq.blogspot.com">مدونة عاشق النت<a> ، إنها مدونة جميلة</p>

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

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

مرحبا أدعوك لزيارة مدونة عاشق النت ، إنها مدونة جميلة

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

هذا النوع من الروابط الذي تعرفنا عليه يسمى الروابط المطلقة ( Lien absolut ) ، لأنك تضع في سمة href العنوان كاملا ، هناك نوع اخر من الروابط و التي سنتعرف عليها بعد قليل .

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

لقد تعرفنا الان كيف نُنشأ الروابط نحو مواقع أخرى ، لكنني متأكد أنك ستحب أن تضع الروابط بين صفحات الويب التي قد أنشأتها .

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

صفحتان في نفس المجلد 
قبل البدأ سأطلب منك أن تنشأ صفحتان HTML في نفس المجلد ، و لتضع مثلا إسم الصفحة الأولى هو page1.html و الثانية page2.html و ليكن إسم المجلد هو test .


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

هذا هو الكود الذي سنستعمله في الصفحتين page1 و page2

Page1
<p>مرحبا ، يمكنك زيارة الصفحة <a href="page2.html">page2</a> </p>

Page2
<p> مرحبا بك في الصفحة page2 </p>
<p>يمكنك الان العودة إلى <a href="page1.html">page1</a></p>

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

الصفحة page2 داخل المجلد contenu
في هذه الحالة ستكتب في الصفحة page1 .

<a href="contenu/page2.html">الصفحة page2</a>

و إذا كانت الصفحة page2 موجودة في مجلد اخر sou-contenu فيجب أن تكتب :

<a href="contenu/sou-contenu/page2.html">الصفحة page2</a>

هذا بالنسبة للإنتقال من صفحة في مجلد إلى صفحة أخرى توجد في مجلد فرعي .
لكن بالنسبة للإنتقال من صفحة في مجلد فرعي إلى صفحة في مجلد قبله .
مثلا رابط يمكننا من الإنتقال من الصفحة page2 الموجودة في contenu إلى الصفحة page1 . هذا يتطلب الرجوع إلى الوراء بمجلد واحد لكي نستطيع التوجيه إلى page1 و هذا يتم بإضافة ' /.. ' عند كل رجوع .
ففي الصفحة page2 نكتب .

<a href="../page1.html">الصفحة page1</a>

ملخص

رابط نحو جزء من نفس الصفحة

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

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

<h2 id="paragraph1">الفقرة الأولى</h2>

كما ترى لقد عرفنا العنصر <h2> بسمة id قيمتها paragraph1 ، أما بالنسبة للرابط الذي سيوجه لهذا العنصر فسنكتبُ في السمة src القيمة التي وضعناها في السمة id السابقة مسبوقة بالعلامة ' # ' مثال :

<a href="#paragraph1">رابط نحو الفقرة الأولى</a>

id هي إختصار لـ identification و يتجلى دور هذه السمة في تعريف العناصر فقط و هي تستعمل كثيرا في تحديد خصائص CSS للعناصر .
قد تجد في بعض الدروس أنه يُقال : العنصر ذي التعريف "id="identificationX . فهذا يعني العنصر الذي يحتوي على السمة id التي تأخذ القيمة identificationX  ، و سأستعمِل هذا الإختصار في القول في باقي الدروس لذلك حاول أن تتأقلم معه .
هذه السمة لا تأخذ أي قيمة كيفما كانت بل تشترط دائما أن تبتدأ القيمة بحرف و ليس برقم ، كما أن الحروف الكبيرة تخالف الحروف الصغيرة لذلك لا تنسى أن تأخذ هذا بعين الإعتبار .

يمكن إستعمال هذا النوع من الروابط بين الصفحات أيضا ، حيث يمكن إنشاء رابط في صفحة page1 يوجه نحو العنصر ذي التعريف "id="paragraph1 الموجود في الصفحة page2 . و ذلك كالتالي :

<a href="page2.html#paragraph1">الفقرة الأولى في الصفحة page2</a>

ترقب الفصل القادم
مساحة إعلانية

تعليقات بلوجر

  1. تدوينة مفيدة، وصلت الفكرة بفضل طريقة العرض الرائعة :)

    ردحذف
  2. رائع جداً , و لكن أتمنى منك في المرة القدمة وضع شرح عن كيفية عمل رابط لجزء من الصفحة و النقل إليه بطريقه أكثر إنسيابية أي بإستعمال بعض أكواد الـajax أو الـjava لتضيف طابع تفاعلي و إحترافي أكثر للموقع

    ردحذف
    الردود
    1. إن شاء الله أخي ستكون في تدوينة منفردة

      حذف
  3. شكرا على الموضوع
    لاكن اريد منك استشاره ياخى ماريئيك فى هذه المدونه واريد قالب لها
    لانى قد يئست
    http://amr-poma.blogspot.com
    هل من نصيحه
    شكرا

    ردحذف
  4. أزال المؤلف هذا التعليق.

    ردحذف
  5. هل من الممكن الحصول على كود هتمل يحول اتوماتيكيا من صفحة الى أخرى
    وهل من الممكن جعل هذا الكود يتحول كل فتره معينه مثلا
    http://www.du7a.com

    ردحذف
  6. السلام عليكم
    مدونة رائعة أخي الكريم أتمنى لك النجاح في مسعاك

    ردحذف
  7. السلام عليكم أخي أريد معرفة سبب استخدام حرفa لإنشاء الرابط وليس حرف آخر ومن أين أتت حروف كلمة href المستخدمة في السمة

    ردحذف

لإدخال الأكواد بالتعليقات عليك تحويلها بـأداة ترميز أحرف HTML الخاصة