أهلاً وسهلاً بك إلى الدرس السادس من دروس HTML
كيف وصلت إلى هذه
الصفحة؟! ربما تعتبر هذا السؤال هو من البديهيات ...
وهذا صحيح! من المؤكد أنك قمت بالإنتقال إلى هنا من خلال إحدى صفحات هذا الموقع،
، اي بالنقر على ارتباط تشعبي ما.
Links ...أو الروابط
التشعبية هي روح الإنترنت. وإذا كانت الإنترنت بمجملها هي شبكة العنكبوت فإن هذه
الارتباطات هي الخيوط التي تشكل هذه الشبكة وتؤلف حلقات الوصل بين الملايين من
مواقعها. تنقر على ارتباط ما فينقلك إلى صفحة أخرى في نفس الموقع... وتنقر على ارتباط
أخرى لينقلك كلياً إلى أحد المواقع في الجانب الآخر من العالم... الاتباط يجعلك
تحمّل ملفاً وأخر يجعلك تشغّل مقطعا موسيقياً وثالث يعرض لك صورة...
حسناً،
من المؤكد أنك استنتجت الآن من هذه المقدمة أنك بصدد تعلم كيفية إدراج الارتباطات
التشعبية في صفحاتك... لذا هيا إلى العمل...
هناك عدة خيارات للارتباطات التشعبية، منها أن يكون الارتباط
لموقع آخر، أو أن يكون لصفحة أخرى داخل الموقع نفسه، ومنها أن يكون لعنوان بريد
إلكتروني E-mail وفي جميع الحالات
فإن المبدأ واحد لكن تختلف بعض التفاصيل. وسوف أناقش معك كل حالة على حدة
وبالتفصيل.
نستخدم الوسوم
<A> ... </A>
كوسوم أساسية لإدراج الارتباطات التشعبية، وهي اختصار لكلمة
Anchor. وهي لا تعمل لوحدها بل تتطلب
إضافة خصائص معينة أولها وأهمها الخاصية
HREF
التي نحدد من خلالها الموقع الذي نريد الدلالة عليه، ويجب
أن يكتب عنوان الموقع كاملاً.
الحالة الأولى: إدراج ارتباط تشعبي يشير إلى موقع
خارجي.
لنقم بإدراج ارتباط تشعبي إلى أحد المواقع العراقية الرائدة والرائعة،
وهو موقع الشركة العامة لخدمات الشبكة الدولية للمعلومات (اوروك) . وعنوانه http://www.uruklink.net في هذه الحالة يتم كتابة الشيفرة بالشكل
التالي:
<A
HREF="http://www.uruklink.net"> </A>
لكن بقي شيء واحد وهو العبارة أو الكلمة التي سيتم النقر
عليها لتشغيل الوصلة، وهذه يجب أن توضع بين الوسمين <A> ... </A>. أي لكي يكتمل الارتباط السابق يجب أن
نكتب معها أي عبارة نريدها، لكي ينقر عليها الزائر فتنقله إلى العنوان المطلوب.
ما رأيك بعبارة: الانتقال الى موقع اوروك والتي
تصبح الشيفرة معها بالشكل التالي:
<A
HREF="http://www.uruklink.net">الانتقال الى موقع اوروك</A>
وتظهر الوصلة كما يلي:
الانتقال الى موقع اوروك
لم تعجبك؟ ليس ذلك مشكلة فأنت تستطيع كتابة أي شيء تريده
كعنوان للوصلة التي تريدها. ما رأيك لو جعلنا كلمة اوروك هي فقط العنوان لهذا الارتباط.
Go To <A
HREF="http://www.uruklink.net">اوروك</A>
الانتقال الى موقع اوروك
بل إنك تستطيع إدراج صورة أو (زر) كبديل عن الكلمات -كما
تشاهد في الكثير من المواقع المنتشرة على الانترنت- وكل ما عليك فعله في هذه الحالة هو كتابة الوسم
الخاص بإدراج الصورة بين الوسمين <A>
... </A> بالشكل التالي:
<A
HREF="http://www.uruklink.net"><IMG SRC="uruklink.gif"></A>
والذي يؤدي إلى ظهور الصورة التالية كوصلة تشعبية لموقع
الشركة العامة لخدمات الشبكة الدولية للمعلومات
وبشكل عام فإن أي شيء يوضع بين الوسمين <A> ... </A> سوف يكون
الوسيلة أو العنوان الذي ينقلنا إلى الموقع المشار إليه في ارتباط تشعبي،
سواءً كان هذا الشيء نصاً أو صورة أو كلاهما معاً.
والآن هل تلاحظ الإطار الظاهر حول الصورة؟ عند
إدراج صورة كارتباط تشعبي يظهر حولها إطار سمكه 2 بيكسل وهذه هي الحالة
الإفتراضية. وبالطبع نستطيع إزالته بكتابة الخاصية BORDER="0" ضمن وسم الصورة.
<A
HREF="http://www.uruklink.net"><IMG SRC="uruklink.gif"
BORDER="0"></A>
أو حتى تكبيره بكتابة السمك المطلوب مع هذه الخاصية.
<A
HREF="http://www.uruklink.net"><IMG SRC="uruklink.gif"
BORDER="6"></A>
ننتقل الآن إلى الحالة الثانية، وهي أن تشير ارتباط
تشعبي إلى ملف موجود في نفس الموقع
(أي ملف محلي) سواءً كان ملف HTML أو صورة أو غير ذلك. وفي هذه الحالة
فإن ما يكتب مع الخاصية HREF هو اسم
هذا الملف المطلوب الوصول إليه.
لنقم بإنشاء ارتباط تشعبي يقودنا إلى
الصفحة الرئيسية لهذا الموقع وبالمناسبة فإن الملف الذي يحتويها اسمه START.HTM ، والشيفرة الخاصة بذلك هي:
<A HREF="START.HTM">الصفحة الرئيسية</A>
الصفحة الرئيسية
وأذكرك بأنك تستطيع إدراج صورة هنا أيضاً كعنوان للارتباط
التشعبي وذلك بنفس التفاصيل التي شرحتها في الحالة السابقة.
هيا ندرج صورة مصغرة كعنوان لوصلة تشعبية للصورة الأصلية.
<A
HREF="babel.gif"><IMG SRC="babel.gif" BORDER="0"></A>
في هذا المثال قمت بتحديد الصورة المصغرة المسماه babel.gif كوصلة تشعبية تصلنا إلى
الصورة الأصلية المسماه babel.gif
لكن إنتبه
إذا كان
الملف المطلوب والذي تريد الإشارة إليه موجوداً في مجلد مختلف عن المجلد الذي
يوجد به الملف الحالي، فيجب عليك تحديد المسار الكامل لهذا الملف وذلك بنفس
الطريقة التي ناقشناها في الدرس السابق عندما قمنا يإدراج الصور.
أما الحالة الأخيرة والتي نقوم فيها بإدراج ارتباط تشعبي لعنوان بريد إلكتروني،
يؤدي النقر عليها إلى إطلاق برنامج البريد الإلكتروني
للزائر بشكل تلقائي. فالإختلاف الوحيد الذي يطرأ هنا هو كتابة كلمة MAILTO بعد خاصية HREF لكي تدل على أن العنوان الذي يلي هو
عنوان EMAIL وليس أي عنوان آخر
<A
HREF="MAILTO:name @ address"> ارسل لي رسالة الكترونية </A>
ارسل لي رسالة الكترونية
أتمنى لك قضاء أسعد الأوقات مع مواقع الإنترنت وارتباطاتها
التشعبية، وأراك في الدرس التالي
إن شاء الله.