إدراج الصور داخل صفحات الويب في HTML 11 - Programmer Tech
html

إدراج الصور داخل صفحات الويب في HTML 11

الوسم img استحضار الصور في HTML

إدراج الصور داخل صفحات الويب في HTML

في هذا الدرس سوف نتحدث عن الصور وما يتعلق بإدراج الصور و الخصائص المستخدمة بهذا الشأن. في الدروس السابقة تحدثنا عن كيفية ادراج الصور كخلفية للصفحة بأكملها لكن هناك شئ اخر بالنسبة لإدراج الصور غير استحضارها للصفحة وكان هذا عن طريق الوسم body المتحكم في جسم الصفحة.

وتوجد هناك أنواع كثيرة من الصور منها ما هو مدعوم من قبل كل المتصفحات و منها ما هو مدعوم من البعض منها. أنواع الصور التي تعمل على جميع أنواع المتصفحات المشهورة (Chrome, Edge, Firefox, Safari, Opera):

.png – .apng – .gif – .jpg – .jpeg – .ico – .cur -.jfif – .pjpeg – .pjp – .svg

الوسم img إدراج الصور داخل صفحات الويب في HTML

هو الوسم الرئيسي لتعريف الصور داخل الصفحة وهو وسم منفرد ولكن لا يكفي الوسم وحده, هناك شيئ آخر لإستحضار مسار الصوره وهو src لتحديد موقع و اسم الصورة.

في الدروس السابقة انشأنا مجلد على سطح المكتب و بداخله ملف اسمه index.htm وهو الملف الذي نعمل به و نكتب اكوادنا بداخله, سوف نضع صورة في هذا المجلد و اقوم باستدعائها من خلال الوسم img كالتالي :

إدراج الصور داخل صفحات الويب في HTML 11

ويكون شكل الكود الذي نكتبه

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <img src="imageee.png">
</body>
</html>

الان نفتح ملف ال html عبر المتصفح لنرى نتيجة الاستحضار

إدراج الصور داخل صفحات الويب في HTML 11

هذا كان بالنسبة اذا كانت الصورة بنفس المجلد الذي نعمل به, ماذا لو كانت الصورة بغير مجلد ما هي الطريقة لإستحضار الصورة؟ لننشئ مجلد و نسميه 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, وعند تشغيل الكود في المتصفح سنحصل على النتيجة

إدراج الصور داخل صفحات الويب في HTML 11

وتوجد خاصية 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>

محمد تركي العلوش

من سورية بالتحديد من مدينة "منبج" ، ‏مبرمج ويب، محب للتقنية | ‎#أمن_المعلومات | ‎#الأمن_السيبراني | ‎#الشبكات | ‎#توعية_أمنية ، آمل أن أُقدم كل ما هو مفيد للجميع.
زر الذهاب إلى الأعلى