שימוש בתגית <div> ו-<span> ב-HTML

נושא מספר 5 ב-קורס תכנות לילדים.

תיאור השיעור:

בשיעור זה נלמד על התגיות <div> ו-<span>, איך הן נבדלות זו מזו, ומתי כדאי להשתמש בכל אחת כדי לארגן את המבנה של דף האינטרנט. נדבר על החשיבות של ארגון נכון של התוכן בדף וכיצד תגיות אלו משמשות כאבני בניין בסיסיות.

מטרות השיעור:

• להבין את תפקידה של תגית <div> ואיך היא משמשת לארגון בלוקים של תוכן.
• ללמוד על תגית <span> והשימוש בה לארגון תוכן בתוך שורות.
• להבין מתי נכון להשתמש ב-<div> ומתי ב-<span>, ואיך כל אחת תורמת לעיצוב ומבנה הדף.

מהלך השיעור:

1. מבוא קצר לתגיות ארגון

בכל דף HTML יש לנו המון מידע – טקסטים, תמונות, כפתורים, סרטונים וכו'. כדי שהכול יהיה מסודר וקריא גם מבחינה עיצובית וגם מבחינה לוגית, אנחנו צריכים לדעת איך לארגן את כל התוכן הזה. בשביל זה יש לנו תגיות כמו <div> ו-<span>. הן עוזרות לנו לסדר את הדף בצורה ברורה ומובנת יותר, גם עבור הדפדפן וגם עבור המשתמשים.

2. מהי תגית <div>?

תגית <div> משמשת ליצירת בלוקים של תוכן בדף. תחשוב עליה כמו על קופסה גדולה שבה אתה יכול לשים הרבה דברים – פסקאות, תמונות, קישורים או אפילו תגיות <div> אחרות. כל מה שנמצא בתוך <div> מוצג כאילו הוא בקבוצה נפרדת משאר התוכן בדף.

איך זה נראה?

תגית <div> נראית ככה:

<div>
   <!-- תוכן הדף -->
</div>

כל מה שנשים בתוך התגית הזו יהיה חלק מאותו בלוק. בוא נסתכל על דוגמה:

<div>
   <h1>כותרת האתר</h1>
   <p>ברוכים הבאים לאתר שלי!</p>
</div>

במקרה הזה, הכותרת והפסקה שנמצאות בתוך תגית <div> יופיעו יחד בתוך אותו בלוק. הדפדפן יראה את זה כיחידה אחת.

מתי נשתמש ב-<div>?

התגית <div> היא מצוינת כשאנחנו רוצים לחלק את הדף לקטעים ברורים. לדוגמה:

• יצירת בלוקים של טקסט ותמונות.
• חלוקה לאזורים שונים בעמוד, כמו כותרת, תפריט תוכן, אזור עיקרי וכו'.
• עיצוב חלקים שונים של האתר בעזרת CSS.

3. מהי תגית <span>?

התגית <span> לעומת זאת, היא כמו כלי קטן יותר בתוך שורה אחת. אם <div> הוא כמו קופסה גדולה, אז <span> הוא כמו חתיכה קטנה שאפשר לשים באמצע שורה כדי להדגיש או לעצב חלקים מסוימים בטקסט.

איך זה נראה?

תגית <span> נראית ככה:

<span>טקסט בתוך השורה</span>

הנה דוגמה לשימוש ב-<span>:

<p>זהו <span>טקסט מודגש</span> בתוך הפסקה שלי.</p>

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

4. ההבדל בין <div> ו-<span>

ההבדל המרכזי הוא ש-<div> משמשת לסידור בלוקים שלמים של תוכן, ואילו <span> מיועדת לסידור חלקים קטנים בתוך שורה.

• <div>: יוצר הפרדה ברורה של בלוקים בדף. שימושי כשאנחנו רוצים לחלק את הדף לאזורים נפרדים.
• <span>: מתאים יותר לשימוש בתוך טקסט, כשאנחנו רוצים להחיל עיצוב רק על חלק מהשורה מבלי לשבור אותה לבלוק חדש.

5. דוגמאות לשימוש מתקדם ב-<div> ו-<span>

עכשיו, אחרי שהבנו את ההבדלים בין <div> ל-<span>, בואו נראה איך אנחנו יכולים להשתמש בהם בצורה מתקדמת יותר כדי לארגן ולעצב את התוכן בדף האינטרנט שלנו. נלמד גם איך לשלב בין שתי התגיות כדי לקבל מבנה יותר גמיש ומדויק.

דוגמה 1: חלוקת הדף לאזורים באמצעות <div>

בדרך כלל, עמוד אינטרנט מחולק לכמה אזורים מרכזיים כמו כותרת, תוכן עיקרי ותחתית (Footer). כל אזור כזה יכול להיות מיוצג על ידי תגית <div>, מה שמאפשר לנו להפריד את החלקים בצורה ברורה ולהחיל עליהם עיצוב נפרד בעזרת CSS.

