كيفية اضافة صورة فى لغة html
يمكن عرص الصور داخل صفحة html وذلك من خلال الوسم <img>يقوم الوسم <img> بعرض الصور اعتمادا على مصدر الصورة source وذلك من خلال الخاصية src
فمثلا لعرص صورة اسمها lion وامتداد الصورة jpg ومكان الصورة فى نفس مجلد html
<img src="lion.jpg">
أما فى حالة وجود نفس الصورة فى مجلد أخر يسمى مثلا images فإن مصدر الصورة سيكون كالتالي:-
<img src="images/lion.jpg">
الوسم Img يمكن إضافة الخواص التالية له.
1- width وهى خاصية تقوم بتحديد عرص الصورة "width="300 فنكون قد حددنا عرص الصورة ب300 بيكسل
2- height وهى خاصية تقوم بتحديد إرتفاع الصورة "height="400 فنكون قد حددنا ارتفاع الصورة بـ400 بيكسل
3- alt ,وهو اختصار alternate وهى تقوم بوضع نص اختيارى يظهر فى حالة عدم عرض الصورة وهو مفيد لذوى الاحتياجات الخاصة الذين يقومون بسماع محتوى صفحة الويب .
ملاحظة هامة:
يفضل دائما أن يوضع علامتى اقتباس مزدوج لقيم الخصائص الموجودة فى الوسوم
فمثلا
<img src="animal.jpg">
<img src=animal.jpg>
الوسمان السابقان يؤديان نفس النتائج ولكن يفضل دائما وضع علامتى اقتباس
مثال على وسم الصور <img>
ولمعرفة امتداد الصور يمكن إظهار الامتداد باتباع الآتي:-
نقف على المجلد الذي به الصور ثم من organize نختر view ثم نزيل علامة الصح من أمام الخيار hide extensions for unknown type فنلاحظ أنه تم إظهار امتداد الصورة بجوار اسمها.
<!doctype html>
<html>
<head>
<title>
حيوانات الغابة
</title>
</head>
<body>
<img src="lion.jpg" width="400" height="300" alt="this is lion"><br>
<a href="http://www.google.com"><img src =2.jpg alt="google" width="400" height=200" ></a><br>
<img src="images/earth.jpg" width="300" height="300" alt="earth">
</body>
</html>
وتظهر الصور فى المتصفح كما بالشكل التالي:-
وسنتناول الصور مرة اخرى فيما بعد إن شاء الله تعالى
المشاركات
استوفيت كل الشروط المذكورة ولم تظهر معي الصورة في المتصفح
ردحذفعلى حسب المكان الى حاطه فيه الصورة
حذفاكتب هنا الكود اللى حضرتك كتبته وان شاء الله نقوم بتصحيحه لك
حذفاني كتبت الكود بس يطلعلي صورة مصغرة بدوة شي بيهة
ردحذفغير width وHeight واعطيهم قيم اكبر
حذفتأكد من أ،ك كتبت امتداد الصور ومسار الصورة واسمها بطريقة صحيحة
حذفم تطلع لي الصورة لما اسوي الكود يجيني مربع صغيير فيه اكس ليش ؟
ردحذفتأكد من أ،ك كتبت امتداد الصور ومسار الصورة واسمها بطريقة صحيحة
حذفالسلام عليكم شو ما تطلع الكتابه على الصوره
ردحذفكيف اطلع امتداد الصوره
ردحذفعملت لكن اب أدرج الصوره
ردحذف