امتحان HTML 3: مفاهيم متقدمة وأفضل الممارسات (20 تمرين)

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

امتحان HTML 3: المستوى المتقدم

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

تمرين 1 إمكانية الوصول (ARIA Roles)

أضف سمات ARIA المناسبة:

لديك div مصمم كزر إغلاق "X".
أضف role="button" و aria-label="إغلاق".
اجعله قابلاً للتركيز (tabindex="0").

الحل

<div role="button" aria-label="إغلاق" tabindex="0">X</div>

تمرين 2 سمات البيانات المخصصة (Data Attributes)

استخدم data attributes:

أنشئ li لمنتج مع data-id="12345".
أضف data-price="99.99".
أضف data-category="electronics".

الحل

<li data-id="12345" data-price="99.99" data-category="electronics">
    هاتف ذكي
</li>

تمرين 3 المسارات النسبية (Relative Paths)

اكتب المسارات الصحيحة:

أنت في مجلد pages، اعرض صورة logo.png من نفس المجلد.
اعرض bg.jpg من مجلد images في المستوى الأعلى.

الحل

<img src="logo.png" alt="شعار">
<img src="../images/bg.jpg" alt="خلفية">

تمرين 4 أيقونة الموقع (Favicon)

أضف favicon للموقع:

اكتب الكود في head لإضافة favicon.ico.
استخدم rel="icon" و type="image/x-icon".

الحل

<link rel="icon" type="image/x-icon" href="/favicon.ico">

تمرين 5 ربط ملفات CSS و JavaScript

اربط الملفات الخارجية:

اربط style.css من مجلد css.
اربط script.js من مجلد js مع defer.

الحل

<link rel="stylesheet" href="css/style.css">
<script src="js/script.js" defer></script>

تمرين 6 السمات العامة (Global Attributes)

استخدم السمات العامة:

اجعل فقرة قابلة للتعديل (contenteditable).
أضف tooltip لزر باستخدام title.

الحل

<p contenteditable="true">يمكنك تعديل هذا النص!</p>
<button title="اضغط هنا للمزيد">معلومات</button>

تمرين 7 تحسين محركات البحث (Open Graph)

أضف وسوم Open Graph:

og:title للعنوان.
og:image لصورة المعاينة.
og:description للوصف.

الحل

<meta property="og:title" content="عنوان صفحتي">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="وصف الصفحة">

تمرين 8 الرموز التعبيرية (Emojis)

اعرض الرموز التعبيرية:

تأكد من استخدام UTF-8 في head.
اعرض وجه مبتسم باستخدام كود HTML.

الحل

<meta charset="UTF-8">
<p>مرحباً &#128512;</p>

تمرين 9 تجميع الخيارات (Optgroup)

نظم القائمة المنسدلة:

أنشئ select للسيارات.
جمّع تحت "سيارات ألمانية" و "سيارات يابانية".

الحل

<select name="cars">
    <optgroup label="سيارات ألمانية">
        <option value="bmw">BMW</option>
        <option value="audi">Audi</option>
    </optgroup>
    <optgroup label="سيارات يابانية">
        <option value="toyota">Toyota</option>
    </optgroup>
</select>

تمرين 10 قاعدة الصفحة (Base Tag)

استخدم base tag:

اجعل جميع الروابط تفتح في نافذة جديدة افتراضياً.

الحل

<head>
    <base target="_blank">
</head>

تمرين 11 ARIA Live Regions متوسط

أنشئ منطقة تحديثات مباشرة:

استخدم aria-live="polite" لإشعارات غير عاجلة.
أضف role="status" للمنطقة.

الحل

<div role="status" aria-live="polite" aria-atomic="true">
    تم حفظ التغييرات بنجاح
</div>

تمرين 12 Microdata (Schema.org) متوسط

أضف microdata لشخص:

استخدم itemscope و itemtype="http://schema.org/Person".
أضف itemprop للاسم والوظيفة.

الحل

<div itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">أحمد محمد</span>
    <span itemprop="jobTitle">مطور ويب</span>
</div>

تمرين 13 Preload و Prefetch متوسط

حسّن أداء التحميل:

استخدم preload لخط مهم.
استخدم prefetch لصفحة قد يزورها المستخدم.

الحل

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="/next-page.html">

تمرين 14 DNS Prefetch متوسط

حسّن سرعة الاتصال بالنطاقات الخارجية:

استخدم dns-prefetch لـ Google Fonts.
أضف preconnect لـ CDN.

الحل

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

تمرين 15 Manifest للتطبيقات (PWA) متوسط

اربط ملف manifest:

أضف link لملف manifest.json.
أضف theme-color للمتصفح.

الحل

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#4285f4">

تمرين 16 Structured Data (JSON-LD) متقدم

أضف بيانات منظمة لمقال:

استخدم JSON-LD في script type="application/ld+json".
حدد @type كـ Article.
أضف headline, author, datePublished.

الحل

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "تعلم HTML",
  "author": {
    "@type": "Person",
    "name": "أحمد محمد"
  },
  "datePublished": "2024-01-01"
}
</script>

تمرين 17 Accessibility Tree متقدم

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

استخدم nav مع aria-label.
أضف role="menubar" للقائمة.
استخدم aria-current="page" للصفحة الحالية.

الحل

<nav aria-label="التنقل الرئيسي">
    <ul role="menubar">
        <li role="none">
            <a href="/" role="menuitem" aria-current="page">الرئيسية</a>
        </li>
        <li role="none">
            <a href="/about" role="menuitem">من نحن</a>
        </li>
    </ul>
</nav>

تمرين 18 Resource Hints المتقدمة متقدم

استخدم جميع أنواع resource hints:

dns-prefetch لنطاق خارجي.
preconnect لـ API.
prefetch لصفحة تالية.
preload لملف CSS حرج.

الحل

<link rel="dns-prefetch" href="//cdn.example.com">
<link rel="preconnect" href="https://api.example.com">
<link rel="prefetch" href="/next-page.html">
<link rel="preload" href="critical.css" as="style">

تمرين 19 Security Headers متقدم

أضف meta tags للأمان:

Content Security Policy.
X-Content-Type-Options.
Referrer Policy.

الحل

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta name="referrer" content="no-referrer-when-downgrade">

تمرين 20 مشروع: صفحة SEO مثالية متقدم

أنشئ head كامل لصفحة محسّنة للSEO:

جميع meta tags الأساسية.
Open Graph و Twitter Cards.
JSON-LD structured data.
Resource hints.
Security headers.

الحل

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عنوان الصفحة - الموقع</title>
    <meta name="description" content="وصف شامل للصفحة">
    <link rel="canonical" href="https://example.com/page">
    
    <!-- Open Graph -->
    <meta property="og:title" content="عنوان الصفحة">
    <meta property="og:description" content="وصف الصفحة">
    <meta property="og:image" content="https://example.com/image.jpg">
    <meta property="og:url" content="https://example.com/page">
    
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    
    <!-- Resource Hints -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="//cdn.example.com">
    
    <!-- Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      "name": "عنوان الصفحة"
    }
    </script>
</head>

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

DevArabi

دورة تعلم HTML

امتحان HTML 3: مفاهيم متقدمة وأفضل الممارسات (20 تمرين)

امتحان HTML 3: المستوى المتقدم

DevArabi

دورة تعلم HTML

امتحان HTML 3: مفاهيم متقدمة وأفضل الممارسات (20 تمرين)

امتحان HTML 3: المستوى المتقدم

المحرر الذكي

قناة ديف عربي

تابعنا