HTML Images
HTML Images – يمكن للصورة أن تقول 1000 كلمة! حيث تساعد الصور على إحداث فرق فى مظهر الموقع.
HTML Images
التعريف والإستخدام
يٌستخدم الوسم <img> لتضمين صورة في صفحة HTML.
لا يتم إدراج الصور مباشرة في صفحات HTML؛ حيث أن الصور مرتبطة بصفحات الويب. كل ما يقوم به الوسم <img> هو إنشاء مساحة تعليق لتضمين الصورة المشار إليها بواسطة سمة src.
الوسم <img> فارغ (أى ليس له وسم إغلاق)، إليك بناء الجملة الخاص بإضافة صورة فى مستند HTML:
<img src="image_url" alt="Put here a text alternative">
توضيح بناء الجملة لوسم <img> السابق:
- <img>: الوسم الخاص بإضافة صورة فى صفحات الويب.
- src: تٌستخدم هذه السمة لتحديد مسار أو عنوان URL للصورة.
- alt: إختصار لكلمة (alternative) وتحدد هذه السمة نصًا بديلاً للصورة، فى حالة تعذر عرض الصورة لسبب ما.
مثال للتوضيح
لتضمين صورة فى صفحات الويب، إتبع هذه الطريقة:
<img src="/images/person_image.png" alt="Person sitting in front of a desk">
كلًا من السمتين src و alt مطلوبين (required) أى يجب تضمينهم عند إستخدام وسم <img>.
هناك بعض المواقف التي قد لا يعرض فيها المستعرض الصور، مثل: المتصفحات الغير المرئية (الخاصة بالأشخاص ذوو الإعاقة البصرية)، أو فى حالة الصورة غير صالحة أو من نوع غير مدعوم. وفى هذه الحالات يتم إستخدام النص البديل الموجود في سمة alt للصورة، لذلك حاول توفر قيمة ذات معنى لسمة alt دائمًا.
يمكنك إضافة عنوان للصورة أيضًا بإستخدام سمة title، كالتالى:
مثال للتوضيح
لتوفير معلومات إضافية للصورة نستخدم سمة title:
<!-- Syntax: <img src="image_url" alt="Put here a text alternative" title="Put here any title you want"> --> <img src="/images/person_image.png" alt="Person sitting in front of a desk" title="Image to person with desk...">
معظم المتصفحات تعرض محتوى سمة title عندما يقوم المستخدم بعمل hover فوق الصورة.
تحديد طول وعرض الصور
يوفر الوسم <img> سمتين يتم إستخدامهم لتحديد أبعاد الصورة (الطول/العرض)، وهم:
- height: لتحدد ارتفاع الصورة بالبكسل px.
- width: لتحدد عرض الصورة بالبكسل px.
مثال للتوضيح
لإعدات عرض وإرتفاع الصورة بإستخدام سمات (height/width):
<img src="/images/person_image.png" height="50" width="50" alt="Person sitting in front of a desk" title="Image to person with desk..."> <img src="/images/person_image.png" height="200" width="150" alt="Person sitting in front of a desk" title="Image to person with desk..."> <img src="/images/person_image.png" height="300" width="200" alt="Person sitting in front of a desk" title="Image to person with desk...">
يمكنك تحديد أبعاد الصورة بإستخدام CSS، كما فى المثال التوضيحي التالى.
مثال للتوضيح
لإعدات عرض وإرتفاع الصورة بإستخدام خصائص CSS؛ (height/width):
<!DOCTYPE html>
<html>
<head>
<style>
.first_img {
width: 50px;
height: 50px;
}
.second_img {
width: 150px;
height: 200px;
}
.third_img {
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<img class="first_img" src="/images/person_image.png" alt="Person sitting in front of a desk">
<img class="second_img" src="/images/person_image.png" alt="Person sitting in front of a desk">
<img class="third_img" src="/images/person_image.png" alt="Person sitting in front of a desk">
</body>
</html>
لا تقلق إذا لم تفهم كود CSS السابق؛ ستتعرف على كل شئ بالتفصيل فى سلسلة CSS.
ربط الصورة برابط تشعبي – Hyperlink
لربط صورة برابط تشعبى، قٌم بتضمين وسم <img> داخل وسم <a> فقط.
مثال للتوضيح
إستخدام الصورة كرابط، أى إذا قُمت بالضغط على الصورة الموجوده فى هذا المثال سيفتح الرابط الموجود فى سمة “href”:
<a href="https://www.albashmoparmeg.com/">
<img src="/images/logo_albashmoparmeg.png" alt="Logo Website albashmoparmeg!">
</a>
أين يمكنك وضع الصور في الكود الخاص بك؟
مكان وضع الصورة في الكود سيؤثر ذلك على كيفية عرض الصورة، هناك ثلاثة أمثلة على وضع الصورة التي تنتج نتائج مختلفة:
- قبل الفقرة.
- داخل (بداية/نهاية) الفقرة.
- في منتصف الفقرة.
- بعد الفقرة.
1. قبل الفقرة:
مثال للتوضيح
إستخدام الصورة قبل الفقرة:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam enim id venenatis ornare. Cras eu laoreet diam. Aliquam lobortis suscipit ex eu mollis. Integer consectetur nulla metus, venenatis turpis cursus vel. Ut ullamcorper quis mi in molestie.
<img src="/images/person_image.png" alt="Logo Website albashmoparmeg!">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla aliquam enim id venenatis ornare. Cras eu laoreet diam.
Aliquam lobortis suscipit ex eu mollis.
Integer consectetur nulla metus,
venenatis turpis cursus vel. Ut ullamcorper quis mi in molestie.
</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam enim id venenatis ornare. Cras eu laoreet diam. Aliquam lobortis suscipit ex eu mollis. Integer consectetur nulla metus, venenatis turpis cursus vel. Ut ullamcorper quis mi in molestie.
2. داخل بداية أو نهاية الفقرة:
مثال للتوضيح
إستخدام الصورة داخل بداية الفقرة:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla aliquam enim id venenatis ornare. Cras eu laoreet diam.
Aliquam lobortis suscipit ex eu mollis.
Integer consectetur nulla metus,
venenatis turpis cursus vel. Ut ullamcorper quis mi in molestie.
<p>
<img src="/images/logo_albashmoparmeg.png" alt="Logo Website albashmoparmeg!"> Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Nulla aliquam enim id venenatis ornare. Cras eu laoreet diam.
Aliquam lobortis suscipit ex eu mollis.
Integer consectetur nulla metus,
venenatis turpis cursus vel. Ut ullamcorper quis mi in molestie.
</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla aliquam enim id venenatis ornare. Cras eu laoreet diam.
Aliquam lobortis suscipit ex eu mollis.
Integer consectetur nulla metus,
venenatis turpis cursus vel. Ut ullamcorper quis mi in molestie.
3. فى منتصف الفقرة:
مثال للتوضيح
إستخدام الصورة فى منتصف الفقرة:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla aliquam enim id venenatis ornare. Cras eu laoreet diam.
Aliquam lobortis suscipit ex eu mollis.
Integer consectetur nulla metus,
venenatis turpis cursus vel. Ut ullamcorper quis mi in molestie.
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Nulla aliquam enim id venenatis ornare. Cras eu laoreet diam.
Aliquam lobortis suscipit ex eu mollis.
<img src="/images/logo_albashmoparmeg.png" alt="Logo Website albashmoparmeg!">
Integer consectetur nulla metus,
venenatis turpis cursus vel. Ut ullamcorper quis mi in molestie.
</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla aliquam enim id venenatis ornare. Cras eu laoreet diam.
Aliquam lobortis suscipit ex eu mollis.
Integer consectetur nulla metus,
venenatis turpis cursus vel. Ut ullamcorper quis mi in molestie.
4. بعد الفقرة:
مثال للتوضيح
إستخدام الصورة بعد الفقرة:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam enim id venenatis ornare. Cras eu laoreet diam. Aliquam lobortis suscipit ex eu mollis. Integer consectetur nulla metus, venenatis turpis cursus vel. Ut ullamcorper quis mi in molestie.
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Nulla aliquam enim id venenatis ornare. Cras eu laoreet diam.
Aliquam lobortis suscipit ex eu mollis.
Integer consectetur nulla metus,
venenatis turpis cursus vel. Ut ullamcorper quis mi in molestie.
</p>
<img src="/images/logo_albashmoparmeg.png" alt="Logo Website albashmoparmeg!">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam enim id venenatis ornare. Cras eu laoreet diam. Aliquam lobortis suscipit ex eu mollis. Integer consectetur nulla metus, venenatis turpis cursus vel. Ut ullamcorper quis mi in molestie.
يمكنك إستخدام مواضع الصورة السابقة مع أى عنصر من عناصر لغة HTML، ماعدا بعض العناصر.
يمكنك أيضًا استخدم خاصية الـ float الموجوده فى CSS لجعل الصورة على يمين أو يسار الصفحة.
كيف تُخزن الصور في موقعك؟
إذا كنت تقوم ببناء موقع ويب من الصفر، فهذا جيد لإنشاء مجلد منفصل لجميع الصور الخاصة بالموقع.
وإذا كان موقعك كبير وبه الكثير من الصور المختلفة فقد ترغب في إضافة مجلدات فرعية داخل مجلد الصور الأساسي.
على سبيل المثال، إذا لديك موقع تجارة إلكترونية فسيكون لديك صور:
- للمنتجات (يمكنك وضعهم فى مجلد فرعى بإسم “products“).
- للأقسام (يمكنك وضعهم فى مجلد فرعى بإسم “categories“).
- للزبائن (يمكنك وضعهم فى مجلد فرعى بإسم “customers“)
- للشعارات والأزرار (يمكنك وضعهم فى مجلد فرعى بإسم “layout“)، وهكذا.
الاحتفاظ بالصور في مجلد منفصل سيساعدك على تنظيم موقعك.
قَيم نفسك – Mini quiz
قُم بإجراء هذا الإختبار القصير على درس “HTML Images” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!