إعلان
دورة تطوير التطبيقات باستخدام لغة 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 الصور

    أهمية الصور و أنواعها

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


    أنواع الصور التي يمكن عرضها

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

    أنواع الصور التي تعمل على جميع أنواع المتصفحات المشهورة (Chrome, Edge, Firefox, Safari, Opera):
    .png - .apng - .gif - .jpg - .jpeg - .ico - .cur -.jfif - .pjpeg - .pjp - .svg


    أحجام الصور و حقوق النشر

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

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

    إضافة صورة في الصفحة

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


    في المثال التالي قمنا بإضافة صورة في الصفحة باستخدام الوسم <img>.

    مثال

    <img src="https://harmash.com/tutorials/html/images/html-5-icon.PNG">
    		

    جرب الكود

    وضع نص بديل للصورة

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

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

    لوضع نص بديل للصورة نضيف الخاصية alt و نمرر لها النص الذي سيظهر في حال لم يتم عرض الصورة.


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

    المثال الأول

    <img src="my-photo.PNG">
    		

    جرب الكود



    في المثال التالي قمنا بإضافة صورة في الصفحة مسارها غير صحيح عمداً و قمنا بوضع نص بديل حتى يظهر مكانها.

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

    <img src="my-photo.PNG" alt="Mhamad Harmush">
    		

    جرب الكود

    تحديد حجم الصورة

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

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

    • width نستخدمها لتحديد عرض الصورة التي سيتم عرضها بالبكسل.
    • height نستخدمها لتحديد طول الصورة التي سيتم عرضها بالبكسل.


    أهمية تحديد حجم الصورة

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

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



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

    مثال

    <img src="https://harmash.com/tutorials/html/images/mhamad-harmush.PNG" width="200" height="200">
    		

    جرب الكود

    إعلان

    Eqla3Tech.com

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

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

    الدورات

    أدوات مساعدة

    الأقسام

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