درس كيفية اضافة – ادراج صورة فى صفحة html – التحكم فى الصور – الدرس الحادى عشر

| 25 مايو 2010

السلام عليكم ورحمة الله وبركاته
فى هذا الدرس ان شاء الله سوف نتعلم كيف نضيف صورة فى صفحة HTML ونتعلم ايضا كيف نحدد المساحة التى تكون بها الصورة واتجاه الصورة وكيفية اضافة حدود للصورة

كيفية اضافة – ادراج صورة فى صفحة HTML

يمكننا ادراج صورة فى صفحة HTML باستخدام الوسم img وهو فى نفسه وسم البداية والاغلاق ا انها من الاوسمه التى لا تحتاج لاغلاها اى تكتب الوسم فى البدايه ولا تنهيه بنفس الوسم مع اضافة /
مثال على اضافة صورة

1

<img src="http://2lex.info/wp-content/uploads/2010/05/collect-images-15.jpg" />

هنا استخدمنا الوسم img لاخبار المتصفح اننا سوف ندرج صورة
واستخدمنا العنصر src وهو اختصار لـ source لنخبر المتصفح برابط الصورة – عنوان الصورة
وستظهر بهذا الشكل

هنا قمنا باضافة رابط الصورة كامل ويمكننا ان نضيف رابط الصورة فقط اذا كانت الصورة على موقعنا او على جهازنا
فاذا كانت الصورة فى نفس الملف مع صفحة HTML سنكتب اسم الصورة فقط مثل

1

<img src="collect-images-15.jpg" />

واذا كانت بداخل ملف بجانب صفحة HTML سنكتب اسم الملف ثم اسم الصورة مثل الروابط تماما كما شرحناها فى الدرس السابق ( يمكنك مراجعته )

كيفية اضافة وصف بديل للصورة فى لغة HTML

يمكنك اضافة وصف بديل للصورة باستخدام العنصر alt
مثال

1

<img src="http://2lex.info/wp-content/uploads/2010/05/collect-images-15.jpg" alt="هذا هو وصف الصورة" />

اذا لم تظهر الصورة سترى النص البديل مكتوب على الصورة وايضا ستراه اذا وقفت بمؤشر الفأرة على الصورة
هذا هو الوصف البديل

وهذا الوصف مفيد جدا لارشفة الصور فى محركات البحث

كيفية اضافة عنوان للصورة فى لغة HTML

يمكنك اضافة عنوان للصورة باستخدام العنصر title
وهذا مثال على ذلك

1

<img src="http://2lex.info/wp-content/uploads/2010/05/collect-images-15.jpg" title="هذا هو وصف الصورة" />

نلاحظ ان استخدام title مثل alt تماما ولكن alt افضل لارشفة الصور فى محركات البحث بشكل افضل وايضا تظهر النص البديل اذا لم تحمل الصورة

كيفية التحكم فى عرض وارتفاع الصورة ( مساحة الصورة ) فى لغة HTML

يمكننا التحكم فى عرض وارتفاع الصورة باستخدام العناصر width للعرض و height للاراتفاع

مثال

1

<img src="http://2lex.info/wp-content/uploads/2010/05/collect-images-15.jpg" width="200" height="200" />

هنا قمنا بضبط عرض الصورة 200 بيكسل والارتفاع مثلها وتكون النتيجة كالتالى

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

كيفية اضافة حدود للصورة فى لغة HTML

يمكننا اضافة حدود للصورة باستخدام العنصر border
مثال على ذلك

1

<img src="http://2lex.info/wp-content/uploads/2010/05/collect-images-15.jpg" border="5"  />

قمنا هنا باعطاء قيمة border 5 بيكسل اى ان حجم الحدود ستكون 5 بيكسل

كيفية الفصل بين الكلام والصورة بمسافة ( هوامش الصورة ) فى لغة HTML

نستخدم فى هذا العنصرين التاليين
VSPACE: لتحديد المسافة العمودية الفاصلة بين النص والحافتين العليا والسفلى للصورة.
HSPACE: لتحديد المسافة الأفقية الفاصلة بين النص والحافتين اليمنى واليسرى للصورة.
وهذا مثال

1
2
3

مدونة اليكس للتقنية .
<br>
<img src="http://2lex.info/wp-content/uploads/2010/05/collect-images-15.jpg" width="200" height="200" vspace="50" hspace="50" />مدونة اليكس للتقنية .مدونة اليكس للتقنية .

قمنا هنا باعطاء القيمة لكل من vspace و hspace 50 بيكسل لكى تظهر المسافة بشكل واضح

كيفية تحديد محاذاة الصورة فى لغة HTML

يمكننا تحديد محاذاة الصورة الى اعلى او اسفل او يمين او يسار بواسطة الوسم align
مع اضافة القيم التالية له
left : محاذاة الصورة الى اليسار
right : محاذاة الصورة الى اليمين
middle : محاذاة الصورة فى المنتصف
top : محاذاة الصورة الى الاعلى
bottom : محاذاة الصورة الى الاسفل

مثال على الاستخدام

1

<img src="http://2lex.info/wp-content/uploads/2010/05/collect-images-15.jpg" align="left" />

ستكون الصورة بهذا الشكل

انظر كيف اصبحة محاذاة لليسار

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

وهذا مثال

1

<img src="http://2lex.info/wp-content/uploads/2010/05/collect-images-15.jpg" align="left" width="300" height="300" alt="مدونة اليكس" title="مدونة اليكس للتقنية" vspace="50" hspace="50" />

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

كلمات البحث الواردة:




مدونات عشوائيه

تحميل...

الاوسمة: , , , , ,

التصنيف: دروس html



للاتصال ابوريه: View author profile.



تعليقات (2)

Trackback URL | Comments RSS Feed

  1. ساير قال:
    25 أبريل 2012 الساعة 3:45 ص

    اخي الكريم شكرا على الشرح
    ولكن اريد اعرض صوره كبيره في المقاس
    واريد ان اتحكم بالطول والعرض بحيث لاتتشوه الصور

  2. ابوريه قال:
    25 أبريل 2012 الساعة 10:32 ص

    استخدم هذا الكود اخى الغالى

    < \img src="http://2lex.info/wp-content/uploads/2010/05/collect-images-15.jpg" width="200" height="200" />
    احذف \ قبل استخدام الكود

    تقدر تعدل الطول والعرض كما تشاء ولكن الافضل ان تقوم بالتحكم فى ابعاد الصورة بالسى اس اس

اضافة رد




إذا كنت تريد صوا لتظهر مع تعليقك، الذهاب الحصول على Gravatar.