إدراج صورة بصفحة HTML

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

هذا ما سنراه اليوم إن شاء الله، أي كيف يمكن لكل واحد منا أن يضيف صورا لموقعه باستخدام لغة الـ HTML.

• إدراج صورة بصفحة HTML :

لإدراج الصور بصفحات الـ HTML، سنستخد وسم جديد من وسوم هذه اللغة ألا و هو الوسم (img)، و بالتالي إذا أردت إضافة صورة، فقط استخدم السطر التالي :

<img src="http://3.bp.blogspot.com/-fgv2JNHzouM/VFy42CicAxI/AAAAAAAAFN0/_KQnNRNHqhc/s1600/HTML_img.jpg            " />

      
شرح الكود :

1. في الكود السايق استخدمنا الوسم img لإخبار المتصفح أننا نريد إدراج صورة بالملف، و هو وسم يحوي في نفسه وسم البداية و الإغلاق مثل </ BR>، إضافة إلى أنه لا يرتبط بأي نص معين.
2. بعد ذلك استخدمنا العنصر src اختصار لـ (Source)، و هو المسؤول عن إخبار المتصفح بمكان تواجد الصورة (رابط الصورة).

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

<img src="images/HTML.jpg" />

• خصائص إضافية :

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

• الوصف البديل alt :

تستخدم خاصية alt لتعطي وصفاً بديلاً للصورة، إذا لم تظهر الصورة لأي سبب سيرى المستخدم نصاً بديلاً يشرح محتويات الصورة، مثال :

<img src="images/HTML.jpg" alt="صورة HTML" />

إشارة : الوصف البديل مهم جدا في أرشفة الصور بمحركات البحث.

• عنوان الصورة title :

يتم استخدام الخاصية title لإضافة بعض المعلومات حول الصورة المضافة، مثال :

<img src="images/HTML.jpg" title="تعلم دروس الـ HTML على مدونة طيبة مصرية" />




في المثال السابق، عند تمرير أو وضع الماوس على الصورة دون الضغط عليها سيظهر لك النص “تعلم دروس الـ HTML على مدونةطيبة مصرية ” بمربع صغير.

• الخاصيتان width و height :

يتم استخدام الخاصيتان width و height لتحديد عرض و طول الصورة، و هما وحدتان يتم قياسهما بالبيكسل، مثال :

<img src="images/HTML.jpg" width="200" height="143" />

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

• إدراج صورة ذات وصلة :

يمكنك إضافة وصلة تشعبية للصورة تأدي إلى موقع آخر عند الضغط على الصورة، أو إلى صفحة أخرى بموقعك، و تكون الصيغة على الشكل التالي :

1	<a href="ضع هنا رابط الصفحة التي تريد التوجيه إليها"><img src="HTML.jpg" /></a>

لاحظ أننا أدرجنا وسم الصورة بين الوسمين <a> و <a/>، و هنا الوسمان المسؤولان عن إدراج الوصلات التشعبية Hyperlink.

• محاذاة الصورة align :

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

<img src="images/HTML.jpg" align="left" />

النتيجة ستكون بهذا الشكل :

لاحظ أن الصورة تأخذ مكانها على يسار النص، و ذلك لأننا استخدمنا العنصر left، و هو العنصر المسؤول عن محاذاة الصورة جهة اليسار :

القيم المسؤولة عن محاذاة النص :

1. left : محاذاة الصورة إلى اليسار.
2. right : محاذاة الصورة إلى اليمين.
3. middle : محاذاة الصورة فى المنتصف.
4. top : محاذاة الصورة إلى الأعلى.
5. bottom : محاذاة الصورة إلى الأسفل.

كانت هذه أهم الخصائص و العناصر التي يمكن استخدامها منفردة أو مجتمعة للتحكم في إضافة الصور بملفات الـ HTML، على أن نرى باقي العناصر و الخصائص (كإدراج الحدود، و الهوامش…) .

جزى الله خيرا كل من ساهم فيه

المصدر: دلتا تك