الكورس

Advertisements

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> السابق:

  1. <img>: الوسم الخاص بإضافة صورة فى صفحات الويب.
  2. src: تٌستخدم هذه السمة لتحديد مسار أو عنوان URL للصورة.
  3. alt: إختصار لكلمة (alternative) وتحدد هذه السمة نصًا بديلاً للصورة، فى حالة تعذر عرض الصورة لسبب ما.

 

مثال للتوضيح

لتضمين صورة فى صفحات الويب، إتبع هذه الطريقة:

Person sitting in front of a desk
 <img src="/images/person_image.png" alt="Person sitting in front of a desk">
Person sitting in front of a desk

كلًا من السمتين src و alt مطلوبين (required) أى يجب تضمينهم عند إستخدام وسم <img>.

هناك بعض المواقف التي قد لا يعرض فيها المستعرض الصور، مثل: المتصفحات الغير المرئية (الخاصة بالأشخاص ذوو الإعاقة البصرية)، أو فى حالة الصورة غير صالحة أو من نوع غير مدعوم. وفى هذه الحالات يتم إستخدام النص البديل الموجود في سمة alt للصورة، لذلك حاول توفر قيمة ذات معنى لسمة alt دائمًا.


 

يمكنك إضافة عنوان للصورة أيضًا بإستخدام سمة title، كالتالى:

مثال للتوضيح

لتوفير معلومات إضافية للصورة نستخدم سمة title:

Person sitting in front of a desk
<!-- 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...">
Person sitting in front of a desk

معظم المتصفحات تعرض محتوى سمة title عندما يقوم المستخدم بعمل hover فوق الصورة.


 

تحديد طول وعرض الصور

 

يوفر الوسم <img> سمتين يتم إستخدامهم لتحديد أبعاد الصورة (الطول/العرض)، وهم:

  • height: لتحدد ارتفاع الصورة بالبكسل px.
  • width: لتحدد عرض الصورة بالبكسل px

 

مثال للتوضيح

لإعدات عرض وإرتفاع الصورة بإستخدام سمات (height/width):

Person sitting in front of a desk Person sitting in front of a desk Person sitting in front of a desk
<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...">
Person sitting in front of a desk Person sitting in front of a desk Person sitting in front of a desk

 

يمكنك تحديد أبعاد الصورة بإستخدام CSS، كما فى المثال التوضيحي التالى.

 

مثال للتوضيح

لإعدات عرض وإرتفاع الصورة بإستخدام خصائص CSS؛ (height/width):

Person sitting in front of a desk Person sitting in front of a desk Person sitting in front of a desk
<!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>
Person sitting in front of a desk Person sitting in front of a desk Person sitting in front of a desk

لا تقلق إذا لم تفهم كود CSS السابق؛ ستتعرف على كل شئ بالتفصيل فى سلسلة CSS.


 

ربط الصورة برابط تشعبي – Hyperlink

 

لربط صورة برابط تشعبى، قٌم بتضمين وسم <img> داخل وسم <a> فقط.

 

مثال للتوضيح

إستخدام الصورة كرابط، أى إذا قُمت بالضغط على الصورة الموجوده فى هذا المثال سيفتح الرابط الموجود فى سمة “href”:

<a href="https://www.albashmoparmeg.com/">
    <img src="/images/logo_albashmoparmeg.png" alt="Logo Website albashmoparmeg!">
</a>

 

أين يمكنك وضع الصور في الكود الخاص بك؟

 

مكان وضع الصورة في الكود سيؤثر ذلك على كيفية عرض الصورة، هناك ثلاثة أمثلة على وضع الصورة التي تنتج نتائج مختلفة:

  •  قبل الفقرة.
  • داخل (بداية/نهاية) الفقرة.
  •  في منتصف الفقرة.
  • بعد الفقرة.

 

1. قبل الفقرة:

 

مثال للتوضيح

إستخدام الصورة قبل الفقرة:

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.

<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>
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.

 

2. داخل بداية أو نهاية الفقرة:

 

مثال للتوضيح

إستخدام الصورة داخل بداية الفقرة:

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>
    <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>

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.

 

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. 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.
    <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. Logo Website albashmoparmeg! 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.

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>
 <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.

Logo Website albashmoparmeg!

يمكنك إستخدام مواضع الصورة السابقة مع أى عنصر من عناصر لغة HTML، ماعدا بعض العناصر.

يمكنك أيضًا استخدم خاصية الـ float الموجوده فى CSS لجعل الصورة على يمين أو يسار الصفحة.


 

كيف تُخزن الصور في موقعك؟

 

إذا كنت تقوم ببناء موقع ويب من الصفر، فهذا جيد لإنشاء مجلد منفصل لجميع الصور الخاصة بالموقع.

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

على سبيل المثال، إذا لديك موقع تجارة إلكترونية فسيكون لديك صور:

  1. للمنتجات (يمكنك وضعهم فى مجلد فرعى بإسم “products“).
  2. للأقسام (يمكنك وضعهم فى مجلد فرعى بإسم “categories“).
  3. للزبائن (يمكنك وضعهم فى مجلد فرعى بإسم “customers“)
  4. للشعارات والأزرار (يمكنك وضعهم فى مجلد فرعى بإسم “layout“)، وهكذا.

 

الاحتفاظ بالصور في مجلد منفصل سيساعدك على تنظيم موقعك.


قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML Images” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.




الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements