X

أساسيات اتش.تي.إم.إل

١٠. إنشاء صفحة وكالة سفر

مختبر

الهدف: استيفاء قصص المستخدم أدناه والحصول على جميع الاختبارات اللازمة لإكمال المختبر.

قصص المستخدم :

١. يجب أن يكون لديك إعلان DOCTYPE.

٢. يجب أن يكون لديك عنصر html مع تعيين lang إلى ar و dir إلى rtl.

٣. يجب أن يكون لديك عنصر "هاد" head يحتوي على عنصر "ميتا" meta "ڢويد" void مع مجموعة أحرف charset مضبوطة على utf-8 وعنوان title يحتوي على نص "صفحة وكالة سفر".

٤. يجب أن يكون لديك علامة تعريفية meta في عنصر الرأس head الخاص بك تحتوي على وصف قصير short description لموقع الويب الخاص بك لتحسين محركات البحث SEO.

٥. يجب أن يكون لديك عنصر h1 لتقديم وجهات سفرك.

٦. يجب أن يكون لديك فقرة p أسفل عنصر h1 تقدم لك فرص السفر.

٧. يجب أن يكون لديك عنصر h2 مع النص "الحزم".

٨. يجب أن يكون لديك عنصر p يقدم مقدمة موجزة للحزم المختلفة.

٩. يجب أن يكون لديك عنصر قائمة ul غير مرتب يحتوي على عنصرين li. يجب أن يحتوي العنصران على النص "رحلات جماعية" و"رحلات خاصة"، على التوالي. يجب أن يكون نص كل عنصر قائمة محاطًا بعنصر ربط a.

١٠. يجب أن يكون لديك عنصر h2 مع النص أفضل المسارات.

١١. يجب أن يكون لديك ثلاثة عناصر شكلية figure على الأقل، يحتوي كل منها على عنصر مرساة a وعنصر تسمية توضيحية figcaption.

١٢. يجب أن تحتوي عناصر المرساة الثلاثة a على عنصر img مع سمة "الت" alt مناسبة وسمة "اس.ار.سي" src مضبوطة على صورة صالحة كمحتوى لها. يمكنك استخدام:
https://openarabtech.github.io/HTMLverse/basic/assets/colosseo.jpg
https://arabiverse.github.io/HTMLverse/basic/assets/alps.jpg
https://arabiverse.github.io/HTMLverse/basic/assets/sea.jpg

إذا أردت.

١٣. يجب أن تحتوي جميع عناصر المرساة a الخمسة لديك على سمة href بقيمة https://arabiverse.github.io/HTMLverse وسمة target بقيمة blank_.

الحل :

code 


<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>

  <meta charset="UTF-8" />
  <title>صفحة وكالة سفر</title>
  <meta name="description" content="سافر بأمان وحرية"/>

</head>

<body>

  <h1>وجهات سفر</h1>
  <p>فرص السفر</p>

  <h2>الحزم</h2>
  <p>مقدمة موجزة للحزم المختلفة</p>

  <ul>

    <li><a href="https://openarabtech.github.io/HTMLverse" target="_blank">رحلات جماعية</a></li>
    <li><a href="https://openarabtech.github.io/HTMLverse" target="_blank">رحلات خاصة</a></li>
  
  </ul>

  <h2>أفضل المسارات</h2>

  <figure>

    <a href="https://openarabtech.github.io/HTMLverse" target="_blank">
      <img src="https://openarabtech.github.io/HTMLverse/basic/assets/colosseo.jpg" alt="الحضارات">
    </a>
    <figcaption>الحضارات</figcaption>

  </figure>

  <figure>

    <a href="https://openarabtech.github.io/HTMLverse" target="_blank">
      <img src="https://openarabtech.github.io/HTMLverse/basic/assets/alps.jpg" alt="الجبال">
    </a>
    <figcaption>الجبال</figcaption>

  </figure>

  <figure>

    <a href="https://openarabtech.github.io/HTMLverse" target="_blank">
      <img src="https://openarabtech.github.io/HTMLverse/basic/assets/sea.jpg" alt="الجزر">
    </a>
    <figcaption>الجزر</figcaption>

  </figure>


</body>
</html>

معاينة :