كيفية استخدام الصور بتنسيق HTML | دروس HTML5

 كيفية استخدام الصور بتنسيق HTML

 تعد الصور من أهم أجزاء تصميم مواقع الويب. استخدام الصور يجعل صفحاتنا جذابة ومحتوياتها مفهومة، والآن أصبح من النادر العثور على موقع لا يستخدم الصور. في هذا الدرس، سنناقش كيفية استخدام الصور على صفحات الويب.


 يوضح المثال التالي كيفية استخدام عنصر img لعرض صورة:

<!DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

</body>
</html>

استخدام الصور في HTML 

في HTML ، يتم تعريف الصور داخل علامة <img>.

تعد علامة img عنصرًا فارغًا وتحتوي فقط على سمات وليس لها علامة نهاية.

تحدد السمة src عنوان URL للصورة:

<img src="url" alt="some_text" style="width:width;height:height;">

إذا كان المستخدم غير قادر لأي سبب من الأسباب على رؤية الصورة على الصفحة (سرعة إنترنت منخفضة أو خطأ في عنوان URL المحدد لـ src أو عندما يستخدم المستخدمون برامج قراءة الصفحة) ، تحدد سمة alt النص البديل لعرضه على الصفحة:

<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

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


قارئات صفحات HTML

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


حجم الصورة  في HTML - الطول والعرض

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

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

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

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

استخدم العرض والطول أو النمط؟

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

<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>
</html>

الصور في مجلد محدد

إذا استخدمنا اسم الصورة فقط في سمة src للصورة، فسيفترض المتصفح أن الصورة موجودة في نفس المجلد مثل الصفحة الحالية.

ومع ذلك، فمن الأفضل وضع الصور في مجلد فرعي والوصول إليها بالطريقة التالية:

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

في المثال أعلاه، الصورة موجودة في مجلد الصور.


الصور على خادم آخر

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

<img src="https://www.arabicness.com/images/arabicness.jpg" alt="arabicness.com">

الصور المتحركة 

الصور مع امتداد gif. عادة الصور متحركة:

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

لاحظ أن صيغة استخدام الصور المتحركة لا تختلف عن صيغة الصور الثابتة.


استخدم خاصية الطفو في الصور

باستخدام خاصية float، يمكنك نقل الصورة المطلوبة إلى يسار أو يمين النص:

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

خرائط الصور

استخدم عنصر <map> لتعريف خريطة الصورة.

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

باستخدام سمة الاسم في عنصر <الخريطة> ، يمكن إنشاء العلاقة بين الصورة والخريطة.

تحتوي العلامة <map> على عدد من علامات <area> التي تحدد المناطق القابلة للنقر للصورة:

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

كلمات مفتاحية: