أعط موقعك الكثير من الحيوية والجمال وذلك باستخدام الصور سواء الثابتة منها أو المتحركة , ويمكنك ادراج الصور باستخدام الوسم </ img> وهذا الوسم ليس له وسم اغلاق , ويأتي مع الوسم img خصائص أهمها :
لدي صورة اسمها Desert وامتدادها jpg , وهي موجودة في نفس المجلد الذي به صفحة الويب الخاصة بي سيكون الكود كالتالي :
يمكنك ببساطة استدعاء صورة من أي مكان على الانترنت وماعليك إلا كتابة الرابط الذي توجد فيه الصورة , فمثلاً لدي صورة على الرابط any-site.com/mypicture.jpg سيكون الكود كالتالي :
أما بالنسبة لمستخدمي موقعك فهذه الخاصية تظهر نص بدلاً من الصورة وتخبر المستخدم بما تدل عليه الصورة في حال حصل خطأ ولم تظهر الصورة في الموقع , انظر للمثال التالي لتفهم ما أقصده (هذا المثال تعمدت الخطأ فيه بحيث لا أجعل الصورة تظهر للمستخدم ) :
كما ترى حصل خطأ ولم تظهر لك الصورة , ولكن الخاصية alt أخبرتك أن هذه هي صورة الكرة الأرضية .
ملاحظة : الخاصية title هي ليست خاصة بالصور فقط , ولكن يمكنك استخدامها مع عناصر HTML أخرى .
أولاً : الخاصية src
وهي أهم الخصائص للوسم img فبدونها لن تكون هناك صورة , وفائدة هذه الخاصية تكمن في أنها تخبر متصفح الانترنت أين موقع الصورة التي تريد استخدامها , انظر للمثال التالي :لدي صورة اسمها Desert وامتدادها jpg , وهي موجودة في نفس المجلد الذي به صفحة الويب الخاصة بي سيكون الكود كالتالي :
<img src="Desert.jpg"
/>
مثال آخر لدي صورة اسمها Sky و امتدادها png وهي موجودة على القرص /:D في المجلد pictures سيكون الكود كالتالي :
<img src="D:\pictures\Sky.png" />
كما رأيت في الامثلة علينا كتابة موقع الصورة بالكامل مع امتدادها وإلا فلن تظهر الصورة .يمكنك ببساطة استدعاء صورة من أي مكان على الانترنت وماعليك إلا كتابة الرابط الذي توجد فيه الصورة , فمثلاً لدي صورة على الرابط any-site.com/mypicture.jpg سيكون الكود كالتالي :
<img src="http://www.any-site.com/mypicture.jpg"
/>
ثانياً : الخاصية height
كما يدل اسمها فهذه الخاصية تمكننا من تحديد مقدار "ارتفاع الصورة" بوحدة "البيكسل" (وليس "طول الصورة" لأنه في الويب ليس هناك شئ اسمه طول أو length) , واستخدامها بسيط فقط ضع مقدار الارتفاع الذي تريده , مثال :
<img src="Desert.jpg"
height="200"
/>
ثالثاً : الخاصية width
هذه الخاصية تمكننا من تحديد مقدار "عرض الصورة" بوحدة "البيكسل" , مثال :
<img src="Desert.jpg" height="200" width="250" />
رابعاً : الخاصية alt
هي اختصار لكلمة (alternative) وتعني "بديل" , وهذه الخاصية مهمة جداً فيما يتعلق بتحسين محركات البحث أو السيو (Search Engine Optimizations) فهي تخبر محركات البحث عما تدل عليه الصورة التي وضعتها في موقعك فمحركات البحث لا تبحث عن الصور وإنما تبحث عما تدل عليه الصور .أما بالنسبة لمستخدمي موقعك فهذه الخاصية تظهر نص بدلاً من الصورة وتخبر المستخدم بما تدل عليه الصورة في حال حصل خطأ ولم تظهر الصورة في الموقع , انظر للمثال التالي لتفهم ما أقصده (هذا المثال تعمدت الخطأ فيه بحيث لا أجعل الصورة تظهر للمستخدم ) :
<html>
<body dir="rtl">
<img src="logo.jpg"
alt="الأرضية الكرة صورة" height="200" width="250"/>
</body>
</html>
والنتيجة هي الصورة التالية :
كما ترى حصل خطأ ولم تظهر لك الصورة , ولكن الخاصية alt أخبرتك أن هذه هي صورة الكرة الأرضية .
خامساً : الخاصية title
هذه الخاصية تظهر تلميح "Tool Tip" يخبرك بما تدل عليه الصورة عند مرور مؤشر الماوس فوق الصورة , وبالمثال يتضح المقال :
<html>
<body dir="rtl">
<img src="Koala.jpg"
alt="الكوالا حيوان" height="200" width="250" title="الكوالا حيوان" />
</body>
</html>
والنتيجة كالتالي :
ملاحظة : الخاصية title هي ليست خاصة بالصور فقط , ولكن يمكنك استخدامها مع عناصر HTML أخرى .