HTML Images

-

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

ادراج الصور في صفحات HTML

طريقة الكتابة 

<img src=" " alt="">

طبق الكود التالي في صفحة HTML 

<!DOCTYPE html>
<html>
<body>
        <img src="bellAlert.gif" alt="bellAlert">
</body>
</html>

شوف النتيجة

اكيد ما تنسى تكون الصورة في نفس مكان ملف html او اذا كانت في مكان ثاني تأكد من الرابط يكون كامل لمكان الصورة. 

لاحظ في الكود السابق استخدمنا attributes التالية:

  • src : يتم تحدد مسار الصورة من خلاله. 
  • Alt : يستخدم لإضافة نص بديل للصورة في حال عدم عرض الصورة لسبب ما

جرب تحذف مسار الصورة من src وشوف النتيجة. 

التحكم بحجم الصور 

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

الكود التالي يعمل على تغيير حجم وارتفاع الصورة :

<!DOCTYPE html>
<html>
<body>
        <img src="bellAlert.gif" alt="bellAlert" height ="100" width="100">
</body>
</html>

 يمكن التحكم بحجم الصورة من خلال استخدام خاصية style 

الكود:

<!DOCTYPE html>
<html>
<body>
        <img src="bellAlert.gif" alt="bellAlert" style="width: 100px;height: 100px;">
</body>
</html>

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

ملاحظات :

  • مسار الصورة  SRC مختلف حسب مكان الصورة يمكن استخدام صورة من داخل المشروع ويمكن استخدام صورة من مواقع خارجيه 
  • يمكن استخدام الصورة بجميع الاشكال (jpg, Gif, png ، ICO، SVG، ... الخ)

 استخدام الصورة كرابط 

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

<!DOCTYPE html>
<html>
<body>
    <h2>Open google using image Link  </h2>
    <p><b><a href="http://www.google.com" target="_blank">
        <img src="google.png">
    </a></b></p>       
</body>
</html>

شغل الصفحة وشوف النتيجة:

Image Floating

يمكن التحكم باتجاه Elements في HTML لليمين او اليسار وخلونا نطبق مثال على الصور حتى نفهم كيف بنعملها

طبق الكود التالي في صفحة HTML 


<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
}
</style>
</head>
<body>
    <div>
        <p>
            <img src="bellAlert.gif" style="float:left;width:42px;height:42px;">
            كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
            
        <p>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
      </div>
</body>
</html>

شغل الصفحة وشوف النتيجة: 


في المثال عملنا float للصورة باتجاه اليسار جرب تعملها الى اليمين وشوف النتيجة.