شرح HTML Graphics

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

1) الصور img:
يستخدم عنصر img لإدراج الصور في صفحة HTML، حيث يمكن تحديد مسار الصورة (src)، الوصف (alt)، العرض (width) والارتفاع (height) لتعيين الأبعاد المناسبة للصورة.

HTML

<img src="example.jpg" alt="صورة توضيحية" width="500" height="400">

2) الشعارات svg: يمكن استخدام الشعارات SVG لإدراج رسومات متجهية قابلة للتغيير في HTML، حيث يمكن تعديل حجم الرسومات وألوانها بسهولة.

HTML

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

3) الخرائط الحرارية canvas: يمكن استخدام عنصر canvas لإنشاء الخرائط الحرارية ورسومات أخرى متقدمة باستخدام البرمجة النصية، حيث يمكن تعيين أبعاد العنصر (width، height) والأوامر البرمجية اللازمة لإنشاء الرسوم.

HTML

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(10, 10, 150, 80);
</script>

4) الرسوم المتحركة gif:
يمكن استخدام ملفات الصور المتحركة GIF لإضافة رسوم متحركة إلى صفحات HTML، حيث يتم تشغيل الصور بتتابع سريع لإنشاء تأثير الحركة.

HTML

<img src="example.gif" alt="رسوم متحركة">

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

وهكذا إنتهينا من درسنا أو مقالتنا المتواضعة أتمنى أنك فهمت و وفقك الله أتمنى دعمنا بمشاركة الدرس لكي تعم الفائدة.