الرّوابط

رابط المرساة

آخر تحيين: 04-01-2015

الصّور الرّوابط النّسبية


رابط المرساة :
المرساة "Anchor" . مصطلح ملاحي يعني الأداة التي كانت تثبت السفينة إلى قعر البحر عندما ترسو . و هو مصطلح من مجموعة مفردات ملاحية استعارها عالم الأنترنت كمصطلح "الإبحار" : navigation ...

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

  1. داخل نفس الصفحة
  2. أو إلى موضوع في صفحة أخرى داخل نفس الموقع
  3. أو إلى موضوع في موقع آخر .

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


1. رابط إلى موضوع في نفس الصفحة



ما تعلمناه سابقا ، عندما نريد كتابة رابط نسبي أو مطلق ، نكتب عنوان الرابط في الصفة "href" . ويكون الرابط جاهزا . أماهنا فالأمر يختلف قليلا ، إذ يجب أن نُعَرِّف الرابط بالموضوع الذي نريد أن ننتقل إليه . ونفعل ذلك بواسطة صفة تسمّى "id". و القيمة التي سوف نعطيها للصفة "id" هي بكل بساطة قيمة "href".
في هذا المثال ، لدينا قائمة عناوين على شكل روابط ، وعند النقر على رابط ما ،سيحيلنا إلى الموضوع المتعلق به.

صفحة page2.html

<h2> روابط إلى مواضيع في نفس الصفحة </h2>
  <p>    
    <a href="#link1"> الجزء I </a><br>
    <a href="#linkk2"> الجزء II </a><br>
    <a href="#linkk3"> الجزء III </a><br>
  </p>

<h3 id="link1"> الجزء I </h3>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicg elit. Dolor, libero, vel, sapiente, magni consequuntur atque aliquid sit natus officia harum iure provident maxime nostrum amet asperiores quidem neque facilis  quod vero! Ex, asperiores, esse, quas  reprehenderit velit ea ullam tenetur explicabo eius modi autem maiores vel rerum delectus ut iure sit necessitatibus sunt laudantium quod distctio quo illum veniam deserunt qui voluptas eum fuga ipsum nobis dignissimos hic quidem saepe illo aspernatur cumque est. Quaerat, illum, fugiat, a, molestias eum atque laboriosam consequatur distctio sunt voluptas ipsam ratione  veniam quidem eligendi libero enim nesciunt dolore quia ipsum perferendis cidunt velit. Qui, doloremque corrupti voluptatibus harum debitis odio praesentium et deserunt. Voluptas ut nostrum dolore soluta praesentium velit  ullam aspernatur vel eligendi. Iure, obcaecati, voluptates, st repellat itaque accusamus aliquid ab hic culpa explicabo repudiandae neque quo odit. Odit, facilis, ratione suscipit omnis perferendis voluptatum nostrum  quidem recusandae amet illo aperiam quasi maxime molestias doloremque. Quidem blanditiis nobis voluptatibus quas necessitatibus neque consectetur. Ducimus, laboriosam, officiis, veritatis ex qui ratione reprehenderit magnam unde repellat dignissimos nostrum necessitatibus quidem pariatur sit ipsum. Cumque, architecto, ipsam, nam, sapiente repellendus id commodi voluptatum mollitia cum veritatis qui vero libero.Lorem ipsum dolor sit amet, consectetur adipisicg elit. Dolor, libero, vel, sapiente, magni consequuntur atque aliquid sit natus officia harum iure provident maxime nostrum amet asperiores quidem neque facilis  quod vero! Ex, asperiores, esse, quas  reprehenderit velit ea ullam tenetur explicabo eius modi autem maiores vel rerum delectus ut iure sit necessitatibus sunt laudantium quod distctio quo illum veniam deserunt qui voluptas eum fuga ipsum nobis dignissimos hic quidem saepe illo aspernatur cumque est. Quaerat, illum, fugiat, a, molestias eum atque laboriosam consequatur distctio sunt voluptas ipsam ratione  veniam quidem eligendi libero enim nesciunt dolore quia ipsum perferendis cidunt velit. Qui, doloremque corrupti voluptatibus harum debitis odio praesentium et deserunt. Voluptas ut nostrum dolore soluta praesentium velit  ullam aspernatur vel eligendi. Iure, obcaecati, voluptates, st repellat itaque accusamus aliquid ab hic culpa explicabo repudiandae neque quo odit. Odit, facilis, ratione suscipit omnis perferendis voluptatum nostrum  quidem recusandae amet illo aperiam quasi maxime molestias doloremque. Quidem blanditiis nobis voluptatibus quas necessitatibus neque consectetur. Ducimus, laboriosam, officiis, veritatis ex qui ratione reprehenderit magnam unde repellat dignissimos nostrum necessitatibus quidem pariatur sit ipsum. Cumque, architecto, ipsam, nam, sapiente repellendus id commodi voluptatum mollitia cum veritatis qui vero libero.
</p>

