إدراج الصور داخل صفحات الويب في HTML
في هذا الدرس سوف نتحدث عن الصور وما يتعلق بإدراج الصور و الخصائص المستخدمة بهذا الشأن. في الدروس السابقة تحدثنا عن كيفية ادراج الصور كخلفية للصفحة بأكملها لكن هناك شئ اخر بالنسبة لإدراج الصور غير استحضارها للصفحة وكان هذا عن طريق الوسم body المتحكم في جسم الصفحة.
وتوجد هناك أنواع كثيرة من الصور منها ما هو مدعوم من قبل كل المتصفحات و منها ما هو مدعوم من البعض منها. أنواع الصور التي تعمل على جميع أنواع المتصفحات المشهورة (Chrome, Edge, Firefox, Safari, Opera):
.png - .apng - .gif - .jpg - .jpeg - .ico - .cur -.jfif - .pjpeg - .pjp - .svg
الوسم img إدراج الصور داخل صفحات الويب في HTML
هو الوسم الرئيسي لتعريف الصور داخل الصفحة وهو وسم منفرد ولكن لا يكفي الوسم وحده, هناك شيئ آخر لإستحضار مسار الصوره وهو src لتحديد موقع و اسم الصورة.
في الدروس السابقة انشأنا مجلد على سطح المكتب و بداخله ملف اسمه index.htm وهو الملف الذي نعمل به و نكتب اكوادنا بداخله, سوف نضع صورة في هذا المجلد و اقوم باستدعائها من خلال الوسم img كالتالي :
ويكون شكل الكود الذي نكتبه
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<img src="imageee.png">
</body>
</html>
الان نفتح ملف ال html عبر المتصفح لنرى نتيجة الاستحضار
هذا كان بالنسبة اذا كانت الصورة بنفس المجلد الذي نعمل به, ماذا لو كانت الصورة بغير مجلد ما هي الطريقة لإستحضار الصورة؟ لننشئ مجلد و نسميه images و نضع الصورة بداخله و نرى كيفية استحضار هذه الصورة
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<img src="images/imageee.png">
</body>
</html>
و توجد طريقة اذا كانت الصورة في موقع خارجي موضوعه فقط نأتي برابط الصورة و نضعه بمحل قيم اسم الصورة و امتدادها.
هناك خصائص في هذا الوسم نستطيع من خلالها التحكم في ابعاد الصورة من الإرتفاع و العرض وهي width, height . حيث أن width تمثل العرض و heigh تمثل الإرتفاع.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<img src="imageee.png" height="300" width="250">
</body>
</html>
قمنا بتحديد عرض الصورة 250 بواسطة width و الطول 300 بواسطة height.
وتوجد خاصية align لتحديد محاذاة الصورة مع النص المرافق لها او بعبارة اخرى تحديد موقع النص مع الصورة وتأخذ القيم bottom , top , middle , right , left.
<img src="imageee.png" align="bottom"> تظهر الصورة بالاسفل <img src="imageee.png" align="top">الصورة بالاعلى والنص بالاسفل <img src="imageee.png" align="middle"> باقي النص اسفل الصورة <img src="imageee.png" align="left"> الصورة باليسار و النص لليمين <img src="imageee.png" align="right"> الصورة لليمين و النص لليسار
تحديد المسافة بين النص و الصورة إدراج الصور داخل صفحات الويب في HTML
يتم تحديد المسافة بين النص و الصورة عن طريق خاصيتين وهما
1 - خاصية vspace تستخدم لتحديد المسافة العمودية الفاصلة بين النص و الحافتين العليا و السفلى للصورة.
2 - خاصية hspace تستخدم لتحديد المسافة العمودية الأفقية بين النص و الحافتين اليمنى و اليسرى.
<img src="imageee.png" align="right" vspace="20" hspase="20"> .
هناك خاصية اخرى وهي border وظيفتها اضافة اطار حول الصورة وتتحكم بسماكته وهذه الصورة تستخدم بشكل خاص عند تحديد صورة كوصله تشعبية ويتم التحكم في السماكة من خلال اسناد رقم يتحكم به, وتمثل السماكة بالبكسل والقيمة الإفترضية لها هي 0 ومعنى ذلك لا يوجد اطار حول الصورة.
مثال اريد ان اضيف للصورة اطار 5 بيكسل وسيكون الكود هكذا
<img src="imageee.png" border="5"> .
وضع نص بديل للصورة إدراج الصور داخل صفحات الويب في HTML
يمكن استخدام خاصية "alt" في عناصر HTML لإدخال نص بديل للصورة. يتم استخدام هذا النص في حالة عدم قدرة المستخدم على رؤية الصورة، سواء بسبب مشكلات في الاتصال بالإنترنت أو لأسباب أخرى. يجب علينا دائمًا توفير نص بديل للصورة لضمان إمكانية الوصول إلى محتوى صفحتنا من قبل جميع المستخدمين، بما في ذلك المستخدمين ذوي الإعاقات البصرية.
يمكن استخدام العنصر img في HTML مع الخاصية alt على النحو التالي:
<img src="imageee.png" alt="نص بديل للصورة"> .
يجب استبدال "imageee.png" بمسار الصورة الفعلي على موقعنا، واستبدال "نص بديل للصورة" بالنص البديل الذي نود عرضه في حالة عدم قدرة المستخدم على رؤية الصورة.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<img src="imageee.png" alt="MuhammadAlush">
</body>
</html>