الصور في HTML
لان الصورة خيرٌ من الف كلمة، فهي أكثر عناصر الميديا استخداماً على الويب
تقديم
كتب هذا المقال أشرف عبدالدايم مطور واجهة المستخدم في TieLabs سابقاً، 95% من كود CSS الموجود في قالب جنة من كتابة أشرف :)
الصور من أفضل العناصر التي يمكنك إضافتها في صفحة الويب التي تقوم بإنشاءها. حيث تجعل الصفحة تظهر بشكل جذاب لزوار موقعك، كما أن الصور المعبرة عن المحتوى تجعل زائر صفحتك يفهم المعنى العام للمحتوى حتى من قبل أن يشرع في القراءة.
جميع صيغ الصور التي يمكنك عرضها على جهازك الكمبيوتر، يمكنك عرضها أيضاً على متصفح الويب .jpg و .gif (سواء كانت متحركة أم لا) و .png (سواء كانت شفافه أم لا) و .svg وبعض الصيغ الأخرى.
بنية الصورة (Syntax)
الصور تستخدم العنصر <img> وهو عنصر منغلق ذاتياً أي لا يحتوي على وسم غلق، لتحديد مسار الصورة التي تريد عرضها تستخدم الخاصية src
إليك المثال التالي:
-your-website-folder
—home.html
—contact.html
—about.html
—natural.jpg
عندما تكون في أي صحفة من الصفحات الموجودة على موقعك (home.html أو contact.html أو about.html) يمكنك استخدام الصورة كالتالي:
| 1 2 3 4 5 6 7 | <p> Look at this image! <br> <img src="natural.jpg"> </p> |
صيغ الصور (Image Formats)
هناك عدة صيغ أساسية للصور المستخدمة في صفحات الويب، كل صيغة صُممت لتناسب غرض معين، وفهمك لهذة الأغراض سياسعدك كثيراً لتحسين جودة صفحات الويب التي سوف تقوم بإنشائها.
الصيغة JPG أو JPEG
الصيغة jpg تم تصميمها للتعامل مع الصور التي تحتوي على الكثير الألوان بدون زيادة كبيرة في حجم الصور، وهذا ما يجعلها مناسبة للصور التي تحتوي على تدريجات الألوان، على الجانب الآخر فإن الصور ذات الصيغ jpg لا تسمح بعرض الأجزاء الشفافة في الصور.
بشكل عام فإن الصور ذات الصيغة jpg من أكثر الصور استخداماً، فأنسب صيغة للصور الفوتوغرافيه هي الصيغة jpg حيث تحافظ على جودة الصورة وفي نفس الوقت الحجم الصغير لملف الصور.
الصيغة GIF
هذة الصيغة صُممت خصيصاً لإنشاء الصور التي تحتوي على بعض الرسوم المتحركة، ، لكنها محدودة نوعاً ما من حيث كمية الألوان في الصورة بخلاف الصور ذات الصغية jpg. (لا تستخدم الصور ذات الصيغة gif للصور العادية إطلاقاً).
أما بالنسبة للشفافية فهناك خيارين فقط لدرجة الشفافية إما كامل الشفافية، أو غير شفاف(خيار الشفافية في الصيغة gif هو خيار binary يأخذ القيم صفر أو ١ فقط). وهذا يعني أنك لن تستيع الحصول على شفافية متوسطة مثلاً، وإذا كنت تريد صور ذات درجة شفافية معينه بدون رسوم متحركة، فالخيار الأمثل هو الصيغة png.
الصيغة PNG
الصيغة png هي الخيار الأمثل لجميع الصور إلا في حالتين فقط (الصور الفوتوغرافية، الرسوم المتحركة) عدا ذلك تكون الصغية مناسبة جداً، تتعامل مع الشفافية بدرجة عالية من الدقة وليس لديها حدود لكمية الألوان المستخدمة في الصورة وهذا ما يجعلها الخيار الأمثل للأيقونات، لوجو الموقع، والرسوم التوضيحية.
الصيغة WebP
تعمل غوغل على WebP منذ عدة سنوات بهدف تقليل أحجام ملفات الصور دون المساس بالجودة. من أجل القيام بذلك الصورة بتنسيق WebP توظف خوارزمية ضغط أكثر كفاءة. وهذا يجعل أحجام الملفات مع الصور على الويب أصغر بكثير من JPEG أو PNG.
الصيغة SVG
بخلاف الصيغ السابقة التي تعتمد على نظام البيكسل (pixel-based) ، فإن الصيغة SVG تعتمد على نظام الرسوميات المتجهية متغيرة الحجم (vector-based) هذا يعني أن الصور ذات الصغية SVG ستظل بنفس الدقة مهما قمت بتكبيرها أو تصغيرها، لكن في باقي الصيغ إذا قمت بتكبير الصور عن الأبعاد الطبيعية ستفقد دقة الصور تدريجاً كلما قمت بتكبيرها.
أيا كانت صيغة الصورة، تقوم بإضافتها كما بالمثال بالأعلى، فقط قم بإضافة إسم الصور
| 1 2 3 4 5 6 | <img src="natural.jpg"> <img src="natural.gif”> <img src="natural.png"> <img src="natural.svg"> |
أبعاد الصورة (Dimensions)
كل صور لها بعدين، الطول (height) والعرض (width) وعندما تقوم بوضع صورة في صفحة الويب، لست بحاجة إلى تعيين أبعاد الصورة، سيقوم المتصفح بعرض الصورة بالحجم الكامل للصورة بشكل إفتراضي، أما في حالة تعين أبعاد الصورة بشكل مختلف عن أبعاد الصورة الطبيعية، سيقوم المتصفح بتطبيق الأبعاد الجديدة على الصورة.
| 1 2 3 4 5 6 7 | <p> Look at this image! <br> <img src="natural.jpg" width="400" height="280"> </p> |
في المثال السابق سيتجاهل المتصفحة الأبعاد الطبيعية للصورة وسيقوم بعرضها بالأبعاد الجديدة التي تم تعينها بإستخدام الخواص height و width.
ما هو نوع العنصر <img> هل هو ضمن العناصر block-level أم inline-level؟
على الرغم من أن الصورة لها أبعاد (الطول والعرض) ومساحتها غالباً تكون كبيرة (مقارنةً بالنصوص والعناصر inline-level التي تعيش في نفس السطر( إلا أن الصور ليست ضمن العناصر block-level بل من ضمن العناصر inline-level.
تذكر أن الصور من العناصر المنغلقة ذاتياً أي التي ليس لها وسم إنغلاق، وهذا معناه أنه لا يمكنك وضع أي عناصر html أخرى داخل وسم الصورة. لذلك هي من العناصر inline-level. وتظهر في المتصفح جنباً إلى جنب مع باقي عناصر الـ inline-level مثل <a> و <strong> و <em>.
الزهور عبارة عن نباتات تمتاز بمنظرها 
الرائع والمريح للأعصاب، وبروائحها الجذابة، وتزرع في أغلب البساتين المنزلية والعامة؛ لأنّها تعطي جمالاً خلاباً ومميزاً للمكان، وتختلف الزهور عن بعضها في طريقة التكاثر، والحجم، والروائح، وموسم الإنبات، واللون، كما تعتبر رمزاً للجمال، والسعادة، والحب، والحزن، والقوة، والإخلاص، ولكل نوعٍ من هذه الزهور معنى خاص تدلّ عليه، وكلّ نوعٍ له بيئة خاصة ينمو بها.
| 1 2 3 | <p>الزهور عبارة عن نباتات تمتاز بمنظرها <img src="https://mo3aser.com/wp-content/uploads/2018/07/flower.jpg"> الرائع والمريح للأعصاب، وبروائحها الجذابة، وتزرع في أغلب البساتين المنزلية والعامة؛ لأنّها تعطي جمالاً خلاباً ومميزاً للمكان، وتختلف الزهور عن بعضها في طريقة التكاثر، والحجم، والروائح، وموسم الإنبات، واللون، كما تعتبر رمزاً للجمال، والسعادة، والحب، والحزن، والقوة، والإخلاص، ولكل نوعٍ من هذه الزهور معنى خاص تدلّ عليه، وكلّ نوعٍ له بيئة خاصة ينمو بها.</p> |
ولان الصورة ضمن العناصر inline-level فقد ظهرت جنباً إلى جنب مع باقي الكلمات في نفس السطر، وهذا ما يجعلها تظهر بشكل غير متوقع:
الزهور عبارة عن نباتات تمتاز بمنظرها الرائع والمريح للأعصاب، وبروائحها الجذابة، وتزرع في أغلب البساتين المنزلية والعامة؛ لأنّها تعطي جمالاً خلاباً ومميزاً للمكان، وتختلف الزهور عن بعضها في طريقة التكاثر، والحجم، والروائح، وموسم الإنبات، واللون، كما تعتبر رمزاً للجمال، والسعادة، والحب، والحزن، والقوة، والإخلاص، ولكل نوعٍ من هذه الزهور معنى خاص تدلّ عليه، وكلّ نوعٍ له بيئة خاصة ينمو بها.
| 1 2 3 | <p>الزهور عبارة عن نباتات تمتاز بمنظرها الرائع والمريح للأعصاب، وبروائحها الجذابة، وتزرع في أغلب البساتين المنزلية والعامة؛ لأنّها تعطي جمالاً خلاباً <img src="https://mo3aser.com/wp-content/uploads/2018/07/flower.jpg"> ومميزاً للمكان، وتختلف الزهور عن بعضها في طريقة التكاثر، والحجم، والروائح، وموسم الإنبات، واللون، كما تعتبر رمزاً للجمال، والسعادة، والحب، والحزن، والقوة، والإخلاص، ولكل نوعٍ من هذه الزهور معنى خاص تدلّ عليه، وكلّ نوعٍ له بيئة خاصة ينمو بها.</p> |
لذلك نستخدم CSS بعد ذلك لنجعل المحتوى أكثر تنظيماً:
الزهور عبارة عن نباتات تمتاز بمنظرها الرائع والمريح للأعصاب، وبروائحها الجذابة، وتزرع في أغلب البساتين المنزلية والعامة؛ لأنّها تعطي جمالاً خلاباً ومميزاً للمكان، وتختلف الزهور عن بعضها في طريقة التكاثر، والحجم، والروائح، وموسم الإنبات، واللون، كما تعتبر رمزاً للجمال، والسعادة، والحب، والحزن، والقوة، والإخلاص، ولكل نوعٍ من هذه الزهور معنى خاص تدلّ عليه، وكلّ نوعٍ له بيئة خاصة ينمو بها. هي أحد أهم أجزاء النبات المزهرة؛ فهي العضو من النبتة الذي يتخصّص بعملية التكاثر؛ حيث تدمج الزهرة كلّاً من البويضات المؤنثة مع حبوب اللقاح مما يؤدي إلى تكون البذور، وتمرّ هذه العملية بعدة مراحل مهمّة منها التلقيح، والإخصاب، أمّا بالنسبة لمجموعة الأزهار المتواجدة فوق فرع ما من فروع النبتة فتسمّى عادة بالنورة.
| 1 2 3 | <p class="flower-p"> <img src="https://mo3aser.com/wp-content/uploads/2018/07/flower.jpg"> الزهور عبارة عن نباتات تمتاز بمنظرها الرائع والمريح للأعصاب، وبروائحها الجذابة، وتزرع في أغلب البساتين المنزلية والعامة؛ لأنّها تعطي جمالاً خلاباً ومميزاً للمكان، وتختلف الزهور عن بعضها في طريقة التكاثر، والحجم، والروائح، وموسم الإنبات، واللون، كما تعتبر رمزاً للجمال، والسعادة، والحب، والحزن، والقوة، والإخلاص، ولكل نوعٍ من هذه الزهور معنى خاص تدلّ عليه، وكلّ نوعٍ له بيئة خاصة ينمو بها. هي أحد أهم أجزاء النبات المزهرة؛ فهي العضو من النبتة الذي يتخصّص بعملية التكاثر؛ حيث تدمج الزهرة كلّاً من البويضات المؤنثة مع حبوب اللقاح مما يؤدي إلى تكون البذور، وتمرّ هذه العملية بعدة مراحل مهمّة منها التلقيح، والإخصاب، أمّا بالنسبة لمجموعة الأزهار المتواجدة فوق فرع ما من فروع النبتة فتسمّى عادة بالنورة.</p> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .flower-p{ text-align: right; font-size: 15px; line-height: 1.8em; } .flower-p img{ float: right; margin-left: 20px; margin-top: 10px; } |
خاصية alt
من أهم الخواص التي يمكنك إضافتها مع العنصر <img> ومن أكثر الخواص نسياناً من قبل المطورين (المبتدئين) لان تأثيره لا يظهر لك في معظم الأحيان، لكنه ضورري.
ماذا لو أن مسار الصورة الذي أدخلته لا يعمل؟ ماذا لو أن سرعة اتصالك بالإنترنت ضغيفة جداً لدرجة أنه لا يمكن للمتصفح تحميل الصورة؟ ماذ لو أن شخصاً لا يستطيع الرؤية يتصفح موقع بإستخدام قارئ الشاشة؟
الحل هو استخدام خاصية alt
بإستخدام خاصية alt يمكنك وضع نص بديل يظهر بدل الصورة إذا حدثت حالة من الحالات السابقة. ومن المهم أيضاً أن يكون النص البديل معبر عن الصورة.
| 1 2 3 4 5 6 7 | <p> There is a pug <img src="pug.jpg" alt="the pug dog"> in the middle of the paragraph! </p> |
