5 :XHTML (الروابط).

zak الأربعاء فبراير 22, 2012 5:29 am

الروابط

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

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

) و من أجل الربط بين هذه الصفحات ستستعمل الروابط و هذه الروابط بالضرورة ستكون نسبية.
الروابط الخارجية : و هي مثلا الروابط التي تأخذك إلى موقع أخر خارج موقعك مثل http://www.islamstory.com أو ملف محدد مثل http://www.islamstory.com/index.html و هذه الروابط تسمى روابط مطلقة، عكس الروابط النسبية فهي تبتدء دائما ب http://.
الروابط المطلقة
الروابط المطلقة مثل http://www.islamstory.com/index.html سهلة الإستعمال و عيبها أنها طويلة و قد تكون أطول من المثال المضروب أعلاه.
الروابط النسبية
نفترض أنه لديك ملفين في مجلد واحد و تريد الربط بينهما.
C:\files\index.html
C:\files\cible.html
إذا أردت أن أضع رابط في الصفحة index.html يؤخذني إلى الصفحة cible.html عندما أضغط عليه. فسأستعمل cible.html فقط كرابط دون إستعمال C:\files\cible.html.
أما إذا كانا في ملفين مختلفين مثل :
C:\files\index.html
C:\files\data\cible.html
فسأستعمل data\cible.html كرابط فقط بدل إستعمال C:\files\data\cible.html.
أو مثل :
C:\files\index.html
C:\cible.html
في هذه الحالة سأستعمل ..\cible.html فقط دون إستعمال C:\cible.html.
مهلا، ماذا تعني ب (..) ؟
إذا أردت أن تضع رابط يأخذ إلى صفحة توجد في مجلد من الأباء فإننا نستعمل النقطتين (..) و كلما عدنا بمجلد نضع نقطتين.
يبدو لي أنكم فقدتم البوصلة Shocked

، أظن أن مثالا سيفي بالغرض Very Happy

.
نأخد مثال الملفين السابقين.
C:\files\data\index.html
C:\cible.html
في هذه الحالة، الرابط الذي سنستعمله هو ../../cible.html ، أوضح من هذا لا يوجد، و لا تقلقوا مع الوقت و الممارسة ستتقنون إستعمالها.
قد لا يفهمها البعض في الوقت الراهن لكن مع الوقت ستأتي Wink

.
ملاحظة : المهم حاليا هو أن تضعوا جميع ملفاتكم في نفس المجلد لتفادي أي مشاكل حتى تعتادوا عليها.

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

<h2>Welcome Home</h2>

و Index.html و محتواه هو.
كود: XHTML

<a href="cible.html">click here to visit cible.html</a>

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

.
تذكير : لا تنسوا وضع هذه السطور بين الوسمين <body> و </body> لكي تنشئوا صفحات XHTML حقيقية.
و كما قلنا إذا كان الملفان يوجدان في مجلدين مختلفين نستعمل الروابط كما شرحنها أعلاه كـ :
كود: XHTML

<a href="data/cible.html">click here to visit cible.html</a>

أو :
كود: XHTML

<a href="../cible.html">click here to visit cible.html</a>

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

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

<h2 id="home">Welcome Home</h2>

ثم نضع الوسم <a> و نعطي للخاصية href قيمة الخاصية id و هنا هي home مضيفين في أولها الرمز # لتصبح #home
إذن الرابط سيكون على الشكل التالي :
كود: XHTML

<a href="#home">click here to get home</a>
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<h2 id="home">Welcome Home</h2>
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr /><hr />

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

<a href="cible.hrml#home">click here to get home</a>

الروابط الخارجية
الروابط الخارجية سهلة الإستعمال فكما أشرنا إليه سابقا، هي روابط مطلقة، أي لا يطرأ عليها أي تغيير، فهي تستعمل دائما بنفس الشكل و كما أقول دائما المثال أفضل من الكلام.
و أفضل مثال هو :
كود: XHTML

<p>visit <a href="http://www.islamstory.com">ISlamStory</a></p>

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