HTML · الدرس ٣ من ٤
أضف صورة ووصفاً لها
أضف الصورة باستخدام img، واكتب اسم ملفها داخل src، ووصفها داخل alt. يساعد الوصف من لا يستطيع رؤية الصورة، ويظهر إذا تعذّر تحميلها.
جرّب الآن
اختر صورة من جهازك، ثم اكتب وصفاً يوضح ما فيها. شغّل الكود لترى الصورة.
يبني كل درس جديد على صفحتك الشخصية. عندما تعود إلى درس، تظهر مسودتك المحفوظة.
تبقى الصورة في متصفحك ولا تُرفع إلى الموقع. اخترها قبل تشغيل الكود؛ سيُضاف اسم ملفها إلى المثال تلقائياً.
صفحتك
تستخدم الفحوصات كودك الحالي. جرّب الصفحة بنفسك أيضاً.
ملاحظات على عملك
افتح صفحتك على جهازك
- احفظ الصفحة من الرابط أدناه، ثم ضعها في مجلد جديد.
- انسخ الصورة التي اخترتها إلى المجلد نفسه. يجب أن يكون اسمها مطابقاً للاسم المكتوب داخل
src. - انقر مرتين على
index.htmlلفتحه في المتصفح. تأكد من ظهور الصورة وعمل الروابط. - للتعديل على جهازك، افتح الملف بالمفكرة أو Visual Studio Code. احفظ التغييرات، ثم حدّث المتصفح.
ظهرت الصورة وكتبت وصفاً لها؟ احفظ الصفحة وجرّب فتحها على جهازك قبل أن تبدأ مشروعك.
التالي: مشروعك: صفحة شخصيةأحتاج مساعدة
اختر الصورة أولاً، واترك اسم ملفها داخل src، ثم غيّر الكلمات داخل alt. إذا غيّرت اسم الملف إلى اسم غير موجود، سيظهر الوصف مكان الصورة.
عند تنزيل الصفحة، ضع الصورة الأصلية بجانب الملف. اتبع خطوات «افتح صفحتك على جهازك» أعلاه.
من الطبيعي أن تبدو الصفحة بسيطة الآن. تكتب المحتوى باستخدام HTML، وستغيّر شكله لاحقاً باستخدام CSS.
احفظ الصفحة على جهازك
إذا لم يبدأ التنزيل، انسخ الكود الكامل أدناه إلى ملف نصّي باسم index.html واحفظه بترميز UTF-8.