بيت الكمبيوتر: إحتراف لغة HTML -الدرس الخامس (الروابط واللينكات)

إحتراف لغة HTML -الدرس الخامس (الروابط واللينكات)

السلام عليكم ورحمة الله , اللهم صلّ علي سيدنا محمد وعلي آله وصحبه وسلم , اللهم انا نسألك علماً نافعاً ونعوذ بك من علم بلا عمل , أما بعد ...
تكلمنا في الدرس السايق عن الصور في لغة HTML وتم شرحها بالتفصيل دون ترك أي شئ , وفي هذا الدرس سوف أشرح لك كيف تستخدم الروابط في لغة HTML بكل سهولة و دون مواجهة أي مصاعب بإذن الله , ولا تقلق في لغة HTML في أسهل ما يمكن في عالم البرمجة !

نبدأ علي بركة الله .
وسم الروابط هو وسم زوجي (له بداية وله نهاية) ويكتب بالطريقة التالية

<a>الكلام الذي سيظهر </a>

لكن إنتظر إذا كتبت الكود بهذه الطريقة سيظهر الكلام فقط . دون أن يكون له خاصية الضغط عليه . وكما قلنا سابقاً أن لكل وسم خصائص . ومن أهم خصائص وسم <a> هو الوسم الآتي

<a href="https://www.google.com.eg/">موقع جوجل مصر </a>

نعم ! هي href وبعد ذلك علامة = و "" ونكتب بداخل هاتان العلامتان رابط الموقع الذي سيذهب إليه عن الضغط .

وإذا أردنا أن نجعل الرابط يفتح في صفحة جديدة ؟! هذه هي مهمه Attribute المسمي بالـ target . والآن هيا لنفهم هذا الأمر سوياً

<a href="https://www.google.com.eg/" target="_blank">موقع جوجل مصر </a>

كما رأيت عزيزي المبرمج فإذا وضعت Attribute المعروف بالـ target وبداخله blank مسبوقة بـ _ , يفتح معك الرابط في صفحة جديدة وليس في نفس الصفحة .
والآن وهي الفترة الأذكي في وسم أو tag الروابط المعروف بالـ <a> . !
في أوقات عندما تدخل موفع معين . تلقي رابط للصعود لأعلي . أو رابط لذهاب لمكان معين في الصفحة . دعونا نفهم كيف نفعل ذلك الأمر .
هناك خطوتان .
الأولي : هي تعريف الشئ الذي سيذهب إليه الرابط بـ id .
الثانية : هي أن نجعل هذا الرابط يذهب لهذا الـ id . عند الضغط عليه .

ملاحظة : إذا أردت أن تعمل مسافة سطر بالـHTML عليك بهذا الـ Tag

والآن لنبدأ

<html> <head> <title> مدونة المبرمج </title> </head> <body> <h1id="name">أهلاً بك في مدونة المبرمج </h1> <a href="#name"> الصعود لأعلي </a> </body> </html>

بكده يكون انتهي الكود . والآن هيا لنفهم ماذا فعلنا
كما قلت لك أيها المبرمج أن هناك خطوتان وضع id وعمل وسم رابط يذهب لهذا الـ id وهذا ما فعلناه واضفنا وسم المسافة سطر . ليكون الامر واضح لك .
والآن , بعد ما برمجة الكود وعرضته في المتصفح , ستجد أن عند الضغط علي الصعود لأعلي الموجودة في أسفل الصفحة ستذهب بك إلي الأعلي حيث وسم h1 والمكتوب بداخله أهلاً بك في مدونة المبرمج . ويمكنك عمل أي وسم بدل وسم h1 يمكنك مثلاً وضع صورة . لا يهم ماذا تضع , المهم أن تضع له id .
بكده يكون انتهي الدرس .
صلي الله وسلم علي سيدنا محمد وعلي آله وصحبه أجمعين . دمتم في رعاية الله :) .