عالم التصميم والبرمجة عالم التصميم والبرمجة
random

آخر الأخبار

random
جاري التحميل ...

أساسيات لغة HTML | الدرس التاسع(خاصية name في الروابط)

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

خاصية name تستخدم مع الروابط لتسهيل تصفح المواقع بحيث تسهل التنقل في الصفحة ، فعندما تكون البيانات كثيرة في الصفحة الواحدة توضع روابط معينة في أسفل الصفحة مثلا ، وبمجرد أن يضغط المستخدم على رابط ينقله بسرعة إلى أعلى الصفحة أو إلى مكان محدد في وسط الصفحة ، على حسب ماحدده المصمم.

سننشئ ملفا طويلا نوعا ما ، وسننشئ فيه عنوانا h1 : وليكن لائحة أعضاء جمعية الرسالة للتنمية الإجتماعية . المهم هو تحويل هذا العنوان إلى رابط عن طريق العلامة a وسنضع له خاصية name ونضع لها أي إسم وليكن مثلا head .

وبعد ذلك ننشئ قائمة منقطة ul وبداخلها li ونكتب أسماء الأعضاء:


سنتعلم الآن حركة جميلة جدا ، سننشئ داخل كل li الواضحة في الصورة ul جديدة وبداخلها إثنان li ، ونضع في الأولى سن العضو وفي الثانية مهنته ، وهذا سيطيل الصفحة أكثر :


نفعل هذا مع كل li وكل الأعضاء حتى يظهر مع كل عضو سنه ومهنته ، والنتيجة ستكون كالتالي:


والآن سننشئ رابط في أسفل الصفحة ونضع بداخله صورة ، بمجرد الضغط عليها تعيد المستخدم إلى أول الصفحة :


هذه المرة استخدمنا خاصية href ووضعنا لها القيمة # زائد قيمة الخاصية name التي وضعناها للرابط الذي أنشأناه في البداية ، والنتيجة ظهور صورة في أسفل الصفحة تعيد المستخدم إلى الأعلى إذا ضغط عليها:


ويمكنك إنشاء أكثر من رابط مع الخاصية name في أماكن مختلفة من الصفحة ، وإنشاء نفس العدد في أسفل الصفحة مع الخاصية href تأخذ القيمة # مع قيمة name أحد تلك الروابط لتسهل على المستخدم التنقل في الصفحة.

نحن سننشئ رابطين واحد في الأعلى بعنوان لائحة الذكور ، وواحد في الوسط بعنوان لائحة الإناث ، ورابطين في أسفل الصفحة واحد ينقل إلى الأعلى والثاني ينقل إلى الوسط والأمر بسيط جدا بنفس طريقة المثال السابق.

الرابط الأول:


 الرابط الثاني في الوسط:


الرابطين في الأسفل:


وهكذا إذا ضغط المستخدم على رابط لائحة الذكور نقله إلى أعلى الصفحة ، وينتقل إلى وسط الصفحة إذا ضغط على لائحة الإناث.

دمتم في رعاية الله وحفظه.

عن الكاتب

Abdellah Yassine

التعليقات






اتصل بنا

إذا أعجبك محتوى مدونتنا نتمنى البقاء على تواصل دائم ، فقط قم بإدخال بريدك الإلكتروني للإشتراك في بريد المدونة السريع ليصلك جديد المدونة أولاً بأول ، كما يمكنك إرسال رساله بالضغط على الزر المجاور ...

جميع الحقوق محفوظة

عالم التصميم والبرمجة