الصور - وسم <img> واللاحقة src
تحدد الصور في صفحة HTML من خلال الوسم <img>
يعتبر وسم <img> وسم فارغ أي لايحتوي على خاتمة الوسم ولكن يحتوي فقط على لواحق داخله .
لعرض الصورة في الصفحة تحتاح الى اللاحقة src والتي تعني مصدر الصورة والقيمة الموجودة داخل src هي رابط الصورة التي تود عرضها .
تركيبة كود الصورة
<img src="url" alt="بعض النص"/>
يستخدم URL لتحديد مكان الصورة مثل لو أن اسم الصورة "boat.jpg" وموجودة داخل مجلد "images" على الموقع "www. example.com" عندها سيصبح رابط الصورة كالتالي:
http://www. example.com/images/boat.jpg
يظهر المتصفح الصورة عند اعلان الوسم <img> في الصفحة . ان وضعت وسم الصورة بين فقرتين فإن المتصفح سيظهر في الصفحة فقرة ثم الصورة ثم الفقرة الثانية .
الصور - اللاحقة alt
تستخدم اللاحقة alt لتحديد نص بديل أو تعريف بسيط عن الصورة في حال لم يتم عرض الصورة بسبب الرابط خاطئ أو تم حذف الصورة من المصدر أو بسبب بطئ الاتصال . القيمة الموجودة داخل alt هي نص بديل (تعريف) من الكاتب للصورة .
<img src="boat.jpg" alt="قارب كبير" />
الصور - ضبط الطول والعرض للصورة
يمكن تحديد طول وعرض الصورة من خلال اللواحق الطول height والعرض width والقيم المستخدمة يتم تحديدها من خلال البكسل كما في المثال التالي
<img src="home.jpg" alt="المنزل القديم" width="304" height="228" />
ملاحظات مفيدة
- من المهم استخدام لواحق الطول والعرض للصورة لأنه عند استخدام هذه الخاصيات فإن الصورة سيتم تحديدها في مكانها المخصص ولكن ان لم يتم تحديد الطول والعرض فإن الصورة قد تظهر بحجمها الطبيعي وعندها يمكن أن تسبب مشاكل في هيكل الموقع .
- عند تحميل الصفحة فإن المتصفح هو الذي يقوم بجلب الصورة من السيرفر وعرضها في الموقع لذلك كن حذراً عند استخدام الصور ولا تقوم بتغير مجلد الصور مالم تقم بتغيير رابط الصورة في وسم الصور والا سيحصل زوارك على أيقونة رابط غير فعال . تظهر أيقونة الرابط الغير فعال عندما لايجد المتصفح الصورة في المجلد المطلوب .
ليست هناك تعليقات:
إرسال تعليق