تعلم html: الروابط

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

الدرس السابق: تعلم HTML5 و CSS3: أساسيات
الدرس التالي: تعلم لغة HTML: إدراج الصور

الروابط

ولإضافة رابط  على موقعك فإننا نستعمل الوسم التالي: <a> مع إضافة كلمة href وأمامها نكتب عنوان الصفحة التي يوجه إليها الرابط وإليكم الكود التالي كمثال لتجربته:

<a href="www.al-bassit.blogspot.com">مدونة البسيط</a>

ويمكنكم وضع الروابط في أي مكان تشاؤن في صفحتكم سواء في القوائم أو وسط الفقرات إلى غير دلك.

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

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

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

<p>أدعوكم لزيارة <a href="page_2.html">الصفحة2</a></p>

وفي الصفحة التانية نكتب العبارة التالية: مرحبا بكم في الصفحة2 وإليكم كذالك كودها المصدري:

<p>مرحبا بكم في الصفحة2</p>

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

في هذه الصورة مثلا الصفحة2 موجودة في الملف dossier لذلك فالرابط الدي سيوجهنا إلى هذه الصفحة سنكتبه كما يلي:

<a href="dossier/page_2.html">

وإذا كان هناك أكثر من ملف فإننا نضيف أسماءهم أما إذا كانت الصفحة موجودة في ملف أخر خارج الملف الذي توجد فيه الصفحة1 فإننا نكتب الرابط كما يلي:

<a href="../page_2.html">

روابط خاصة

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

<h2 id="exemplelink">عنوان الفقرة</h2>

الأن ولإنشاء هذا الرابط يجب أن نضع الإسم exemplelink وهوالإسم الذي اخترناه للمكان السابق في هذا الرابطك:

<a href="#exemplelink">هنا إسم الرابط</a>

وتأكدو أن هذه الروابط لا تعمل إلا إذا كانت الصفحة طويلة بما يكفي لظهور أشرطة التمرير ولذلك يجب ملء الصفحة بالمحتوى أو تصغير نافدة المتصفح وإليكم المثال التالي لتقومو بتجربته:

<p>

بهذه الروابط تستطيع الذهاب إلى أي عنوان مباشرة:<br/>

<a href="#titre1">العنوان الأول</a><br/>

<a href="#titre2">العنوان الثاني</a><br/>

<a href="#titre3">العنوان الثالث</a><br/>

<a href="#titre4">العنوان الرابع</a><br/>

</p>

<h2 id="titre1">العنوان الأول</h2>

<p> هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة </p>

<h2 id="titre2">العنوان الثاني</h2>

<p>هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة</p>

<h2 id="titre3">العنوان الثالث</h2>

<p> هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة </p>

<h2 id="titre4">العنوان الرابع</h2>

<p> هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة هذه هي الفقرة الأولى ويجب ملءها بالكثير من الكتابة لكي تكون الصفحة طويلة لدا سنكرر هذه الجملة</p>

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

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

<a href="page.html#titre4">

وهذا الرابط سوف يوجهكم إلى الصفحة المسماة page.html وبالتحديد إلى الموقع المسمى titre4.

استعمالات أخرى للروابط

هناك إستعمالات أخرى متعددة للروابط وهي ماسندكره هنا 

لا بد أنكم سبق ورأيتم روابط تظهر كتابة ما عند وضع مؤشر الفأرة عليها وعادة ما تكون هذه الكتابة تدل على محتوى الرابط مثلا ولإنشاء مثل هذه الروابط نستعمل الكود التالي:

<p>هذا رابط <a href="www.al-bassit.blogspot.com" title="هذا موقع لتعلم الإعلاميات بسهولة">مدونة البسيط</a></p>

جربو هذا الرابط لترو أن الجملة التي كتبناها أمام الكلمة title= هي التي تظهر عند وضع مؤشر الفأرة على الرابط.

والأن نمر إلى نوع أخر من الروابط وهو الرابط الذي يفتح نافدة أخرى ولإنشاء هذا الرابط نضيف مايلي :target="_blank" إلى الوسم <a> ويكون الرابط كمايلي:

<p> هذا رابط<a href="www.al-bassit.blogspot.com" target="_blank">مدونة البسيط</a>ويفتح في نافدة جديدة<br/>

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

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

وهناك أيضا رابط قد تحتاجون إليه أيضا وهو رابط لإرسال إيميل ولإنشاء هذا الرابط نكتب الكود كما يلي:

<p><a href="mailto:nom@mail.com">راسلني</a></p>

والفرق بين هذا الرابط والرابط العادي هو الكلمة mailto التي نضيفها بعد الكلمة href=.

روابط التحميل

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

<p><a href="fichier.zip"> إظغط هنا لتحميل الملف </a></p>

الدرس السابق: تعلم HTML5 و CSS3: أساسيات

الدرس التالي: تعلم لغة HTML: إدراج الصور