תגיות

חלק מהיחידה פיתוח Frontend מעשי במסלול ה-HTML של Coddy. שיעור 22 מתוך 35.

תגים הם מחוונים קטנים המשמשים להצגת ספירות או סטטוס לצד רכיב אחר. לדוגמה: עיגול אדום עם מספר המציג הודעות שלא נקראו. לעיתים קרובות הם מוצמדים לכפתורים, סמלים או תמונות פרופיל.

למה הם חשובים:

הם הופכים מידע חשוב (כמו התראות) לגלוי במהירות.
נעשה בהם שימוש נפוץ באפליקציות, ברשתות חברתיות ובאתרי מסחר אלקטרוני.

בואו ניצור תג פשוט:

ראשית, צרו רכיב HTML בסיסי שיכיל את התג שלכם:

<button class="btn">
  Messages <span class="badge">5</span>
</button>

לאחר מכן, הוסף קצת CSS בסיסי כדי לעצב את התג:

.btn {
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
}

.badge {
  position: absolute;
  top: -5px;
  right: -10px;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 4px 8px;
  font-size: 12px;
}

כך, התג יושב בפינת הכפתור ומציג את מספר ההודעות.

אתגר

קל

ניתן לך HTML עם כמה כפתורים. המשימה שלך היא ליצור תגי סימון שיופיעו בפינה הימנית העליונה של כל כפתור באמצעות CSS בלבד. המשימה שלך:

הגדר את מיקום תג הסימון: השתמש ב-position: absolute כדי שתוכל למקם אותו ביחס לכפתור.
מקם אותו בפינה הימנית העליונה: השתמש בערכים שליליים עבור top ו-right.
הגדר את הצבעים והטקסט: השתמש ברקע אדום ובטקסט לבן.
כוונן את הגופן ואת המרווח הפנימי: הגדר font-size: 12px; font-weight: bold; padding: 4px 7px;.
הפוך אותו לעגול והוסף עומק: השתמש ב-border-radius ובהצללת תיבה עדינה (box-shadow: 0 2px 4px rgba(0,0,0,0.2)).

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
  <title>Badges</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 40px;
      background-color: #f5f5f5;
      display: flex;
      gap: 20px;
    }

    .button {
      position: relative; /* needed for badge positioning */
      padding: 12px 25px;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      background-color: #4cafef;
      color: white;
      cursor: pointer;
    }

    .button:hover {
      background-color: #3a92d8;
    }

    .badge {
      
    }
  </style>
</head>
<body>

  <button class="button">
    Messages
    <span class="badge">5</span>
  </button>

  <button class="button">
    Notifications
    <span class="badge">!</span>
  </button>

  <button class="button">
    Cart
    <span class="badge">3</span>
  </button>

</body>
</html>