الروابط والصور

الروابط في HTML

الروابط هي الطريقة اللي من خلالها بننتقل بين الصفحات أو بين أجزاء مختلفة من نفس الصفحة. في HTML، بنستخدم الوسم <a> علشان نضيف رابط.

1. إضافة رابط داخلي أو خارجي:
   • لإضافة رابط بنستخدم وسم <a> ونعين خاصية href (اللي هي الـ URL اللي هيروح ليه الرابط).
   • رابط خارجي:
     لو عايز تعمل رابط لموقع خارجي، بنكتب الـ URL الكامل. مثال: <a href="https://www.google.com">روح لجوجل</a>
   • رابط داخلي:
     لو عايز تعمل رابط داخل نفس الصفحة، بنستخدم معرف (ID) للعناصر اللي هننتقل ليها. مثال: <a href="#section1">روح للجزء الأول</a> <h2 id="section1">الجزء الأول</h2>
2. الروابط لملفات:
   • تقدر كمان تعمل روابط لملفات معينة زي الصور أو المستندات باستخدام <a>.
   مثال: <a href="file.pdf">تحميل الملف</a>

إضافة الصور في HTML

الصور بتخلي صفحاتك أكثر حيوية وجذبًا للمستخدم. عشان تضيف صورة في HTML بنستخدم الوسم <img>.

1. الوسم <img>:
   • الوسم ده بيحتاج خاصيتين أساسيتين:
     • src: اللي بتحدد مسار الصورة (إما مسار نسبي أو مسار كامل).
     • alt: ده النص البديل اللي يظهر لو ما قدرتش الصورة تتحمل.
   مثال: <img src="image.jpg" alt="صورة لمنتج" />
2. تحديد حجم الصورة:
   • تقدر تحدد عرض الصورة وارتفاعها باستخدام width و height.
   مثال: <img src="image.jpg" alt="صورة لمنتج" width="300" height="200" />
3. الصور كروابط:
   • ممكن تدمج الصور مع الروابط بحيث لو ضغطت على الصورة تروح لمكان تاني. في الحالة دي بنستخدم الوسم <a> مع <img>.
   مثال: <a href="https://www.example.com"> <img src="image.jpg" alt="صورة لمنتج" /> </a>

ملاحظات إضافية:

• استخدام alt:
  • خاصية alt مهمة جدًا لزيادة الوصولية (accessibility) لأنه بتظهر لو الصورة مش موجودة أو لو بيتم استخدام أدوات قراءة الشاشة من قبل المستخدمين.
• تحديد المسار النسبي للصورة:
  • لو الصورة موجودة في نفس مجلد الصفحة، تقدر تكتب اسم الصورة فقط.
  • لو الصورة موجودة في مجلد فرعي، بتكتب المسار زي: images/image.jpg.

---

في الختام:

الروابط والصور في HTML هما أساسين في بناء المواقع. الروابط بتساعد في التنقل بين الصفحات والمحتوى، بينما الصور بتخلي الصفحة أكتر جذبًا وسهولة في الفهم. دلوقتي عندك فكرة كويسة عن كيفية إضافة الروابط والصور في HTML. في المقالات الجاية هنكمل معك ونتعلم عن النماذج والجافا سكربت. لو عندك أي أسئلة، أنا موجود للمساعدة!