تنسيق الصور في HTML

   

في هذا الجزئ ، سنركز على تنسيقات الصور المختلفة (jpeg ، png ، ...) وسنرى كيفية إدراج صورة واحدة أو أكثر في صفحات HTML الخاصة بنا .

 تنسيقات الصور :

كما تعلم على الأرجح ، يمكنك حفظ صورك بتنسيقات مختلفة. التنسيقات الأكثر استخدامًا هي:

•  JPG أو JPEG 
•  PNG 
•  GIF 
•  BITMAP

كل تنسيق له خصائصه الخاصة ، وبالتالي يجب الانتباه إلى اختيار التنسيق عند حفظ أو تنزيل أي صورة على جهازك .

أولا: 

  تنسيق JPEG ( Joint Photographic Expert Group) ، أو بشكل أكثر شيوعًا JPG      هو تنسيق يسمح عمومًا بضغط وزن الصورة بمقدار عشرة مع الحفاظ على جودة جيدة ، عادة نختار هذا التنسيق لحفظ الصور الفوتوغرافية ،

تانيا:

PNG (Portable Network Graphic) : هو تنسيق تم إنشاؤه أساسا لإستبدال تنسيق Gif ، (24 bits) الميزة الكبرى لهذا التنسيق أنه يدير الشفافية ويتمتع بمعدل ضغط جيد جدا مع الحفاض على جودة عالية للصور ، عادة ما يتم استعماله عند تحميل صور  تحمل ألوان كثيرة أو عبارة عن رسم لشيئ معين ...

تالثا :

  تنسيق Gif(Graphic Interchage Format ) , الذي يستخدم في حالة الصور المتحركة مع ألوان أقل من التنسيق السابق ، ويعتبر ثقيل نوعا ما .

رابعا :

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

العنصر المسؤول عن إدراج الصور: 

العنصر المسؤول عن إدراج الصور في مستندات HTML الخاصة بنا هو IMG والذي تمثله العلامة <img>

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

لإدراج الصور كيف ما كان نوعها نستخدم العنصر img مع مجموعة من السمات التي يمكن إعتبارها أساسية :

بداية يتعين علينا إضافة سمتين ضروريتين ولا غنى عنها داخل العنصر img ، وهما كالتالي :

السمة alt : تعني النص البديل ، حيت يتم بواسطتها كتابة نص يعبر عن الصورة المراد تحميلها ، ويتم عرضه مكان الصورة في حالة تعذر تحميلها لسبب أو لآخر (مثال اذا كان الاتصال بالانترنت لدى الزوار ضعيفا...) ، مما يجعل الصفحة أو الموقع قابل للقراءة للجميع .

السمة src : إختصار ل source ،تمكننا من الإشارة إلى عنوان الصورة ، تأخد كقيمة العنوان وتنسيق أو نوع الصورة ، على الشكل التالي:

<img src="non-de-image.type(jpg)>

ملحوظة: يجب تجنب الأحرف الخاصة و الفراغات في عنوان الصورة كما يفضل وضع شرطة مكان الفراغ .

عمليا نقوم أولا بحفظ الصورة الخاصة بنا في نفس المجلد الخاص بمستند HTML ،لتسهيل عملية الإدراج ، في هذه الحالة تأخد السمة src فقط إسم الصورة ونوعها كقيمة كما في المثال السابق . ذالك لأن السمة src تعمل بنفس الطريقة التي تعمل بها السمة href بالنسبة للروابط ، لذلك يجب الاخد بعين الاعتبار اسم الملف ،في حالة حفظ الصورة في ملف مختلف عن الملف الخاص بمستند html . 

هناك أيضا سمات أخرى ليست ضرورية  لكن يمكن إعتبارها مهمة ، على سبيل المثال السمة align التي تمكنك من تغيير مكان الصورة حسب رغبتك ،حيت تأخد كقيمة ; leftلمحاذاة  الصورة لليسار ؛ right لمحاذاة الصورة لليمين ؛ middle لمحاذاة الصورة للوسط top لمحاذاة الصورة في الاعلى . إضافة إلى السمة boder التي تستعمل لإضافة إطار للصورة . 

تغيير حجم الصورة بإستعمال html :

لتغيير حجم الصورة او التحكم في إرتفاعها وعرضها  لتناسب رغبتنا نستعمل سمتي height و  width داخل العنصر الأساسي img :

Height نستعمله لتحديد اتفاع الصورة ،  أما بالنسبة ل width نستعمله لتحكم في عرض الصورة ، تأخذ هاتين السمتين قيما مطلقة كما يمكن أن تأخدا قيما نسبية (نسبة المئوية ٪) . عامة في حالة تغيير بعد واحد في الصورة وكنا  نرغب في الحفاظ على قيمة البعد التاني الذي سبق إدراجها في الكود ، يكفي أن نعطي ذلك البعد قيمة auto. 

عادة ما يتم إستعمال قيم نسبية (مئوية) لتحديد طول أو عرض الصورة ، في هذه الحالة النسبة المئوية تمثل المساحة التي تأخدها الصورة بالنسبة لحجم العنصر الذي يحتويها ، وليس حجم الصورة الاساسي .

إدراج صور من مواقع أخرى بإستخدام html : 

تتيح لنا html إمكانية إدراج صور من مواقع أخرى في صفحة الويب الخاصة بنا ، وذلك عن طريق تحديد العنوان URL الكامل للصورة التي نريدها كقيمة للسمة src . يمكنك تجربة ذلك على أي صورة متوفرة على الويب يكفي أن تحرص على أن يكون العنوان URL كاملا ، بالإضافة إلى حقوق النشر ، ومع ذلك ينصح بعدم استخدام صور من موقع آخر لأنه إذا حذفت تلك المواقع سيؤدي ذلك إلى حذف الصورة من موقعك أيضا .     

خلفيات مواقع html :

مما لاشك فيه أن الخلفيات تساهم بشكل كبير في جلب الزوار للموقع ، ويمكن ان تكون على شكل صور جدابة أو ألوان .

وللتعيين الخلفيات على هيئة صور أو ألوان نستعمل سمتين مع العنصر body :

السمة bgcolor : 

التي تستخدم لتعيين لون معين كخلفية للصفحة وذلك بإستخدام القيم الألوان المتعارف عليها  سواء  كانت أرقام hex ، أو قيم RGB أو أسماء الألوان  ، كما يتضح من خلال الكود التالي : 

<body bgcolor="#ff0000"> <body bgcolor="rgb(255,0,0)"> <body bgcolor="red">

تشير هذه لأكواد الثلات إلى اللون الأخضر بإستخدام القيم المتعارف عليها 

السمة Background: 

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

<body background="http://www.tibanet.org/tibanet.gif">

<body background="tibanet.gif">

العنوان الاول مطلق والتاني نسبي لنفس الصورة ، لذلك لهما نفس النتيجة .