دورة HTML5 : عناصر الروابط والروابط الداخلية

10:12 ص غير معرف 0 Comments

دورة HTML5 : عناصر الروابط والروابط الداخلية

عناصر الروابط Hyper Links

توفر لغة HTML آلية للانتقال بين الصفحات المختلفة عبر عناصر الروابط Hyper Links , والروابط عبارة عن نصوص أو صور تنقلك عند النقر عليها من الصفحة الحالية إلى إلى صفحة ويب أخرى, تقوم مستعرضات الويب بتمييز الروابط بعرض "يد صغيرة" كمؤشر للفأرة عند الإشارةإلى أحد الروابط, ويتم إنشاء الروابط بواسطة الوسم <a> , و ال a هذه اختصار لـ Anchor , يتم
تزويد عنصر الرابط بنص يُعرض كمحتوى له أمَّا الموقع الهدف (الذي سيتم الانتققال إليه عند النقر على الرابط)فيتم تزويده للواصفة href والتي هي اختصار لـ Hyper Reference , فلننظر للمثال التالي:

 <html>
 <head>
 <title>
      صفحة اختبار لعناصر الروابط
 </title>
 </head>
<body>
   <a href="http://www.microsoft.com"> مايكروسفت </a><br />
   <a href="http://www.google.com">جوجل </a><br />
   <a href="http://www.msn.com" target="_blank" >MSN</a> <br />
   <a href="firstPage.html" target="_self">أول مثال </a> 
</body> 
</html>

الذي يبدو عند استعراضه بمستعرض الويب كمايلي:

لقد قمنا بتزويد صفحتنا بمجموعة من عناصر الروابط التي تشير إلى بعض المواقع الشهيرة و قد تعمدت في الرابط الأخير ذكر اسم ملف المثال الأول الذي قمنا بإنشائه معاً في بداية هذا الفصل وذلك لتوضيح أن الروابط يمكن أن تكوف مطلقة Absolute (كالثلاثة الأولى)أو نسبية Relative(كالرابط الأخير) و يقصد بالنسبية أن الرابط المذكور يكون عبارة عن مسار Path ملف الصفحةالهدف بالنسبة للصفحة الحالية و في حالتنا فقد كانت الصفحةالهدف firstPage.html في نفس مجلد الصفحة الحالية.
عند النقر على أحد هذه الروابط سيتم الاّنتقال إلى الرابط URL المذكور في الواصفة href المرافقة لعنصر الرابط الذي تم النقر عليه, من الجدير بالذكر أنَّنا قمنا بتزويد بعض الروابط بالواصفة target والتي تحدد مكان عرض الصفحة الهدف في المستعرض بمعنى أنّها تجيب على الأسئلةالتالية:
هل سيتم عرض الصفحة الهدف في نافذة الصفحة الحالية؟ (في هذه الحالة فإن قيمة الواصفة هي القيمة _self )هل سيتم عرض الصفحة الهدف في إطار مستعرض جديدة؟ ( في هذه الحالة فإن قيمة الواصفة _blank ),هل سيتم عرض الصفحة في إطار محدد؟ (في هذه الحالة فإن قيمة الواصفة هي اسم الإطار وسيتم تناول الإطارات بشكل مفصل لاحقاً).
آخر ما يجب ذكره عن الروابط حالياً أنَّه يمكن للرابط أن يشير إلى أي مورد Resource متوفر على الويب و ليس فقط الصفحات, كما يمكن أن يشير الرابط إلى بريد إلكتروني E-Mail وذلك بأن نضع القيمة :mailto قبل البريد الإلكتروني الذي نريد أن نضع رابطاً له, انظر المثال التالي:

 <html>
 <head>
 <title>
      روابط خاصة
 </title>
 </head>
<body>
   <a href="http://www.somesite.com/files/file1.zip"> اضغط لتحميل الملف </a> <br />
   <a href ="mailto:abdallhadagga.com">راسلني</a>
 </body>
</html>

ما سيحدث عند النقر على الرابط الأولى هو ظهور مربّع تحميل الملف Save File Dialog و ماسيحدث عند النقر على الرابط الثاني هو ظهور برنامج مدير البريد الإلكتروني )مثل Outlook Express ( في وضع إرسال رسالة جديدة إلى البريد الإلكتروني المذكور في الرابط.

الروابط الداخليَّة Internal Linking

أحياناً يكون المحتوى الموجود ضمن صفحة معيّنة كبيراً إلى حد ما و في حالة مثل هذه يصبح الاّنتقال إلى فقرة محددة ضمن الصفحة عملية تستغرق بعض الجهد والوقت, توفِّر لغة HTML آليَّة للانتقال إلى جزء محدد من الصفحة مباشرة عبر ما يعرف بالروابط الداخلية Internal Links

و التي يتم تحقيقها عبر استخدام وسم الرابط <a> و تمرير معرف العنصر المراد الانتقال إليه كقيمة لمواصفة href بالشكل التالي:

 <html>
 <head>
 <title>
    مثال على الروابط الداخليه
 </title>
 </head> 
<body> 
<a href="#Para4">الى الفقرة الرابعة</a>
 <h1>الفقرة الاولى </h1>
 <p>محتوى الفقرة الاولى</p>
 <h1>الفقرة الثانية </h1>
 <p>محتوى الفقرة الثانية</p>
 <h1>الفقرة الثالتة </h1>
 <p>محتوى الفقرة الثالتة</p>
 <h1 id="Para4">الفقرة الرابعة </h1>
 <p>محتوى الفقرة الرابعة </p>
</body> 
</html>

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

المصادر /www.w3schools.com تعلَّمHTML5 & CSS3 (م.مختار صالح)