زهير طه

63

7,360

دورة البرمجة بلغة html الدرس 2: الروابط



بداية ً أذكركم بصفحة تجريب الأكواد الخاصة بنا على الرابط التالي:
http://www.tahasoft.com/code.htm

الروابط التشعبية في لغة Html ( الوسم a )


لو أردنا إنشاء زر يذهب إلى صفحة ما أو إلى موقع ما مثل الزر التالي
اضغط هنا
فإن الوسم الخاص بعمل هذا هو a ويكتب الكود كالتالي:
اضغط هنا

لاحظ طريقة كتابة الكود كالتالي:
بعد وسمة a و في داخلها نضع الخاصة href و هي لوضع الرابط الذي سيتم الانتقال له عند الضغط على الزر
وبدلاً من كلمة اضغط هنا يمكنك كتابة أي نص ليتحول إلى زر

ملاحظات هامة ومفاهيم يجب معرفتها:
لاحظ في الكود السابق أننا وضعنا الرابط كالتالي:
http://www.tahasoft.com
إنه من الضروري وضع http في بداية المسار في حال أردنا الزر ينتقل لموقع آخر
أو لمكان غير الذي نحن فيه
- خلينا نفهم المعنى العام لهذه العملية
هناك نوعين من المسارات ( الروابط \ لينك \ url )
المسار المطلق: وهو مسار مختلف عن المكان الذي نحن موجودون فيه
مثل الكود السابق الذكر حيث نريد للزر أن يذهب إلى الرابط www.tahasoft.com ونحن مثلاً في موقع آخر أو أي مكان آخر
المسار النسبي : وهو رابط للصفحة بحيث تذهب إلى صفحة قريبة من صفحة العمل
ليكن لدينا مجلد فيه الصفحتين التاليتين :



و نريد وضع زر في الصفحة index اسمه راسلني يقوم بفتح الصفحة sendme.htm
مع ملاحظة أن كلاهما في مجلد واحد أي بجوار بعضهم
عندئذ نكتب الكود كالتالي:
راسلني


مثال آخر لتوضيح الفكرة أكثر:
ليكن لدينا الملف Index.htm و بجواره مجلد اسمه programs

وداخل المجلد programs يوجد ملف اسمه kaspersky.zip

و الآن نريد وضع زر بداخل الصفحة Index.htm اسمه " تحميل البرنامج " وعند الضغط عليه
يتم تحميل الملف kaspersky.zip
لاحظ توضع الملفات و المجلدات وانظر كيف يكون الكود:
تحميل البرنامج

ملاحظة :
لاحظ في كتابة المسارات كيف نضع إشارة / بين المسارات في برمجة الويب
على عكس جهة الاشارة \ في داخل مجلدات ويندوز

طريقة فتح الروابط:
يوجد عدة طرق لفتح الروابط مع الوسم a
للناقش الكود التالي :
طه سوفت

عند الضغط على زر طه سوفت سيفتح موقع www.tahasoft.com في نفس الصفحة التي نحن فيها
ولكن ماذا لو أردنا أن نجعل الزر عند الضغط عليه يفتح الموقع tahasoft.com في صفحة مستقلة ( أو تبويب جديد tab ) في مستعرض الانترنت
لعمل ذلك نضيف الوصف target إلى الكود كما يلي:
كود الروابط في صفحة مستقلة:
طه سوفت

أكيد أنتم تجربون الأكواد معي خطوة بخطوة أليس كذلك
للخاصة target أشكال أخرى نناقشها ان شا ءالله لاحقاً مع الاطارات
طريقة إنشاء رابط لإرسال بريد الكتروني:
لنرى الكود فوراً
راسلنا

هذا الكود يقوم بإنشاء زر اسمه راسلنا وعند الضغط عليه يفتح برنامج outlook ليرسل رسالة
إلى الإيميل المذكور [email]zuhairtaha@hotmail.com[/email]
لتغييره فقط غير البريد و عنوان الزر
حيث أن الصفة mailto: هي التي جعلت الرابط يفهم أنه مخصص لإرسال بريد الكتروني

ملاحظة : يمكن وضع عنوان افتراضي للرسالة في الكود السابق فيصبح كما يلي:
راسلني

استبدل كلمة العنوان بالنص الذي ترغب بظهوره كعنوان أساسي للرسالة
على فكرة الطريقة هذه لإرسال بريد الكتروني طريقة قديمة و متعفنة و الطريقة الأفضل هي بوضع
حقول يضع فيها المرسل رسالته و يضغط على زر اسمه ارسال فترسل الرسالة
و سنرى هذه الطريقة لاحقاً في دروس php

نكتفي بهذا القدر حتى لا نثقل عليكم و سأجعل الدروس بشكل عام قصيرة حتى يسهل متابعتها ان شاء الله انتظروني غداً أو بعد غد في الدرس القادم
أي استفسار نحن في الخدمة

التعليقات (8)

abubkir     
مشكور أخي
وهذا التطبيق ما رأيك
زوروا موقعي


راسلني
أحمد حلمي     
مشكور ، جزاك الله خيراً ، بارك الله بك ، الله يعطيك العافية .
استفدت من الدروس كثير بفضل الله تعالى
أنس الجابي     
الله يخليلنا ياكون عمي زهير
فلسطيني وافتخر     

درس سهل مشكور يا معلم

الى الامام

ابو حماد     
جزاك الله كل خير
حسن صحارى     
شكراً معلم
مشي الحال انشاء الله
بارك الله فيك
"http://www.tahasoft.com">طه سوفت


[url="http://www.tahasoft.com/vb/"][/url]
حسن صحارى     
مشكووووووووور معلم الدرس كتير سهل ورائع جداً
بس عندي هون استفسار

الروابط التشعبية في لغة Html ( الوسم a )

لو أردنا إنشاء زر يذهب إلى صفحة ما أو إلى موقع ما مثل الزر التالي
اضغط هنا

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