002-01141087755 info@CodesRoots.com
تصميم مواقع وتطبيقات الموبايل والجوال-HTMLصور


HTMLصور

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

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

إدراج صورة

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

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

العلامة <IMG> هي علامة فارغة، الأمر الذي يعني أنها يمكن أن تحتوي القائمة الوحيدة من الصفات وليس لديها علامة إغلاق.

    مثال


دعونا نحافظ على test.html ملف HTML وtest.png ملف الصورة في نفس الدليل 

 <!DOCTYPE html>
 <html>
<head>
 <title>Using Image in Webpage</title>
</head>
<body>
     <p>Simple Image Insert</p>
 <img src="/html/images/test.png" alt="Test Image" />
 </body>
  </html>
 
يمكنك استخدام PNG، JPEG أو ملف صورة GIF بناء على راحتك ولكن تأكد من تحديد الصحيح اسم ملف الصورة في سمة src.
اسم الصورة حساس لحالة الأحرف دائما.

بديل السمه  هو سمة إلزامية الذي يحدد نص بديل للصورة، إذا لا يمكن عرض الصورة
 مجموعة صور الموقع

عادة نحن نحافظ على جميع الصور في دليل منفصل. لذلك دعونا نحافظ على test.htm ملف HTML في دليل وطننا،       
وخلق الصور الدليل الفرعي داخل الدليل الرئيسي حيث أننا سوف تبقى لدينا test.png الصورة.

 

مثال
على افتراض موقعنا صورة غير "/html/image/text.png"، حاول المثال التالي
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="/html/images/test.png" alt="Test Image" />
</body>
</html>

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src="/html/images/test.png" alt="Test Image" width="150" height="100"/>
</body>
</html>

 

مجموعة حدود الصور

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

  وسمك 0 وسيلة، وليس لها حدود حول الصورة

مثال  

<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src="/html/images/test.png" alt="Test Image" border="3"/>
</body>
</html>




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

    مثال

<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src="/html/images/test.png" alt="Test Image" border="3" align="right"/>
</body>
</html>

 

 



اعلانات
شركة تصميم مواقع وتطبيقات موبايل اتصل بنا
شركة تصميم مواقع وتطبيقات موبايل اتصل بنا

00966-506999922

متاح واتس اب - فايبر - لاين
شركة تصميم مواقع وتطبيقات موبايل

info@CodesRoots.com