دروس الإتش تي أم أل - HTML إضافة الصور

دروس الإتش تي أم أل - HTML إضافة الصور


إضافة الصور

هذا الدرس مسلي جدا فهو سيعلمك كيفية إضافة الصور.

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

والآن وصلنا معا إلى هذا الدرس المفيد جدا .....فهنا سوف تتعلم معنا كيفية إضافة الصور الى موقعك

وهنالك وسم معين لإضافة الصور ألا وهو

<IMG>

مع الخاصية

SRC

والآن هيا معا إلى التطبيق........نفترض بأن لديك صورة قد اسميتها

image1

فكيف تستطيع إدراجها في موقعك

حسنا فلنكتب الأمر معا

سيكون بهذه الطريقة

<IMG SRC="image1.jpg">



--------

ثانيا: التحكم في عرض وطول الصورة

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

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

HEIGHT , WIDTH

سوف اذكر لك مثالا الآن لتتعلم كيفية استخدام تلك الخصائص

<IMG SRC="image1.jpg" HEIGHT="200" WIDTH="300">



-------

ثالثا: كتابة نص بديل عن الصورة

ربما قد تلاحظ حينما تتصفح موقعا بأن تحميل الصور بعض الاحيان يكون بطيئا وقبل ظهور الصورة يكون هنالك نصا مكتوبا في مكان الصورة

فيا ترى كيف ظهر ذلك النص؟

الأمر في غاية السهولة ، فقط يلزمك استخدام خاصية جديدة في نفس الوسم السابق

وهذه الخاصية تسمى

ALT

نفترض انك تريد اضافة الجملة التالية لتكون خلف الصورة ليراها كل من تحميله للصور بطيء او ان اتصاله يكون بدون صور

وهذه الجملة هي: صورة للموسوعة العربية للكمبيوتر والانترنت

لذلك كل ما علينا فعله هو كتابة التالي

<IMG SRC="image1.jpg" ALT="صورة للموسوعة العربية للكمبيوتر والانترنت >



--------

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

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

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

BORDER

وتستطيع تحديد سمك الإطار حسب رغبتك

وسوف أذكر لك مثالا يوضح كلامي والقيم التي تضيفها هي قيم بالبيكسل

<IMG SRC="image1.jpg" BORDER="4">