السلام عليكم، سنرى في هذا الدرس الصور، تنسيقاتها، أنواعها و كيفية إقحامها في ملف HTML.
تنسيقات الصور و دعمها من طرف متصفحات الإنترنت
هناك العديد من تنسيقات الصور، لكن أشهرها و المتعامل بها هم تنسيقات GIF، JPG و PNG.
| التنسيق JPG | تنسيق يصلح للصور المتحصل عنها بآلات التصوير |
|---|---|
| التنسيق GIF | تنسيق يصلح للصور الديناميكية أو الصور المتحركة |
| التنسيق PNG | تنسيق يصلح للصور الشفافة و العالية الجودة (أحسن تنسيقات الصور) |
أصبحت أكبر متصفحات الإنترنت تدعم أغلب تنسيقات الصور في عصرنا الحالي، خصوصاً التنسيقات أعلاه، و يعرف نوع تنسيق الصورة باللاحقة التي تكون في إسم الصورة.
كيفية إقحام الصور في ملف HTML
العنصر المسؤول عن إقحام الصور في ملف HTML هو عنصر من نوع Inline إسمه 'IMG'، و IMG مأخوذة نسبة إلى كلمة إنجليزية هي Image أي صورة، و يحتوي عنصر 'IMG' على وسم يتيم، و لديه Attribut واحدة إجبارية ألا و هي 'SRC' مأخوذة من كلمة Source الإنجليزية، و تعني مصدر، و هي المسؤولة عن إقحام الصور من الويب أو من المخدم الخاص عبر قيمتها.
إقحام الصور في ملف HTML لاستدعائها من الويب
يتطلب استدعاء الصورة من الويب كتابة العنوان URL لديها في قيمة 'SRC' للعنصر 'IMG' الخاص بإقحامها، و للحصول على عنوان URL لأي صورة من الويب هناك طريقتان :
- النقر عليها بزر الفأرة الأيمن، ثم النقر على "Copier l'adresse de l'image / Copy image address" (حسب لغة المتصفح).
- فتحها في صفحة أخرى على نفس المتصفح بالنقر عليها بزر الفأرة الأيمن، ثم النقر على "Ouvrir le lien dans un nouvel onglet / Open link in new tab" (حسب لغة المتصفح) ثم نسخ عنوان URL للصورة في صفحتها الخاصة في المتصفح، دائماً يختم عنوان URL للصورة بإسم تنسيقها.
- النقر عليها بزر الفأرة الأيمن، ثم النقر على "Copier l'adresse de l'image / Copy image address" (حسب لغة المتصفح).
- فتحها في صفحة أخرى على نفس المتصفح بالنقر عليها بزر الفأرة الأيمن، ثم النقر على "Ouvrir le lien dans un nouvel onglet / Open link in new tab" (حسب لغة المتصفح) ثم نسخ عنوان URL للصورة في صفحتها الخاصة في المتصفح، دائماً يختم عنوان URL للصورة بإسم تنسيقها.
إقحام الصور في ملف HTML لاستدعائها من المخدم الخاص (Server)
تقحم الصورة الموجودة في المخدم الخاص عبر تحديد مسارها في قيمة 'SRC' للعنصر 'IMG' الخاص بإقحامها، و هناك ثلاث حالات حيث يختلف تحديد مسار الصورة حسب مكانها في المخدم الخاص نسبة لمكان ملف HTML للصفحة المحتوية للعنصر المسؤول عن إقحام تلك الصورة :
* الحالة الأولى : عند تواجد الصورة في نفس المجلد الذي يوجد فيه ملف HTML للصفحة التي تحتوي على العنصر المسؤول عن إقحامها، يجب إقحام إسم الصورة في قيمة 'SRC' للعنصر المسؤول عن إقحامها.
* الحالة الثانية : عند تواجد الصورة في مجلد داخل المجلد الذي يحتوي على ملف HTML للصفحة التي تحتوي على العنصر المسؤول عن إقحامها، يجب إقحام إسم المجلد المحتوي للصورة، ثم هذه العلامة '/' ثم إسم الصورة في قيمة 'SRC' للعنصر المسؤول عن إقحامها؛ أما عند تواجد تداخل الملفات، أي أن مسار الصورة يكون طويل نسبة لملف HTML للصفحة، مثلاً توجد الصورة في مجلد إسمه A، و A يوجد في مجلد إسمه B، و B يوجد في مجلد إسمه C، ثم C يوجد في نفس المجلد الذي يوجد فيه ملف الصفحة التي تحتوي على العنصر المسؤول عن إقحام الصورة، يجب كتابة في قيمة 'SRC' للعنصر المسؤول عن إقحام الصورة C ثم / ثم B ثم / ثم A ثم / ثم إسم الصورة.
* الحالة الثالثة : عند تواجد الصورة في مجلد يحتوي المجلد الذي يوجد فيه ملف HTML للصفحة التي تحتوي على العنصر المسؤول عن إقحامها، يجب إقحام نقطتان أفقيتان '..' ثم '/' ثم إسم الصورة في قيمة 'SRC' للعنصر المسؤول عن إقحامها؛ أما عند تواجد تداخل الملفات، أي أن مسار الصورة يكون طويل نسبة لملف HTML للصفحة، مثلاً توجد الصورة في مجلد إسمه A، و A يحتوي مجلد إسمه B، و B يحتوي مجلد إسمه C، ثم C يحتوي المجلد الذي يوجد فيه ملف الصفحة التي تحتوي على العنصر المسؤول عن إقحام الصورة، يجب كتابة في قيمة 'SRC' للعنصر المسؤول عن إقحام الصورة نقطتان متتاليتان '..' ثم / ثم '..' ثم / ثم '..' ثم / ثم إسم الصورة.
نصائح
- يجب تعديل أبعاد الصور قبل إرسالها للمخدم الخاص، خصوصاً الصور ذات الأبعاد الكبيرة.
- يجب ضغط الصور قبل إرسالها للمخدم الخاص.
و كل هذا من أجل اقتصاد مساحة المخدم الخاص و أيضاً من أجل تسريع تحميل الصور من طرف متصفحات الإنترنت حيث يلعب عامل السرعة في المواقع دوراً أساسياً في السيو SEO.
الفيديو التوضيحي للدرس
Attributs مخصصة لعنصر IMG
ALT
تعتبر 'ALT' من أهم الـAttributs المخصصة لعنصر IMG، إذ أنني أصنفها شخصياً كـAttribut إجبارية لذى عنصر IMG، و ALT مأخوذة من كلمة إنجليزية مفادها Alternate Text، أي نص بديل، حيث يقحم في قيمتها نص يظهر مكان الصورة في حالة عدم دعم متصفح الإنترنت لتنسيق الصورة أو عدم إجاده للصورة، و الأهم هو أن هذا النص يفيد في التعرف على الصورة من طرف محركات البحث مما يساعد الموقع الإلكتروني في أخذ مراتب مهمة في السيو SEO.
TITLE
TITLE مأخوذة من كلمة Title الإنجليزية، أي عنوان، و تصلح هذه الـAttribut لإعطاء عنوان للصورة يُكتَب في قيمتها، بحيث إذا مُرِّرَ مؤشر الفأرة فوق الصورة سيظهر العنوان أسود بخلفية صفراء.
WIDTH
WIDTH مأخوذة من كلمة Width الإنجليزية، تعني عرض، و تصلح هذه الـAttribut لتخصيص عرض للصورة يكتب في قيمتها بالبكسل أو بنسبة مئوية.
HEIGHT
HEIGHT مأخوذة من كلمة Height الإنجليزية، تعني ارتفاع، و تصلح هذه الـAttribut لتخصيص ارتفاع للصورة يكتب في قيمتها بالبكسل أو بنسبة مئوية.
الأكواد المستعملة في هذا الدرس
أتمنى أن تستفيدوا من الدرس