٢٠٢٤-١٠-٠٥ ١١:٠٥
الحالة:
العلامات: البرمجة
في هذا الدرس سأتعلم كيفية ادراج الروابط والصور في صفحات, وضع روابط في الصفحات يمكننا من إنشاء مواقع مفيدة بعدة صفحات والتقليب بمحتوى بشكل منظم اكثر واسهل بدلا عن وضع كل المحتوى في صفحة واحدة, مما ينشئ بدوره شبكة الانترنت المترابطة ولهذا يطلق عليها بأسم الشبكة العنكبوتية لترابطها بين محتواها.
لإدراج الروابط علينا استخدام العلامة <a> والتي ترمز الى “anchor” اي ال , وهي لا تستطيع عمل شيئ لوحدها لانها كانت تستخدم للتنقل بين اقسام الصفحة نفسها, اما الان فنستخدمها لوضع الروابط بإضافة وصف “attribute” مثل href الذي يوجه المتصفح الى الرابط المضمن بالوصف.
هناك نوعان من الروابط, الروابط الداخلية النسبية “Relative Links” وروابط الخارجية المطلقة “Absolute Links”, ولقب النوع الأول بالنسبي لان المتصفح سيبحث عن الرابط نسبة الى مسار الملفات المحلي الموجود عنده, واما النوع الاخر لقب بالمطلق لانه موقعه خارجي وثابت ويجب ادراج الرابط كاملا ليجده.
السلوك التلقائي للمتصفحات عند النقر على الروابط هو الانتقال اليها في نفس الصفحة, من الممكن ان نضيف صفة تجعل المتصفح يفتح الرابط في صفحة جديدة, نستخدم الصفة target مع صفة rel لمنع التتبع اثناء التصفح كمعيار امني.
<a href="https://www.theodinproject.com/about" target="_blank" rel="noopener noreferrer">About The Odin Project</a>
هنا سنتحدث عن ادراج الصور في صفحات الويب, ندخل الصور في صفحاتنا بإستخدام العنصر <img>, ويتميز هذه العنصر بإنه عنصر فارغ لانه لا يحتاج الى علامة ختامية <img/>, اذا تعتمد فقط على علامة واحدة وعلي العلامة الافتتاحية, لاكن يجب علينا استخدام صفة <src> داخل العلامة لتوجيه المتصفح الى موقع الصورة, مشابهة لصفة <href> في الروابط, ايضا ممكن لصفة <src> “المصدر” انت تكون من رابط داخلي او خارجي كما في الروابط العادية تماما.
ايضا في الصور <img> يجب علينا اضافة وصف لها لتحسين تصنيفنا في محركات البحث وتحسين استخدام موقعنا من قبل ادوات المساعدة والوصول وكبديل للصور في حال بطئ الشبكة.
عند ادراج الصور لابد لنا ان نضيف لها وصف يخص حجمها لكيلا نواجه اخطاء بالمستقبل, مثل :
```
```
وصيغ الصور الممكن استخدامها في الويب هي اربعة : (JPG, GIF, PNG, SVG), للصور “JPG”, وللصور المتحركة نستخدم “GIF”, ولعلامات الازرار والايقونات نستخدم “PNG”, و انسب صيغة للمواقع الحديثة المتفاعلة مع احجام الاجهزة العدة “SVG”
بالنسبة لطريقة ترتيب الملفات والصور في المجلدات, فعلينا الا نستخدم رموز او المسافات او الحروف الكبيرة لضمان قلة الاخطاء والعيوب مستقبلا, وان نحدث مسار الملفات والصور في المستندات البرمجية اذا غيرنا موقعها.
المراجع: https://www.theodinproject.com/lessons/foundations-links-and-images