🌟 مقدمة تحفيزية : مرحباً بك يا بطل! الصفحة بدون صور هي مجرد كتاب جامد، والصفحة بدون روابط هي جزيرة معزولة . اليوم ستتعلم كيف تجعل موقعك ينبض بالحياة ، وتصله بالعالم الخارجي عبر الروابط الذكية .

🔗 1. الروابط التشعبية (Links – <a>)

(Links - <a>)

   الوسم المستخدم هو <a>وهو اختصار لكلمة Anchor . نستخدم معه خاصية href لتحديد الوجهة . مثال تطبيقي (لربط صفحتك بأكاديمية قياوي) :

html
<a href="https://qiyaouiacademy.com">
اضغط هنا لزيارة أكاديمية قياوي</a>

• نصيحة للمحترفين : لفتح الرابط في صفحة جديدة (لكي لا يغادر الزائر موقعك) ، أضف خاصية target=”_blank”: HTML

<a href="https://google.com" target="_blank">افتح جوجل في نافذة جديدة</a>

🖼️ 2. إضافة الصور  (Images - <img>)  الوسم المستخدم هو <img>. هذا الوسم فريد لأنه لا يحتاج لوسم إغلاق (Self-closing) . نستخدم معه خاصية src لتحديد مكان الصورة . مثال تطبيقي:

<img src="logo.png" alt="شعار أكاديمية قياوي" width="200">

•    src : هو مسار الصورة (رابطها أو اسمها في المجلد).

•   alt : نص بديل يظهر إذا لم تتحمل الصورة (مهم جداً لمحركات البحث ولذوي الاحتياجات الخاصة).

🎯 تحدي المبرمج : في ملفك index.html داخل مجلد MyFirstProject : قم بوضع صورة (مثلاً صورة شعار الأكاديمية) داخل المجلد. أضف كود الصورة في صفحتك. أضف رابطاً تحت الصورة يوجه الزائر إلى صفحة “المستوى المبتدئ” في أكاديميتك.

🚀 ماذا بعد؟ رائع ! موقعك بدأ يكتمل شكله . في الدرس السابع ، سنتعلم كيفية تنظيم هذه العناصر داخل “الجداول – Tables” ، لكي تعرض بياناتك ودروسك بشكل منظم ومنسق . 

https://youtu.be/mP-l5BuqteY?si=mfkJS75dsI3cn7FV 

اللهم صل وسلم وبارك على خاتم الانبياء والمرسلين وعلى اله وصحبه وسلم تسليما .