شرح وسم img
وسم img هو وسم في لغة HTML يستخدم لإدراج الصور والرسومات في صفحات الويب. ويتم استخدام وسم img بطريقة بسيطة وسهلة، حيث يتم تحديد عنوان URL للصورة المراد عرضها في الصفحة. يمكن استخدام وسم img كالتالي:
HTML
<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
<img src="https://test.com/img.jpg" alt="النص البديل للصورة">
</body>
</html>
كما ترون في سمة src قمنا بوضع رابط الصورة من الأنترنيت
يمكنك عرض الصورة بطريقة محلية يعني من ملفات جهازك فقط تحدد إسم الصورة
كما في المثال:
HTML
<img src="img.jpg">
إذا كانت الصورة ذاخل مجلد نكتب هكذا:
HTML
<img src="name-folder/img.jpg">
و إذا كان ملفك ذاخل مجلد للخروج منه أو بعبارة أوضح
للرجوع للخلف نستعمل نقطتين ومن ثم باك سلاش ونكتب
إسم المجلد وباك سلاش أخرى ونكتب إسم الصورة مع الصيغة بالشكل الصحيح
كما هو ظاهر معكم في الكود:
HTML
<img src="../name-folder/img.jpg">
src: يتم استخدام هذا الخاصية لتحديد عنوان URL للصورة المراد إدراجها في الصفحة.
alt: يتم استخدام هذا الخاصية لإدراج نص بديل يتم عرضه بدلاً من الصورة إذا لم يتم تحميلها بشكل صحيح أو إذا
كان المستخدم لا يمكنه رؤية الصورة.
يجب أن يتم استخدام وسم img بشكل صحيح لضمان عرض الصورة بشكل صحيح في الصفحة، وذلك بتحديد عنوان URL صحيح للصورة وإضافة نص بديل مناسب للصورة.
لذينا سمات أخرى لتحديد عرض وطول الصور هنا نتيجة كود لصورة بدون إستخدام سمات width and height ستعرض بشكلها الطبيعي مثال لنتيجة الكود:
وهنا كود ونتيجة للإستخدام سمات width and height نمرر لهما قيمة رقميمة مع وحدة ال px طبعا كل هذا سوف ندرسه بالشكل الصحيح في دروس ال
CSS
HTML
<img width="100px" height="100px" src="../name-folder/img.jpg" alt="text">
نتيجة الكود كما ترون ثم التعديل على حجم الصورة:
وهكذا إنتهينا من درسنا أو مقالتنا المتواضعة أتمنى أنك فهمت و وفقك الله أتمنى دعمنا بمشاركة الدرس لكي تعم الفائدة.