👩🏫 من إعداد: فريق عمل جامعة بنها
🧑🏫 درس تفاعلي
🎯 أهداف الدرس
- إضافة ملف صوتي إلى صفحة الويب.
- إضافة فيديو إلى صفحة الويب.
- تضمين صفحة أو فيديو باستخدام Iframe.
- إنشاء صفحة بسيطة تحتوي على وسائط متعددة.
🔊 أولاً: Audio (الصوت)
يستخدم لإضافة ملف صوت إلى صفحة الويب.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
| الجزء | الشرح |
|---|
| <audio> | لإنشاء مشغل الصوت |
| controls | لإظهار أزرار التشغيل والإيقاف |
| <source> | لتحديد ملف الصوت |
💡 نشاط: أضف ملفاً صوتياً إلى صفحتك.
🎬 ثانياً: Video (الفيديو)
يستخدم لإضافة فيديو إلى صفحة الويب.
<video controls width="400">
<source src="video.mp4" type="video/mp4">
</video>
| الجزء | الشرح |
|---|
| <video> | لإنشاء مشغل الفيديو |
| controls | لإظهار أزرار التشغيل |
| width | لتحديد عرض الفيديو |
| <source> | لتحديد ملف الفيديو |
💡 نشاط: أضف فيديو إلى صفحتك.
🖼️ ثالثاً: Iframe (تضمين محتوى خارجي)
يستخدم لعرض صفحة ويب أو خريطة أو فيديو من موقع آخر داخل صفحتك.
<iframe src="https://www.example.com"></iframe>
💡 نشاط: أضف صفحة ويب أو فيديو YouTube باستخدام iframe.
📝 المشروع العملي: My Multimedia Page
📝 المطلوب:
- عنوان رئيسي
- فقرة قصيرة
- صورة
- ملف صوت
- فيديو
- Iframe يعرض موقعاً أو فيديو من YouTube
📝 مثال كامل
<!DOCTYPE html>
<html>
<head>
<title>My Multimedia Page</title>
</head>
<body>
<h1>🎵 My Multimedia Page</h1>
<p>
Welcome to my multimedia page. Here you can find audio, video, and more!
</p>
<h2>🖼️ My Image</h2>
<img src="photo.jpg" width="300" alt="My Photo">
<h2>🔊 My Audio</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<h2>🎬 My Video</h2>
<video controls width="400">
<source src="video.mp4" type="video/mp4">
</video>
<h2>🌐 My Favorite Website</h2>
<iframe src="https://www.wikipedia.org" width="500" height="300"></iframe>
</body>
</html>
🎵 My Multimedia Page
Welcome to my multimedia page. Here you can find audio, video, and more!
🖼️ My Image
🔊 My Audio
🎬 My Video
🌐 My Favorite Website
🧪 اختبار تفاعلي · مراجعة سريعة
🌟 درجتك
0 / 0