English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
الصفحات الديناميكية والمتنوعة التي نراها اليوم هي بسبب دور الصور. في الماضي، كانت جميع الصفحات على الإنترنت تحتوي فقط على نصوص، وكانت مملة، لذا يمكن فهم أهمية الصور في تصميم الصفحات.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات(oldtoolbag.com)</title> </head> <body> <h2>صورة افتراضية</h2> <img border="0" src="/run/html/default.jpg" alt="default" width="304" height="228"> </body> </html>اختبار لمعرفة <‹/›
إدراج الصورة
هذا المثال يوضح كيفية عرض الصور في صفحة الويب.
إدراج الصور من مواقع مختلفة
هذا المثال يوضح كيفية عرض صور من مجلدات أخرى أو خوادم أخرى على صفحة الويب.
(يمكن العثور على أمثلة إضافية في نهاية الصفحة.)
في HTML، يتم تعريف الصورة بملف <img>.
<img> هو علامة فارغة، مما يعني أن لديها فقط خصائص وليس هناك علامة إنهاء.
لعرض الصورة على الصفحة، يجب استخدام خاصية المصدر (src). src تعني "المصدر". قيمة خاصية المصدر هي عنوان URL للصورة.
جملة تعريف الصورة هي:
<img src="url" alt="some_text">
URL هو المكان الذي يتم فيه تخزين الصورة. إذا كانت الصورة التي تحمل الاسم "default.jpg" موجودة في مجلد images في ar.oldtoolbag.com، فإن URL الخاص بها هو https://ar.oldtoolbag.com/run/html/default.jpg.
سيقوم المتصفح بعرض الصورة في المكان الذي يظهر فيه علامة الصورة في الوثيقة. إذا وضعت علامة الصورة بين فقورتين، فإن المتصفح سيقوم أولاً بعرض الفقرة الأولى، ثم الصورة، وأخيرًا الفقرة الثانية.
يستخدم نص الاستبدال (alt) لتعريف سلسلة نصية قابلة للاستبدال للصورة.
قيمة نص الاستبدال هي مكتوبة من قبل المستخدم.
<img src="boat.gif" alt="Big Boat">
عندما لا يمكن تحميل الصورة من قبل المتصفح، يخبر نص الاستبدال القارئ عن المعلومات التي فقدها. في هذه الحالة، سيقوم المتصفح بعرض هذا النص الاستبدالي بدلاً من الصورة. من الجيد إضافة نص استبدال لكل صورة في الصفحة، مما يساعد في عرض المعلومات بشكل أفضل، ويساعد أيضًا من يستخدمون متصفحات نصية.
خصائص الارتفاع (height) والعرض (width) تستخدم لضبط الارتفاع والعرض للصورة.
وحدة القياس الافتراضية للقيم هي البكسل:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
نصيحة: تحديد الارتفاع والعرض للصورة عادة جيدة. إذا تم تحديد الارتفاع والعرض للصورة، فإن الصفحة ستحافظ على الأبعاد المحددة عند تحميل الصفحة. إذا لم يتم تحديد حجم الصورة، قد يتم تدمير تصميم الصفحة عند تحميل الصفحة.
ملاحظة: إذا كان ملف HTML يحتوي على عشرة صور، فإنه من الضروري تحميل 11 ملفًا لعرض الصفحة بشكل صحيح. يتطلب تحميل الصور وقتًا، لذا نوصي بالتخلي عن استخدام الصور.
ملاحظة: عند تحميل الصفحة، تأكد من مسار الصورة المضمنة في الصفحة. إذا لم يتم ضبط موقع الصورة بشكل صحيح، لن يتم تحميل الصورة من قبل المتصفح، وسيظهر رمز صورة مكسورة.
ترتيب الصورة
هذا المثال يوضح كيفية ترتيب الصورة في النص.
تطوف الصورة
هذا المثال يوضح كيفية جعل الصورة تطوف إلى اليسار أو اليمين من الفقرة.
ضبط رابط الصورة
هذا المثال يوضح كيفية استخدام الصورة كرابط.
إنشاء خريطة الصور
هذا المثال يوضح كيفية إنشاء خريطة صور يمكن الضغط عليها. كل منطقة هي رابط.
| العلامة | وصف |
| <img> | تحديد الصورة |
| <map> | تحديد خريطة الصورة |
| <area> | تحديد منطقة القابلة للنقر في خريطة الصورة |