<h3 id="linkk2"> الجزء II </h3>
<p>
  Esse, laborum, repellendus animi maxime nisi ventore saepe quod  consequatur eius mima repudiandae ipsam assumenda cidunt harum perferendis fuga commodi est aut eveniet accusantium repellat vitae voluptate enim iste ratione accusamus nemo voluptatum dicta necessitatibus aliquam aperiam et delectus. Modi, odit, quas, at, deleniti  voluptate distctio  vitae qui culpa recusandae vero suscipit eius ventore assumenda tempora optio quisquam illum dolor eum ratione ea tenetur. Ullam, omnis, pariatur, provident odit debitis beatae natus quam eaque quia tenetur id vel laudantium est recusandae vitae ea reiciendis consequuntur magnam autem labore qui! Veritatis, consequuntur, iusto, illum, mima ut voluptate voluptates provident totam optio quidem autem pariatur id praesentium expedita perspiciatis commodi blanditiis corrupti sapiente. Voluptatum, nihil, pariatur, illo, iste quis illum saepe assumenda voluptatem fuga consectetur nobis autem nulla? Perferendis, eaque,  quos perspiciatis culpa delectus quaerat sit soluta earum omnis nemo hic beatae pariatur rem quod illum magni doloremque cidunt impedit debitis? Pariatur, soluta, ad odit iure repellendus dolorum unde quia vel nesciunt enim quidem fugit  hic sunt voluptas placeat dolore illum totam nobis recusandae. Aperiam, molestiae, ducimus iusto tenetur consectetur omnis ex libero consequatur saepe modi id nisi aut eveniet maiores vel fuga quae quidem itaque rationeEsse, laborum, repellendus animi maxime nisi ventore saepe quod  consequatur eius mima repudiandae ipsam assumenda cidunt harum perferendis fuga commodi est aut eveniet accusantium repellat vitae voluptate enim iste ratione accusamus nemo voluptatum dicta necessitatibus aliquam aperiam et delectus. Modi, odit, quas, at, deleniti  voluptate distctio  vitae qui culpa recusandae vero suscipit eius ventore assumenda tempora optio quisquam illum dolor eum ratione ea tenetur. Ullam, omnis, pariatur, provident odit debitis beatae natus quam eaque quia tenetur id vel laudantium est recusandae vitae ea reiciendis consequuntur magnam autem labore qui! Veritatis, consequuntur, iusto, illum, mima ut voluptate voluptates provident totam optio quidem autem pariatur id praesentium expedita perspiciatis commodi blanditiis corrupti sapiente. Voluptatum, nihil, pariatur, illo, iste quis illum saepe assumenda voluptatem fuga consectetur nobis autem nulla? Perferendis, eaque,  quos perspiciatis culpa delectus quaerat sit soluta earum omnis nemo hic beatae pariatur rem quod illum magni doloremque cidunt impedit debitis? Pariatur, soluta, ad odit iure repellendus dolorum unde quia vel nesciunt enim quidem fugit  hic sunt voluptas placeat dolore illum totam nobis recusandae. Aperiam, molestiae, ducimus iusto tenetur consectetur omnis ex libero consequatur saepe modi id nisi aut eveniet maiores vel fuga quae quidem itaque ratione!
</p>

<h3 id="linkk3"> الجزء III </h3>
<p>
  Velit suscipit exercitationem deleniti dolorem perferendis. Velit, quod, consequuntur, nemo nesciunt at impedit ad ullam odio ratione eos doloremque necessitatibus accusamus vitae? Culpa, molestias beatae vitae aspernatur quo aut est quas officia! Dolorem, mima adipisci labore laborum nemo ipsa molestiae vitae neque. Numquam, pariatur, suscipit, et, st quibusdam cupiditate repellendus quisquam nihil ex eos nostrum optio facere aliquam ullam mus hic eius perspiciatis totam amet officia unde. Nemo,  perferendis tempora aspernatur itaque quia numquam distctio non consequatur laboriosam odit vel quibusdam quidem nesciunt quasi deleniti fugiat ipsam eaque dolor quam autem mima velit amet fuga accusantium molestiae nostrum harum hic voluptas  cumque libero optio ad quos esse ratione cupiditate quae adipisci maxime aperiam similique ventore et magni rerum fugit animi iste blanditiis provident facere nulla. Accusamus, omnis, laborum, cupiditate expedita eius doloremque amet ipsa aperiam voluptate iste rem sapiente blanditiis sequi enim harum facere possimus. Aspernatur, necessitatibus, temporibus, impedit, nam earum praesentium aliquam assumenda maiores fugiat repudiandae quidem harum dolores nostrum voluptates adipisci accusamus cidunt. Dolore, maiores, a numquam quia hic  repudiandae ullam doloremque. Esse,  optio tenetur qui voluptates temporibus impedit modi sed unde praesentium soluta veniam tempora voluptas dolorum eius mollitia dolorem! Explicabo, dolorem, quod!Velit suscipit exercitationem deleniti dolorem perferendis. Velit, quod, consequuntur, nemo nesciunt at impedit ad ullam odio ratione eos doloremque necessitatibus accusamus vitae? Culpa, molestias beatae vitae aspernatur quo aut est quas officia! Dolorem, mima adipisci labore laborum nemo ipsa molestiae vitae neque. Numquam, pariatur, suscipit, et, st quibusdam cupiditate repellendus quisquam nihil ex eos nostrum optio facere aliquam ullam mus hic eius perspiciatis totam amet officia unde. Nemo,  perferendis tempora aspernatur itaque quia numquam distctio non consequatur laboriosam odit vel quibusdam quidem nesciunt quasi deleniti fugiat ipsam eaque dolor quam autem mima velit amet fuga accusantium molestiae nostrum harum hic voluptas  cumque libero optio ad quos esse ratione cupiditate quae adipisci maxime aperiam similique ventore et magni rerum fugit animi iste blanditiis provident facere nulla. Accusamus, omnis, laborum, cupiditate expedita eius doloremque amet ipsa aperiam voluptate iste rem sapiente blanditiis sequi enim harum facere possimus. Aspernatur, necessitatibus, temporibus, impedit, nam earum praesentium aliquam assumenda maiores fugiat repudiandae quidem harum dolores nostrum voluptates adipisci accusamus cidunt. Dolore, maiores, a numquam quia hic  repudiandae ullam doloremque. Esse,  optio tenetur qui voluptates temporibus impedit modi sed unde praesentium soluta veniam tempora voluptas dolorum eius mollitia dolorem! Explicabo, dolorem, quod!
</p>
مشاهدة النتيجة


كما لاحظتم . فقيمة href" هي قيمة "id" مع إضافة علامة # قبل القيمة .
ـ الرابط يكون على الشكل التالي :

<a href="#link1"> Chapitre I </a>

ـ و الموضوع أو العنوان الذي نريد الإنتقال إليه ، كالتالي :

<h3 id="link1"> Chapitre I </h3>

2. رابط إلى موضوع في صفحة أخرى



لإنشاء رابط إلى موضوع في صفحة أخرى ، نضيف عنوان الصفحة قبل علامة # . مثلا نحن في الصفحة "page1" , و نريد إنشاء رابط إلى موضوع "Chapitre II" الموجود في الصفحة "page2". يكون الرابط على الشكل التالي :
أولا ، نضيف صفة id لعنوان الموضوع h3 الموجود في page2.html و الذي نريد الإنتقال إليه

<!-- page2.html صفحة -->
<h3 id="link2"> Chapitre II </h3>

و في page1.html نكتب الرابط مع إضافة عنوان الصفحة التي تحتوي على الموضوع


<!-- page1.html صفحة -->
<a href="page2.html#link2"> Chapitre II </a>
  • نكتب اسم الصفحة التي تحتوي على الموضوع : في مثالنا : page2.html
  • ثم نضيف علامة # . بدون ترك أيّ فراغ
  • و أخيراً نكتب قيمة الصفة id في مثالنا : link2

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


بما أنه أصبح لديكم موقع ، قد تودون أن يراسلكم الزوار ، و تريدون أن يتم ذلك عبر بريد إلكتروني . الرابط التالي يمكنكم من تحقيق حلمكم


<a href="mailto:votre_nom@gmail.com"> الإتصال بي </a>

نكتب : mailto
ـ ثم نضيف بريدنا الإلكتروني .
و بهذا أنهي درس الرّوابط