إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    HTML الوسم <img>

    تعريفه

    نستخدم الوسم <img> على هذا النحو <img src="url"> لعرض صورة في الصفحة.
    مكان الكلمة url نضع مسار الصورة التي نريد عرضها.

    دعم المتصفحات

    الجدول التالي يظهر المتصفحات التي تدعم الوسم <img>.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

    خصائصه

    نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.


    الخاصية alt

    نضيفها للوسم لوضع نص بديل يظهر مكانه في حال لم يستطع المتصفح عرض الصورة لأي سبب كان.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


    الخاصية crossorigin

    نضيفها للوسم في حال أردنا عرض صورة موجودة في موقع آخر و هذه الصورة سيتم عرضها لاحقاً بداخل <canvas>.
    سبب ذلك أن الوسم <canvas> لا يسمح برسم صورة بداخله ما لم تكن بالأساس موجودة في نفس الموقع.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

    يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية crossorigin لتحديد ما هي المعلومات التي سيتم إرسالها مع الطلب الذي يقضي بجلب الصورة.

    القيمة معناها
    anonymous في حال وضع هذا القيمة فهذا يعني أن الصورة التي يتم جلبها لا يمكن استخدامها بداخل <canvas> في حال كانت من موقع آخر هذه القيمة الإفتراضية لها في حال لم تحدد ذلك بنفسك أو في حال مررت لها قيمة خاطئة.
    use-credentials في حال وضع هذه القيمة فهذا يعني أنه يمكن استخدام الصورة بداخل <canvas> حتى لو كانت من موقع آخر لطالما أن الموقع الآخر في الأساس لا يعارض ذلك.


    الخاصية decoding

    نضيفها للوسم في حال أردنا تحديد ما إذا كان المتصفح سيعرض الصورة في الصفحة أثناء جلبها حتى لو لم يكن المتصفح قد قام بتحميل كل أجزاءها أم أنه يجب أن يتنظر أن ينتهي تحميل الصورة حتى يعرضها في الصفحة.
    سبب ذلك أن الوسم <canvas> لا يسمح برسم صورة بداخله ما لم تكن بالأساس موجودة في نفس الموقع.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم ≤79 63 مدعوم 11.1 مدعوم مدعوم 63 مدعوم 11.1 مدعوم

    يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية decoding لتحديد متى سيتم عرض الصورة في الصفحة.

    القيمة معناها
    sync في حال أردت أن يتم تحميل الصورة بشكل متزامن و هذا يعني أنه سيتم عرضها بعد أن يتم يكتمل تحميلها. و هنا نود الإشارة إلى أن المتصفح لن يظهر أي محتوى آخر في الصفحة قبل أن يتم جلب الصورة.
    async في حال أردت أن يتم تحميل الصورة بشكل غير متزامن و هذا يعني أنه سيتم عرض كل جزء يتم تحميله من الصورة بشكل مباشر في المتصفح بدون إنتظار أن يكتمل تحميلها.
    auto هذا هو الحال الإفتراضي حيث يقرر المتصفح ما هو الأنسب و يفعله.


    الخاصية height

    يمكن إضافتها للوسم لتحديد كم سيكون طول الصورة التي سيتم عرضها بالبكسل.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


    الخاصية ismap

    يمكن إضافتها للوسم لإعلام الموقع أين قام المستخدم بالنقر بالضبط على الصورة.

    ملاحظة: الصورة هنا يجب أن تكون موضوعة بداخل الرابط الذي سيتم إرسال الإحداثيات إليه كالتالي <a href="/imagemapper"><img src="logo.png" ismap/></a> على سبيل المثال.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


    الخاصية referrerpolicy

    يمكن إضافتها للوسم بهدف تحديد ما هي المعلومات التي سيتم إرفاقها مع طلب جلب الصورة من الموقع.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    51 79 50 38 11.1 51 51 50 41 غير مدعوم 7.2

    يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية rel لتحديد ما هي المعلومات التي سيتم إرسالها مع الطلب.

    القيمة معناها
    no-referrer لعدم إرسال أي معلومة مع طلب المستخدم.
    no-referrer-when-downgrade لعدم إرسال أي معلومة في Header طلب المستخدم ( أي المعلومات التي يرسلها المستخدم للموقع و لا تظهر في الرابط ) إذا كان الموقع الذي سيتلقى الطلب لا يستخدم البروتوكل https و هذا هو الحال الإفتراضي.
    origin لإرسال المعلومات التالية فقط مع طلب المستخدم ( scheme - host - port ).
    origin-when-cross-origin لإرسال المعلومات التالية مع طلب المستخدم ( scheme - host - port ) بالإضافة إلى المسار ( path ) في حال كان الرابط موجود في نفس الموقع.
    unsafe-url لإرسال المعلومات التالية فقط مع طلب المستخدم ( origin - path ) أي بدون أي معلومة حساسة مثل إسم المستخدم و كلمة مروره.


    الخاصية sizes

    يمكن إضافتها للوسم لجعل حجم الصورة التي يتم عرضها يظهر بشكل متجاوب ( Responsive ) مع حجم الصفحة, مع الإشارة إلى أن هذه الخاصية تعمل فقط في حال كان المتصفح سيعرض إحدى الصور الموضوع مسارها بواسطة الخاصية srcset و التي تم تحديد قياسها أيضاً بالإعتماد على الحرف w.

    ملاحظة: في حال كان حجم الصورة في الصفحة محدد بواسطة CSS فإن المتصفح سيتجاهل خصائص تحديد حجم الصورة التي تم وضعها بواسطة الخاصية sizes.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


    الخاصية src

    يجب إضافتها للوسم لتحديد مسار الصورة المراد عرضها.
    مسار الصورة يجب تمريره لها كقيمة.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


    الخاصية srcset

    يمكن إضافتها للوسم لتجهيز صور أحجامها مختلفة و على حسب حجم الشاشة يتم عرض الصورة التي يتناسب حجمها معها.
    مسار أي صورة يتمريره لها يجب تمرير عرض الشاشة معه الذي على أساسه سيتم اختيار الصورة و هذا الأمر يمكن فعله بأسلوبين كالتالي:

    • إضافة الحرف w لتحديد عرض الشاشة الذي على أساسه سيتم تحميل الصورة بالبكسل.
    • إضافة الحرف x لتحديد عرض الشاشة الذي على أساسه سيتم تحميل الصورة بشكل تقريبي.

    لا تقلق ستفهم ما نقصده بالحرفين w و x لاحقاً من الأمثلة.

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

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    34 ≤18 38 21 8 37 34 38 21 8 2.0


    الخاصية width

    يمكن إضافتها للوسم لتحديد كم سيكون عرض الصورة التي سيتم عرضها بالبكسل.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

    إستخدامه

    في المثال التالي قمنا بإضافة صورة بوسطة الوسم <img> مع تحديد أن عرضها 200 بكسل و طولها 200 بكسل أيضاً.

    المثال الأول

    <img src="harmash-logo.PNG"
    	alt="HTML 5 Logo"
    	width="200"
    	height="200">
    		

    جرب الكود



    في المثال التالي قمنا باستخدام الخاصية srcset لوضع صورتين إضافيتين أحجامها مختلفة بهدف جعل المتصفح يحمل الصورة الأخف حجماً و التي تتناسب مع حجم عرض الصورة في الصفحة. ركز في النقاط التالية لتعرف كيف يختار المتصفح الصورة التي سيتم تحميلها و عرضها في الصفحة:

    • الصورة الموضوع مسارها كقيمة للخاصية src يعتمدها المتصفح في حال كانت الخاصية srcset غير معروفة بالنسبة له فقط.
    • الصورة الأولى الموضوع مسارها كقيمة للخاصية srcset يعتمدها المتصفح في حال كان ناتج قسمة عرض الصورة على عرض الشاشة قريب إلى 1x, مثال: 1.45623.
    • الصورة الثانية الموضوع مسارها كقيمة للخاصية srcset يعتمدها المتصفح في حال كان ناتج قسمة عرض الصورة على عرض الشاشة قريب إلى 2x, مثال: 2.83239.

    المثال الثاني

    <img src="default.PNG"
    	srcset="small.PNG 1x,
    		    medium.PNG 2x">
    		

    جرب الكود



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

    • الصورة الموضوع مسارها كقيمة للخاصية src يعتمدها المتصفح في حال كانت الخاصية srcset غير معروفة بالنسبة له فقط.
    • الصورة الأولى الموضوع مسارها كقيمة للخاصية srcset يعتمدها المتصفح في حال كان حجم الصفحة لا يتجاوز 500 بكسل.
    • الصورة الثانية الموضوع مسارها كقيمة للخاصية srcset يعتمدها المتصفح في حال كان حجم الصفحة يتجاوز 500 بكسل لأن حجمها أكبر و ملائم أكثر للعرض.

    المثال الثالث

    <img src="default.PNG"
    	srcset="small.PNG 500w,
    			medium.PNG 1500w">
    		

    جرب الكود



    في المثال التالي قمنا باستخدام الخاصية sizes لجعل حجم الصورة التي يقرر المتصفح تحميلها تظهر بشكل متجاوب أيضاً مع حجم الصفحة بالشكل الذي نحدده لها.
    هنا بعد أن يتم تحميل الصورة التي تتناسب مع عرض شاشة المستخدم, سيقوم المتصفح بعرضها بحجم 100 × 100 إذا كان عرض الصفحة لا يتجاوز 600 بكسل, غير ذلك فإنه يعرضها بحجم 200 × 200 مهما كان حجم الصفحة كبيراً.

    ملاحظة: القيم التي نمررها للخاصية sizes بداخل القوسين نضعها بالوحدة بكسل, أما القيمتين اللتين نضعهما بعد القوسين فيمكن وضعهما بأسلوب مسموح في لغة CSS لتحديد الحجم.

    المثال الرابع

    <img src="default.PNG"
    	srcset="small.PNG 500w,
    			medium.PNG 1500w"
    	sizes="(max-width: 600px) 100px, 200px">
    		

    جرب الكود

    تصميمه الإفتراضي

    بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

    img {
    	display: inline-block;
    }
    	

    نصائح و ملاحظات

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

    إذا كانت الصفحة تحتوي العديد من الصور, قم بوضع صور أحجامها مقبولة مثل 200KB كحد أقصى لأنه كلما كان حجم الصور أكبر كلما استغرق المتصفح وقتاً حتى يحمّلها و من ثم يعرضها للمستخدم و هذا الأمر سيء جداً بالنسبة لتجربة المستخدم.

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

    عند عرض صور في موقعك, تأكد دائماً من أن لا تكون الصور التي تنشرها عليها حقوق نشر تمنع استخدامها - بمعنى أنها غير مجانية - لأنه في حال كانت كذلك يمكن لصاحب الصور الإبلاغ عنك بكل سهولة مما قد يؤدي لحذف موقعك.

    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات

    الدورات

    أدوات مساعدة

    الأقسام

    دورات
    مقالات أسئلة مشاريع كتب