Boxes and sections · קופסאות וחלקים
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · עמוד זה דורש דפדפן עדכני (תומך ב-SharedArrayBuffer). אנא עדכן את Chrome, Edge, Firefox או Safari לגרסה העדכנית ביותר.
English
Boxes and sections
- Bigger pages need structure — clear areas, not one long pile.
- A
<div>is a plain box. A<span>is a small inline box for a few words. - Boxes group things together, so you can arrange and style them later.
עברית
קופסאות וחלקים
- עמודים גדולים זקוקים למבנה — אזורים ברורים, ולא ערימה אחת ארוכה.
<div>היא קופסה פשוטה.<span>היא קופסה פנימית קטנה עבור מספר מילים.- קופסאות מקבוצות דברים ביחד, כך שתוכל לסדר ולעצב אותן בהמשך.
English
Named sections
- HTML has special boxes with meaningful names:
<header>(top),<main>(the main content),<footer>(bottom),<nav>(menu links).- They work like
<div>, but the names tell people — and search engines — what each part is.
עברית
חלקים בעלי שמות
- ל-HHTML ישנן קופסאות מיוחדות עם שמעות משמעותיים:
<header>(חלק עליון),<main>(תוכן ראשי),<footer>(חלק תחתון),<nav>(קישורי תפריט).- הן עובדות כמו
<div>, אך השמות מסבירים לאנשים — ולמנועי חיפוש — מהו כל חלק.
<header>
<h1>My site</h1>
</header>
<main>
<p>Welcome to my page.</p>
</main>
<footer>
<small>Made by me</small>
</footer>
English
Classes name your boxes
- A class is a label you add to a tag:
<div class="card">. - It does nothing on its own — but soon, CSS will use it to style that box.
- This is your bridge into the next half of the course.
עברית
שמות מחלקות מיימנים את הקופסאות שלך
- מחלקה (class) היא תווית שמוסיפים לתג:
<div class="card">. - היא אינה עושה דבר מעצמה — אך בקרוב, CSS ישתמש בה לעיצוב הקופסה הזו.
- זוהי הגשר שלך לחצי השני של הקורס.
English
Common mistakes
<div>is a block (new line);<span>is inline (stays in the text).- Use semantic tags like
<header>and<nav>where they fit.
עברית
טעויות נפוצות
<div>הוא בלוק (שורה חדשה);<span>הוא אינליין (נשאר בתוך הטקסט).- השתמש בתגי סמנטיות כמו
<header>ו-<nav>כשמתאים.
English
Now you try
- Add a
<header>and a<footer>, then give a box a class. - Next lesson, we start making things look good with CSS.
עברית
כעת תנסו בעצמכם
- הוסף תג
<header>ותג<footer>, ואז תן לקופסה מחלקה. - בשיעור הבא נתחיל לעצב דברים שנראים טוב באמצעות CSS.
Explore · חקור
A box wraps its content · קופסה עוטפת את התוכן שלה
A <div> is a box: content surrounded by padding, border, margin. · קורה (<div>) היא קופסה: תוכן מוקף בפדינג, גבול והשוואה (margin).
Give the page a top and a bottom. Wrap the title in a <header>, and the small note in a <footer>. · הוסף דפדף עליון ותחתון. עטוף את הכותרת ב-<header>, ואת ההערה הקטנה ב-<footer>.
Give this box a name so we can style it later. Add class="card" to the <div>. · תן לקופסה הזו שם כדי שנוכל לעצב אותה מאוחר יותר. הוסף class="card" ל-<div>.