الدرس17 : إدراج صورة داخل صفحة html

إدراج صورة بلغة html5 

لإدراج صورة بلغة html5 نستعمل وسم يتيم و هو .  و يجب أن يحتوي هذا الوسم على سمتين أساسيتين هما:

- src : نضع فيها رابط تواجد الصورة سواء في ملف html5 أو مباشرة من الإنترنيت كما تعلمنا سابقا في درس الروابط و لمراجعته من هنا .

- alt : الكثير من المصممين يتجاهلونه لكن هذا خطئ فادح فهو إجباري أن تكتبه و ليس اختياري، و دوره نكتب فيه ما هي هذه الصورة هل للبحر أم الطبيعة... و هذا النص يظهر في حالت تعدر تحميل صفحة html5 و يساعد أيضا عناكب محرك البحث من التعرف على الصورة مثلا هذه صورة كتاب و هذه تفاحة و هكذا يعرضها في نتائج البحث.

 كملاحظة الصور لا تدرج وحدها بل يلزم أن تدرج داخل نص كما يبين الكود التالي :

مرحبا بكل الزوار في معرض صوري:

src="image.png" alt="mon image" />

عند حفظك للصورة لا تكتب فراغات أو حروف كبيرة في الإسم.

إظهار سحابة عند وضع الفأرة على صورة:

نعم أنت محق لقد رأينا هذه الخاصية سابقا في دروس الروابط بلغة html5 ،و نستعملها لإعطاء تعليق يظهر للزائر بعد أن يضع الفأرة على الصورة. هي ليست مفروضة أن تضعها دائما يمكنك وضعها متى شئت و هي تعتمد على سمة title كما يبين كود html5 التالي:

مرحبا بكل الزوار في معرض صوري:

src="image.png" alt="mon image" title="تصميم رائع" />

إضافة صورة مصغرة للنقر:

إدا كانت لديك صورة حجمها كبير جدا فلا تضعها مباشرة في موقعك بل يمكنك إنشاء صورة مصغرة لها و بعد النقر عليها تتحول للصورة الأصلية. يمكنك إستعمال هذا برنامج لتصغير الصورة. وتكتب الكود على الشكل التالي:

مرحبا بكل الزوار في معرض صوري:

href="image.png"> src="mini/image.png" alt="mon image"  />

و بهدا نكون قد إنتهينا من درس اليوم بقي درس آخر عن الصور. ننتظر تعليقاتكم و السلام عليكم و رحمت الله تعالى و بركاته.