👩🏫 من إعداد: فريق عمل جامعة بنها
🧑🏫 درس تفاعلي
🎯 أهداف الدرس
- إنشاء رابط داخل الصفحة.
- الانتقال إلى موقع آخر عند الضغط على الرابط.
- فتح الرابط في تبويب جديد.
- إدراج صورة داخل صفحة الويب.
- التحكم في بعض خصائص الصور.
- إنشاء صفحة تحتوي على صور وروابط.
🔗 أولاً: الروابط (Links)
الروابط من أهم عناصر صفحات الويب. نستخدم الوسم <a> لإنشائها.
<a href="https://www.google.com">
Google
</a>
| الجزء | الشرح |
|---|
| <a> | وسم الرابط (Anchor) |
| href | تحديد عنوان الصفحة التي سننتقل إليها |
💡 نشاط: جرب كتابة <a href="https://www.youtube.com">YouTube</a>
❓ سؤال: ماذا يحدث عند الضغط على الرابط؟
✅ الإجابة: الانتقال إلى YouTube.
🆕 فتح الرابط في تبويب جديد
للفتح في تبويب جديد نستخدم الخاصية target="_blank"
<a href="https://www.google.com" target="_blank">
Google
</a>
💡 تدريب: أنشئ رابطاً إلى موقع الجامعة أو المدرسة الخاصة بك.
📂 روابط داخلية
إذا كان لدينا صفحتان: index.html و about.html، يمكن الانتقال بينهما:
<a href="about.html">
About Us
</a>
❓ سؤال: إذا ضغطنا على الرابط السابق، إلى أين سننتقل؟
✅ الإجابة: إلى صفحة about.html
💡 ملاحظة: القائمة في أعلى الصفحة تستخدم روابط داخلية للتنقل بين دروس HTML.
🖼️ ثانياً: الصور (Images)
لإضافة صورة نستخدم الوسم <img> (وسم بدون إغلاق).
<img src="cat.jpg">
| الجزء | الشرح |
|---|
| <img> | وسم الصورة |
| src | مسار الصورة (المصدر) |
| alt | نص بديل (يظهر إذا لم تظهر الصورة) |
<img src="cat.jpg" alt="Cat">
💡 فائدة alt: إذا لم تظهر الصورة، سيظهر النص البديل.
📏 التحكم في حجم الصورة
يمكن تحديد عرض وارتفاع الصورة باستخدام الخاصيتين width و height:
<img src="cat.jpg" width="300">
<img src="cat.jpg" height="200">
<img src="cat.jpg" width="300" height="200">
العرض والارتفاع
🐱
width="300" height="200"
💡 ملاحظة: يمكن تحديد العرض والارتفاع بوحدات البكسل (px) أو النسبة المئوية (%).
🌐 صورة من الإنترنت
يمكن استخدام رابط صورة من الإنترنت مباشرة:
<img src="https://example.com/image.jpg" alt="Image">
💡 نشاط: ابحث عن صورة على الإنترنت وضع رابطها في وسم <img>.
🔗🖼️ دمج الصور والروابط
يمكن جعل الصورة نفسها رابطاً:
<a href="https://www.google.com">
<img src="google.png" width="150">
</a>
🔍
Google
(اضغط على الصورة للانتقال)
❓ سؤال: ماذا يحدث عند الضغط على الصورة؟
✅ الإجابة: الانتقال إلى Google.
📝 المشروع العملي: My Favorite Place
📝 أنشئ صفحة تحتوي على:
- عنوان رئيسي <h1>
- صورة لمكانك المفضل <img>
- فقرة قصيرة عنه <p>
- رابط لموقع متعلق بهذا المكان <a>
<!DOCTYPE html>
<html>
<head>
<title>My Favorite Place</title>
</head>
<body>
<h1>My Favorite Place</h1>
<img src="park.jpg" alt="Park" width="300">
<p>
This is my favorite park.
</p>
<a href="https://www.google.com" target="_blank">
Learn More
</a>
</body>
</html>
My Favorite Place
This is my favorite park.
Learn More
🧪 اختبار تفاعلي · مراجعة سريعة
🌟 درجتك
0 / 0