Mr. A7meD KaMeL

12- ادراج الصور في صفحة الويب HTML Images

محتوى الموضوع

بسم الله الرحمن الرحيم

المحاضرة الثانية عشر: ادراج الصور في صفحة ويب HTML Images

شرح اضافة الصور في صفحة الويب HTML

لاضافة صورة في صفحة الويب يتم استخدام الوسم <img>.

يعتبر وسم الصورة <img> من الوسوم التي ليس لها وسم اغلاقي closing tag.

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

ويتم كتابة وسم الصورة كما في الكود التالي:

<img src="img/logo.png">

حيث ان مسار الصورة هو img/logo.png والتي يتبين في هذا الكود ان ملف الصورة هو logo.png وموجودة داخل مجلد اسمه img.

يمكنك مراجعة المحاضرة الثالثة: الخاصة بخصائص عناصر صفحة الويب لمراجعة كيفية كتابة المسارات.


خاصية النص البديل للصورة:

ومن الضروري جدا اضافة خاصية النص البديل للصورة Alternative text، وتُحدد تلك الخاصية بالحروف alt، وسيكون كود الصورة حينها كما يلي:

<img src="img/logo.png" alt="النص البديل هنا">

وفائدة خاصية النص البديل، انه اذا كان مسار الصورة غير صحيح او ان الصورة مثلا تم مسحها بالخطأ من الموقع، فسيظهر هذا النص البديل مكان الصورة.


خاصتي عرض وارتفاع الصورة:

لتحديد ارتفاع height وعرض width ثابت للصورة، يمكن استخدام هذين الخاصتين كما بالكود التالي:

<img src="img/logo.png" alt="النص البديل" width="100" height="100">

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

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


تنسيق ارتفاع وعرض الصورة باستخدام اكواد css:

بدلا من استخدام خاصيتي العرض والارتفاع يمكن استخدام تنسيقات css لتعيين عرض وارتفاع ثابتين للصورة، ويتم ذلك كما في الكود التالي:

<img src="img/logo.png" alt="النص البديل" style="width:100px; height:100px;">

نهاية المحاضرة

تاريخ الموضوع: أبريل 23, 2017 8:54 م
اسم الكاتب A7meD KaMeL - NiGh10GaLe
نبذة عن الكاتب

مهندس كمبيوتر - مصمم مواقع - مدرب كمبيوتر - مدرب ICDL بمركز التدريب الاداري والاستشارات بكلية التجارة بجامعة المنصورة - مدرب تصميم مواقع - مدرب لكورس الربح من الانترنت.

اترك تعليقاً