بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله
الدرس السادس
links الوصلات التشعبية التي تمثل حلقات الوصل بين الملايين من مواقع الانترنت أو الشبكة العنكبوتية.
في هذا الدرس إن شاء الله سنتعلم كيفية إدراج الوصلات التشعبية .
هناك عدة خيارات للوصلات التشعبية:
1- منها أن تكون الوصلة لموقع آخر
2- أو أن تكون لصفحة أخرى داخل الموقع نفسه.
3- ومنها أن تكون لمكان آخر في نفس الصفحة (إلى أعلى أو أسفل على سبيل المثال)
4- أو أن تكون وصلة لعنوان بريد إلكتروني e-mail
وفي جميع الحالات فإن المبدأ واحد لكن تختلف في بعض التفاصيل.
الوسم الأساسي لإدراج الوصلات التشعبية:
<a> ... </a>
اختصار لكلمة anchor. وتتطلب إضافة خصائص معينة من أهمها:
href
لتحديد الموقع الذي نريد الدلالة عليه، ويجب أن يكتب عنوان الموقع كاملاً.
أولاً: إدراج وصلة تشعبية تشير إلى موقع خارجي.
مثال: موقع بوابة الحرمين: http://www.alharamain.gov.sa
في هذه الحالة يتم كتابة الشيفرة بالشكل التالي:
كود بلغة HTML:
<a href="http://www.alharamain.gov.sa"> </a>
لكن بقي شيء واحد وهو العبارة أو الكلمة التي التي تظهر للزائر وبالنقر عليها يتم تشغيل الوصلة، وهذه يجب أن توضع بين الوسمين < a/> ... <a>. أي لكي تكتمل الوصلة السابقة يجب أن نكتب معها أي عبارة حتى ينقر عليها الزائر فتنقله إلى العنوان المطلوب.
سنضيف عبارة: إلى بوابة الحرمين والتي تصبح الشيفرة معها بالشكل التالي:
كود بلغة HTML:
<a href="http://www.alharamain.gov.sa"> إلى بوابة الحرمين</a>
ويمكن أيضًا أن نستخدم صورة أو (زر) كبديل عن الكلمات :
كود بلغة HTML:
<a href="http://www.alharamain.gov.sa"><img src=" hrmin.png"></a>
والنتيجة ظهور الصورة التالية كوصلة تشعبية لموقع بوابة الحرمين:
وبشكل عام فإن أي شيء يوضع بين الوسمين <a> ... </a> سوف يكون الوسيلة أو العنوان الذي ينقلنا إلى الموقع المشار إليه في الوصلة التشعبية، سواءً كان هذا الشيء نصاً أو صورة أو كلاهما معاً.
تنبيه:
في الأمثلة السابقة لم نحدد صفحة معينة من الموقع المراد ؛ لذلك سيقوم المتصفح تلقائيا بالبحث عن صفحة باسم index ؛ لأن معظم المتصفحات تفترض هذا الإسم لصفحة البداية.
خاصية الإطار border
عند إدراج صورة كوصلة تشعبية يظهر حولها إطار سمكه 2 بيكسل هذا في الحالة الإفتراضية. ويمكن إزالته بكتابة الخاصية border="0" أو تكبيره border="6" ضمن وسم الصورة.
كود بلغة HTML:
<a href="http://www.alharamain.gov.sa "><img src="hrmin.png" border="0"></a>
ثانيًا:
أن تشير الوصلة التشعبية (صورة أو نص) إلى ملف موجود في نفس الموقع (أي ملف محلي) سواءً كان ملف html أو صورة أو غير ذلك.
هذه وصلة تشعبية تقودنا إلى الصفحة الرئيسية لهذا الموقع
والملف الذي يحتوي الصفحة الرئيسة في مواقع الانترنت اسمه index.*:
كود بلغة HTML:
<a href="http://www.alharamain.gov.sa/index"><img src="hrmin.png" border="0"></a>
تنبيه
إذا كان الملف المطلوب والذي تريد الإشارة إليه موجوداً في مجلد مختلف عن المجلد الذي يوجد به الملف الحالي، فيجب عليك تحديد المسار الكامل لهذا الملف وذلك بنفس الطريقة التي ناقشناها في الدرس السابق عندما قمنا يإدراج الصور.
ثالثًا:
هي أن نقوم بالإشارة إلى مكان آخر داخل نفس الصفحة.
من أجل ذلك نقوم بتعريف أو تسمية هذا المكان بإسم معين، سنتخدمه لاحقًا في الوصلة التشعبية. هنا نستخدم الخاصية الاسم .name
مثال: سندرج وصلة تشعبية تقوم بنقل الزائر إلى بداية (أعلى) الصفحة ونهاية الصفحة (أسفل). الكود الأول يكتب في نهاية الصفحة ، أما الثاني فيكتب في أول الصفحة.
هذا الجزء يكتب في أول الصفحة بعد الوسم <body>
كود بلغة HTML:
<a name="bot">
<center>
<a href="#top">أسفل</a>
</center>
--------------------------
كود بلغة HTML:
<a name="top">
<center>
<a href="#bot">أعلى</a>
</center>
هذا الجزء يكتب في آخر الصفحة قبل الوسم <body/>
الآن نقوم بإدراج وصلات تشعبية إليها من أي مكان في هذا الملف، بل ومن أي ملف آخر، وأيضا من أي موقع آخر بشرط أن تُعرف بنفس الإسم الذي عرّفناها به.
والآن سنقوم بإدراج الوصلة التشعبية. ويجب:
- معرفة اسم الملف ( لأنه من خلاله سنصل إلى الهدف المطلوب.
اسم الملف#أسفل=index.html#bot
كود بلغة HTML:
<a href="index.html#bot">الفقرة الأخيرة</a>
وأخيرًا .. سنتعلم كيفية إدراج وصلة تشعبية لعنوان بريد إلكتروني، حيث يظهر برنامج البريد الإلكتروني للزائر بشكل تلقائي.
نكتب كلمة mailto بعد خاصية href للدلالة على أن العنوان الذي يلي هو عنوان email
كود بلغة HTML:
<a href="mailto:aaa@gmail.com">اتصل بنا</a>
توضيحات:
لكن هنا مجالات عديدة لاستخدام الإنترنت ولكل منها بروتوكوله الخاص. فمثلاً:
- للإنتقال إلى موقع ويب نكتب كلمة http : وهوبروتوكول مستخدم في الاتصال بهذا الموقع، (بروتوكول نقل النصوص المتشعبة hypertext transfer protocol )
- وعند كتابة عنوان email نستخدم كلمة mailto قبل العنوان.
- وهناك بروتوكول خاص لنقل الملفات يدعى ftp (file transfer protocol).
إليك هذا العنوان لأحد المزودات التي يحتوي على الكثير من البرامج المجانية أو المشتركة
ftp://ftp.simtel.net/pub/simtelnet/win95/
وكل ما عليك فعله هو كتابة الشيفرة التالية:
كود بلغة HTML:
<a href="ftp://ftp.simtel.net/pub/simtelnet/win95/">simtel ftp server</a>
وسوم إضافية لتنسيق صفحة الويب
من الوسوم العامة والخصائص الإضافية للوسوم التي ذكرت سابقاً. والهدف من معظمها ترتيب الصفحة والتحكم بشكل محتوياتها.
* المسطرة الأفقية horizontal rule وعبارة عم خط تستطيع إدراجه لتقسيم صفحتك بكتابة الوسم < hr> فقط لا غير.
- لتحديد سُمك هذا الخط نضيف له الخاصية size مثلاً:
كود بلغة HTML:
<hr size="5">
- ولتحديد عرض الخط نستخدم الخاصية width إما أن تأخذ قيمة مطلقة أو نسبية
كود بلغة HTML:
<hr width="400">
كود بلغة HTML:
<hr width="80%">
- ومن الخصائص الأخرى لهذا الخط خاصية المحاذاه align والتي تأخذ القيم center, left, right
كود بلغة HTML:
<hr width="80%" align="center">
- ويلاحظ أن الخط يكتسب مظهراً غائراً ثلاثي الأبعاد وإذا أردت خطاً عادياً غير غائر فقم بإضافة الخاصية noshade
كود بلغة HTML:
<hr size="5" width="60%" align="center" noshade>
- لاختيار اللون نستخدم الخاصية color :
كود بلغة HTML:
<hr size="5" width="60%" align="center" color="#ff0000" noshade>
* نذكر الوسم <br> والذي يقوم بالتحكم في نهايات الأسطر ، سنتعرف على خاصية لهذا الوسم وهي clear.
عمل الخاصية clear في منع النص من الإلتفاف على أي من جانبي الصورة.
وهي تأخذ القيم right التي تمنع ظهور النص والتفافه على الجهة اليسرى للصورة، وبالتالي فإن هذه القيمة تستخدم عندما تكون قيمة align للصورة هي right.
وبنفس المبدأ لكن بصورة معكوسة نستخدم القيمة left والتي في نتيجتها تمنع إلتفاف النص على الجهة اليمنى من الصورة. وذلك عندما تكون محاذاة الصورة هي left
وباستخدم القيمة all التي تمنع الإلتفاف من جميع الجوانب.
* لعرض أحد الأسطر بحيث لا ينقسم مهما كان مقدار الإستبانة Resolution وعرض النافذة في المتصفح.
سنضيف هذا السطر ضمن الوسوم
<nobr> ... </nobr>
وهي إختصار لـِ no break أي (لا إنقسام).
للأزرار:
* http://www.aaa-buttons.com/
* http://www.pavovision.com/chic/gen_buttons_3d.html
* هنا http://dabuttonfactory.com اختر output type> css background حتى تظهر الكتابة باللغة العربية .
* ربما سمعتم بمصطلح thumbnail ؟
يعني "ظفر الإبهام". والمقصود أن الصورة صغيرة جداً ، لكنها تؤدي إلى عرض صورة بحجم أكبر عند النقر عليها. لذلك قد يكون المصطلح الأنسب لوصفها هو "العيّنة".
والحقيقة أن استخدام العينات مفيد وعملي جداً في المواقع التي تحتوي على العديد من الصور؛ لأن هذا يؤدي إلى تقليل الزمن اللازم لتحميل الصفحات وتجنب ضياع الوقت بانتظار ظهور الصور الأصلية كبيرة الحجم.
كيف نعمل مثل هذه العينات؟
من خلال تصغير أبعاد الصور الأصلية إلى النسبة المطلوبة ، باستخدام أحد برامج معالجة الرسوم وهي كثيرة وفي الويندوز microsoft office picture manager.
لنتذكر أن (width, height) خصائص تستخدم لتحكم بحجم الصور وعرضها بحيث تبدو مصغرة ، لذلك عند تحميل الصورة نجد أن الأبعاد الأصلية لازالت كما هي.
كود بلغة HTML:
<a href="http://www.afaqattaiseer.com/vb/uploaded/2620_01346665755.jpg" target="_blank"><img src="holyquran.jpg" width="90" height="85"></a>
كود بلغة HTML:
<a href="http://www.afaqattaiseer.com/vb/uploaded/2620_11346665755.jpg" target="_blank"><img src="ulamaa.jpg" width="90" height="85"></a>
~ * ~ CSS ~ * ~
أولاً:
مر علينا في درس سابق كيفية استخدام الأنماط في تنسيق الوصلات التشعبية ونذكر هذا المثال:
كود:
<style type="text/css">
a:link {
COLOR: #0000FF;
}
a:visited {
COLOR: #800080;
}
a:hover {
COLOR: #FF0000;
}
a:active {
COLOR: #00FF00;
}
</style>
ثانيًا:
بفضل الله ، تعلمنا في الدرس الرابع كيفية إزالة الخط الإفتراضي للوصلات التشعبية:
" (يستخدم في إزلة الخط الإفتراضي تحت الوصلات التشعبية) text-decoration:none "
الواجب التطبيقي (8):
- وصلة تشعبية تقوم بنقل الزائر إلى بداية (أعلى) الصفحة ونهاية الصفحة (أسفل)
- استخدام text-decoration:none لإزالة الخط الإفتراضي للروابط التشعبية
- تنسيق الرواب ط التشعبية باستخدام الأنماط css
- استخدام صورة كوصلة تشعبية.
وفقكم الله
الحمدلله
اللهم صل وسلم على نبيك ورسولك محمد وعلى آله وصحبه أجمعين
16 ذو الحجة 1433هـ/31-10-2012م, 06:21 AM
(6) الدرس السادس: كيفية إدراج الوصلات التشعبية
العرض العادي
