🚀 اليوم السادس · مراجعة وبناء صفحة ويب

🎯 Review & Build

👩‍🏫 من إعداد: فريق عمل جامعة بنها 🧑‍🏫 درس تفاعلي

🎯 أهداف الدرس

مراجعة جميع عناصر HTML السابقة.
كتابة صفحة ويب كاملة.
تنظيم العناصر داخل الصفحة.
الاستعداد لتطبيق المشروع النهائي.

📝 الجزء الأول: مراجعة سريعة

❓ أسئلة سريعة

1. ما الوسم المستخدم لكتابة عنوان رئيسي؟

<h1>

2. ما الوسم المستخدم لإضافة فقرة؟

<p>

3. ما الوسم المستخدم لإضافة صورة؟

<img>

4. ما الخاصية التي تحدد رابط الصفحة؟

href

5. ما الوسم المستخدم لإنشاء جدول؟

<table>

6. ما الوسم المستخدم لإنشاء نموذج؟

<form>

7. أي عنصر يستخدم لعرض صورة؟

<img>

8. أي عنصر يستخدم لإنشاء رابط؟

<a>

9. أي عنصر يستخدم لإنشاء قائمة مرتبة؟

<ol>

10. أي عنصر يستخدم لإنشاء قائمة غير مرتبة؟

<ul>

11. أي عنصر يستخدم لإنشاء خلية في الجدول؟

<td>

12. أي عنصر يستخدم لعناوين الجدول؟

<th>

13. ما الخاصية المستخدمة لتحديد مصدر الصورة؟

src

14. أي عنصر يستخدم لإنشاء صف في الجدول؟

<tr>

15. أي من التالي ينشئ قائمة مرتبة؟

<ol>

🛠️ الجزء الثاني: مشروع عملي - Build My First Web Page

📋 المطلوب:

1. عنوان رئيسي - اسم الطالب.
2. صورة - صورته أو أي صورة يختارها.
3. فقرة - نبذة قصيرة عنه.
4. قائمة - الهوايات.
5. جدول - المادة والدرجة.
6. رابط - رابط لموقعه المفضل.
7. نموذج - يحتوي على Name، Email، Favorite Subject، Submit.

📝 مثال كامل

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>

    <h1>Ahmed</h1>

    <img src="me.jpg" width="200">

    <p>
        Hello! I love learning HTML.
    </p>

    <h2>My Hobbies</h2>

    <ul>
        <li>Reading</li>
        <li>Football</li>
        <li>Drawing</li>
    </ul>

    <h2>My Grades</h2>

    <table border="1">
        <tr>
            <th>Subject</th>
            <th>Grade</th>
        </tr>
        <tr>
            <td>HTML</td>
            <td>100</td>
        </tr>
    </table>

    <h2>My Favorite Website</h2>

    <a href="https://www.google.com">
        Google
    </a>

    <h2>Contact Me</h2>

    <form>
        <label>Name</label>
        <input type="text">
        <br><br>

        <label>Email</label>
        <input type="email">
        <br><br>

        <input type="submit">
    </form>

</body>
</html>
            

Ahmed

🧑‍🎓

صورة الطالب

Hello! I love learning HTML.

My Hobbies

Reading
Football
Drawing

My Grades

Subject	Grade
HTML	100

My Favorite Website

Google

Contact Me

🎯 نشاط نهاية الدرس

📝 المطلوب:

إنشاء صفحة ويب كاملة تحتوي على:

عنوان رئيسي (اسمك)
صورة (صورتك أو صورة من اختيارك)
فقرة تعريفية عنك
قائمة بهواياتك
جدول بموادك ودرجاتك
رابط لموقعك المفضل
نموذج للتواصل (الاسم، البريد الإلكتروني، المادة المفضلة)

تطبيق كل ما تعلمته في الدروس السابقة.

🏗️ تمهيد: الدرس القادم - HTML الدلالي

📢 في الدرس القادم (اليوم السابع): سنتعلم العناصر الدلالية في HTML5.

🔹 الفرق بين العنصر غير الدلالي والعنصر الدلالي:

❌ عنصر غير دلالي (div)

                            <div>
                                <h1>My Website</h1>
                                <p>Welcome to my page.</p>
                            </div>
                        

⚠️ ليس له معنى محدد، فقط للتجميع والتنسيق.

✅ عنصر دلالي (header)

                            <header>
                                <h1>My Website</h1>
                                <p>Welcome to my page.</p>
                            </header>
                        

✅ يوضح أن هذا الجزء هو رأس الصفحة (له معنى).

📌 <div>: عنصر عام، ليس له معنى محدد، يستخدم للتجميع والتنسيق.

📌 <header>: عنصر دلالي، يوضح أن هذا الجزء هو رأس الصفحة.

💡 ملاحظة: في الدرس القادم (اليوم السابع) سنتعلم العناصر الدلالية مثل <header>، <nav>، <main>، <section>، <article>، <aside>، <footer> التي تعطي معنى ووظيفة واضحة لكل جزء من الصفحة.

💡 لماذا نستخدم العناصر الدلالية؟
- تجعل الكود أسهل في القراءة والفهم.
- تساعد محركات البحث (SEO) في فهم محتوى الصفحة.
- تسهل على برامج قراءة الشاشة (Screen Readers) التنقل في الصفحة.
- تعطي معنى ووظيفة واضحة لكل جزء من الصفحة.

🧪 اختبار تفاعلي · مراجعة سريعة

🌟 درجتك

0 / 0