HTML CSS JAVASCRIPT PHP PYTHON SQL LARAVEL
DevArabi
دورة تعلم HTML

امتحان HTML 1: الأساسيات والمستوى المتوسط (20 تمرين مركب)

السابق التالي

امتحان HTML: الأساسيات والمستوى المتوسط

يتكون هذا الامتحان من 20 تمرين شامل. كل تمرين يحتوي على عدة مطالب (أسئلة) يجب تنفيذها معاً في كود واحد.
التمارين 1-10: المستوى الأساسي | التمارين 11-15: المستوى المتوسط | التمارين 16-20: المستوى المتقدم

تمرين 1 هيكل الصفحة وإعداداتها (Structure & Head)

قم بإنشاء صفحة HTML كاملة تتضمن المتطلبات التالية:

  1. تعريف نوع المستند (Doctype) كـ HTML5.
  2. تحديد لغة الصفحة لتكون العربية (ar) واتجاه النص من اليمين لليسار (rtl).
  3. إضافة ترميز الأحرف (Charset) ليكون UTF-8.
  4. وضع عنوان للصفحة (Title) باسم "امتحاني الأول".
  5. إضافة وصف للصفحة (Meta Description) بمحتوى "صفحة تجريبية".
الحل
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>امتحاني الأول</title>
    <meta name="description" content="صفحة تجريبية">
</head>
<body>
    
</body>
</html>
تمرين 2 تنسيق النصوص والعناوين (Typography)

اكتب كود HTML لعرض المحتوى التالي:

  1. عنوان رئيسي (H1) للنص "مقدمة في البرمجة".
  2. خط فاصل أفقي (Horizontal Rule).
  3. عنوان فرعي (H2) للنص "ما هي البرمجة؟".
  4. فقرة نصية تحتوي على كلمة "مهمة" بخط غامق (Strong) وكلمة "جداً" بخط مائل (Em).
  5. إضافة سطر جديد (Line Break) داخل الفقرة.
الحل
<h1>مقدمة في البرمجة</h1>
<hr>

<h2>ما هي البرمجة؟</h2>
<p>
    البرمجة مهارة <strong>مهمة</strong> <em>جداً</em> في عصرنا الحالي.<br>
    وهي أساس التكنولوجيا.
</p>
تمرين 3 الروابط المتشعبة (Links)

أنشئ 3 أنواع مختلفة من الروابط:

  1. رابط نصي يذهب إلى "google.com" ويفتح في نافذة جديدة.
  2. رابط يفتح برنامج البريد الإلكتروني لإرسال رسالة إلى "info@example.com".
  3. رابط داخلي ينقل المستخدم إلى قسم في نفس الصفحة يحمل المعرف "footer".
الحل
<!-- رابط خارجي -->
<a href="https://google.com" target="_blank">Google</a>

<!-- رابط بريد إلكتروني -->
<a href="mailto:info@example.com">راسلنا</a>

<!-- رابط داخلي -->
<a href="#footer">الذهاب للأسفل</a>
تمرين 4 الصور والوسائط (Images & Figures)

تعامل مع الصور بالشكل التالي:

  1. أدرج صورة "cat.jpg" بعرض 300 بكسل.
  2. أضف نصاً بديلاً (Alt Text) للصورة "قطة لطيفة".
  3. ضع الصورة داخل عنصر `figure` وأضف لها شرحاً (Caption) أسفلها بعنوان "صورة اليوم".
الحل
<figure>
    <img src="cat.jpg" alt="قطة لطيفة" width="300">
    <figcaption>صورة اليوم</figcaption>
</figure>
تمرين 5 القوائم المتداخلة (Nested Lists)

أنشئ هيكل قوائم متداخل:

  1. قائمة مرتبة (Ordered List) للعناصر الرئيسية: "فواكه"، "خضروات".
  2. داخل عنصر "فواكه"، أنشئ قائمة غير مرتبة (Unordered List) تحتوي على: "تفاح"، "موز".
  3. تأكد من إغلاق جميع الوسوم بشكل صحيح.
الحل
<ol>
    <li>فواكه
        <ul>
            <li>تفاح</li>
            <li>موز</li>
        </ul>
    </li>
    <li>خضروات</li>
</ol>
تمرين 6 الجداول المنسقة (Structured Tables)

