تنسيق الصور

تستخدم الخاصيةalign التي توضع في علامة<img…..> لمحاذاة الصورة بالنسبة للعناصر الأخرى في صفحة الويب، ويتم محاذاة الصورة على حسب القيمة التي تعطي لهذه الخاصية, فيمكن محاذاة الصورة إلى اليمين left او إلى اليسار, كما يمكن أيضاً عمل هامش للصورة ليفصل الصورة عن باقي مكونات الصفحة.

والمثال التالي يوضح وضع الصورة بالنسبة لمكونات صفحة الويب في حالة عدم استخدام خاصية align:

1. قم بتشغيل برنامجnotepad واكتب به نص ملفhtmlكما في الشكل التالي:
2. قم بحفظ المستند بامتدادhtml. وقم بفتح المستند في متصفح الإنترنت فيتم وضع الصورة بإعلى النص لعدم وجود خاصيةalign في العلامة الخاصة بإنشاء الصورة, كما في الشكل التالي:

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

إما بمحاذاة الصورة إلى اليمين فتظهر الصورة في يمين النص, كما في الشكل التالي:

وبالكود السابق تظهر الصورة في يمين النص، كما يوضح الشكل التالي, حيث قمنا في الكود بعمل محاذاة إلى اليمين الصورةalign=”right”

 

أما للمحاذاة جهة اليسار فعليك الكود التالي:

لاحظ في الكود السابق أن قيمة الخاصيةalign=”left”, وبذلك تم عمل محاذاة للصورة جهة اليسار, وتظهر الصورة على اليسار بالنسبة للفقرة النصية الموجودة في الصورة, كما يوضح الشكل التالي:

لاحظ في الشكل السابق أن النص ملتصق في حافة الصورة, وأن هذا مظهر غير لائق بالنسبة لصفحة الويب, وكان من المفترض أن يكون هناك هامش للصورة للتفرقة بين نهاية النص وبين حافة الصورة.

وتستخدم الخاصيةhspace لعمل هامش على جانبي الصورة وتقدر قيمة هذا الهامش بالبيكسيل كما يلي:

إما الخاصيةvspace فتستخدم لعمل هامش علوي وسفلي للصورة تحدد قيمته بالبيكسيل كما يلي:

والمثال التالي يوضح كيفية عمل هامش للصورة:

1. قم بتشغيل برنامجnotepad واكتب به نص ملفhtmlكما في الشكل التالي:
2. قم بحفظ المستند بامتدادhtml. وقم بفتح المستند في متصفح الإنترنت فتظهر صورتان:العلوي لها هامش أفقي مقداره بيكسيل,أما الصورة السفلية بدون أي هامش, كما في الشكل التالي: