تعلم لغة HTML: إدراج الصور

بعد أن تعلمنا أساسيات لغة HTML أو هتمل من إنشاء الفقرات والقوائم والروابط في هذا الدرس سنتعرف على كيفية إدراج الصورة في صفحات موقعنا عن طري  HTML.

الدرس السابق: تعلم html: الروابط
الدرس التالي: تعلم HTML: ملقات الصوت والفيديو

أنواع الصور

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

• أولا هناك النمط (JPEG (Joint Photographic Expert Group: وهوالنمط الاكثر إستعمالا على الأنترنت وهذا النمط يمكن من تقليص حجم الصورة دون الثأثير على جودة الصورة كثيرا ويكون إمتداد هذه الصور هو: .jpeg أو.jpg
• ثم هناك النمط (PNG (Portable Network Graphics وهو نمط حديث ويستعمل هذا النمط للرسوم البيانية.
• وأيضا هناك النمط GIF وهو نمط قديم ويستعمل كثيرا الأن نظرا لمميزاته الكثيرة متل حجمه الصغير وجودته صوره كما يمكننا من إنشاء صور متحركة.
• هناك أنماط أخرى متعددة مثل النمط BITMAP مثلا لكن الصور التي على هذا النمط يكون حجمها كبيرا لذا فهي لا ينصح باستعمالها على الويب نظرا لأنها تستغرق مدة طويلة لتحميل.

إضافة الصور

الأن سنرى كيف يمكننا إدراج الصور في صفحة ويب وهذا سهل جدا وسنستعمل الوسم: <img /> لكن الوسم الكامل يكون على الشكل التالي:

<p>

هذه صورة جميلة للطبيعة الخضراء: <br/>

<img src="nature.jpg" alt="la nature"/>

</p> 

كما تلاحظون الصورة يجب أن تكون ضمن فقرة وهناك أيضا بعض الكلمات التي لم نتعرف عليها وهي كالتالي:

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

<p>

هذه صورة جميلة للطبيعة الخضراء: <br/>

<img src="images/nature.jpg" alt="la nature"/>

</p> 

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

كما يجب تجنب الفراغات عند تسمية الصور إما بمسحها أو تعويضها بالرمز _ كما يفضل تسميتها بالحروف اللاتنية.

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

يمكن أيضا إضافة نص يظهر عند وضع مؤشر الفأرة على الصورة ويمكن إضافته إضافة الكلمة title وإذا طبقنا هذا على المثال الأول نحصل على مايلي:

<p>

هذه صورة جميلة للطبيعة الخضراء: <br/>

<img src="images/nature.jpg" alt="la nature" title="هنا نكتب الجملة التي نريد"/>

</p> 

إذا لم تظهر صورتكم فتأكدو أنكم قد تكونون أخطاءتم إما في إسمها أو عنوان مكانها أو إمتدادها.

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

<p>

إظغط على الصورة لرؤيتها بأبعادها الحقيقية<br/>

<a href="nature.jpg"><img src="petit_nature.jpg" alt="la nature" title="إظغط على الصورة لتكبيرها"/></a>

</p>

إدراج الواجهات figure

بعد أن تعرفنا على كيفية إدراج الصور سنتعرف على كيفية إدراج ما يعرف ب figure أو الواجهات إن جاز التعبير، وهي عادة ما تكون عبارة عن صور أو أكواد مصدرية. نحن الأن سنأخد الصورة كمثال لكن الواجهات لاتكون دائما صورا ولإضافة واجهة نستعمل الكود التالي:

<figure>

<img src="image.jpg" alt="image"/>

<figcaption> هنا نكتب فيه نصا ليظهر تحت الصورة </figcaption>

</figure>

هناك وسم لم نتحدت عنه  بعد وهو <figcaption></figcaption> وهو يمكننا من وضع نص تحت الواجهة. 

يجب أن نعلم أيضا أنه من الممكن إضافة أكثر من صورة في واجهة واحدة وتختلف عن الصورة في أنها يمكن إضافتها في أي مكان دون الحاجة إلى إضافتها في فقرة كما فعلنا خلال إدراج الصورة كما تختلف الصورة عن الواجهة في دورها فالواجهة تضيف معلومة للنص وتكون مكملة له أما الصورة فلا تضيف أية معلومة وتكون للتوضيح.

الدرس السابق: تعلم html: الروابط

الدرس التالي: تعلم HTML: ملقات الصوت والفيديو