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

[أبو آسر]

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

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

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

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

[COLOR="Blue"]<a href="http://www.boraqsoft.com/">Boraqsoft</a>[/COLOR]

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

[COLOR="blue"]<a href="page.html">Boraqsoft</a>[/COLOR]

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

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

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

[COLOR="blue"]<a id="ch1">Chapter 1</a>[/COLOR]

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

[COLOR="blue"]<a href="#ch1">Go to Chapter 1</a>[/COLOR]

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

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

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

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

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

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

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

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

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

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

[COLOR="blue"]<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>[/COLOR]

الدرس السابق

http://www.nilemotors.net/Nile/417261-html-6-a.html

[canner]

جزاك الله خيرا على هذا الشرح الوافى
بالمناسبة هل ح يبقى فيه شرح عن استخدام الزراير كروابط؟
و بالنسبة لطريقة تصغير او اظهار الصور بمقياسها الطبيعى؟
و هل ستتكلم عن كيفية كتابة موقع و المرفقات بتاعته على الهارد ثم رفعها على النت؟

[أبو آسر]

جزاك الله خيرا على هذا الشرح الوافى
بالمناسبة هل ح يبقى فيه شرح عن استخدام الزراير كروابط؟
و بالنسبة لطريقة تصغير او اظهار الصور بمقياسها الطبيعى؟
و هل ستتكلم عن كيفية كتابة موقع و المرفقات بتاعته على الهارد ثم رفعها على النت؟

قصدك عمل menu أو قائمة للموقع ؟
إن شاء الله كل الكلام ده سنتاوله في دروس قادمة لأن الغرض من الدورة عمل موقع كامل متكامل وهنعمل قوائم وصور وازاي نرفع المواقع على النت وكل الكلام ده
بس للأسف المتابعات مش مشجعة على الإطلاق تقريبا مبقاش في غير حضرتك اللي متابع وكل الإخوة الي كانوا حاجزين كراسي في الصف الأول وجنب الشباك ومش عارف ايه خلعوا من أول كام درس :(
أنا كل درس بياخد مني وقت من 3 إلى 4 ساعات علشان أطلعه بالطريقة دي فحرام الواحد يتعب ويبذل المجهود ده من غير استفادة فادعيلي بس أقدر أكمل مع المتابعة اللي لا تكاد تذكر دي
وأشكرك على همتك العالية أخي canner وعلى متابعتك الدائمة للدورة دي ولدورة الإنجليزي أيضا ربنا ينفعك بيهم

[canner]

اخى الكريم ابو آسر اولا انا اسمى احمد تانى حاجة لا تتقيد بيا لو انت شايف ان وقتك ضيق و الموضوع ده بياخد منك وقت و مجهود فوق طاقتك فأن الله لا يكلف نفسا الا وسعها و لا تعمل لى حسابا و كفى بك ما فعلته و الله هو الوحيد القادر على مجازاتك بالخير فى الدنيا و الاخرة

اما انا حتى لو ورايا ايه ح افضل متابعك برضه مش علشان اهمية اللى انت بتعمله بس لا كمان علشان انا مقدر المجهود الجبار اللى ورا كل موضوع فأقل ما يمكن ان افعله هو متابعتك و الدعاء لك بظهر الغيب عسى ان الله يستجيب الدعوة ده غير اللى انا اعرفه عنك انك تعمل هذه الموضوع لوجه الله تعالى فعسى الله ان يعطيك اجر من تابع معك و من لم يتابع

[أبو آسر]

اخى الكريم ابو آسر اولا انا اسمى احمد تانى حاجة لا تتقيد بيا لو انت شايف ان وقتك ضيق و الموضوع ده بياخد منك وقت و مجهود فوق طاقتك فأن الله لا يكلف نفسا الا وسعها و لا تعمل لى حسابا و كفى بك ما فعلته و الله هو الوحيد القادر على مجازاتك بالخير فى الدنيا و الاخرة

اما انا حتى لو ورايا ايه ح افضل متابعك برضه مش علشان اهمية اللى انت بتعمله بس لا كمان علشان انا مقدر المجهود الجبار اللى ورا كل موضوع فأقل ما يمكن ان افعله هو متابعتك و الدعاء لك بظهر الغيب عسى ان الله يستجيب الدعوة ده غير اللى انا اعرفه عنك انك تعمل هذه الموضوع لوجه الله تعالى فعسى الله ان يعطيك اجر من تابع معك و من لم يتابع

لا يا أخي الحبيب أحمد أنا مقصدش اللي انت فهمته
انا لو الكورسات دي هتفيدك انت بس انا مستعد أكمل للنهاية لكن انا مش بستقل بيك بالعكس ده انت الوحيد اللي مشجعني على الاستمرار
انا بس متضايق من الناس اللي بتسخن في الاول ولما عملت استفتاء على عمل الدورة دي لقيت حوالي 20 واحد بيقولوا معاك للنهاية ومن تالت أو رابع درس صفصفوا على تلاتة أربعة ودلوقتي مفيش غيرك أهو فده اللي بيضايق لان المجهود اللي ببذله في تحضير الدروس دي كنت أتمنى إنه يكون مقابله إفادة أكبر عدد ممكن من المتابعين
لكن أنا زي ما قلتلك هكمل ان شاء الله حتى لو محدش كمل معايا غيرك بس يارب انت بس متخلعش انت كمان :)

[canner]

لا ما تخفشى من انى اخلع لانى مافيش حد قبل كده دعانى لحاجة فيها خير و قولتله لا ابدا بالعكس انا عجبنى جدا نظام التعليم اليومى و ابتديت ادور على حاجات تانية اتعلمها يوميا تخيل انت لو يوميا اتعلمت حاجة جديدة و واظبت عليها بعد كام سنة ح تبقى عامل ازاى!!!! و لو لقدر الله خلعت ده ح يبقى غصب عنى يبقى ساعتها ادعيلى عسى الله يرحمنى برحمته
زائد ان موضوع تعليم تصميم المواقع ده جه فى وقته علشان انا كنت زمان ايام مشروع التخرج كنت بعمله و بعدين نسيت الحاجات دى خالص و دلوقتى كنت ح ادور على دروس تعليمية علشان انا محتاج اعمل موقع على الانترنت فحسيت ان الله بعتك ليا فى هذا التوقيت المميز

انا على العموم مش عاوز اكبر الموضوع اكبر من كده بس المشكلة انى حاسس بيك جدا علشان زمان فى بعض المنتديات كنت بشارك و اساعد و احل مشاكل و فى الاخر ما كنش فيه تقدير و لا ردود و ده كان بيأثر فيا جدا لدرجة ايام كنت بنزل مشاركات مميزة و مش بيجيلى نوم علشان اشوف رد الفعل عليها بعديها ابتديت احتسب كل مشاركة لوجه الله لدرجة انى ساعات كنت ب أرد و ماشفش الموضوع تانى و لا ابص عليه

[S O P H O S]

ربنا يبارك فعمرك ويقويك علي التكملة

[prof2013]

ابو اسر متخافش انا معاك بس كنت مشغول اليومين اللي فاتوا

[prof2013]