مقدمة

مرحبًا بكم مجددًا! بعد أن تعلمت أساسيات HTML وبعض الوسوم المتقدمة، حان الوقت لتطبيق ما تعلمته من خلال مجموعة من التمارين العملية. هذه التمارين صُممت لتكون صعبة قليلاً لتحدي مهاراتك وتعزيز فهمك للـ HTML. تذكر دائمًا، جرب حل التمارين بنفسك قبل رؤية الإجابات!

تمرين 1: إنشاء صفحة تعريفية معقدة

المطلوب
  1. أنشئ صفحة HTML تحتوي على:
  • عنوان رئيسي يحمل اسمك.
  • فقرة تحتوي على نبذة عنك.
  • قائمة مرتبة تضم مهاراتك.
  • قائمة غير مرتبة تضم هواياتك.
  • صورة شخصية.
  • رابط لملف سيرتك الذاتية (PDF).
الحل

جرب حل التمرين بنفسك أولاً!
إظهار الحل

<!DOCTYPE html>
<html>
<head>
    <title>صفحتي الشخصية</title>
</head>
<body>
    <h1>أحمد</h1>
    <p>مرحبًا، أنا أحمد وأعمل كمطور ويب. لدي خبرة في عدة تقنيات وأحب تعلم أشياء جديدة.</p>

    <h2>مهاراتي</h2>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Python</li>
    </ol>

    <h2>هواياتي</h2>
    <ul>
        <li>القراءة</li>
        <li>السباحة</li>
        <li>التصوير</li>
    </ul>

    <img src="profile.jpg" alt="صورة أحمد">
    <br>
    <a href="resume.pdf" download>تحميل السيرة الذاتية</a>
</body>
</html>

تمرين 2: إنشاء جدول بيانات معقد

المطلوب
  1. أنشئ صفحة HTML تحتوي على جدول يعرض البيانات التالية:
  • العناوين: الاسم، العمر، الوظيفة.
  • البيانات:
    • أحمد، 25، مطور ويب.
    • سارة، 30، مصممة جرافيك.
    • علي، 28، محلل بيانات.
  • استخدم وسم <th> لعناوين الأعمدة.
  • ضع الحدود حول الجدول.
الحل

جرب حل التمرين بنفسك أولاً!
إظهار الحل

<!DOCTYPE html>
<html>
<head>
    <title>جدول البيانات</title>
</head>
<body>
    <h1>بيانات الموظفين</h1>
    <table border="1">
        <tr>
            <th>الاسم</th>
            <th>العمر</th>
            <th>الوظيفة</th>
        </tr>
        <tr>
            <td>أحمد</td>
            <td>25</td>
            <td>مطور ويب</td>
        </tr>
        <tr>
            <td>سارة</td>
            <td>30</td>
            <td>مصممة جرافيك</td>
        </tr>
        <tr>
            <td>علي</td>
            <td>28</td>
            <td>محلل بيانات</td>
        </tr>
    </table>
</body>
</html>

تمرين 3: إنشاء نموذج تفاعلي

المطلوب
  1. أنشئ صفحة HTML تحتوي على نموذج لجمع بيانات الاتصال يتضمن:
  • حقل لإدخال الاسم.
  • حقل لإدخال البريد الإلكتروني.
  • حقل نصي لإدخال رسالة.
  • زر لإرسال النموذج.
الحل

جرب حل التمرين بنفسك أولاً!
إظهار الحل

<!DOCTYPE html>
<html>
<head>
    <title>نموذج الاتصال</title>
</head>
<body>
    <h1>نموذج الاتصال</h1>
    <form action="/submit" method="post">
        <label for="name">الاسم:</label>
        <input type="text" id="name" name="name">
        <br>
        <label for="email">البريد الإلكتروني:</label>
        <input type="email" id="email" name="email">
        <br>
        <label for="message">رسالة:</label>
        <textarea id="message" name="message"></textarea>
        <br>
        <input type="submit" value="إرسال">
    </form>
</body>
</html>

تمرين 4: تضمين وسائط متعددة

