الصور (Images) في HTML



6 نوفمبر، 2021 | تيتو 4 تك


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

     

     

    enlightened  إدراج صورة

     

    يمكنك إدراج أي صورة في صفحة الويب الخاصة بك باستخدام علامة <img>. فيما يلي الصيغة البسيطة لاستخدام هذه العلامة :

     

    <img src = "Image URL" ... attributes-list/>

     

    علامة <img> هي علامة فارغة ، مما يعني أنه يمكن أن تحتوي فقط على قائمة من السمات وليس لها علامة إغلاق.

     لتجربة المثال التالي ، دعنا نحتفظ بملف (HTML) test.html وملف الصورة test.png في نفس المكان :

     

    <!DOCTYPE html>
    <html>
    
       <head>
     </title>استخدام الصورة في صفحة الويب <title>      
       </head>
    	
       <body>
          <p> إدراج صورة </p>
          <img src = "/html/test.png" alt = "Test Image" />
       </body>
    	
    </html>

     

     

    يمكنك استخدام ملف صورة PNG أو JPEG أو GIF كيفما تريد ولكن تأكد من تحديد اسم ملف الصورة الصحيح في سمة src. اسم الصورة دائما حساس لحالة الأحرف.

    سمة alt هي سمة إلزامية تحدد نصًا بديلاً للصورة ، إذا تعذر عرض الصورة.

     

     

    enlightened  تعيين موقع الصورة

     

    عادة ما نحتفظ بجميع الصور في دليل منفصل. لذلك دعونا نحتفظ بملف (HTML) test.html في دليلنا الرئيسي وننشئ دليل فرعي للصور داخل الدليل الرئيسي و سنسميه images حيث سنحتفظ بصورتنا test.png.

    بافتراض أن موقع الصورة لدينا هو "images / test.png" ، جرب المثال التالي :

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title/> استخدام الصورة في صفحة الويب <title>      
       </head>
    	
       <body>
          <p> إدراج صورة </p>
          <img src = "/html/images/test.png" alt = "Test Image" />
       </body>
    	
    </html>

     

     

    enlightened  تعيين عرض / ارتفاع الصورة

     

    يمكنك تعيين عرض الصورة وارتفاعها بناءً على متطلباتك باستخدام سمات العرض والارتفاع. يمكنك تحديد عرض الصورة وارتفاعها من حيث البكسل أو النسبة المئوية لحجمها الفعلي.

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> تعيين عرض / ارتفاع الصورة </title>
       </head>
    	
       <body>
          <p> تعيين عرض / ارتفاع الصورة </p>
          <img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
       </body>
    	
    </html>

     

    enlightened  تعيين حدود الصورة

     

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

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> تعيين حدود للصورة </title>
       </head>
    	
       <body>
          <p> تعيين حدود للصورة </p>
          <img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
       </body>
    	
    </html>

     

     

    enlightened  تعيين محاذاة الصورة

     

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

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> تعيين محاذاة الصورة </title>
       </head>
    	
       <body>
          <p> تعيين محاذاة الصورة </p>
          <img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
       </body>
    	
    </html>