HTML Links

-

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

طريقة الكتابة:

<a href="default.asp" >This is a link</a>

لاحظ انه طريقة الكتابة بدأت بحرف a وانتهت بحرف a وفي داخل هذا الحرف اضفنا href الي هو مسؤول عن استدعاء الصفحة المطلوبة.

تمام خلونا نعمل مثال حتى نفهم الموضوع بشكل أفضل:

طبق الكود التالي في صفحة HTML 


<!DOCTYPE html>
<html>
<body>
    <h2>Open google using Link  </h2>
    <p><b><a href="http://www.google.com" target="_blank">Open a google Page</a></b></p>       
</body>
</html>

 شغل الصفحة وشوف النتيجة :

انقر فوق الرابط الموجود Open a google Page اكيد بفتح صفحة google 

الروابط بشكل افتراضي تظهر في جميع المتصفحات بالشكل التالي : 
  • التي لم يتم زيارتها تظهر بخط تحتها ولون blue
  • التي تم زيارتها بخط تحتها ولون purple
  • الروابط النشطة بخط تحتها ولون red 

خاصية target Attribute

يمكن استخدام الخاصية target لتحديد طريقة فتح الصفحة والقيم الخاصة بهذه الخاصية هي:
  • _self تستخدم لفتح الرابط المطلوب في نفس الصفحة (الوضع الافتراضي)
  • _blank تستخدم لفتح الرابط في صفحة جديده.
  • _parent  تستخدم لفتح الرابط في parent frame
  • _top تستخدم لفتح الرابط في full body في الصفحة
 
تمام نجرب نعدل على أمثال السبق ونطبق الخاصية _blank 
طبق الكود التالي في صفحة HTML 

<!DOCTYPE html>
<html>
<body>
    <h2>Open google using Link  </h2>
    <p><b><a href="https://www.google.com" target="_blank">Open a google Page</a></b></p>       
</body>
</html>

شغل الصفحة وشوف النتيجة(لازم موقع google يفتح في صفحة ثانية).

الفرق بين Absolute URLs  و Relative URLs

Absolute URL هي full web address روابط لمواقع خارجية كاملة المثال السابق google هو موقع خارجي وتم إضافة الرابط كامل .ونستخدم فيها الصيغة
  https://www.sitename.com
Relative URL هي روابط للصفحات داخل نفس الموقع او التطبيق.

استخدام الصورImages كروابط 
يمكن استخدام الصورة مع الروابط وذلك بإضافة الصورة داخل <a> 
حتي نفهم الموضوع نرجع للمثال السابق ونعدل على الكود الي :
اكيد لازم تكون الصورة المطلوب استخدامها موجوده. وفي مثالنا هنا الصورة google.png واذا بتلاحظ ان ما اضفنا رابط للصورة بسبب ان الصورة مكانها في نفس مكان ملف HTML الي بنشغل عليها. (اذا كانت الصورة في مكان ثاني اجباري تضيف الرابط كامل للصورة)
<!DOCTYPE html>
<html>
<body>
    <h2>Open google using image Link  </h2>
    <p><b><a href="http://www.google.com" target="_blank">
        <img src="google.png">
    </a></b></p>       
</body>
</html>
شغل الصفحة وشوف النتيجة:


اضغط فوق الصورة وشوف النتيجة. 

يمكن تطبيق الرابط على الصورة كمان بدون استخدام <a href> وذلك باستخدام كود JavaScript 
طبق الكود التالي في صفحة HTML 

<!DOCTYPE html>
<html>
<body>
    <h2>Open google using image Link  </h2>
    <p><b> 
        <!--<a href="" target="_blank">-->
        <img src="google.png" onclick="document.location='http://www.google.com'">
<!--    </a>-->
</b></p>       
</body>
</html>

شغل الصفحة وجرب تضغط على صورة جوجل واكيد لازم يفتح معك موقع google .
الكود الي كتبناه هو عبارة عن JavaScript يعمل عند النقر على control وينفذ الامر 
document.location='http://www.google.com'
ما تنسى تعطل الكود الخاص ب a> tag>  مثل ما عملنا.
الي بيعني ان استدعينا صفحة google ونعرضها في الشاشة. 

تطبيق الرابط على button 

طيق الكود التالي في صفحة HTML 

<!DOCTYPE html>
<html>
<body>
    <h2>Open google using image Link  </h2>
    <p><b> 
        <!--<a href="" target="_blank">-->
        <img src="google.png" onclick="document.location='http://www.google.com'">
        <button onclick="document.location='http://www.google.com'">Open Google Page</button>
<!--    </a>-->
</b></p>       
</body>
</html>
شوف النتيجة
استخدام Email  مع <a> 
يمكن ربط البريد الإلكتروني مع <a> 
تمام طبق الكود التالي في صفحة HTML 

<!DOCTYPE html>
<html>
<body>
    <h2>Open google using image Link  </h2>
    <p><b> 
        <!--<a href="" target="_blank">-->
        <img src="google.png" onclick="document.location='http://www.google.com'">
        <button onclick="document.location='http://www.google.com'">Open Google Page</button>
        <a href="mailto:[email protected]">Send email</a>
<!--    </a>-->
</b></p>       
</body>
</html>
شغل الصفحة وشوف النتيجة(جرب تضغط على الرابط Send email وشوف النتيجة)


استخدام Title مع <a> 
يمكن إضافة title ل <a> بهدف إضافة مزيد من المعلومات للمستخدم، ويظهر هذا title عند تحريك mouse فوق الرابط
طبق الكود التالي في 

<!DOCTYPE html>
<html>
<body>
    <h2>Open google using image Link  </h2>
    <p><b> 
        <!--<a href="" target="_blank">-->
        <img src="google.png" onclick="document.location='http://www.google.com'">
        <button onclick="document.location='http://www.google.com'">Open Google Page</button>
        <a href="mailto:[email protected]" title="Click here to send email to us">Send email</a>
<!--    </a>-->
</b></p>       
</body>
</html>

شغل الصفحة وشوف النتيجة 

واكيد بنقدر نطبق الالوان الألوان على الروابط راجع الدرس CSS Colors