<div class="header">
    <h1>כותרת האתר</h1>
</div>

<div class="main-content">
    <p>כאן יהיה התוכן העיקרי של האתר.</p>
</div>

<div class="footer">
    <p>כל הזכויות שמורות © 2024</p>
</div>

במקרה הזה:

• התגית <div> הראשונה מכילה את הכותרת של האתר.
• התגית <div> השנייה מכילה את התוכן המרכזי.
• התגית <div> השלישית היא אזור התחתית של הדף.

כך אנחנו יכולים להשתמש ב-<div> כדי לחלק את הדף לאזורים נפרדים, ובזכות ההפרדה הזו נוכל גם לעצב כל חלק בצורה שונה (כמו צבע רקע, גודל טקסט, מיקום וכו').

דוגמה 2: עיצוב טקסט בתוך שורה עם <span>

עכשיו נסתכל על מקרה שבו אנחנו רוצים לעצב חלקים מסוימים בתוך שורה מבלי לשבור אותה לבלוק חדש. כאן נכנסת לתמונה התגית <span>.

<p>ברוכים הבאים ל-<span class="highlight">אתר שלנו</span>. אנו מציעים <span class="highlight">שירותים איכותיים</span> ופתרונות טכנולוגיים מתקדמים.</p>

במקרה הזה, כל מה שנמצא בתוך תגית <span> יסומן או יעוצב לפי הקלאס שנגדיר לו ב-CSS. לדוגמה, אם נוסיף סגנון ב-CSS לקלאס "highlight", נוכל להדגיש את המילים "אתר שלנו" ו-"שירותים איכותיים":

.highlight {
    color: red;
    font-weight: bold;
}

כאן אנחנו רואים איך אפשר להשתמש ב-<span> כדי לעצב חלקים קטנים בטקסט, מבלי להשפיע על כל השורה.

6. שילוב <div> ו-<span> ליצירת עיצוב מורכב

לפעמים נצטרך להשתמש ב-<div> ו-<span> יחד כדי ליצור מבנים מורכבים יותר בדף. בואו נראה איך זה יכול לעבוד.

דוגמה 3: יצירת כרטיס מידע

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

<div class="product-card">
    <h2>מחשב נייד</h2>
    <p>מחיר: <span class="price">₪3,500</span></p>
    <p>מלאי: <span class="stock-status">במלאי</span></p>
</div>

כאן יש לנו:

• בלוק <div> שעוטף את כל המידע על המוצר.
• בתוך הבלוק, אנו משתמשים בתגיות <span> כדי להדגיש את המחיר ואת מצב המלאי.

בעזרת ה-CSS, נוכל להוסיף עיצוב לכל אחד מהחלקים:

.product-card {
    border: 1px solid #ccc;
    padding: 10px;
    width: 200px;
    margin: 10px;
}

.price {
    color: green;
    font-weight: bold;
}

.stock-status {
    color: blue;
}

כך אנחנו יכולים ליצור כרטיסי מידע שמסודרים בבלוקים בעזרת <div>, אבל בתוך כל כרטיס אפשר לעצב חלקים ספציפיים של המידע בעזרת <span>.

7. מתי להשתמש ב-<div> ומתי ב-<span>

לסיכום, הבחירה בין <div> ל-<span> תלויה באיך שאנחנו רוצים לארגן ולעצב את התוכן:

• השתמשו ב-<div> כשאתם רוצים לחלק את הדף לאזורים נפרדים או כשאתם רוצים לארגן בלוקים של תוכן.
• השתמשו ב-<span> כשאתם צריכים לעצב חלקים קטנים בתוך שורה מבלי לשבור אותה לבלוק נפרד.

תרגול

עכשיו, לאחר שלמדנו על <div> ו-<span>, ננסה ליישם את הידע שלנו.

תרגיל 1: ארגון עמוד אינטרנט

צרו עמוד אינטרנט שמחולק ל-3 אזורים:

1. כותרת.
2. תוכן עיקרי עם פסקה ותמונה.
3. תחתית (Footer) עם זכויות יוצרים.

השתמשו בתגיות <div> כדי לארגן את הדף, והוסיפו כמה עיצובים פשוטים בעזרת CSS.

תרגיל 2: עיצוב טקסט בתוך שורה

צרו פסקה עם טקסט כללי, והשתמשו בתגית <span> כדי להדגיש מילות מפתח חשובות בטקסט. הוסיפו עיצוב CSS כך שהמילים המודגשות יופיעו בצבע ובגופן שונה.

סיכום השיעור

למדנו על שתי תגיות חשובות מאוד בארגון מבנה דף HTML: <div> ו-<span>. ראינו איך כל אחת משמשת לארגון סוגים שונים של תוכן, מבלוקים שלמים ועד לחלקים קטנים בתוך שורות. הבנה של ההבדלים בין התגיות ושימוש נכון בהן תעזור לנו ליצור מבנה דף מאורגן וברור.

קישורים

1. בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.