نموذج "اتش.تي.إم.إل" The HTML boilerplate.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <title>قائمة مهام منسقة</title>
 </head>
 <body>
 <!-- هنا تضع اكواد التطبيق -->
 </body>
</html>
                

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

1. يجب أن يكون لديك قائمة غير مرتبة (unordered list) تحمل الفئة todo-list.

2. داخل القائمة غير المرتبة (unordered list)، يجب أن يكون لديك أربعة عناصر قائمة (four list items).

3. داخل كل عنصر من عناصر القائمة، يجب أن يكون هناك:

   • عنصر إدخال input من النوع checkbox ومُعيَّن له مُعرِّف id بقيمة فريدة (unique value).

   • عنصر label تكون فيه السمة for مضبوطة على قيمة السمة id الخاصة بعنصر input المقابل.

   • قائمة غير مرتبة (unordered list) تحمل الفئة sub-item.

   • عنصر قائمة (list item) يحتوي على عنصر رابط (anchor element). يجب أن يحمل الرابط الفئة sub-item-link ، وقيمة href صالحة، وقيمة target تجعل الرابط يُفتح في علامة تبويب جديدة.

4. يجب ألا تحتوي عناصر a الخاصة بك على أي زخارف نصية (text decorations).

5. يجب عليك تحديد لون نص (text color) الروابط غير المُزارة (unvisited links) بلون من اختيارك.

6. عند زيارة روابطك (links)، يجب أن يتغير لونها إلى لون آخر من اختيارك.

7. عند تمرير المؤشر فوق الروابط (links are hovered)، يجب أن يتغير لونها إلى لون آخر من اختيارك.

8. عندما يكون التركيز على الروابط (links are focused)، يجب أن يظهر إطار ملون (colored outline) حول الرابط.

9. عند النقر على روابطك (links are clicked)، يجب أن يتغير لونها إلى لون آخر من اختيارك.

ملاحظة: تأكد من ربط ملف الأنماط (stylesheet) في ملف HTML وتطبيق قواعد CSS.

حل التطبيق :

<!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>
  <link rel="stylesheet" href="styles.css">
 </head>
 
 <body>
  <h1>قائمة مهامي</h1>
  <ul class="todo-list">
   <li>
    <input type="checkbox" id="input1">
    <label for="input1">الموقع الرسمي للمنظمة</label>
    <ul class="sub-item">
     <li>
      <a class="sub-item-link" href="https://openarabtech.github.io/" target="_blank">التقنية العربية المفتوحة</a>
     </li>
    </ul>
   </li>
   <li>
    <input type="checkbox" id="input2">
    <label for="input2">المشروع الأول</label>
    <ul class="sub-item">
     <li>
      <a class="sub-item-link" href="https://openarabtech.github.io/ComputersVerse" target="_blank">عالم الحواسيب</a>
     </li>
    </ul>
   </li>
   <li>
    <input type="checkbox" id="input3">
    <label for="input3">المشروع الثاني</label>
    <ul class="sub-item">
     <li>
      <a class="sub-item-link" href="https://openarabtech.github.io/HTMLVerse" target="_blank">عالم اتش.تي.إم.إل</a>
     </li>
    </ul>
   </li>
   <li>
    <input type="checkbox" id="input4">
    <label for="input4">المشروع الثالث</label>
    <ul class="sub-item">
     <li>
      <a class="sub-item-link" href="https://openarabtech.github.io/CSSVerse" target="_blank">عالم سي.اس.اس</a>
     </li>
    </ul>
   </li>
  </ul>
 </body>

</html>
                

h1 {
 text-align: center;
}

.todo-list {
 list-style-type: none;
}

.sub-item {
 list-style-type: square;
}

ul li {
 margin-bottom: 20px;
}

a {
 text-decoration: none;
}

a:link {
 color: green;
}

a:visited {
 color: darkgray;
}

a:hover {
 color: red;
}

a:focus {
 outline: 2px solid blue;
}

a:active {
 color: purple;
}
            

معاينة التطبيق :