تنسيق الصور في صفحات الويب

التعامل مع صفحات الويب مثل ادراج صورة داخل صفحة الويب

إدراج صورة داخل صفحة الويب :

ادراج صورة بالامر <img>

لإدراج صورة في صفحة الويب يتم استخدام خاصية src التابعة للأمر <img> ويتطلب ذلك تحيد اسم ملف الصورة ومكان حفظه .

نشاط ( عزيزي الطالب : بالتعاون مع زملائك وبمساعدة معلمك قم بتصميم صفحة ويب يكون محتواها كالأتي :

- نص مدرستي جميلة ونظيفة ومتطورة ,, بلون أحمر وتحتها خط .

- تظهر  صورة للمدرسة أسفل النص .

صفحة الويب بعد تنفيذ الكود- قبل تنفيذ الكود

نشاط (2)

عزيزي القارئ بالتعاون مع زملائك او معلمك قم بالبحث عبر الانترنت عن انواع امتداد ملفات الصور التي يمكن استخدامها في صفحات الويب .

ملاحظات هامة :

- في التدريب اللسابق يفترض ان ملف الصورة وملف صفحة الويب في نفس المجلد , لذلك تم الإكتفاء بكتابة اسم ملف الصورة والإمتداد مع الخاصية scr

- في حالة تواجد ملف الصورة في مجلد اخر يجب كتابة مسار ملف الصورة كاملا .

2- تنسيق الصور في صفحات الويب :

( التحكم في أبعاد الصورة بصفحة الويب )

يمكن تنسيق الصورة المدرجة بالتحكم في أبعادها ( الارتفاع والعرض ) ومحاذاتها بالنسبة لصفحة الويب .

يتم التحكم في أبعاد الصورة من خلال خصائص الأمر <img> كالأتي :

- الخاصية height (ارتفاع الصورة ) , مثال height = 200

- الخاصية width (عرض الصورة ) مثال width ,,300

ويتم استخدام وحدة القياس البكسل pixel لقياس ابعاد الصوة

عزيزي القارئ : بالتعاون مع زملائك وبمساعدة معلمك قم بالاتي :

- إدراج صورة مع جعل ابعادها كالاتي :

العرض width = 800  الارتفاع  high = 450 بكسل

- تعديل النشاط السابق بحيث يتم كتابة الكود التالي :

<img src = ,, school , jpg ؛؛  hieght = 450 ,, width = 800 >

</body>

</html>

صفحة الويب بعد تنفيذ الكود

- محاذاة الصورة داخل صفحة الويب 

يتم التحكم في محاذاة الصورة من خلال الخاصية align للأمر <img> وتأخذ الخاصية القيم الاتية :

نشاط جديد :

قم بتعديل في ملف صفحة الويب بالتدريب السابق كالتالي :

- تنسيق الصورة لكي يظهر النص مع الصورة في نفس السطر , ويقع النص بمحاذاة منتصف الصورة .

- حفظ الملف النصي بامتداد htm

- فتح الملف في مستعرض الإنترنت .

كتابة الكود في احد برامج تحرير النصوص 

تدريب :

قم بعمل الاتي :

- محاذاة الصورة لآقصي اليمين لصفحة الويب

- محاذاة الصورة ليقع النص بمحاذاة الحافة العليا للصورة .

ملاحظات :

- لمحاذاة الصورة لآقصي اليمين لصفحة الويب نستخدم الكود align=right

- لمحاذاة الصورة ليقع بمحاذاة الحافة العليا للصورة نستخدم الكود align=top