الصور (Images) في HTML

3 ديسمبر، 2023 * تيتو 4 تك

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

إدراج صورة في HTML

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

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

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

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

 <body>
      <p> إدراج صورة </p>
      <img src = "/html/test.png" alt = "Test Image" />
</body>

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

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

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

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

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

   <body>
      <p> إدراج صورة </p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>

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

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

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

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

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


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

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

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

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