دروس

06 | الصور والنص البديل للمبتدئين

تعلم الصور والنص البديل خطوة بخطوة ضمن سلسلة HTML للمبتدئين، مع مثال قابل للتجربة وتمرين قصير.

06 | الصور والنص البديل للمبتدئين

المستوى: مبتدئ   ·   وقت التعلم المتوقع: 11 دقيقة

باختصار: في درس الصور والنص البديل ستتعلم استخدام HTML في مثال صغير يمكن تجربته بنفسك. HTML لغة ترميز تحدد بنية المحتوى، وليست لغة برمجة لتنفيذ العمليات الحسابية.

ماذا سنتعلم؟

  • الصور والنص البديل
  • قراءة المثال والتنبؤ بالنتيجة
  • تغيير جزء من المثال وحفظ النتيجة

قبل التجربة

احفظ المثال في ملف index.html بترميز UTF-8 وافتحه في متصفح حديث. بعض الروابط والصور تحتاج ملفات فعلية أو اتصالًا بالإنترنت.

مقدمة سهلة

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

شرح الفكرة

اقرأ المثال من بدايته. ابحث عن الكلمات والعناصر المستخدمة في الصور والنص البديل، ثم لاحظ ترتيبها وعلاقة كل جزء بما يسبقه. لا تغيّر أكثر من جزء واحد في المحاولة الأولى، حتى تستطيع معرفة سبب تغيّر الناتج. HTML لغة ترميز تحدد بنية المحتوى، وليست لغة برمجة لتنفيذ العمليات الحسابية.

مثال عملي

<img src="cat.jpg" alt="قطة رمادية تجلس قرب نافذة" width="320">

النتيجة المتوقعة

ستظهر عناصر المثال في صفحة المتصفح؛ قارن ترتيبها ونصها قبل وبعد تغييرك.

تمرين للتطبيق

استبدل cat.jpg باسم صورة موجودة لديك واكتب وصفًا دقيقًا لها.

تحقق من فهمك

سؤال: ما الجزء الذي يجب تعديله لتنفيذ التمرين؟ حدد السطر أولًا ثم جرب، وقارن النتيجة مع المثال الأصلي.

الخلاصة

تعلمت الصور والنص البديل، وطبّقت خطوة بنفسك. بعد التأكد من النتيجة انتقل إلى الدرس التالي.

مرجع إضافي

المرجع التقني للموضوع.

الدرس التالي: 07 | القوائم للمبتدئين

طوّر مهاراتك وابنِ شيئًا حقيقيًا.محتوى ومسارات عملية تجمع بين التعلّم والتطبيق.