الصّور

إدراج صورة

آخر تحيين: 04-01-2015

html اللوائح صيغ و امتدادات الصّور


لعرض صورة على صفحة متصفّح الويب ، نحتاج لوسم : <img>
و هو وسم أحادي ، و بإمكانه أن يحمل صفات عديدة ، ومن بينها صفتان إجباريتان لا يجب الإستغناء عنهما . وهما : src و alt

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

  • الطريق المطلق http://www.mon-site/images/photo.jpg
  • الطريق النسبي : و أقصر طريق عندما تكون الصّورة في نفس الملف الذي يضمّ الصفحة التي ستعرض الصّورة . مثال :

قبل الإستمرار لنعزّز خطابنا بقليل من التّطبيق . حتّى نكون على نفس الموجة :أدعوكم لحفظ الصّورة أسفله (ضع مؤشّر الفأرة على الصورة ثم أنقر يمين الفأرة ثم اختر enregistrer l'image sous أو save image as ) في الملف الذي يضم page1.html

- قوموا بتسمية صورتكم : falls.jpg



مكان حفظ الصورة :


ضعوا هذه الشيفرة في إحدى صفحاتكم page1.html مثلا ثم استمتعوا بصورتكم على المتصفح :

<img src="falls.jpg">

إذا كانت الصّورة داخل ملف آخر مثلا ملف images ،
- أنشؤوا ملفا جديدا إسمه images و ضعوا داخله الصورة السابقة falls.jpg

يكون الرّابط كالتالي :

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

لكتابة قيمة src ننطلق دائما من المكان الذي تتواجد فيه صفحتنا ، ثم نضيف الملفات التي تحتوي على الصورة ثم أخيرا نكتب اسم الصّورة

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

<img src="images/falls.jpg" alt="شلاّلات">

يجب كتابة الصفات بحجم صغير ( en minuscules ) و كذلك القيمة ، دون ترك أي فراغ حتي إذا أردنا كتابة جملة . لفرق كلمة عن أخرى نفعل ذلك ب حركة (under-score : _ ) مثلا كالتالي : the_niagara_falls.jpg .
احرصوا على أن تكون الصورة دائما داخل الفقرة أي داخل و سم <p> ... </p> إذاأغفلتم ذلك و ينطبق نفس الشيء في حالة نسيان صفة alt ، قد تظهر صورتكم بشكل صحيح على المتصفح ، لكن صفحتكم لن تكون شرعية و سيتم تصنيفها على أنها لا تطابق معايير html المعمول بها .

إظهار فقاعة عند وضع مؤشر الفأرة على الصورة

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

<img src="images/falls.jpg" alt="شلاّلات" title="شلاّلات نياكارا">

لا تُخلطوا بين وسم العنوان <title> </title> ، و بين الصفة title.

استعمال صورة كرابط

الأمر بسيط جدا . بدل أن تكتبوا نص الرابط الموجود بين وسم <a> ...</a> . نضع صورتنا : <a> <img> </a>
في هذا المثال سنجعل الصورة على شكل رابط :

<a href="http://www.mon-site.com">
    <img src="images/falls.jpg" alt="شلاّلات" title="شلاّلات نياكارا"> 
 </a>

لقد انهينا هذا الدرس و بالتالي هذا الجزء بسلام ، و سننتقل بإذن الله إلى الجزء الثاني الذي سيتم فيه توضيف CSS لأول مرة بعد أن طال الإنتظار