صمم جدولاً يحتوي على:

  1. قسم رأس الجدول (thead) يحتوي على صف العناوين: "المنتج"، "السعر".
  2. قسم جسم الجدول (tbody) يحتوي على صفين من البيانات.
  3. قسم تذييل الجدول (tfoot) يحتوي على صف للإجمالي.
  4. أضف حدوداً للجدول (border="1").
الحل
<table border="1">
    <thead>
        <tr>
            <th>المنتج</th>
            <th>السعر</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>قلم</td>
            <td>5$</td>
        </tr>
        <tr>
            <td>دفتر</td>
            <td>10$</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>الإجمالي</td>
            <td>15$</td>
        </tr>
    </tfoot>
</table>
تمرين 7 النماذج المتكاملة (Forms)

أنشئ نموذج تسجيل يحتوي على:

  1. حقل لاسم المستخدم (text) مع تسمية (Label).
  2. حقل لكلمة المرور (password) مطلوب (required).
  3. حقل للبريد الإلكتروني (email) مع نص توضيحي (placeholder).
  4. زر إرسال (submit) وزر إعادة تعيين (reset).
الحل
<form action="/register" method="POST">
    <label for="user">اسم المستخدم:</label>
    <input type="text" id="user" name="username">
    <br>
    
    <label for="pass">كلمة المرور:</label>
    <input type="password" id="pass" name="password" required>
    <br>
    
    <label for="mail">البريد:</label>
    <input type="email" id="mail" name="email" placeholder="example@mail.com">
    <br>
    
    <button type="submit">تسجيل</button>
    <button type="reset">مسح</button>
</form>
تمرين 8 التخطيط الدلالي (Semantic Layout)

استخدم عناصر HTML5 الدلالية لبناء هيكل صفحة:

  1. شريط علوي (header) يحتوي على عنوان.
  2. شريط تنقل (nav) يحتوي على رابطين.
  3. قسم رئيسي (main) يحتوي على مقال (article).
  4. تذييل (footer) يحتوي على حقوق النشر.
الحل
<header>
    <h1>مدونتي</h1>
</header>

<nav>
    <a href="#">الرئيسية</a> | <a href="#">من نحن</a>
</nav>

<main>
    <article>
        <h2>عنوان المقال</h2>
        <p>نص المقال...</p>
    </article>
</main>

<footer>
    <p>&copy; 2024 جميع الحقوق محفوظة</p>
</footer>
تمرين 9 الوسائط المتعددة (Multimedia)

أضف ملفات وسائط مع خيارات التحكم:

  1. ملف صوتي "song.mp3" يعمل تلقائياً (autoplay) ومكتوم الصوت (muted).
  2. ملف فيديو "movie.mp4" يظهر أزرار التحكم (controls) وصورة معاينة (poster="poster.jpg").
الحل
<!-- صوت -->
<audio src="song.mp3" autoplay muted></audio>

<!-- فيديو -->
<video src="movie.mp4" controls poster="poster.jpg"></video>
تمرين 10 الرموز والتعليقات (Entities & Comments)

قم بتنفيذ ما يلي:

  1. اكتب تعليقاً (Comment) يشرح الكود التالي.
  2. اعرض الرموز الخاصة: علامة اليورو (€)، علامة حقوق النسخ (©)، ومسافة غير منكسرة.
  3. استخدم وسم `code` لعرض كود برمجي بسيط.
الحل
<!-- هذا تعليق لا يظهر في المتصفح -->

<p>السعر: 50&euro; | الحقوق: &copy; | مسافة:&nbsp;هنا</p>

<p>الكود: <code>print("Hello")</code></p>
تمرين 11 إمكانية الوصول ARIA (Accessibility) متوسط

أنشئ قائمة تنقل يمكن الوصول إليها باستخدام ARIA:

  1. أنشئ قائمة تنقل (nav) مع تسمية ARIA مناسبة (aria-label).
  2. أضف زر قائمة منسدلة مع حالة موسعة/مطوية (aria-expanded).
  3. أضف نصاً مخفياً بصرياً للقارئات الشاشة (sr-only).
  4. استخدم role="navigation" و role="button" بشكل صحيح.
