الصور: إضافة الصور إلى صفحتك
أدرج الصور ونسّقها في صفحة الويب الخاصة بك
الصور: إضافة الصور إلى صفحتك درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 4 دروس في المجموع.
الصور: إضافة الصور إلى صفحتكم
مرحبًا بكم في الدرس التالي! سنتعلّم اليوم كيفية إضافة الصور إلى صفحات الويب. تجعل الصور صفحاتكم أكثر تشويقًا ومتعة!
ما الصور في HTML؟
تُضاف الصور إلى صفحات الويب باستخدام الوسم <img>. وهذا وسم ذاتي الإغلاق، أي إنه لا يحتاج إلى وسم إغلاق مثل </img>.
لنتعلّم كيفية استخدامه!
إضافة صورة
لإضافة صورة، استخدموا السمة src لتحديد موقع ملف الصورة.
مثال:
في هذا المثال:
src: تحدد ملف الصورة.alt: توفر نصًا بديلًا إذا تعذّر عرض الصورة.
<img src="https://www.w3.org/html/logo/img/html5-display.png"
alt="A beautiful view" />
النص البديل (السمة alt)
تصف السمة alt الصورة. وهي مهمة لإمكانية الوصول، كما تساعد محركات البحث على فهم الصورة.
مثال:
إذا تعذّر تحميل الصورة، فسيظهر النص "A beautiful sunset over the ocean" بدلًا منها.
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A beautiful sunset over the ocean" />
إضافة أبعاد الصورة
يمكنكم التحكم في حجم الصورة باستخدام السمتين width وheight.
مثال:
يضبط هذا المثال عرض الصورة على 300 بكسل وارتفاعها على 200 بكسل.
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A red flower" width="300" height="200" />
إنشاء روابط للصور
يمكنكم تحويل الصورة إلى رابط قابل للنقر بوضعها داخل وسم <a>.
مثال:
عند النقر على الصورة، ستنقل المستخدم إلى https://example.com.
<a href="https://example.com">
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Example Logo" />
</a>
استخدام الصور المتاحة عبر الإنترنت
يمكنكم استخدام الصور المستضافة عبر الإنترنت من خلال تحديد عنوان URL الخاص بها في السمة src.
مثال:
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Online Image" />
جرّبوا بأنفسكم
لننشئ صفحة ويب بسيطة تحتوي على صور. إليكم مثالًا:
<!DOCTYPE html>
<html>
<head>
<title>My Image Page</title>
</head>
<body>
<h1>Welcome to My Gallery</h1>
<img src="cat.jpg" alt="A cute cat" width="400" />
<p>This is my adorable cat!</p>
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A playful dog" />
<p>This is a friendly dog from the internet!</p>
</body>
</html>
أحسنتم!
تهانينا! لقد تعلّمتم كيفية إضافة الصور إلى صفحات الويب، وتحديد أبعادها، وحتى ربطها بصفحات أخرى. تجعل الصور صفحات الويب أكثر تشويقًا وجاذبية بصريًا. في الدرس التالي، سنتعلّم كيفية إنشاء الجداول لتنظيم البيانات. استعدوا لجعل صفحاتكم أكثر فاعلية!
الأسئلة الشائعة
هل درس «الصور: إضافة الصور إلى صفحتك» مجاني؟
نعم — نص درس «الصور: إضافة الصور إلى صفحتك» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 4 دروس في المجموع.
ماذا ستتعلم في «الصور: إضافة الصور إلى صفحتك»؟
أدرج الصور ونسّقها في صفحة الويب الخاصة بك تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟
لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «الصور: إضافة الصور إلى صفحتك»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟
نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- العناوين والفقرات
- القوائم: المرتبة وغير المرتبة
- الروابط: ربط الويب
- الصور: إضافة الصور إلى صفحتك