التعرف على وسم استحضار الصور في لغة html الدرس |8| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الأربعاء، 11 ديسمبر 2019

التعرف على وسم استحضار الصور في لغة html الدرس |8|


وسم استحضار الصور في html

في هذا الدرس سوف نتحدث عن الصور وما يتعلق بإدراج الصور و الخصائص المستخدمة بهذا الشأن.

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

الوسم <img>

هو الوسم الرئيسي لتعريف الصور داخل الصفحة وهو وسم منفرد ولكن لا يكفي الوسم وحده, هناك شيئ آخر لإستحضار مسار الصوره وهو src لتحديد موقع و اسم الصورة.

في الدروس السابقة انشأنا مجلد على سطح المكتب و بداخله ملف اسمه index.htm وهو الملف الذي نعمل به و نكتب اكوادنا بداخله, سوف نضع صورة في هذا المجلد و اقوم باستدعائها من خلال الوسم img كالتالي :


ويكون شكل الكود الذي نكتبه كما موضح في الصورة التالية :


الان نفتح ملف ال html عبر المتصفح لنرى نتيجة الاستحضار 

هذا كان بالنسبة اذا كانت الصورة بنفس المجلد الذي نعمل به, ماذا لو كانت الصورة بغير مجلد ما هي الطريقة لإستحضار الصورة؟
لننشئ مجلد و نسميه images و نضع الصورة بداخله و نرى كيفية استحضار هذه الصورة


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

هناك خصائص في هذا الوسم نستطيع من خلالها التحكم في ابعاد الصورة من الإرتفاع و العرض وهيwidth, height .

حيث أن width تمثل العرض و heigh تمثل الإرتفاع.

مثال


و النتائج كالتالي


وتوجد خاصية align لتحديد محاذاة الصورة مع النص المرافق لها او بعبارة اخرى تحديد موقع النص مع الصورة وتأخذ القيم bottom , top , middle , right , left

<img src="imageee.png" align="bottom"> تظهر الصورة بالاسفل
<img src="imageee.png" align="top">الصورة بالاعلى والنص بالاسفل
<img src="imageee.png" align="middle"> باقي النص اسفل الصورة
<img src="imageee.png" align="left"> الصورة باليسار و النص لليمين
<img src="imageee.png" align="right"> الصورة لليمين و النص لليسار

تحديد المسافة بين النص و الصورة

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

خاصية vspace

تستخدم لتحديد المسافة العمودية الفاصلة بين النص و الحافتين العليا و السفلى للصورة.

خاصية hspace

تستخدم لتحديد المسافة العمودية الأفقية بين النص و الحافتين اليمنى و اليسرى.

<img src="imageee.png" align="right" vspace="20" hspase="20">

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

مثال اريد ان اضيف للصورة اطار 5 بيكسل وسيكون الكود هكذا
<img src="imageee.png" border="5">

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام