هذا الدرس من الدورة التدريبية: كورس تعلم HTML من الصفر لبناء صفحات ويب
الدرس: مقدمة لإضافة الصور والفيديو والصوت وتضمين المواقع والملفات في صفحة الويب
المدة: 5 دقائق
وصف مختصر:
اكتشف كيفية استخدام وسوم HTML لتضمين الصور والفيديو والصوت والمواقع في صفحات الويب، مما يعزز تجربة المستخدم ويحسن ترتيب موقعك في محركات البحث.
وصف الدرس
سوم HTML الأساسية لتضمين مختلف أنواع الوسائط والمحتويات في صفحات الويب. هذه المهارات تعد ضرورية لأي مطور ويب مبتدئ يسعى إلى إنشاء صفحات ومواقع إنترنت.
1. تضمين الصور باستخدام وسم
يُعد وسم
2. استخدام
يتيح لك وسم
3. تضمين الملفات باستخدام وسم
يستخدم وسم
4. تضمين صفحات HTML ومواقع خارجية باستخدام وسم
يُستخدم وسم
5. تضمين الفيديوهات باستخدام وسم
يتيح لك وسم
6. تضمين الملفات الصوتية باستخدام وسم
يمكنك استخدام وسم
في هذا الدرس التمهيدي، قدمنا نظرة عامة على كيفية تضمين الصور، الفيديوهات، الملفات الصوتية، والمحتويات الأخرى داخل صفحات الويب باستخدام وسوم HTML الأساسية. إتقان هذه الأدوات الأساسية يمكن أن يعزز من تجربتك كمطور ويب، ويفتح لك الأبواب لتطوير مواقع ويب تفاعلية وجذابة تلبي احتياجات المستخدمين وتحسن من أداء موقعك في محركات البحث.
1. تضمين الصور باستخدام وسم <img>
يُعد وسم
<img> أحد الوسوم الأساسية في HTML لعرض الصور على صفحات الويب. يعتمد هذا الوسم على عدة سمات، أهمها:src: تحدد مسار الصورة التي سيتم عرضها.alt: نص بديل يظهر في حال تعذر تحميل الصورة، مما يعزز الوصولية ويساعد في تحسين محركات البحث (SEO).title: نص يظهر عند تمرير مؤشر الفأرة فوق الصورة، مما يوفر معلومات إضافية للمستخدم.
2. استخدام <figuare> و <figcaption> لعرض الصور مع نص توضيحي
يتيح لك وسم
<figuare> إضافة الصور مع نصوص توضيحية باستخدام وسم <figcaption>. هذا الأسلوب يساعد في تقديم معلومات إضافية للمستخدمين، مما يعزز من فهم المحتوى:html
<figuare>
<img src="your-img.png">
<figcaption>هذا النص سيظهر أسفل الصورة</figcaption>
</figuare>
3. تضمين الملفات باستخدام وسم <embed>
يستخدم وسم
<embed> لتضمين ملفات متنوعة مثل الصور أو المستندات داخل صفحات الويب. يتميز هذا الوسم بالبساطة والفعالية في عرض المحتويات مباشرة داخل المتصفح:html
<embed type="image/jpg" src="your_img.jpg" width="300" height="200">
4. تضمين صفحات HTML ومواقع خارجية باستخدام وسم <iframe>
يُستخدم وسم
<iframe> لعرض محتويات من مصادر خارجية، مثل صفحات HTML أخرى أو مواقع مثل YouTube، داخل صفحة الويب. يمكنك استخدام هذا الوسم لدمج المحتويات بدون الحاجة إلى مغادرة الصفحة الرئيسية:html
<iframe src="your_html_file.html"></iframe>
5. تضمين الفيديوهات باستخدام وسم <video>
يتيح لك وسم
<video> عرض مقاطع الفيديو على صفحة الويب مع إمكانية التحكم الكامل في تشغيل الفيديو عبر سمة controls. كما يمكنك توفير مصادر متعددة للفيديو باستخدام وسم <source>:html
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
متصفحك لا يدعم وسم الفيديو.
</video>
6. تضمين الملفات الصوتية باستخدام وسم <audio>
يمكنك استخدام وسم
<audio> لتضمين مقاطع الصوت في صفحات الويب بنفس طريقة تضمين الفيديوهات، مع توفير تحكم كامل للمستخدم في تشغيل الصوت:html
<audio controls>
<source src="soundtest.ogg" type="audio/ogg">
<source src="soundtest.mp3" type="audio/mpeg">
متصفحك لا يدعم وسم الصوت.
</audio>
كلمة عن الدرس
في هذا الدرس التمهيدي، قدمنا نظرة عامة على كيفية تضمين الصور، الفيديوهات، الملفات الصوتية، والمحتويات الأخرى داخل صفحات الويب باستخدام وسوم HTML الأساسية. إتقان هذه الأدوات الأساسية يمكن أن يعزز من تجربتك كمطور ويب، ويفتح لك الأبواب لتطوير مواقع ويب تفاعلية وجذابة تلبي احتياجات المستخدمين وتحسن من أداء موقعك في محركات البحث.
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي مقدمة لإضافة الصور والفيديو والصوت وتضمين المواقع والملفات في صفحة الويب
المصادر
ملحقات ال PDF
- 337 دقيقة من الفيديوهات التفاعلية الحصرية
- 66 مصدر إضافي
- 52 ملحقات PDFs
- 14 فيديو إضافي داخل الدروس
- 28 تطبيق نظري وعملي
- الوصول على جميع الأجهزة
- وصول مدى الحياة
- شهادة أوروبية لإتمام الدراسة
- ا لحصول على شهادة دبلوم موثقة
للوصول إلى الفيديوهات والمصادر والملحقات الدراسية والمواد التعليمية لدراسة برنامج
دورة تدريبية تعلم لغة HTML لبناء مواقع الإنترنت
اضغط هنا ابدأ التعلم
أيضاً عند أداء الاختبارات بنجاح سوف تحصل على الشهادة الأوروبية المعتمدة في إتمام الدراسة والتأهل لطلب الشهادة الدولية في هذا البرنامج
الدروس والاختبارات لتعلم هذه الدورة التدريبية : كورس تعلم HTML من الصفر لبناء صفحات ويب
دورات تدريبية أخرى في برمجة
دبلوم بناء مواقع الإنترنت للمبتدئين تعلم من الصفر HTML وCSS وJavaScript
ابدأ رحلتك في تطوير مواقع الإنترنت مع دبلوم شامل للمبتدئين. تعلم HTML وCSS وJavaScript من الصفر واكتسب المهارات الأساسية لبناء مواقع احترافية. دورة مصممة لتدعمك في كل خطوة على الطريق.
مقالات ذات صلة
لماذا يجب أن تبدأ بتعلم البرمجة وجافاسكربت الآن؟
فوائد تعلم البرمجة وبرنامج جافاسكربت في عالمنا الرقمي المتسارع، أصبحت البرمجة حجر الزاوية الذي تقوم عليه العديد من الابتكارات التقنية التي نشهدها...
فهم الشبكات: المفاهيم الأساسية والأدوات
فهم الشبكات وإعداد الخوادم واستخدام أدوات البرمجة يشكّل محورًا أساسيًا في بناء صفحات ومواقع الإنترنت باستخدام HTML، خاصة ضمن البرنامج المتاح على...
التعامل مع البيانات وواجهة المستخدم باستخدام JavaScript
هل تساءلت يومًا عن كيفية التحكم في البيانات والتفاعل مع واجهة المستخدم في صفحات الويب؟ 🤔 في عالم البرمجة الحديثة، يعد فهم...
