أنت هنا:برمجها»اللغة HTML»الدرس 8: معالجة الصور

الدرس 8: معالجة الصور

كتبه اللغة HTML 3765 كن أول من يعلق
آخر تعديل في الخميس, 26 تشرين2/نوفمبر 2020 00:46
الدرس 8: معالجة الصور
قيم الموضوع
(0 أصوات)


يمكنك في لغة HTML عرض الصور في الصفحات والتحكم في خواصها، قبل كل شيء يجب أن تكون الصورة جاهـزة للنشر علىالإنترنت، فيجب أن لا تكون ذا حجم ضخم لأن ذلك سيؤدي إلى بطء شديد في التحميل، ويجب الحذر جيدا عند التعامل مع الصور، لأنها تستهلك حجما كبيرا وتسبب بطءا شديدا في تحميل الصفحات، لذلك يفضل التقليل من الصور قدر الإمكان في صفحات HTML.

 إدراج الصور:

يتم إدراج الصور في صفحة HTML عن طريق الوسم IMG، وهو وسم مفرد ( لا يجتاج إلى وسم إغلاق)، وهذا الوسم يحتاج إلى خاصية مهمة لكي يعمل بشكل سليم هي src والتي نضع بها عنوان الصورة المطلوبة.

 <img src="/images/sample.gif">

 


الخاصيتان max-width و height :


توجد أيضا الخاصية max-width لتحديد عرض الصورة وheight لتحديد ارتفاعها، يمكن بواسطة الخاصيتان السابقتان تكبير الصورة وتصغيرها حسب المطلوب، وإذا كنت تريد إظهارها بالحجم الطبيعي فيمكنك ترك هذه الخصائص، فيحجز المتصفح للصورة حجما صغيرا إلى أن يحصل عليها فيجعلها بالحجم الطبيعي، ولكن الصور تشغل مكانا في الصفحة وتزيح النصوص بمقدار ما تشغله من مكان لذلك فإن الصورة الصغيرة تزيح النصوص قليلا والكبيرة تزيحها بمقدار أكبر، فالصفحات ستظهر بشكل مختلف عن الشكل الطبيعي إلى أن يحصل المتصفح على الصورة وإذا لم يجدها لأي سبب من الأسباب سيظل يحجر لها حجما صغيرا فقط وبالتالي تصبح الصفحة مشوهة، لذلك ينصح دائما باستخدام خصائص الحجم في وسوم الصور حتى لو لم تكن تريد تغيير حجم الصورة عن الطبيعي.

<img src="/images/sample.gif" max-width=73 height=68><br><br> <img src="/images/sample.gif" max-width=200 height=100><br><br>

الخاصية align :

توجد أيضا الخاصية align وهي خاصية مهمة جدا في الصور، وتنبع أهميتها من كونها الطريقة الوحيدة للتحكم بكيفية عرض الصورة بالنسبة للنصوص المحيطة بها، حيث أن الصور في HTML تعتبر جزءا من النص المحيط بها تتحرك معه، وترتبط به، تأخذ align العديد من القيم فيما يلي سرد لها مع الشرح والأمثلة ..

bottom, baseline, absbottom: وهي تعرض الصورة بحيث تكون على السطر مثل أي كلمة أخرى

<imgsrc="/images/sample.gif" align="bottom>

  left : وهي تعرض الصورة على يسار الفقرة ولا يكون للصورة علاقة بالسطر.

<img src="/images/sample.gif" align="left">

 middle, absmiddle : وهي تعرض الصورة في منتصف السطر.

<img src="/images/sample.gif" align="middle">

 right : وهي تعرض الصورة على يمين الفقرة ولا يكون للصورة علاقة بالسطر.

<img src="/images/sample.gif" align="right">

 top, texttop : وهي تعرض أسفل السطر فيكون السطر أعلاها.

<img src="/images/sample.gif" align="right">

VSPACE : لتحديد المسافة العمودية الفاصلة بين النص والحافتين العليا  والسفلى للصورة.

<IMG SRC="image.jpg" ALIGN="RIGHT" VSPACE="20" >‎

HSPACE  لتحديد المسافة الأفقية الفاصلة بين النص والحافتين اليمنى واليسرى للصورة.

<IMG SRC="image.jpg" ALIGN="RIGHT"  HSPACE="20">‎

 


الخاصية border:


توجد أيضا خاصية لوضع إطار حول الصورة هي الخاصية border ونحدد بها عرض الإطار بالبكسل، والقيمة 0 تعني دون إطار، إذا لم تحدد قيمة للخاصية border في وسم الصورة، فإن الصور ستظهر بدون إطار في الحالة العادية ومع إطار إذا كانت الصورة عبارة عن وصلة، لذلك يعمد الناس إلى وضع border="0" في جميع الصور لإخفاء الإطار حتى لو كانت الصورة عبارة عن وصلة، ويجدر بالذكر أن لون الإطار في الوصلة الجديدة هو نفس لون النصوص في الوصلة الجديدة وكذلك بالنسبة للقديمة.

<a href="http://www.microsoft.com/">
<img src="/images/sample.gif"></a><br>
<a href="http://www.microsoft.com/">
<img src="/images/sample.gif" border="0"></a><br>
<img src="/images/sample.gif" border="3">
يمكنك أيضا تحديد عرض الحاشية حول الصورة أو المسافة بين الصورة النصوص المحيطة عن طريق الخاصية hspace.
توجد أيضا خاصية alt للصور، وهي تستخدم لوصف الصورة، بحيث أن النص الذي تضعه في الخاصية alt سيعرض بدلا من الصورة حتى إتماما تحميلها، وكذلك إذا لم يجد المتصفح الصورة، وهذه النصوص أيضا تظهر في مربع التلميح ToolTip عند التأشير بالفأرة على الصورة.
 

تمرين تطبيقي : 

حاول أن تنجز صفحة ويب تحتوي على مختلف الوسوم المكتوبة أعلاه مع ملاحظة الفروق عند تغير قيم هذه الوسوم.
مقالات أخرى من نفس الفئة « الدرس 7: الوسم Font الدرس 9: خرائط الصور »

أضف تعليقا


إصنعها يريد أن يتأكد أنك لست روبوتا، لذلك أحسب ما يلي:

كود امني
تحديث