تعلم لغة html: الروابط Links

تعلم لغة html: الروابط Links

ابراهيم زكاغ

2/05/2017

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

أنواع الروابط والعناصر المكونة لها

video

رابط ويب يبدأ بوسم <a وينتهي بوسم  </a> وفي الداخل هناك  خاصية href تحمل قيمة وهي عنوان الرابط ثم النص الذي ينقر عليه الزائر.

<a href="https://www.facebook.com/folfoly">صفحة فولفولي</a>

النتيجة

صفحة فولفولي

فتح رابط في صفحة خارجية

لفتح رابط ويب في صفحة اخرى نضيف خاصية target  بقيمة _blank

الكود

<a href="https://www.facebook.com/folfoly" target="_blank">صفحة فولفولي</a>

انشاء روابط لمواقع أخرى

الكود

<p>مواقعي المفضلة:

<ul>

<li><a href="http://www.facebook.com">

فيس بوك</a></li>

<li><a href="http://www.youtube.com">

يوتيوب</a></li>

<li><a href="http://www.plus.google.com">

جوجل بلوس</a></li>

<li><a href="http://www.twitter.com">

تويتر</a></li>

</ul>

</p>

 النتيجة

مواقعي المفضلة:

• فيس بوك
• يوتيوب
• جوجل بلوس
• تويتر

انشاء روابط لصفحة داخل نفس الموقع

الكود

<p>
<ul>
<li><a href="index.html">الرئيسية</a></li>
<li><a href="about-us.html">من نكون</a></li>
<li><a href="movies.html">دروس</a></li>
<li><a href="contact.html">للاتصال بنا</a></li>
</ul>
</p>

النتيجة
شاهد الفيديو لفهم طريقة عمل هذا الكود

اضافة رابط لعنصر محدد داخل نفس صفحة الويب

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

وطريقة انشاء هذا النوع من الروابط هي كالتالي:

<h1 id="top">مدونة فولفولي</h1>
<a href="#webdesign">دروس تصميم مواقع الويب</a><br />
<h2 id="webdesign">Arc Shot</h2>
<p>تعلم كيف تصمم موقع من الصفر باستعمال لغتي html و css</p>
<p><a href="#top">العودة للأعلى</a></p>

يتم وضع اسم id  مكان الرابط كما يلي:
href="#webdesign"

ثم نفس الاسم في في المكان الذي يشير اليه الرابط:
<h2 id="webdesign">

شاهد الفيديو لفهم

دورة تصميم المواقع html css

ابراهيم زكاغ 2/05/2017