ابحث فى المدونة

أحدث المواضيع

تعلم و احترف HTML فى 14 يوم
اليوم السادس
الوصلات التشعبية 
 LINKS

ختمنا اليوم السابق بكلمة LINKS  او الوصلات التشعبية و هى روح الانترنت و اذا كان الانترنت بمجمله هو الشبكة العنكبوتية فان هذه الوصلات هى الخطوط التى تشكل هذه الشبكة و تؤلف حلقات الاتصال بين الملايين من مواقعها . تنقر على وصلة ما فتنقلك الى صفحة اخرى من الموقع او قد تنقلك الى موقع اخر مختلف تماما . و وصلة تجعلك تحمل ملف و اخرى تعرض لك صورة و هكذا.........

اذا هيا الى العمل .
 كما اشارنا سابقا يوجد العديد من انواع الوصلات التشعبية منها ان تكون الوصلة لموقع اخر او تكون لصفحة فى نفس الموقع او تكون عنوان بريد الكترونى E-mail  و فى جميع الحالات المبدأ واحد و لكن تختلف بعض الاختلافات البسيطة .
سوف نناقش كل حالة على حدة.
الوسم الاساسى لادراج اى وصلة تشعبية هو A  ويكتب كالاتى :
<A>...........</A> 
وهو اختصار لكلمة Anchor و لها خصائص معينة اولهم Href  و هى نحدد من خلالها الموقع الذى نريد الدلالة عليه و يجب ان يكتب عنوان الموقع كامل .

الحالة الاولى :ادراج وصلة تشعبية تشير الى موقع خارجى .
مثلا اذا قمنا بادراج وصلة تشعبية الى Google و عنوانه  http://www.google.com
 <a href="http://www.google.com">
go to google
</a>
و ستظهر الوصلة كالاتى : 
او 
go to<a href="http://www.google.com">
google
</a> 
و النتيجة :
go to google  
 او يمكن صورة بدل النص و يكون كالاتى :
<a href="http://www.google.com">
<img src="logo.jpg">
</a>
  بشكل عام اى كان ما يكتب بين الوسمين A فسيكون اشارة او وسيلة تنقلنا الى الموقع المشار اليه فى الوصلة التشعبية .
و يمكن تطبيق كافة الخصائص التى تعلمناها فى الصور هنا ايضا (جرب بنفسك ).
الحالة الثانية : وهى ان تشير الوصلة التشعبية الى ملف موجود فى نفس الموقع سواء كان ملف html او صورة او غير ذلك . و فى هذه الحالة فان ما يكتب مع الخاصية href هو اسم الملف المطلوب الوصول اليه .
لنقم بانشاء وصلة تشعبية تقودنا الى الصفحة الرئيسية لهذا الموقع و لنفترض ان الملف الذى يحتويها اسمه index.html  و الشيفرة الخاضة بذلك هى :
<a href="index.html">main page</a>
                              main page
و اذكرك انك تستطيع ادراج صورة كعنوان للوصلة التشعبية و بنفس التفاصيل التى تعلمتها من قبل .
مثال على ذلك :
<a href="index.html">
<img src="image.jpg" border="5">
</a> 

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

الحالة الثالثة : هى ان نقوم بالاشارة الى مكان اخر داخل نفس الصفحة الى اولها او الى اخرها او اى مكان اخر نريده
المبدأ هنا هو ان تقوم بتعريف او تسمية هذا المكان باسم معين سوف تقوم لاحقا باستخدامه فى الوصلة التشعبية و فى هذه الحالة نستخدم الخاصية name .
لنقم معا بادراج وصلة تشعبية تقوم بنقل الزائر من مكان وجود الوصلة الى فقرة اخرى
اول ما يجب فعله هو الذهاب الى هذه الفقرة و اختيار اول كلمة فيها ثم و ضعها داخل الوسوم <a>......</a>
<a>links</a>
و الان حان الوقت لاستخدام خاصية name فالخطوة الثانية هى تعريف هذه الكلمة باى اسم نريده
<a name="attrib1">links</a>
لقد اصبحت هذه الفقرة جاهزة لكى نقوم بادراج وصلات تشعبية اليها من اى مكان فى الملف , بل ومن اى ملف اخر ......و اكثر من ذلك انه اذا اراد احد ما فى احد المواقع الاخرى ان يضع وصلة تشعبية لها من موقعه فان باستطاعته ذلك شرط ان يعرف الاسم الذى عرفناها به و هذا ليس صعبا بالطبع .
الخطوة الثالثة : هى ادراج الوصلة التشعبية لهذه الفقرة.
و يلزمنا هنا معرفة اسم الملف الذى توجد به هذه الفقرة و اسمه file.html لانه سيشكل المدخل الاساسى للوصول الى الفقرة المحددة . و تكون شيفرة الوصول الى هذه الفقرة هى كالاتى :
<a href="file.html#attrib1">1st paragraph</a>
  1st paragraph
الحالة الاخيرة : و التى نقوم فيها بادراج وصلة تشعبية لعنوان بريد الكترونى , ويؤدى النقر عليها الى اطلاق برنامج البريد الالكترونى للزائر بشكل تلقائى . فالاختلاف الوحيد الذى يطرأ هنا هو كتابة كلمة MAILTO بعد خاصية HREF لكى تدل على ان العنوان الذى يليه هو عنوان EMAIL و ليس عنوان اخر
<A HREF="MAILTO:ANYONE@YAHOO.COM">
EMAIL ME
</A>

  EMAIL ME
و الان نكون قد انتهينا من سرد اساسيات استخدام الوصلات التشعبية و ادراجها فى صفحات الويب . و فى الغد سنتعلم امر جديد و هو الجداول .

0 comments:

data: commentLabel/
Related Posts Plugin for WordPress, Blogger...