نبذة عامة
كثيراََ ما نرى في المواقع الإلكترونية نصوص قابلة للضغط وبمجرد الضغط عليه إما تذهب بك لصفحة أخرى في نفس الموقع أو الذهاب لموقع أخر ، ما هي هذه الروابط ، وكيف نقوم بكتابة بالـ HTML ، تعرفنا في الـ HTML على مجموعة من العناصر ، سنقوم بهذا الدردس بالتعرف عن العنصر المسؤول عن الروابط وهو عنصر الـ <a>
عنصر الـ <a> هو إختصار لكلمة anchor وهو الروابط الخاصة بمواقع الويب الأخرى أو لقسم فى نفس الصفحة الحالية أو لصفحات أخرى فمثلاََ لو قمت بالضغط على كلمة تواصل معنا الموجودة بأعلى الموقع سيذهب بك بالصفحة الخاصة بالتواصل .
عنصر الـ <a> يستخدم لبناء الارتباطات التشعبية
<a>Anchor Tag</a>
هذه هي طريقة كتابة عنصر الـ <a> ولكن لاحظ لو قمت بهذه الطريقة فسيعرض النص الموجود بين وسم البداية والنهاية فقط بدون ان يحدث اي شى لو قمت بالضغط عليه ، والسبب في ذلك ، ان عنصر الـ <a> يحتوي على بعض الخصائص ( Attribute )
<a href="">Hyperlink Tag</a>يحتوي هذا العنصر على العديد من الخصائص وأحدي هذه الخصائص هو الـ href إختصار لـ ( Hypertext Reference ) وايضاََ هذه الخاصية يمكن ان تحتوي على قيم مختلفة ، تعرفنا سابقاََ على الـ Attribute وعرفنا ان الـ Attribute عبارة عن name = value وهنا في عنصر الـ <a> يعتبر الـ href إسم الخاصية وهذه الخاصية تحتوي على العديد من القيم التي يمكن وضعها سنتعرف عليها .
روابط فارغة
المقصود هنا بالروابط الفارغة ان قيمة الـ href ستكون لا شىء ستبقي فارغة ، يوجد العديد من الأغراض لهذا الشىء سواء لإستخدامة فيما بعد بواسطة الجافا سكربت ، غالباََ يمكن ان تستخدم من أجل اعادة تحميل نفس الصفحة الموجود بها حالياََ.
<a href="">Empty Link</a>
روابط في نفس النطاق
المقصود بالنطاق هو الدومين ( http://akwade.com ) وعند الضغط عليه سيذهب الى صفحات موجودة فى نفس النطاق
<a href="http://akwade.com/contact"> Contact Page </a>
<a href="http://akwade.com/about"> About Page </a>
روابط في نفس الصفحة ( روابط داخلية)
هنا عند الضغط على هذا الرابط سيذهب بك الى مكان معين في نفس الصفحة الموجود بها حالياََ تقوم بتحديده أنت بواسطة الـ ID لذلك سميت بالروابط الداخلية لأنه في داخل نفس الصفحة .
<a href="#section1"> Section 1 </a>
<a href="#section2"> Section 2 </a>
<div id="section1">Section 1 Division</div>
<div id="section2">Section 2 Division</div>
روابط البريد الإلكتروني
ويستخدم هذه من أجل إرسال رسالة جديدة عبر البريد الإلكتروني وذلك من خلال وضع عنوان البريد الذي تريده بعد mailto .
<a href="mailto:[email protected]"> Mail Link </a>
روابط أرقام الهواتف
عند النقر عليه سيقوم بتسهيل عملية الاتصال للمستخدمين الذين يقومون بفتح الصفحة على الهواتف المحمولة ويتم كتابة الرقم الذي تريد المستخدم الاتصال به بعد tel
<a href="tel:+972597114585"> Call Now </a>
خاصية الـ Target
هذه من الخصائص التي يمكن اضافتها ايضاََ لعنصر <a> لإخبار النافذة ( نافذة المتصفح ) بمكان الفتح ، وهى بمعنى الهدف .
ولها عدة قيم
- _self: عرض النتيجة مكان الصفحة الحالية. هذه هي القيمة الافتراضية إذا لم تحدد قيمة أخرى.
- _blank: عرض الصفحة في نافذة جديدة.
- _parent: هنا سيتم عرض الـ Iframe المشار اليه .
_parent
لتوضيح هذه النقطة ، يجب أولاََ ان تعرف ان هناك عنصر من عناصر الـ HTML وهي الـ iframe و ظيفته بشكل مختصر جداََ هو انه يقوم بتضمين رابط الموقع الذي تريده في مكان معين ، بمعني تقوم بوضع هذا العنصر بإي مكان تريد بالصفحة وفي هذا المكان تريد تضمين موقع اخر !
مثال بسيط !
<iframe src="https://www.youtube.com/embed/gn9a14Nn-QU" frameborder="0"></iframe>هذه طريقة كتابة هذا العنصر ، من ضمن الخصائص التي يأخدها الـ src وهي رابط الموقع الذي تريد تضمينه لديك سيتم شرحها بدرس منفصل وبشكل مفصل !
النتيجة:
ايضاََ هذا العنصر له خاصية أخرى وهي الـ name والتي تقوم بإعطاءه اسم اي اسم تريد ، مثلاََ name=’learn_html’
الان لو قمنا بكتابة هذا الكود
<iframe name='learn_html' ></iframe>وبعد ذلك كتابة هذا الكود
<a href="akwade.com" target="learn_html">frame1</a>وهذه target=”learn_html” عند الضغط قم بالذهاب إلى العنصر iframe الذي بإسم learn_html وقم بإظهار الرابط الموجودة بخاصية href فى عنصر الـ iframe
مثال توضيحي : اضغط هنا
عند الضغط على كلمة إضغط هنا ستلاحظ ان موقع أكوادي سيظهر بالمربع ، هذا المربع عبارة عن الـ iframe