فاصلة
  • HTML
  • ?
    : ترتيب الدرس
  • 17
    عدد الدروس
  • ?
    أخر تحديث

الصور في لغة HTML

صفحات الأنترنت قديماً كانت مجرد نصوص لا تحتوي علي أي صور أو تصميم, وهذا يعني بأنك لو قمت بزيارة أي موقع في بداية أختراع الويب, لن تري أي صورة موجودة في الموقع بالعكس, ستري نصوص ولن تري أي شيئ يلفت أنتباهك في الموقع غير النصوص, ولكن مع أستمرار تطور الويب تم أنشاء عناصر لأضافة الملفات إلي الصفحة, ومن ضمن هذة الملفات يمكنك اضافة الصور  إلي الموقع ,وحتي أصبح من السهل جداً اضافة صورة ,وذلك عن طريق الوسم <img>

<img src="photo.jpg">


الخاصية Src

من أجل أضافة صورة إلي الموقع ,نستخدم العنصر <img> ولكن بمجرد أضافة العنصر ,لن يعمل, وهذا لأن العنصر يحتاج إلي خاصية مساعدة وهي الخاصية Src المسؤولة عن أختيار الصور وأضافتها إلي الوسم <mg> ,والأن لو أفترضنا وجود صورة بأسم name.jpg في جهازك ,وتريد أضافتها إلي الموقع ,في تلك الحالة سنستخدم الخاصية src ونكتب بداخلها عنوان الصورة ,

<img src="name.jpg">


قواعد أختيار الصور 

هناك قواعد وأساسيات يجب أن تتعرف عليها قبل أضافة أي صورة إلي موقعك عن طريق الوسم <img> ,وتلك القواعد متعلقة بتفادي الأخطاء التي قد تحدث في أختيار الصور , ويجب تفادي هذة المشاكل عن طريق  اتباع القواعد الصحيحة لأضافة الصور في الموقع ,والأن لنبدأ بالقاعدة الأولي

مسار الصورة

يتم أختيار مكان الصورة بالنسبة لمكان وجود ملف html, سنفترض وجود ملف الــ html والصورة في مجلد واحد ,في تلك الحالة سنكتب أسم الصورة بشكل مباشر لأنها في نفس المجلد

<img src="name.jpg">

ولكن في حالة أن ملف الــ html في مجلد والصورة في مجلد فرعي بداخل المجلد الموجود علية ملف الــ  html وليكن كذلك مثلاً

folder1/index.html

folder1/folder2/name.jpg

في تلك الحالة نقوم بكتابة مسار المجلد الفرعي ومن ثم أسم الصورة

<img src="folder2/name.jpg">

نوع الصورة

للصور أنواع واصناف كثيرة ولكن أشهر أنواع الصور هي ذات الأمتداد jpg, png, jpeg , ولأضافة صورة إلي الموقع يجب أن تقوم بكتابة أسم الصورة + نوع الصورة (الأمتداد), وفي حالة أن أسم الصورة غير صحيح أو الأمتداد غير صحيح ,لن يتم أضافة الصورة إلي الموقع وذلك لأن المتصفح لن يتعرف عليها نتيجة عدم تحديد الصورة بشكل صائب ,وكما تعلم أنت تتعامل مع ألة لا تفهم الأخطاء ,فقد هي تنفذ الأوامر الصحيحة وتتفادي الأوامر الغير صحيحة .


الخاصية Alt

تخيل معي بأنك قمت بزيارة موقع علي الويب ,ولكن هذا الموقع يوجد بة مساحة بيضاء كبيرة وأنت لا تعرف لماذا تلك المساحة البيضاء ,وسنفترض بأن تلك المساحة هي كانت لمكان صورة كبيرة ولكن هناك مشكلة في تحميل الصورة أو ان هناك بطيء في الأنترنت لم يستطع تحميل الصورة , في تلك الحالة يجب أستخدام الخاصية alt وهي المسؤولة عن أعطاء أسم للصورة يظهر عند الوقوف عليها بمؤشر الماوس ,والأن سنفترض بأن هناك صورة لسيارة جميلة علي موقعك ,وقمت بأستخدام الخاصية alt لأعطاء أسم للصورة ,وليكن أسم نوع السيارة حتي يتعرف عليها الزائر عند الوقوف علي الصورة بمؤشر الماوس ,

<img src="car.jpg" alt="فيراري">

الأدوات أساسيات العناصر خصائص العناوين الفقرات الأنماط التنسيق التعليقات الألوان الروابط الصور الجداول القوائم الترتيب النماذج الميتا تاج