الحل
<nav aria-label="القائمة الرئيسية" role="navigation">
    <span class="sr-only">القائمة الرئيسية</span>
    
    <button role="button" aria-expanded="false" aria-controls="menu-list">
        <span aria-hidden="true">☰</span>
        القائمة
    </button>
    
    <ul id="menu-list">
        <li><a href="#home">الرئيسية</a></li>
        <li><a href="#about">من نحن</a></li>
    </ul>
</nav>
تمرين 12 HTML5 APIs - التخزين المحلي (LocalStorage) متوسط

أنشئ نموذج يحفظ البيانات في المتصفح:

  1. أنشئ نموذج بحقل نصي لاسم المستخدم (id="username").
  2. أضف زر "حفظ" يخزن القيمة في localStorage.
  3. أضف زر "استرجاع" يعرض القيمة المحفوظة.
  4. أضف زر "مسح" يحذف البيانات من localStorage.
الحل
<div>
    <input type="text" id="username" placeholder="أدخل اسمك">
    <button onclick="localStorage.setItem('name', document.getElementById('username').value)">حفظ</button>
    <button onclick="alert(localStorage.getItem('name'))">استرجاع</button>
    <button onclick="localStorage.removeItem('name')">مسح</button>
</div>
تمرين 13 السمات المخصصة (Data Attributes) متوسط

استخدم data attributes لإنشاء بطاقات منتجات:

  1. أنشئ div مع السمات: data-product-id، data-product-name، data-price.
  2. أضف زر "عرض التفاصيل" لكل بطاقة.
  3. استخدم JavaScript لقراءة البيانات وعرضها عند النقر.
الحل
<div class="product" data-product-id="101" data-product-name="لابتوب" data-price="3500">
    <h4>لابتوب Dell</h4>
    <button onclick="showDetails(this.parentElement)">عرض التفاصيل</button>
</div>

<script>
function showDetails(el) {
    alert('المنتج: ' + el.dataset.productName + ' - السعر: ' + el.dataset.price);
}
</script>
تمرين 14 الصور المتجاوبة (Responsive Images) متوسط

استخدم عنصر picture للصور المتجاوبة:

  1. أنشئ عنصر picture مع source مختلفة حسب حجم الشاشة.
  2. استخدم media query لعرض صورة مختلفة للشاشات الصغيرة (max-width: 600px).
  3. أضف صورة افتراضية باستخدام img كـ fallback.
الحل
<picture>
    <source media="(max-width: 600px)" srcset="small.jpg">
    <source media="(max-width: 1200px)" srcset="medium.jpg">
    <img src="large.jpg" alt="صورة متجاوبة">
</picture>
تمرين 15 المحتوى القابل للطي (Details/Summary) متوسط

أنشئ قسم أسئلة شائعة (FAQ):

  1. استخدم عنصر details مع summary لإنشاء 3 أسئلة قابلة للطي.
  2. اجعل السؤال الأول مفتوحاً افتراضياً (open).
  3. أضف محتوى متنوع داخل كل سؤال (نص، قائمة، رابط).
الحل
<details open>
    <summary>ما هي ساعات العمل؟</summary>
    <p>نعمل من 9 صباحاً حتى 5 مساءً.</p>
</details>

<details>
    <summary>كيف أتواصل معكم؟</summary>
    <ul>
        <li>البريد: info@site.com</li>
        <li>الهاتف: 123456</li>
    </ul>
</details>

<details>
    <summary>أين موقعكم؟</summary>
    <p>زر <a href="#map">الخريطة</a> لمعرفة موقعنا.</p>
</details>
تمرين 16 نافذة الحوار (Dialog Element) متقدم

أنشئ نافذة حوار (Modal):

  1. استخدم عنصر dialog لإنشاء نافذة حوار.
  2. أضف زر لفتح النافذة باستخدام showModal().
  3. أضف زر داخل النافذة لإغلاقها باستخدام close().
  4. أضف نموذج داخل النافذة مع method="dialog".
الحل
<button onclick="document.getElementById('myDialog').showModal()">فتح النافذة</button>

<dialog id="myDialog">
    <h2>نافذة الحوار</h2>
    <p>هذه نافذة حوار HTML5</p>
    <form method="dialog">
        <button>إغلاق</button>
    </form>
</dialog>
تمرين 17 القوالب (Template Element) متقدم