المطلوب
  1. أنشئ صفحة HTML تحتوي على:
  • عنوان رئيسي.
  • فقرة تصف محتوى الصفحة.
  • صورة تعبر عن المحتوى.
  • فيديو تعليمي.
  • مقطع صوتي.
الحل

جرب حل التمرين بنفسك أولاً!
إظهار الحل

<!DOCTYPE html>
<html>
<head>
    <title>وسائط متعددة</title>
</head>
<body>
    <h1>مرحبًا بكم في صفحتي المتعددة الوسائط</h1>
    <p>هذه الصفحة تحتوي على وسائط متعددة مثل الصور والفيديوهات والمقاطع الصوتية.</p>

    <img src="image.jpg" alt="صورة تمثل المحتوى">
    <br>
    <video width="320" height="240" controls>
        <source src="tutorial.mp4" type="video/mp4">
        متصفحك لا يدعم تشغيل الفيديو.
    </video>
    <br>
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        متصفحك لا يدعم تشغيل الصوت.
    </audio>
</body>
</html>

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

المطلوب
  1. أنشئ صفحة HTML متكاملة تحتوي على:
  • عنوان رئيسي يحمل اسم الموقع.
  • فقرة تعريفية بالموقع.
  • قائمة غير مرتبة تحتوي على روابط لأقسام الموقع.
  • جدول يعرض بيانات خدمات الموقع.
  • نموذج لجمع بيانات المستخدمين.
  • صورة تعبر عن هدف الموقع.
  • فيديو ترويجي للموقع.
  • مقطع صوتي يقدم رسالة ترحيبية.
الحل

جرب حل التمرين بنفسك أولاً!
إظهار الحل

<!DOCTYPE html>
<html>
<head>
    <title>موقعي المتكامل</title>
</head>
<body>
    <h1>مرحبًا بكم في موقعي</h1>
    <p>هذا الموقع يقدم مجموعة متنوعة من الخدمات التي تلبي احتياجاتكم.</p>

    <h2>أقسام الموقع</h2>
    <ul>
        <li><a href="#services">الخدمات</a></li>
        <li><a href="#contact">اتصل بنا</a></li>
        <li><a href="#about">عن الموقع</a></li>
    </ul>

    <h2 id="services">الخدمات</h2>
    <table border="1">
        <tr>
            <th>الخدمة</th>
            <th>الوصف</th>
        </tr>
        <tr>
            <td>تصميم مواقع</td>
            <td>نحن نقدم خدمة تصميم مواقع احترافية.</td>
        </tr>
        <tr>
            <td>تطوير تطبيقات</td>
            <td>نحن نطور تطبيقات مخصصة تلبي احتياجاتك.</td>
        </tr>
    </table>

    <h2 id="contact">اتصل بنا</h2>
    <form action="/submit" method="post">
        <label for="name">الاسم:</label>
        <input type="text" id="name" name="name">
        <br>
        <label for="email">البريد الإلكتروني:</label>
        <input type="email" id="email" name="email">
        <br>
        <label for="message">رسالة:</label>
        <textarea id="message" name="message"></textarea>
        <br>
        <input type="submit" value="إرسال">
    </form>

    <h2 id="about">عن الموقع</h2>
    <img src="about.jpg" alt="صورة تمثل هدف الموقع">
    <br>
    <video width="320" height="240" controls>
        <source src="promo.mp4" type="video/mp4">
        متصفحك لا يدعم تشغيل الفيديو.
    </video>
    <br>
    <audio controls>
        <source src="welcome.mp3" type="audio/mpeg">
        متصفحك لا يدعم تشغيل الصوت.
    </audio>
</body>
</html>

خاتمة

تهانينا! لقد أكملت مجموعة من التمارين الصعبة التي تساعدك على تثبيت ما تعلمته في HTML. تذكر دائمًا أن الممارسة هي المفتاح لتطوير مهاراتك. استمر في تجربة كتابة الأكواد وتطبيق ما تعلمته في مشاريعك الخاصة.

كُتب بواسطة

Akhmad Abdulrahman

مدون ومصمم مواقع الانترنت لتقديم افضل الخدمات مجانا ولإثراء المحتوى العربي