#1
| ||||||||||||||
| ||||||||||||||
Html الروابط مفهوم الرابط الرابط ( Link ) في العادة عبارة عن نص يشير لعنوان صفحة أخرى عند النقر عليه يقوم المتصفح بنقلك إليها. أيضاً, قد يكون الرابط يشير لملف أو برنامج ما عند النقر عليه يقوم المتصفح بسؤالك ما إن كنت تريد تحميله أم لا. أشكال الروابط
بشكل عام نستخدم الوسم <a> على هذا النحو <ahref="url">text</a> لعرض رابط في الصفحة.
في المثال التالي قمنا بإضافة رابط في الفقرة عند النقر عليه يتم توجيه المستخدم للصفحة الرئيسية في موقع هرمش. مثال
جرب الكود إظهار تلميح عند تمرير الماوس فوق الرابط في حال أردت إظهار تلميح عند تمرير الماوس فوق الرابط فيمكنك إضافة الخاصية title في الوسم <a> و تمرير التلميح الذي تريد عرضه كقيمة لها. في المثال التالي قمنا بإضافة تلميح للرابط يتم إظهاره عند تمرير الماوس فوقه. مثال
جرب الكود وضع رابط لبريد إلكتروني محدد في حال أردت وضع رابط في الصفحة عند النقر عليه يقوم بفتح تطبيق البريد الإلكتروني الإفتراضي الموجود في جهاز المستخدم و تحديد الجهة التي سيتم إرسال البريد إليها قم بوضع الكلمة mailto: يليها البريد الإلكتروني الذي تريده أن يتلقى رسالة المستخدم كقيمة للخاصية href. في المثال التالي قمنا بإضافة رابط عند النقر عليه يقوم بفتح تطبيق البريد الإلكتروني الموجود في جهاز المستخدم و تحديد الجهة التي سيتم إرسال البريد إليها. مثال
جرب الكود روابط لعناصر محددة في الصفحة في حال أردت وضع رابط يوجه المستخدم لعنصر محدد موجود في نفس الصفحة أو لعنصر محدد موجود في صفحة أخرى يمكنك إعطاء العنصر id و عندها الرابط الذي نريده أن يوجه المستخدم لذاك العنصر يجب أن نضع في نهايته الرمز # يليه id العنصر. في المثال التالي قمنا بوضع رابط عند النقر عليه يقوم بنقل المستخدم للعنصر محدد في نفس الصفحة. المثال الأول
جرب الكود في المثال التالي قمنا بوضع رابط عند النقر عليه يقوم بنقل المستخدم لعنصر محدد في صفحة أخرى. المثال الثاني
جرب الكود إضافة رابط وهمي أثناء تصميم الصفحة, المصمم لا يحتاج أن يحدد قيمة الخاصية href لكل رابط موضوع في الصفحة. في العادة حتى يظهر نص الرابط كأنه رابط عادي يمكن النقر عليه يمكنك ببساطة وضع الرمز # كقيمة للخاصية href و عندها كأنك تقول للمتصفح قم بتوجيه المستخدم إلى لا شيء. في المثال التالي قمنا بإضافة رابطين, الأول يظهر كرابط عادي و لكن عند النقر عليه لا يحدث أي شيء و الثاني لا يظهر من الأساس كرابط. مثال
جرب الكود تحديد أين سيتم فتح الرابط إفتراضياً, عند النقر على رابط موجود في الصفحة نجد أنه يتم فتح الصفحة الجديدة مكان الصفحة الحالية كما لاحظنا في المثال السابق. في حال أردت تحديد أين سيتم فتح الرابط يجب أن تضيف الخاصية target في الوسم <a> و إعطائها إحدى القيم التالية:
ملاحظة شيء طبيعي جداً أن لا تكون قد فهمت أي شيء قلناه عن ما تفعله القيمة _top و القيمة _parent في حال تم وضعهما كقيمة للخاصية target لأنك لم تقم حتى الآن بتعريف صفحة بداخل تقوم بعرض صفحة أخرى. قد لا تحتاج إلى استخدام القيمتين _top و _parent طوال حياتك و لكن في حال احتجتهما يوماً فإنك ستكون حينها قد علمت سبب الحاجة لهما و ما معنى عرض صفحة بداخل صفحة. لذا الآن لا تتعب نفسك بمحاولة معرفة الفارق بينهما. في المثال التالي قمنا بإضافة رابط في الفقرة عند النقر عليه يتم توجيه المستخدم للصفحة الرئيسية في موقع هرمش. مثال
جرب الكود إضافة رابط كزر في حال أردت وضع الرابط كزر بدل وضعه كنص, يمكنك وضعه بواسطة الوسم <button> على هذا النحو <buttononlclick="document.location='url'">text</button>.
في المثال التالي قمنا بإضافة رابط كزر عند النقر عليه يتم توجيه المستخدم للصفحة الرئيسية في موقع هرمش. مثال
جرب الكود إضافة رابط كصورة في حال أردت وضع الرابط كصورة بدل وضعه كنص, يمكنك وضعه رابط عادي بواسطة الوسم <a> و بداخله تقوم بوضع الصورة التي تريد فتج الرابط عند النقر عليها. ستتعلم كيفية التعامل مع الصور في درس خاص و لكن الآن عليك معرفة أنه لوضع صورة نستخدم الوسم <img> على هذا النحو <imgsrc="image_url"/>. مكان الكلمة image_url نضع رابط الصورة التي سيتم عرضها. في المثال التالي قمنا بإضافة صورة عند النقر عليها يتم توجيه المستخدم للصفحة الأولى في دورة HTML. مثال
جرب الكود تعامل المتصفح مع محتوى الروابط عندما تحاول الدخول لأي رابط بواسطة المتصفح فإنه سيتصرف بشكل مناسب على حسب نوع المستند الذي يشير له الرابط. ركز جيداً فيما ذكرناه هنا لأنك ستحتاجه في المستقبل, و ننصحك بتجربة الدخول للروابط الموضوعة في الأمثلة حتى تفهم كيف يتعامل المتصفح مع الملفات. 1- روابط صفحات ويب إذا وجد المتصفح أن الرابط هو رابط لملف إمتداده .html فإنه يعرض لك نتيجة الكود الموجود فيه, أي يعرضه لك كصفحة ويب عادية. مثال: عند النقر على هذا الرابط سيتم فتح الصفحة الأولى في دورة "تعلم الكتابة" بجانب الصفحة الحالية. 2- روابط صور إذا وجد المتصفح أن الرابط هو رابط لصورة فإنه يعرضها لك كما هي في الصفحة. مثال: عند النقر على هذا الرابط سيتم عرض صورة شعار موقع هرمش بجانب الصفحة الحالية. 3- روابط ملفات نصية إذا وجد المتصفح أن الرابط هو رابط لملف نصي إمتداده .txt أو .css أو .js أو أي نوع آخر من الملفات النصية فإنه يعرض لك النص الموجود فيه كما هو. مثال: عند النقر على هذا الرابط سيتم عرض محتوى ملف جافاسكريبت بجانب الصفحة الحالية. 4- روابط ملفات غير نصية إذا وجد المتصفح أن الرابط هو لبرنامج أو لملف لم يستطع التعرف على نوعه, فإنه لن يتمكن من عرضه في الصفحة و لذلك سيسألك ما إن كنت تريد تحميله. مثال: عند النقر على هذا الرابط سيقوم المتصفح بفتح صفحة فارغة بجانب الصفحة الحالية سيسألك ما إن كنت تريد تحميل ملف مضغوط إسمه harmash-log.zip أم لا. |
11-26-2020 | #2 |
إدارة قناة اليوتوب |
رد: Html الروابط الله يجزاك كل خير على مجهودك... ويجعل الأجر الأوفر بميزان حسناتك... لاعدمنا كل مايخطه قلمك في شعاع خالص التحيات والتقدير،، |
|
مواقع النشر (المفضلة) |
(مشاهدة الكل) عدد الذين شاهدوا هذا الموضوع : 3 : | |
, , |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
Html الإقتباسات | إسمهان الجادوي | تعليم لغة HTML | 1 | 11-08-2020 10:23 PM |
Html العناوين | إسمهان الجادوي | تعليم لغة HTML | 0 | 11-08-2020 09:50 AM |
Html المحررات | إسمهان الجادوي | تعليم لغة HTML | 0 | 11-07-2020 02:29 PM |
(شرح) طريقة فحص الروابط من الفايروسآت | دلال إبراهيم | شعاع عالم الحاسوب والابداع | 3 | 11-11-2017 01:21 PM |
شرح طريقة حذف الروابط من المواضيع المنقولة :مهم جداً للجميع | إسمهان الجادوي | شعاع الشرح والحلول | 9 | 03-09-2014 11:33 AM |