استخدم عنصر template لإنشاء محتوى ديناميكي:

  1. أنشئ template يحتوي على بطاقة منتج.
  2. استخدم JavaScript لاستنساخ القالب وتعديل محتواه.
  3. أضف البطاقة المستنسخة إلى الصفحة.
الحل
<template id="productTemplate">
    <div class="product-card">
        <h3 class="product-name"></h3>
        <p class="product-price"></p>
    </div>
</template>

<div id="products"></div>

<script>
const template = document.getElementById('productTemplate');
const clone = template.content.cloneNode(true);
clone.querySelector('.product-name').textContent = 'هاتف ذكي';
clone.querySelector('.product-price').textContent = '500$';
document.getElementById('products').appendChild(clone);
</script>
تمرين 18 المؤشرات (Meter & Progress) متقدم

استخدم عناصر القياس والتقدم:

  1. أنشئ meter لعرض مستوى البطارية (value="0.7" low="0.3" high="0.8").
  2. أنشئ progress لعرض تقدم التحميل (value="70" max="100").
  3. أضف تسميات واضحة لكل عنصر.
الحل
<!-- مقياس البطارية -->
<label for="battery">مستوى البطارية:</label>
<meter id="battery" value="0.7" min="0" max="1" low="0.3" high="0.8" optimum="0.9">70%</meter>

<!-- شريط التقدم -->
<label for="download">تقدم التحميل:</label>
<progress id="download" value="70" max="100">70%</progress>
تمرين 19 قوائم الاقتراحات (Datalist) متقدم

أنشئ حقل إدخال مع اقتراحات:

  1. أنشئ input مرتبط بـ datalist للمتصفحات.
  2. أضف 5 خيارات: Chrome, Firefox, Safari, Edge, Opera.
  3. اجعل الحقل يقبل أي قيمة أخرى أيضاً.
الحل
<label for="browser">اختر متصفحك:</label>
<input list="browsers" id="browser" name="browser">

<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Opera">
</datalist>
تمرين 20 مشروع متكامل: صفحة هبوط (Landing Page) متقدم

أنشئ صفحة هبوط متكاملة تحتوي على:

  1. هيكل دلالي كامل (header, nav, main, footer).
  2. قسم بطل (Hero) مع عنوان ووصف وزر CTA.
  3. قسم مميزات (Features) باستخدام section وarticle.
  4. نموذج اتصال مع التحقق من الحقول.
  5. تذييل مع روابط اجتماعية وحقوق النشر.
الحل
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحة الهبوط</title>
</head>
<body>
    <header>
        <nav aria-label="التنقل الرئيسي">
            <a href="#hero">الرئيسية</a>
            <a href="#features">المميزات</a>
            <a href="#contact">اتصل بنا</a>
        </nav>
    </header>

    <main>
        <section id="hero">
            <h1>مرحباً بك في موقعنا</h1>
            <p>نقدم لك أفضل الخدمات</p>
            <a href="#contact">ابدأ الآن</a>
        </section>

        <section id="features">
            <h2>مميزاتنا</h2>
            <article>
                <h3>سرعة عالية</h3>
                <p>خدماتنا سريعة وموثوقة</p>
            </article>
            <article>
                <h3>دعم 24/7</h3>
                <p>فريقنا متاح دائماً</p>
            </article>
        </section>

        <section id="contact">
            <h2>تواصل معنا</h2>
            <form action="/submit" method="POST">
                <label for="name">الاسم:</label>
                <input type="text" id="name" required>
                
                <label for="email">البريد:</label>
                <input type="email" id="email" required>
                
                <label for="msg">الرسالة:</label>
                <textarea id="msg" required></textarea>
                
                <button type="submit">إرسال</button>
            </form>
        </section>
    </main>

    <footer>
        <nav aria-label="روابط اجتماعية">
            <a href="#">فيسبوك</a>
            <a href="#">تويتر</a>
        </nav>
        <p>&copy; 2024 جميع الحقوق محفوظة</p>
    </footer>
</body>
</html>
السابق التالي
المحرر الذكي

اكتب الكود وشاهد النتيجة فوراً

جرب الآن مجاناً
قناة ديف عربي

تابع أحدث الدروس والتحديثات مباشرة على واتساب

انضم الآن