الموضوع: دورة تصميم وتطوير مواقع الإنترنت للمبتدئين [html] (وسم الروابط) م#7

وسم الروابط Links Tag
<a>

وهو الوسم الخاص بإظهار الروابط (links) ، ولكنه لا يكتب منفردا ولكن يجب أن تتبعه سمة واحدة (Attribute) على الأقل وهي href التي تحدد موقع أو عنوان الرابط الذي سيتم الذهاب إليه والذي قد يكون له أكثر من شكل وطريقة ستناولهم فيما يلي:

سمة href
وهي اختصار Hyperlink Reference أي مرجع الرابط ، وهي السمة الرئيسية والشائعة لوسم الروابط والتي قد تكون قيمتها (Value) رابط (//:http) أو بريد إلكتروني (:mailto) أو موضع في نفس الصفحة أو في صفحة أخرى (#) وسنتاولهم بالتفصيل

قيمة رابط موقع إلكتروني //:http
مثال:

كود:

<a href="http://www.boraqsoft.com/">Boraqsoft</a>

ملحوظة:
إذا كان الرابط المراد الذهاب إليه موجود على نفس الموقع الإلكتروني فلست في حاجة إلى إضافة كامل العنوان مثل /http://www.DOMAIN.com ولكن يكفي كتابة اسم الصفحة فقط مثل page.html إذا كانت الصفحة المراد الانتقال إليها موجودة في نفس المجلد أو المسار (root) الموجود به الصفحة المكتوب فيها الكود ، فيكون الكود كالتالي

كود:

<a href="page.html">Boraqsoft</a>

قيمة بريد إلكتروني mailto
مثال:

كود:

<a href="mailto:boraqsoft@gmail.com">Contact us</a>

قيمة موضع في نفس الصفحة أو في صفحة أخرى #
ووظيفتها نقل زائر الصفحة إلى موضع بعينه في الصفحة ، ولكن يجب تحديد هذا الموضع أولا عن طريق إضافة وسم الروابط ملحوقًا بسمة id ثم إعطائها قيمة (value) كما في المثال التالي:

كود:

<a id="ch1">Chapter 1</a>

بعد ذلك نقوم بإنشاء وسم الرابط الذي سيقوم بالانتقال إلى هذا الموضع من الصفحة وإعطاؤه قيمة الـ id المراد الانتقال إليه ولكن يجب أن تكون القيمة مسبوقة بعلامة الهاشتاج # كما في المثال التالي في حالة كان الموضع في نفس الصفحة

كود:

<a href="#ch1">Go to Chapter 1</a>

أما إذا كان الموضع في صفحة أخرى فيجب أن يسبق علامة الهاشتاج والـ id الرابط الكامل للصفحة كما في المثال التالي

كود:

<a href="http://www.boraqsoft.com/page1.html#ch1">Go to Page 1 Chapter 1</a>

سمة target
ووظيفتها تحديد طريقة الانتقال إلى الرابط ، فهل تريد أن يكون الانتقال إلى الرابط في صفحة جديدة بدون غلق أو ترك الصفحة الحالية أم تريد أن يكون الانتقال في نفس الصفحة
وأشهر قيم (values) هذه السمة قيمة blank_ للانتقال إلى صفحة جديدة ، أما إذا كنت تريد أن يكون الانتقال في نفس الصفحة فلا تكتب هذه السمة من الأساس لأن الطريقة الافتراضية للانتقال هي الانتقال في نفس الصفحة
مثال للانتقال إلى صفحة جديدة بدون ترك أو غلق الصفحة الحالية

كود:

<a href="http://www.boraqsoft.com/" target="_blank">Open in a new page</a>

سمة download
ووظيفتها تحويل الرابط إلى رابط لتحميل عنصر ما مثل ملف word أو pdf أو text أو صورة وما شابه ، فبعد كتابة سمة href التي تشير إلى موقع الملف المراد تحميله يتم إضافة سمة التحميل download متبوعة بكود القيمة "value"= ويمكن تركه فارغًا إذا كنت ترغب أن يتم تحميل الملف بنفس اسمه الموجود على الموقع أو يمكنك كتابة اسم آخر بين القوسين " " ليتم تحميله بالاسم الجديد
مثال:

كود:

<a href="http://www.boraqsoft.com/ar/wp-content/uploads/2013/06/logo-ar1.jpg" download="boraqsoft">Download Boraqsoft Logo</a>

في هذا المثال فإن الملف المراد تحميله هو صورة بصيغة jpg وسيتم تحميله باسم آخر غير اسمه الموجود على الموقع وهو boraqsoft بدلا من logo-ar1
ملحوظة: هذه السمة غير متوفرة في بعض المتصفحات مثل Internet Explorer و Safari والإصدار 12 من Opera وما قبله

وأخيرا ؛ فإن الروابط ليست خاصة بالنصوص فقط ، وإنما يمكن تحويل الصور أيضًا إلى روابط كما في المثال التالي

كود:

<a href="http://www.boraqsoft.com/"><img src="http://www.boraqsoft.com/ar/wp-content/uploads/2013/06/logo-ar1.jpg"></a>

ملحوظة: في متصفح Internet Explorer في بعض الإصدارات قد تلاحظ وجود إطار حول الصورة ، ولكي تزيل هذا الإطار يمكن إضافة سمة style لوسم الصور img وإعطاؤها القيمة ";border:0" كما في المثال التالي:

كود:

<a href="http://www.boraqsoft.com/"><img src="http://www.boraqsoft.com/ar/wp-content/uploads/2013/06/logo-ar1.jpg" style="border:0;" /></a>

الدرس السابق
http://www.nilemotors.net/Nile/417261-html-6-a.html