برمجة

تعلُّم لغة HTML – الدرس الخامس – الصور

دروس بسيطة في لغة الويب HTML

اقرأ في هذا المقال

  • سنتعلم هنا كل ما يخص الصور في HTML والتحكم بها. ونعين الصور كخلفية وندرج مزيداً من الصور بالحجم الذي نريد مع وصف وافٍ لها،ونرى كيف نستطيع وضع رابط لـ الصور.

الصور في  HTML

سنتعلّم اليوم كل ما يخص الصور في  HTML والتحكم بها، وذلك بعد انتهائنا من مسائل تنسيق النص وإضافة الخصائص والروابط مع أساسيات الاستعمال البسيطة، والتي شرحناها في الدروس السابقة.

تجدون الروابط في نهاية المقال.

سنُعيّن في درسنا الجديد الصور كخلفية، وندرج المزيد من الصور في HTML ولكن بالحجم الذي نريد مع وصف لها بين كلمات النص، كما سنرى كيف يمكننا وضع رابط لـ الصور في HTML وصفحتنا.

  • تعيين صورة كخلفيّة للصفحة:

في دروس سابقة تعلمنا كيف نلون صفحتنا باستخدام التاغ

<body bgcolor=”#******”>
</body> وكُنّا نغلقها بتاغ إغلاق النّص المعتاد
والآن سنستخدم نفس الخاصية وبتاغ مشابه سنضيف خلفية للنّص والتاغ هو

<body background=” “> </body>

فإذا كانت الصورة في مُجلّد الصفحة التي نكتبها ذاته؛ نكتب اسم الصورة مع اللاحقة ضمن القوسين” ” ، أما إذا كانت في مجلد أعلى فكما شرحنا في دروس سابقة نكتب قبل اسم الصورة الرمز (../)فقط

وإن كانت في مجلد فرعي لمجلد الصفحة فنسبقها بـ (/) مع اسم المجلد الفرعي.

 

  • إضافة صورة:

 <img src=” “/> نستخدم الأمر

حيث نُدوّن اسم الصورة واللاحقة ضمن القوسين مع المسار إن كانت في مجلد آخر (وفق ما شرحنا في الأعلى).

 

  • إضافة وصف للصورة:

أي إضافة نصّ يظهر عند تمرير الماوس على الصورة، ولإضافته نكتب الخاصّيّة 

alt=” “

ضمن وسم الصورة نفسه، وبين القوسين نضيف النّصّ الذي نُريد.

  • تعديل حجم الصورة:

  width=” ” وإمّا أن يكون ذلك باستخدام وحدة البيكسل أو النسبة المئوية بإضافة الرمز (%) فنستعمل الخاصية

height=”” لتحديد عرض الصورة، وخاصية الطول

وبهذا يكون  الشكل النهائي للتاغ بعد اضافة كل تلك الخصائص
<img src=”img.jpej”      alt=”the grop img”      width=”300″      height”100″ >

  • إضافة رابط الى الصورة :

وبفضله نستطيع الوصول إلى موقع مُعيّن عند النقر على الصّورة، وذلك بالطريقة التالية:

<a href=” “> <img src=” “> </a>

الصور في HTML
الصور في HTML

مع وضع الرِابط في تاغ الروابط واسم الصورة ومسارها في تاغ الصور.

وهكذا نكون قد أنهينا أهم ما يخص إضافة الصور، إلى الدرّس القادم… نلقاكم بخير.

لا تنسوا إضافة أسئلتكم في التعليقات لنحاول الإجابة عليها في أقرب فرصة متاحة.

 

الدروس السابقة: الدرس الأول ، الدرس الثاني ، الدرس الثالث ، الدرس الرّابع.

 

 

 

 

 

هل أعجبك المقال؟

شاركونا آراءكم واقتراحاتكم

 

 

 

 

اقرأ أيضاً:

 

 

 

الوسوم

رامة

طالبة في كلية الآداب، مهتمة بالتكنولوجيا ونشرها، كالبرمجة والذكاء الصنعي.

مقالات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.

زر الذهاب إلى الأعلى
إغلاق