![קורס טכנולוגיות אינטרנט](/images/articles/iw/technology/coding-for-kids-7/1.jpg)

---

נושא מספר 7 ב-<a href="../coding-for-kids-0/" target="_blank">קורס תכנות לילדים</a>.

---

## שיעור: עיצוב באמצעות קלאסים ו-id ב-CSS

## מבוא
במדריך זה נלמד על ההבדלים בין קלאסים (`class`) לבין `id` ב-CSS, ונראה כיצד ניתן להשתמש בהם כדי לעצב את הדף שלנו. ההבנה של השניים תסייע לנו לארגן ולשפר את עיצוב הדפים שלנו.

## חלק 1: הבנה של קלאסים (`class`) ו-id

1. **מהו קלאס (`class`)?**
   - קלאס הוא מאפיין שיכול להיות משויך למספר אלמנטים בדף. 
   - הוא משמש כדי לקבץ אלמנטים שונים שיש להם עיצוב דומה.

   **דוגמה לשימוש:**
   ```html
   <div class="button">לחץ כאן</div>
   <div class="button">לחץ כאן גם כאן</div>
   ```

2. **מהו `id`?**
   - `id` הוא מאפיין שמזהה אלמנט יחיד בדף. 
   - הוא לא יכול להופיע יותר מפעם אחת בעמוד.

   **דוגמה לשימוש:**
   ```html
   <h1 id="main-title">כותרת ראשית</h1>
   ```

3. **ההבדלים העיקריים:**
   - **כמות:** קלאס יכול להופיע בכמה אלמנטים, בעוד `id` ייחודי לכל אלמנט.
   - **שימוש:** קלאס נועד לעיצוב קבוצתי, בעוד `id` מיועד לעיצוב אלמנט יחיד או לגישה ישירה אליו באמצעות JavaScript.

## חלק 2: שימוש בקלאסים ו-id ב-CSS

1. **עיצוב עם קלאסים:**
   - כדי לעצב אלמנט עם קלאס, יש להשתמש בסימן `.` (ניקוד) לפני שם הקלאס בקובץ ה-CSS.

   **דוגמה:**
   ```css
   .button {
       background-color: blue;
       color: white;
       padding: 10px 20px;
       border: none;
       border-radius: 5px;
   }
   ```

2. **עיצוב עם `id`:**
   - כדי לעצב אלמנט עם `id`, יש להשתמש בסימן `#` (חוד) לפני שם ה-id בקובץ ה-CSS.

   **דוגמה:**
   ```css
   #main-title {
       font-size: 24px;
       text-align: center;
       color: darkblue;
   }
   ```

## חלק 3: דוגמה מעשית

1. **HTML:**
   ```html
   <div class="button">לחץ כאן</div>
   <div class="button">לחץ כאן גם כאן</div>
   <h1 id="main-title">כותרת ראשית</h1>
   ```

2. **CSS:**
   ```css
   .button {
       background-color: blue;
       color: white;
       padding: 10px 20px;
       border: none;
       border-radius: 5px;
       cursor: pointer;
       margin: 10px 0;
   }

   #main-title {
       font-size: 24px;
       text-align: center;
       color: darkblue;
   }
   ```

## חלק 4: תרגול

1. **תרגיל 1:**
   - צור קובץ HTML חדש.
   - הוסף מספר כפתורים עם קלאס `button`.
   - הוסף כותרת עם `id` בשם `main-title`.
   - עשה שימוש בעיצוב CSS עבור הכפתורים והכותרת.

2. **תרגיל 2:**
   - הוסף קלאס נוסף לדוגמה, כמו `highlight`, ושנה את צבע הרקע של אלמנטים אלה.

במדריך זה למדנו על ההבדלים בין קלאסים ו-id, ואיך לעצב באמצעותם ב-CSS. הבנה זו היא בסיסית להמשך העבודה עם CSS וליצירת אתרים מעוצבים ומסודרים.

---

## חלק 5: טיפים נוספים לשימוש בקלאסים ו-id

## 5.1. בחירת שמות טובים
- **קלאסים:**
  - בחר שמות קלאס שמתארים את התפקיד של האלמנט ולא את העיצוב שלו. לדוגמה, השתמש ב-`.button` במקום `.blue-button`. זה מסייע בשמירה על קוד נקי ואחיד.
  
- **id:**
  - השתמש בשמות ייחודיים וברורים. לדוגמה, במקום `#header1`, השתמש ב- `#main-header` כדי שתוכל להבין את משמעותו של ה-id בקלות.

## 5.2. הימנע משימוש מופרז ב-id
- ככל האפשר, השתדל להשתמש בקלאסים במקום ב-id, במיוחד כאשר אתה עובד עם אלמנטים שיכולים לחזור על עצמם בדף. קלאסים מאפשרים לעצב קבוצות של אלמנטים באופן קל יותר.

## 5.3. השפעת סדר העדיפויות
- כאשר אתה משתמש באותה תכונה עבור קלאס ו-id, תכונה שנמצאת ב-id תביס תכונה באותו שם שנמצאת בקלאס. זה נגרם בגלל סדר העדיפויות של CSS. לכן, אם יש לך קלאס ו-id עם אותו עיצוב, שים לב להשפעתם זה על זה.

## 5.4. שלבים לעיצוב מתקדם
- לאחר שלמדת את הבסיס, אתה יכול להרחיב את הידע שלך עם טכניקות מתקדמות כגון:
  - שימוש ב-**CSS Grid** ו-**Flexbox** לארגון תכנים בצורה מתקדמת.
  - שימוש ב-**CSS Variables** כדי לנהל ערכים חוזרים עליהם בעיצוב שלך בצורה נוחה.

## חלק 6: פרויקט סיום

## תיאור הפרויקט
כעת, יש לך את הכלים הנדרשים לעצב דף פשוט באמצעות קלאסים ו-id. הגיע הזמן להשתמש במה שלמדת וליצור פרויקט קטן!

## שלבי הפרויקט:
1. **צור דף HTML בסיסי:**
   - הכנס כותרת, מספר פסקאות, ותמונה.
  
2. **הוסף קלאסים ו-id:**
   - הוסף קלאסים לפסקאות כדי לעצב אותן.
   - השתמש ב-id עבור הכותרת ותמונה.

3. **עצב עם CSS:**
   - בחר צבעים, גופנים וגדלים.
   - שנה את המראה של הקלאסים וה-id כך שיתאימו לעיצוב שלך.

4. **בדוק את התוצאה:**
   - טען את הדף בדפדפן ובדוק שהעיצוב מתנהג כפי שהתכוונת.


## חלק 7: סיכום

בפרק זה, חקרנו את השימוש בקלאסים ו-id ב-CSS והבנו את החשיבות שלהם בעיצוב אתרים. למדנו גם טיפים לשיפור העבודה עם קלאסים ו-id, וכן כיצד ניתן לפתח פרויקטים פשוטים שמשתמשים במיומנויות הנלמדות. 

---


### קישורים

1. בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.

הסבר על ההבדלים בין קלאסים (class) ו-id, וכיצד לעצב איתם ב-CSS.

עיצוב באמצעות קלאסים ו-id ב-CSS

![קורס טכנולוגיות אינטרנט](/images/articles/iw/technology/coding-for-kids-2/1.jpg)

---

נושא מספר 2 ב-<a href="../coding-for-kids-0/" target="_blank">קורס תכנות לילדים</a>.

---


## תיאור השיעור: 
בשיעור זה נלמד על תגיות HTML הקשורות לכותרות ופסקאות, כולל מה תפקידן בעיצוב ובבניית דפי אינטרנט. נבין כיצד להשתמש בהן נכון כדי להעניק לדף מבנה ברור ומסודר.

## מטרות השיעור:
- הבנת תגיות כותרות מסוג `<h1>` עד `<h3>` וההבדלים ביניהן.
- הכרת תגית הפסקה `<p>` והשימוש בה להצגת טקסט.
- הבנה כיצד מבנה הכותרות והפסקאות משפיע על הנראות וההיררכיה של תוכן באתר.

## מהלך השיעור:

## 1. מבוא קצר ל-HTML

היום נתחיל ללמוד על **HTML**, שהיא כמו השפה שבה אנחנו מדברים עם המחשב כדי ליצור אתרי אינטרנט. בדיוק כמו שבני אדם משתמשים בשפה כדי לתקשר אחד עם השני, אנחנו משתמשים ב-HTML כדי להגיד למחשב איך האתר שלנו ייראה ואיך להציג את התוכן שבו.

אז מה בעצם זה **HTML**?  
HTML זה קיצור של **HyperText Markup Language**. אבל זה רק שם ארוך ומפחיד למה שבעצם די פשוט. השפה הזו מאפשרת לנו "לסמן" את הטקסט שאנחנו כותבים כדי שהדפדפן (התוכנה שבה אנחנו גולשים באינטרנט) ידע איך להציג אותו. זה אומר שאנחנו נותנים לדפדפן הוראות כמו: "זה כותרת", "זה פסקה", "תוסיף כאן תמונה", וכולי.

---

## מה זה תגית?

בואו נדבר על היסוד הכי חשוב ב-HTML שנקרא **תגית**. התגיות הן כמו פקודות קטנות שמספרות למחשב מה לעשות עם כל חלק באתר.

איך התגיות נראות? תגית נראית ככה:

```html
<tag>תוכן</tag>
```

זה קצת כמו סנדוויץ'! יש לנו את ה"פרוסה העליונה" שזו התגית הפותחת (`<tag>`), באמצע יש את התוכן (מה שאנחנו רוצים שהמחשב יראה), ואז יש את ה"פרוסה התחתונה" שהיא התגית הסוגרת (`</tag>`).

למשל, אם אני רוצה שהמחשב יבין שהטקסט שלי הוא פסקה, אני אשתמש בתגית `<p>` כדי לסמן את זה ככה:

```html
<p>זוהי פסקה פשוטה.</p>
```

הדפדפן יסתכל על התגית הזו ויגיד לעצמו: "אה! זה צריך להיראות כמו פסקה רגילה."

תגית יכולה לייצג כל מיני דברים בדף האינטרנט, כמו כותרות, פסקאות, תמונות, קישורים, ועוד המון. כל תגית מספרת לדפדפן איך להציג את התוכן שבין התגיות.

אז עכשיו כשהבנו קצת מה זה HTML ומה זה תגית, נמשיך ללמוד איך משתמשים בתגיות האלה כדי להוסיף **כותרות** ו**פסקאות** לאתר שלנו.

---

## 2. מהן כותרות

תחשוב על הכותרות כמו שלטי הכוונה – הן עוזרות לאנשים (ולמחשב) להבין איפה הם נמצאים באתר ואיזה תוכן הכי חשוב. כשאנחנו בונים דף אינטרנט, אנחנו רוצים שיהיה לו מבנה ברור כדי שהגולשים ידעו מה חשוב יותר ומה פחות.

**מה זה כותרת ב-HTML?**

כותרת היא דרך לסדר את התוכן שלנו לפי סדר חשיבות. יש לנו כמה רמות של כותרות, והן מסומנות עם התגיות `<h1>` עד `<h6>`. ככל שמספר הכותרת קטן יותר, הכותרת תהיה גדולה יותר וחשובה יותר.

---

**בוא נבין כל רמה:**

- **`<h1>`:**  
  זוהי **הכותרת הכי חשובה** בדף, ממש כמו כותרת של ספר. בדרך כלל תהיה רק **כותרת אחת כזו** בכל דף. היא מספרת לדפדפן ולגולשים על מה כל הדף מדבר. לדוגמה, אם יש לך אתר בנושא חיות מחמד, הכותרת הראשית יכולה להיות משהו כמו:

  ```html
  <h1>ברוכים הבאים לאתר חיות המחמד שלי!</h1>
  ```

- **`<h2>`:**  
  כותרות **בדרגה שנייה**, שהן קצת פחות חשובות מ-`<h1>`, אבל עדיין חשובות. בדרך כלל נשתמש בהן כדי להפריד נושאים שונים בתוך הדף. למשל, אם האתר שלך מדבר על סוגי חיות מחמד, תוכל להשתמש בכותרות `<h2>` כדי לחלק את הנושאים:

  ```html
  <h2>חיות מחמד נפוצות</h2>
  <h2>טיפים לטיפול בחיות מחמד</h2>
  ```

- **`<h3>`:**  
  כותרות **בדרגה שלישית**, שמשמשות לתתי-נושאים. אם תחת כל כותרת `<h2>` יש נושאים קטנים יותר, אפשר להשתמש בכותרת `<h3>`. לדוגמה, אם אתה כותב על סוגי חיות מחמד, תוכל להשתמש בכותרת `<h3>` כדי להפריד בין כל סוג:

  ```html
  <h2>חיות מחמד נפוצות</h2>
  <h3>כלבים</h3>
  <h3>חתולים</h3>
  <h3>תוכים</h3>
  ```

---

## איך כותרות עוזרות לנו?

הכותרות לא רק עוזרות לגולשים להבין את סדר התוכן, הן גם **חשובות למנועי חיפוש** כמו גוגל. מנועי החיפוש משתמשים בכותרות כדי להבין על מה הדף מדבר ואיך לחלק אותו לנושאים, מה שיכול לעזור לאנשים למצוא את האתר שלך בצורה טובה יותר.

---

## דוגמה לשימוש בכותרות:

בוא נבנה יחד דוגמה של דף קטן:

```html
<h1>ברוכים הבאים לאתר שלי</h1>
<h2>חלק ראשון: מבוא</h2>
<h3>מהו HTML?</h3>
<p>HTML היא שפת סימון המשמשת ליצירת אתרי אינטרנט.</p>
<h3>למה זה חשוב?</h3>
<p>HTML הוא הבסיס שעליו נבנים כל אתרי האינטרנט. בלעדיו, לא היינו יכולים להציג תוכן בצורה מסודרת.</p>
```

---

## 3. תגית פסקה `<p>`

## מהי פסקה?

פסקה היא קטע טקסט שמסביר רעיון או נושא מסוים, ממש כמו בספרים או במחברות שלך. כשאתה כותב טקסט, אנחנו לא רוצים שהכול יהיה בבלגן אחד גדול, נכון? לכן אנחנו מחלקים את הטקסט לקטעים קטנים יותר כדי שיהיה יותר קל לקרוא ולהבין. 

ב-HTML, כדי לסמן שהטקסט שלנו הוא **פסקה**, אנחנו משתמשים בתגית `<p>`. מה שנמצא בין התגיות `<p>` ו- `</p>` נחשב לפסקה.

לדוגמה, אם אני רוצה לכתוב קטע שמסביר משהו, אני עושה את זה ככה:

```html
<p>ברוכים הבאים לאתר שלי. כאן תלמדו איך לבנות אתרים בצורה פשוטה ומהנה.</p>
```

הדפדפן יראה את מה שבתוך התגית הזו כקטע טקסט, והטקסט יופיע בצורה מסודרת בדף. כל פסקה תתחיל שורה חדשה ותהיה מופרדת מפסקאות אחרות.

---

## למה פסקאות חשובות?

פסקאות עוזרות לסדר את הדף ולהפוך את הטקסט לקריא יותר. כשאנחנו גולשים באינטרנט, אנחנו אוהבים לקרוא קטעים קצרים וברורים, ולא גושי טקסט ענקיים ומבלבלים. הפסקאות בעצם מאפשרות לנו **לארגן את המידע** כדי שיהיה ברור מה כל קטע אומר.

תחשוב על זה ככה: פסקאות הן כמו נשימה בטקסט. הן נותנות לנו הפסקה קטנה בין רעיון לרעיון ומקלות על הקריאה.

---

## דוגמה לשימוש בפסקאות:

בוא נסתכל על דוגמה לדף שבו יש כמה פסקאות:


```html
<!DOCTYPE html>
<html>
<head>
   <title>הדף הראשון שלי</title>
</head>
<body>
   <h1>ברוכים הבאים לאתר שלי</h1>
   <h2>חלק ראשון: מבוא</h2>

   <p>זהו אתר לימוד טכנולוגיות אינטרנט. בשיעור זה נלמד על תגיות כותרות ופסקאות.</p>

   <p>תגיות HTML הן חלק בסיסי בכל אתר אינטרנט ומאפשרות הצגת טקסט בצורה מסודרת וברורה.</p>

   <h2>חלק שני: תגיות מתקדמות</h2>

   <p>כאן נלמד על תגיות נוספות כמו תמונות, קישורים, ורשימות. לכל אחת מהתגיות יש תפקיד חשוב בבניית דף אינטרנט.</p>
</body>
</html>
```

כפי שאתה רואה, הטקסט מחולק לכותרות ולפסקאות, וזה עוזר לגולש להבין את הדף בצורה קלה וברורה.

**תרגול קטן**

נסה ליצור פסקה משלך. כתוב על הנושא שאתה אוהב, והשתמש בתגית `<p>` כדי להציג את הטקסט בצורה מסודרת.


---

## 4. תרגול מעשי

אז אחרי שהבנו איך כותבים כותרות ופסקאות, הגיע הזמן **ליצור דף HTML משלכם**! הנה מה שתצטרכו לעשות:

**משימה:**

1. **כותרת `<h1>`:**
   - קודם כל, תכתבו כותרת ראשית לדף שלכם. הכותרת צריכה להיות הכי חשובה, והיא צריכה לתאר בצורה כללית על מה הדף שלכם מדבר. למשל, אם אתם כותבים על תחביבים, כותרת `<h1>` שלכם יכולה להיות משהו כמו:  
   ```html
   <h1>התחביבים האהובים עליי</h1>
   ```

2. **שתי כותרות `<h2>`:**
   - עכשיו תוסיפו לפחות שתי כותרות `<h2>`, כל אחת מדברת על נושא אחר. אם נניח שהנושא שלכם הוא תחביבים, כל כותרת `<h2>` יכולה לתאר תחביב שונה. לדוגמה:
   ```html
   <h2>ציור</h2>
   <h2>משחקי מחשב</h2>
   ```

3. **כמה כותרות `<h3>`:**
   - מתחת לכל כותרת `<h2>`, תוסיפו כותרות `<h3>` שיתארו תתי-נושאים. למשל, מתחת ל-"ציור", תכתבו כמה כותרות `<h3>` שיתארו סגנונות ציור שונים או טכניקות ציור. מתחת ל-"משחקי מחשב", אפשר לתאר סוגים שונים של משחקים:
   ```html
   <h2>ציור</h2>
   <h3>ציור במכחול</h3>
   <h3>ציור דיגיטלי</h3>

   <h2>משחקי מחשב</h2>
   <h3>משחקי פעולה</h3>
   <h3>משחקי אסטרטגיה</h3>
   ```

4. **פסקאות לכל נושא:**
   - מתחת לכל כותרת ותת-כותרת, תכתבו פסקה שתסביר את הנושא. זה יכול להיות תיאור קצר על כל תחביב או תת-תחביב. לדוגמה:
   ```html
   <p>אני אוהב לצייר כי זה מרגיע אותי ועוזר לי להביע את היצירתיות שלי. אני מעדיף ציור במכחול כי זה נותן לי שליטה על כל פרט קטן.</p>

   <p>משחקי מחשב הם דרך כיפית לבלות זמן וליהנות עם חברים. משחקי פעולה מרתקים אותי במיוחד בגלל האתגר והקצב המהיר שלהם.</p>
   ```

---

**דוגמה מלאה:**

כדי להראות איך הדף שלכם אמור להיראות בסוף, הנה דוגמה פשוטה של דף HTML:

```html
<h1>התחביבים האהובים עליי</h1>

<h2>ציור</h2>
<h3>ציור במכחול</h3>
<p>אני אוהב לצייר כי זה מרגיע אותי ועוזר לי להביע את היצירתיות שלי. אני מעדיף ציור במכחול כי זה נותן לי שליטה על כל פרט קטן.</p>

<h3>ציור דיגיטלי</h3>
<p>ציור דיגיטלי מאפשר לי להשתמש בכלים שלא קיימים בציור רגיל, וזה מאוד כיף ליצור דברים חדשים על המסך.</p>

<h2>משחקי מחשב</h2>
<h3>משחקי פעולה</h3>
<p>משחקי פעולה מרתקים אותי במיוחד בגלל האתגר והקצב המהיר שלהם.</p>

<h3>משחקי אסטרטגיה</h3>
<p>משחקי אסטרטגיה דורשים חשיבה יצירתית ותכנון קדימה, ואני אוהב את האתגר שהם מציבים.</p>
```

---

**למה זה חשוב?**

התרגול הזה עוזר לכם להבין איך כותרות ופסקאות יוצרות מבנה ברור לאתר. כך הגולשים יוכלו להבין בקלות על מה הדף מדבר, וזה גם יעזור לדפדפנים ולמנועי חיפוש כמו גוגל להבין את התוכן באתר שלכם.


---

## 5. סיכום

אז מה למדנו היום?  
הבנו את החשיבות של **כותרות** ו**פסקאות** בבניית אתרי אינטרנט. הכותרות עוזרות לנו לארגן את התוכן בצורה היררכית – כותרות גדולות כמו `<h1>` מסמנות את הנושא המרכזי, כותרות `<h2>` ו-`<h3>` עוזרות להפריד בין נושאים ותתי-נושאים, והפסקאות `<p>` משמשות אותנו כדי להציג טקסט בצורה מסודרת וקריאה.

**למה זה חשוב?**

שימוש נכון בכותרות ובפסקאות עושה את האתר שלך **ברור יותר** וקל לניווט. כשאנשים גולשים באתרים, הם רוצים למצוא מידע במהירות ובקלות, וכשהמבנה של האתר טוב, זה עוזר להם להבין במהירות על מה כל דף מדבר.

גם **מנועי חיפוש** כמו גוגל אוהבים אתרים מסודרים. אם האתר שלך משתמש נכון בכותרות ובפסקאות, גוגל יידע להבין מה חשוב ומה פחות חשוב בדף, וזה יעזור לו להציג את האתר שלך בתוצאות החיפוש המתאימות.

---

**שיעורי בית:**

כדי לוודא שהבנתם את הנושא, הנה משימה שתוכלו לעשות לבד בבית:  
בנו דף HTML נוסף בנושא חופשי לבחירתכם, תוך שימוש **בכותרות** וב**פסקאות** בצורה היררכית נכונה. אתם יכולים לבחור נושא שאתם אוהבים, כמו תחביבים, בעלי חיים, ספורט, או כל נושא אחר שמעניין אתכם. חשוב שהכותרות יפרידו בין נושאים ותתי-נושאים, ושכל חלק יהיה ברור ומסודר בעזרת פסקאות.

---

**דוגמה לשיעורי הבית:**

נניח שהנושא שלכם הוא "מאכלים אהובים", כך זה ייראה:

```html
<h1>המאכלים האהובים עליי</h1>

<h2>מאכלים ביתיים</h2>
<p>אני מאוד אוהב את האוכל שאמא שלי מבשלת בבית. המנות האהובות עליי הן קוסקוס ומרק עוף.</p>

<h3>קוסקוס</h3>
<p>קוסקוס הוא מאכל מסורתי שמבוסס על סולת, והוא טעים במיוחד עם ירקות.</p>

<h3>מרק עוף</h3>
<p>מרק עוף הוא מנה פשוטה אך מאוד טעימה ומנחמת, במיוחד בימי חורף קרים.</p>

```

---


### קישורים

1. בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.

הסבר על תגיות כותרות (<h1> - <h3>) ופסקאות (<p>), ותפקידן בדף אינטרנט.

תגיות כותרות ופסקאות ב-HTML

![קורס טכנולוגיות אינטרנט](/images/articles/iw/technology/coding-for-kids-9/1.jpg)

---

נושא מספר 9 ב-<a href="../coding-for-kids-0/" target="_blank">קורס תכנות לילדים</a>.  

---  

## תיאור השיעור:  
בפרק זה נבצע היכרות עם **JavaScript**, שפת התכנות שמשתמשים בה כדי להפוך דפי אינטרנט לדינמיים ואינטראקטיביים. נלמד איך להוסיף קוד JavaScript לדף HTML, נכתוב את קוד התכנות הראשון שלנו, ונבין את מבני הנתונים הבסיסיים של השפה.

---

## מטרות השיעור:  
- להבין מהי JavaScript וכיצד היא משתלבת עם HTML.  
- ללמוד איך לשלב קוד JavaScript בדף HTML באמצעות תגית `<script>`.  
- לכתוב קוד JavaScript ראשון ולבצע פעולות פשוטות.  
- להכיר את מבני הנתונים הבסיסיים: משתנים, מספרים ומחרוזות.  

---

## מהלך השיעור:

## 1. מה זה JavaScript?  
JavaScript היא **שפת תכנות** שנועדה להוסיף אינטראקטיביות לאתרים. בלעדיה, דפי אינטרנט היו סטטיים – כל מה שהמשתמש היה יכול לראות הוא טקסטים ותמונות, אבל לא יכול היה ללחוץ על כפתורים או לקבל תגובות מיידיות מהדף.  

JavaScript מאפשרת לנו ליצור אתרים מגיבים ודינמיים – לדוגמה:  
- כפתורים שמשתנים כשעוברים עליהם עם העכבר.  
- טפסים ששולחים נתונים בלי לרענן את הדף.  
- שינויים מיידיים בתוכן הדף בהתאם לפעולות של המשתמש.  

## 2. איך לשלב JavaScript בדף HTML?  
כדי להשתמש ב-JavaScript בדף HTML, אנחנו משתמשים בתגית מיוחדת שנקראת `<script>`. כל קוד JavaScript שנרצה להריץ יופיע בתוך התגית הזו, בדרך כלל בסוף המסמך כדי לוודא שכל האלמנטים בדף נטענו לפני הרצת הקוד.

## דוגמה:  
נראה איך אפשר להוסיף קוד JavaScript לדף HTML פשוט:

```html
<!DOCTYPE html>
<html>
<head>
   <title>שילוב JavaScript</title>
</head>
<body>
   <h1>ברוכים הבאים לאתר שלנו!</h1>

   <script>
      alert("שלום! זהו קוד JavaScript הראשון שלך!");
   </script>
</body>
</html>
```

כאן, כשהדף ייטען, תיפתח הודעה (Popup) עם המילים "שלום! זהו קוד JavaScript הראשון שלך!". זו דוגמה ראשונית לכך ש-JavaScript מאפשרת לנו לתקשר עם המשתמשים.

## 3. כתיבת קוד JavaScript ראשון  
אחד הדברים הראשונים שאנחנו לומדים ב-JavaScript הוא איך להשתמש בפעולה שנקראת `alert`. זו פונקציה שמציגה הודעה על המסך. בואו נבצע ניסוי קטן:

## דוגמה:  
```html
<script>
   alert("זה הקוד הראשון שלי!");
</script>
```

כאן, כאשר תפעילו את הדף, תופיע הודעת ברכה על המסך. הפקודה `alert` עוזרת לנו להבין שאנחנו יכולים לגרום לדף לתקשר עם המשתמשים בצורה פשוטה.

## 4. מבני הנתונים הבסיסיים: משתנים, מספרים ומחרוזות  
עכשיו, כשאנחנו יודעים להכניס JavaScript לדף HTML ולהריץ קוד, בואו נתחיל להכיר את החלקים הבסיסיים של השפה: **משתנים**, **מספרים** ו-**מחרוזות**.

## 4.1 מהו משתנה?  
משתנה הוא כמו **קופסה** בזיכרון המחשב שבו אנחנו שומרים מידע. אפשר לחשוב על זה כמו מדף שבו אנחנו שמים ספר (הספר הוא המידע). ב-JavaScript, אנחנו מכריזים על משתנה באמצעות המילה `let` או `const`.

## דוגמה:  
```javascript
let age = 12;
const name = "דני";
```

כאן, יצרנו שני משתנים:  
- משתנה `age` שבו שמרנו את המספר 12 (גיל).  
- משתנה `name` שבו שמרנו את המחרוזת "דני" (שם פרטי).

## 4.2 מה זה מספר?  
ב-JavaScript אפשר לעבוד עם מספרים כמו שעובדים במתמטיקה. אפשר לעשות חישובים כמו חיבור, חיסור, כפל וחילוק.

## דוגמה:  
```javascript
let x = 5;
let y = 3;
let result = x + y; // התוצאה תהיה 8
```

כאן, חיברנו את המשתנים `x` ו-`y` ושמרנו את התוצאה במשתנה חדש בשם `result`.

## 4.3 מהי מחרוזת?  
מחרוזת היא סדרה של תווים, למשל מילה או משפט. אנחנו כותבים מחרוזות בתוך גרשיים (`"` או `'`).

## דוגמה:  
```javascript
let greeting = "שלום!";
let name = "דני";
let message = greeting + " " + name; // התוצאה תהיה "שלום! דני"
```

כאן חיברנו בין מחרוזת ברכה ("שלום!") לבין שם ("דני") וקיבלנו את המחרוזת המלאה "שלום! דני".

---

## 5. תרגול בסיסי  
כדי להבין יותר טוב את מה שלמדנו, בואו נבצע כמה תרגולים.

## תרגיל 1:  
צרו משתנה שנקרא `myName` ושמרו בו את השם שלכם. לאחר מכן, השתמשו בפונקציה `alert` כדי להציג הודעה שאומרת "שלום, [השם שלכם]!".  

## תרגיל 2:  
הכריזו על שני משתנים עם ערכים מספריים, וחברו ביניהם כדי לקבל תוצאה. השתמשו ב-`alert` כדי להציג את התוצאה.

---

## סיכום השיעור  
למדנו מהי JavaScript, איך להוסיף אותה לדף HTML, וכתבנו את הקוד הראשון שלנו. הכרנו גם את מבני הנתונים הבסיסיים: משתנים, מספרים ומחרוזות. בפעם הבאה נעמיק עוד יותר ונלמד על תנאים ולולאות, שמאפשרים לנו ליצור קוד חכם ודינמי יותר.

---


### קישורים

1. בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.

איך לשלב JavaScript בדף HTML, כתיבת קוד ראשון והבנת מבני הנתונים הבסיסיים.

מבוא ל-JavaScript והשתלבות בדף HTML

![קורס טכנולוגיות אינטרנט](/images/articles/iw/technology/coding-for-kids-10/1.jpg)

---

נושא מספר 10 ב-<a href="../coding-for-kids-0/" target="_blank">קורס תכנות לילדים</a>.

---

## תיאור השיעור:
בשיעור זה נלמד על משתנים ב-JavaScript ואיך הם משמשים לאחסון מידע שאנחנו רוצים להשתמש בו בתוכנית שלנו. נלמד גם איך להציג את המידע הזה על ידי שימוש בפקודת `console.log`, כלי עזר חשוב למתכנתים שיכול לעזור לנו להבין איך התוכנית עובדת.

---

## מטרות השיעור:
- להבין מהו משתנה ואיך מכריזים עליו ב-JavaScript.
- ללמוד על הסוגים השונים של משתנים כמו מספרים ומחרוזות.
- להבין את השימוש בפקודת `console.log` להדפסת מידע.
- לתרגל הכרזת משתנים והצגת התוצאה שלהם בדפדפן.

---

## מהלך השיעור:

## 1. מהו משתנה?  
ב-JavaScript, משתנה הוא כמו **קופסה** שבה אנחנו יכולים לשמור סוגים שונים של מידע. אנחנו יכולים לשמור בתוך משתנה מספרים, מילים, משפטים ואפילו חישובים שנעשה. משתנה עוזר לנו לשמור את המידע לשימוש עתידי בקוד שלנו.

## איך מכריזים על משתנה?  
כדי ליצור משתנה ב-JavaScript, אנחנו משתמשים במילה `let` או `const`, תלוי אם אנחנו רוצים שהערך של המשתנה יוכל להשתנות או לא. לאחר מכן נותנים שם למשתנה, ומגדירים לו ערך ראשוני.

## דוגמה בסיסית:
```javascript
let age = 10;  // יצירת משתנה ושמירת הערך 10 בתוכו
const name = "תומר";  // יצירת משתנה ששומר מחרוזת (טקסט)
```

במקרה הזה:
- המשתנה `age` שומר את המספר 10, והוא יכול להשתנות בהמשך התוכנית.
- המשתנה `name` שומר את המחרוזת "תומר", והוא לא יכול להשתנות כי הכרזנו עליו עם `const`.

## 2. סוגי משתנים
ל-JavaScript יש כמה סוגים עיקריים של משתנים שבהם נשתמש הרבה בתוכנית שלנו. הנה כמה מהסוגים החשובים:

## 2.1 מספרים (Numbers)  
מספרים הם פשוטים – הם יכולים להיות מספרים שלמים כמו 10 או שברים כמו 2.5.

```javascript
let price = 25.99;
```

## 2.2 מחרוזות (Strings)  
מחרוזות הן טקסטים – כל מה שכתוב בתוך גרשיים, כמו שמות, משפטים או אפילו תווים בודדים.

```javascript
let greeting = "שלום עולם!";
```

## 2.3 ערכים בוליאניים (Booleans)  
בוליאן הוא משתנה שיכול להיות רק **אמת** (true) או **שקר** (false). סוג זה של משתנה נפוץ מאוד כשאנחנו בודקים תנאים בקוד.

```javascript
let isStudent = true;
```

## 3. איך להדפיס תוצאות ב-JavaScript עם console.log
עכשיו, כשאנחנו יודעים איך להכריז על משתנים, נלמד איך להציג את הערכים שלהם כדי לוודא שהם פועלים כמו שצריך. 

ב-JavaScript יש לנו כלי שימושי מאוד שנקרא **console** (קונסולה). הקונסולה היא מקום שבו אפשר לראות הודעות מהקוד שלנו בזמן אמת. אנחנו משתמשים בפקודה `console.log` כדי להדפיס מידע בקונסולה.

## דוגמה להדפסת משתנה:
```javascript
let age = 12;
console.log(age);  // יציג את הערך 12 בקונסולה
```

כדי לראות את הקונסולה, נפתח את דפדפן האינטרנט (לדוגמה, Google Chrome), נלחץ על מקש ימני בעכבר ונבחר באפשרות "Inspect" (או "בדיקה"). בלשונית "Console" נראה את התוצאה של `console.log`. 

## 4. דוגמאות לעבודה עם משתנים ו-console.log

## 4.1 דוגמה עם מספרים:
```javascript
let number1 = 5;
let number2 = 7;
let sum = number1 + number2;  // חיבור של שני המספרים
console.log(sum);  // יציג 12
```

כאן, יצרנו שני משתנים ששומרים מספרים, חיברנו אותם ושמרנו את התוצאה במשתנה `sum`. לאחר מכן השתמשנו ב-`console.log` כדי להדפיס את התוצאה בקונסולה.

## 4.2 דוגמה עם מחרוזות:
```javascript
let firstName = "תומר";
let lastName = "כהן";
let fullName = firstName + " " + lastName;  // חיבור של שתי המחרוזות
console.log(fullName);  // יציג "תומר כהן"
```

כאן, חיברנו שני משתנים שמכילים מחרוזות וקיבלנו את השם המלא.

---

## 5. תרגילים

## תרגיל 1: יצירת משתנים והדפסתם בקונסולה
1. הכריזו על משתנה בשם `age` ושמרו בו את הגיל שלכם.
2. השתמשו ב-`console.log` כדי להציג את הגיל בקונסולה.

## תרגיל 2: עבודה עם מספרים
1. צרו שני משתנים בשם `number1` ו-`number2` ושמרו בהם שני מספרים.
2. חברו את שני המספרים ושמרו את התוצאה במשתנה `sum`.
3. הדפיסו את התוצאה בקונסולה.

## תרגיל 3: חיבור מחרוזות
1. צרו שני משתנים ששומרים את השם הפרטי ושם המשפחה שלכם.
2. חברו אותם למחרוזת אחת שנקראת `fullName`.
3. הדפיסו את השם המלא בקונסולה.

---

## סיכום השיעור
בשיעור הזה למדנו על משתנים ב-JavaScript: איך להכריז עליהם, איך לשמור בהם מידע ואיך להציג את המידע הזה בקונסולה בעזרת `console.log`. הבנה של משתנים היא אחד הצעדים החשובים ביותר בתכנות, כי הם הבסיס של כל התוכניות שנכתוב בהמשך.

---


### קישורים

1. בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.

עבודה עם משתנים ב-JavaScript והצגת תוצאות בדפדפן באמצעות console.log.

משתנים והדפסת תוצאות בדפדפן ב-JavaScript

![קורס טכנולוגיות אינטרנט](/images/articles/iw/technology/coding-for-kids-15/1.jpg)

---

השיעור בבנייה, תודה על הסבלנות!

---


### קישורים

1. בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.

עיצוב טפסים, כפתורים ושדות קלט עם CSS מתקדם, כולל הבנת pseudo-classes.

עיצוב טפסים ועבודה עם CSS מתקדם

![קורס טכנולוגיות אינטרנט](/images/articles/iw/technology/coding-for-kids-17/1.jpg)

---

השיעור בבנייה, תודה על הסבלנות!

---


### קישורים

1. בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.

שמירת נתונים ב-localStorage, קריאה ועדכון נתונים עבור מצבים כמו שמירת נתוני משתמש.

שימוש ב-localStorage לשמירת נתונים

![computer skills](/images/articles/iw/technology/basic-computer-skills-0/1.jpg)

---

## הקדמה לקורס יסודות השימוש במחשב

הקורס "יסודות השימוש במחשב" נועד להעניק למשתמשים את הכלים הבסיסיים לשימוש יעיל במחשב האישי. באמצעות סדרת שיעורים ברורים ומעשיים, המשתתפים ילמדו כיצד לעבוד עם תוכנות שונות, לנהל קבצים ותיקיות, לגלוש באינטרנט בצורה בטוחה, ולבצע פעולות נפוצות במערכת ההפעלה.

הקורס נבנה כדי לפתח ביטחון ויכולת בשימוש במחשב, ולהעניק בסיס חזק לעבודה עם יישומים חשובים במערכת ההפעלה Windows.

---

## השיעורים בקורס:


| מספר | נושא                             | תיאור קצר                                                                                     |
|-------|-----------------------------------|----------------------------------------------------------------------------------------------|
| 1     | <a href="../basic-computer-skills-1/" target="_blank">**היכרות עם המחשב שלי**</a>            | הבנת מרכיבי המחשב ותפקודם כמו מסך, מקלדת ועכבר, והיכרות עם מערכת ההפעלה.                                   |
| 2     | <a href="../basic-computer-skills-2/" target="_blank">**תיקיות וניהול קבצים**</a>            | יצירת תיקיות חדשות, העברת קבצים בין תיקיות ומחיקת קבצים בצורה מאורגנת.                      |
| 3     | **יצירת קובץ טקסט ועריכה ב-Notepad** | יצירת קובץ טקסט חדש, עריכה ושימוש בכלים בסיסיים ב-Notepad.                                  |
| 4     | **סימון טקסט, העתקה והדבקה, ושימוש במקשי Ctrl ו-Shift** | שיטות לסימון טקסט, העתקה, הדבקה ושימוש בקיצורי דרך באמצעות מקשי Ctrl ו-Shift.              |
| 5     | **שימוש בדפדפן אינטרנט**           | פתיחה וסגירה של דפדפן, גלישה, חיפושים בגוגל, וסימון אתרים מועדפים.                           |
| 6     | **שמירת תמונה מהאינטרנט והסבר על פורמטים** | איך לשמור תמונות מאתרי אינטרנט והסבר על פורמטים כמו JPEG, PNG ו-GIF.                         |
| 7     | **שימוש בסל המחזור**              | מחיקת ושחזור קבצים בסל המחזור, וניקוי סל המחזור לפינוי מקום.                               |
| 8     | **שימוש בשולחן העבודה**           | שינוי רקע שולחן העבודה, התאמת ערכות נושא, הוספת ווידג'טים ושינוי צלילים.                   |
| 9     | **שימוש ב-Paint**                 | עבודה עם תוכנת הציור Paint, יצירת תמונות פשוטות ושמירה שלהן.                                |
| 10    | **שימוש בסיסי ב-CMD**              | היכרות עם חלון הפקודות (Command Prompt) וביצוע פקודות בסיסיות כמו `dir` ו-`cd`.            |
| 11    | **היכרות עם Microsoft Word**       | שימוש ב-Microsoft Word ליצירת מסמכים מעוצבים ומקצועיים.                                    |
| 12    | **היכרות עם Microsoft PowerPoint**  | יצירת מצגות ב-PowerPoint עם שקפים, תמונות ואנימציות.                                        |
| 13    | **היכרות עם Microsoft Excel**       | עבודה עם Excel, שימוש בנוסחאות בסיסיות ויצירת גרפים.                                        |
| 14    | **התקנה של תוכנה כמו Visual Studio Code** | איך להוריד ולהתקין תוכנות למחשב, כולל הבנת תהליך ההתקנה.                                  |


---


## דרישות לקורס:

1. **מחשב אישי**: נדרש מחשב אישי לצורך ביצוע התרגילים והדגמות.
2. **ידע בסיסי באנגלית**: היכרות בסיסית עם השפה האנגלית, כולל קריאה וכתיבה של מילים פשוטות, תועיל להבנת ממשקי התוכנות והאינטרנט.
3. **אוצר מילים בסיסי**: חשוב להכיר מונחים בסיסיים כגון "File", "Save", "Open", "Folder", "Browser" וכדומה.
4. **מערכת הפעלה ותוכנות אופיס**: ההדגמות בקורס יתבצעו באמצעות מערכת ההפעלה Windows ותוכנות Microsoft Office, אך ניתן להשתמש גם במערכות הפעלה ותוכנות מקבילות אחרות, כמו OpenOffice או מערכות הפעלה אחרות.


---


### קישורים

1. בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.

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

קורס יסודות השימוש במחשב

![קורס טכנולוגיות אינטרנט](/images/articles/iw/technology/coding-for-kids-14/1.jpg)

---

השיעור בבנייה, תודה על הסבלנות!

---


### קישורים

1. בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.

איך לעבוד עם נתונים בפורמט JSON, יצירת אובייקטים והמרת נתונים.

שימוש בפורמט JSON ב-JavaScript

![קורס טכנולוגיות אינטרנט](/images/articles/iw/technology/coding-for-kids-20/1.jpg)

---

השיעור בבנייה, תודה על הסבלנות!

---


### קישורים

1. בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.

יצירת אפליקציה קטנה עם דפי HTML מעוצבים, אינטראקציות עם JavaScript ושמירת נתונים ב-localStorage.

בניית אפליקציה קטנה עם HTML, CSS ו-JavaScript

![קורס טכנולוגיות אינטרנט](/images/articles/iw/technology/coding-for-kids-16/1.jpg)

---

השיעור בבנייה, תודה על הסבלנות!

---


### קישורים

1. בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.

יצירת אפקטים מיוחדים עם מעברים (transitions) ואנימציות (animations) ב-CSS.

מעברים ואנימציות ב-CSS

![קורס תכנות לילדים](/images/articles/iw/technology/coding-for-kids-0/1.jpg)

---

## הקדמה לקורס תכנות לילדים

ברוכים הבאים לקורס תכנות לילדים! במהלך הקורס, הילדים יכנסו לעולם התכנות בצורה מהנה ואינטראקטיבית. הקורס נבנה כדי להקנות לילדים את הידע הבסיסי בתכנות, ולתת להם כלים לפיתוח פרויקטים מעשיים משלהם. נתחיל מהבסיס, כמו HTML ו-CSS, ונמשיך לנושאים מתקדמים יותר כמו JavaScript ותכנות משחקים. כל מודול בקורס עוסק בנושא חדש ומסביר איך ניתן להשתמש בו בפרויקטים יצירתיים, מה שמסייע לילדים להבין את העקרונות הבסיסיים של התכנות בצורה חווייתית ומעוררת עניין.

---


## טכנולוגיות אינטרנט

במודול זה נלמד את היסודות של בניית אתרים, מהבסיס ועד עיצובים מתקדמים. נתמקד ביצירת דפי אינטרנט, עיצובם, והוספת אינטראקציות בסיסיות באמצעות HTML, CSS ו-JavaScript. כל שיעור יוביל את הילדים דרך תהליך ההבנה והפיתוח של אלמנטים שונים באתרי אינטרנט.


| מספר | נושא                                 | תיאור קצר                                                                  |
|-----------|-------------------------------------------|---------------------------------------------------------------------------|
| 1         | <a href="../coding-for-kids-1/" target="_blank">**מבוא ל-HTML ובניית דף אינטרנט**</a>           | איך ליצור קובץ HTML פשוט, מה הן תגיות, מבנה בסיסי של דף אינטרנט, ופתיחת הדף בדפדפן. |
| 2         | <a href="../coding-for-kids-2/" target="_blank">**תגיות כותרות ופסקאות**</a>                   | הסבר על תגיות כותרות (`<h1>` - `<h3>`) ופסקאות (`<p>`), ותפקידן בדף אינטרנט. |
| 3         | <a href="../coding-for-kids-3/" target="_blank">**קישורים ותמונות ב-HTML**</a>                 | איך להוסיף קישורים (`<a>`) ותמונות (`<img>`) לדף HTML.                    |
| 4         | <a href="../coding-for-kids-4/" target="_blank">**רשימות וסימונים**</a>                        | יצירת רשימות מסודרות ולא מסודרות (`<ul>`, `<ol>`, `<li>`) ושימוש בהן.     |
| 5         | <a href="../coding-for-kids-5/" target="_blank">**שימוש בתגית `<div>` ו-`<span>`**</a>         | ההבדל בין `<div>` ו-`<span>`, ואיך להשתמש בהן לארגון מבנה הדף.            |
| 6         | <a href="../coding-for-kids-6/" target="_blank">**מבוא לעיצוב עם CSS**</a>                      | הבסיס של CSS: איך לשנות צבעים, גדלים, גופנים, ולהוסיף עיצוב לדף HTML.      |
| 7         | <a href="../coding-for-kids-7/" target="_blank">**עיצוב באמצעות קלאסים ו-id ב-CSS**</a>         | הסבר על ההבדלים בין קלאסים (`class`) ו-id, וכיצד לעצב איתם ב-CSS.           |
| 8         | <a href="../coding-for-kids-8/" target="_blank">**עבודה עם id ב-JavaScript**</a>                | שימוש ב-id כדי לגשת ולשנות אלמנטים עם JavaScript, כולל תרגולים בסיסיים.    |
| 9         | <a href="../coding-for-kids-9/" target="_blank">**מבוא ל-JavaScript והשתלבות בדף HTML**</a>     | איך לשלב JavaScript בדף HTML, כתיבת קוד ראשון והבנת מבני הנתונים הבסיסיים. |
| 10        | <a href="../coding-for-kids-10/" target="_blank">**משתנים והדפסת תוצאות בדפדפן**</a>           | עבודה עם משתנים ב-JavaScript והצגת תוצאות בדפדפן באמצעות `console.log`.    |
| 11        | <a href="../coding-for-kids-11/" target="_blank">**פונקציות והפעלה שלהן בלחיצת כפתור**</a>     | יצירת פונקציות פשוטות ב-JavaScript והפעלתן על ידי לחיצה על כפתורים ב-HTML. |
| 12        | <a href="../coding-for-kids-12/" target="_blank">**תנאים ולולאות ב-JavaScript**</a>            | הבנת תנאים (`if`, `else`) ולולאות (`for`, `while`) לכתיבת לוגיקה פשוטה.   |
| 13        | <a href="../coding-for-kids-13/" target="_blank">**שימוש בקלטים ויצירת טפסים בסיסיים**</a>     | יצירת טפסים וקלטים ב-HTML ועיבוד המידע שהוזן עם JavaScript.               |
| 14        | <a href="../coding-for-kids-14/" target="_blank">**שימוש בפורמט JSON ב-JavaScript**</a>        | איך לעבוד עם נתונים בפורמט JSON, יצירת אובייקטים והמרת נתונים.            |
| 15        | <a href="../coding-for-kids-15/" target="_blank">**עיצוב טפסים ועבודה עם CSS מתקדם**</a>       | עיצוב טפסים, כפתורים ושדות קלט עם CSS מתקדם, כולל הבנת pseudo-classes.     |
| 16        | <a href="../coding-for-kids-16/" target="_blank">**מעברים ואנימציות ב-CSS**</a>                | יצירת אפקטים מיוחדים עם מעברים (`transitions`) ואנימציות (`animations`) ב-CSS. |
| 17        | <a href="../coding-for-kids-17/" target="_blank">**שימוש ב-localStorage לשמירת נתונים**</a>    | שמירת נתונים ב-localStorage, קריאה ועדכון נתונים עבור מצבים כמו שמירת נתוני משתמש. |
| 18        | <a href="../coding-for-kids-18/" target="_blank">**עבודה עם אירועים ב-JavaScript**</a>         | הבנת אירועים ב-JavaScript, כמו קליקים, הקשות מקלדת, ועוד, ושימוש בהם ליצירת אינטראקציות. |
| 19        | <a href="../coding-for-kids-19/" target="_blank">**שליחת נתונים לשרת וקבלת תגובות עם Fetch API**</a> | איך לשלוח נתונים לשרת ולקבל תגובות עם Fetch API, כולל טיפול בהצלחות ובשגיאות. |
| 20        | <a href="../coding-for-kids-20/" target="_blank">**פרויקט מסכם: בניית אפליקציה קטנה עם HTML, CSS ו-JavaScript**</a> | פרויקט מסכם שמחבר את כל מה שנלמד: יצירת אפליקציה קטנה עם דפי HTML מעוצבים, אינטראקציות עם JavaScript ושמירת נתונים ב-localStorage. |


---

## בניית משחק סנייק ב-JavaScript

במודול זה נפתח משחק קלאסי ומוכר - Snake, ונתמקד בתהליך של פיתוח משחקים באמצעות JavaScript. הילדים ילמדו איך לבנות משחק פשוט, לשפר אותו עם תכנים שונים, ולהוסיף אלמנטים חינוכיים ואינטראקטיביים. כל שיעור יוביל את הילדים דרך שלב חדש בפיתוח המשחק, החל מהבסיס ועד לשיפוטים מתקדמים.


| מספר | נושא                                     | תיאור קצר                                                                  |
|-----------|-----------------------------------------------|---------------------------------------------------------------------------|
| 21        | **מבוא למשחק Snake ותכנון הפרויקט**           | היכרות עם המשחק Snake, הבנת החוקים, ותכנון ראשוני של הפרויקט.            |
| 22        | **יצירת קנבס ב-HTML והבנת סביבת המשחק**       | איך להגדיר קנבס (`<canvas>`) ב-HTML שישמש לסביבת המשחק שלנו.             |
| 23        | **היכרות עם קואורדינטות והזזת הנחש**          | הבנת קואורדינטות בקנבס והזזת הנחש על המסך באמצעות JavaScript.             |
| 24        | **בניית נחש בסיסי והפעלת תנועת התחל**         | יצירת הנחש הראשון, קביעת כיוון תנועה והפעלת תנועת התחל.                  |
| 25        | **זיהוי גבולות ומניעת יציאה מהמסך**           | הוספת לוגיקה שמונעת מהנחש לצאת מגבולות הקנבס.                           |
| 26        | **הוספת תפוחים ואכילתם על ידי הנחש**          | יצירת תפוחים אקראיים שהנחש צריך לאכול כדי להגדיל את אורכו.               |
| 27        | **התמודדות עם התנגשויות (עם עצמו ועם גבולות)**| איך להתמודד עם התנגשויות של הנחש עם עצמו ועם הגבולות של הקנבס.           |
| 28        | **שימוש בלולאות לצמיחת הנחש**                 | הוספת קוד להגדלת הנחש כשהוא אוכל תפוח, שימוש בלולאות לעדכון התנועה.     |
| 29        | **הוספת ניקוד ושיפור חווית המשחק**            | יצירת מערכת ניקוד ושיפור חווית המשחק עם גרפיקה נוספת ואפקטים קטנים.       |
| 30        | **עיצוב המשחק עם CSS ושיפור מראה ויזואלי**    | שיפור המראה של המשחק עם CSS: רקע, צבעים, וגופנים שמתאימים לנושא חינוכי. |
| 31        | **הוספת רמות קושי והדרגתיות**                 | הוספת רמות קושי משתנות על ידי הגדלת מהירות הנחש והפחתת זמן לתגובה.       |
| 32        | **הפיכת המשחק לחינוכי: פירות בריאים ותזונה** | שינוי התפוחים לפירות בריאים, והוספת הסברים על תזונה בריאה כפרסים.     |
| 33        | **הוספת קולות ואפקטים לשיפור המשחקיות**      | הוספת סאונד אפקטים וקולות מותאמים, כמו קול של אכילת תפוח או טעות.       |
| 34        | **שמירת הישגים ומעקב אחרי השחקן עם localStorage** | שמירת נתוני הניקוד וההישגים של השחקן ב-localStorage.                     |
| 35        | **עיצוב תפריטים ומסכי סיום/התחלה**           | יצירת תפריט פתיחה, מסך סיום, והודעות מותאמות לשחקן.                      |
| 36        | **שיפור הנגישות והוספת אפשרויות התאמה אישית** | הוספת אפשרויות נגישות והתאמה אישית, כמו שינוי צבעים או רמות קול.         |
| 37        | **הוספת תכנים חינוכיים: מתמטיקה ואותיות**    | הוספת משימות חינוכיות כמו פתרון תרגילי מתמטיקה או זיהוי אותיות במהלך המשחק. |
| 38        | **שיתוף ותחרות עם חברים (רשימות ניקוד אונליין)** | יצירת מערכת לשיתוף ניקוד ותחרות עם חברים בצורה מאובטחת ומעודדת.         |
| 39        | **בדיקות ושיפור ביצועים**                     | איך לבדוק את המשחק, למצוא באגים ולשפר ביצועים כדי להפוך את המשחק לחלק ומהיר יותר. |
| 40        | **פרסום ושיתוף המשחק: יצירת דף אינטרנט נגיש**  | פרסום המשחק באינטרנט, יצירת דף עם קישור לשיתוף והנחיות משחק בסיסיות.     |


---


### קישורים

1. בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.

קורס ללימוד תוכנה לילדים מהבסיס עד לרמה מעשית.

קורס תכנות לילדים

![בניית דף אינטרנט](/images/articles/iw/technology/coding-for-kids-1/1.jpg)

---

נושא מספר 1 ב-<a href="../coding-for-kids-0/" target="_blank">קורס תכנות לילדים</a>.

---

## **שלב 1: מהו מסמך דיגיטלי?**
מסמך דיגיטלי הוא קובץ שמכיל מידע שניתן לקרוא או לערוך באמצעות מחשב או מכשיר דיגיטלי אחר.
מסמך דיגיטלי יכול להיות מסמך טקסט, מצגת, טבלה או כל סוג אחר של קובץ שמכיל נתונים שניתן להציג על מסך דיגיטלי.

## **שלב 2: מהו אינטרנט?**
האינטרנט הוא רשת עולמית שמחברת מחשבים ומכשירים שונים ומאפשרת להם לשתף מידע ולגשת אליו. בזכות האינטרנט, ניתן לשלוח ולשתף מסמכים דיגיטליים בין מחשבים שונים בכל מקום בעולם. 
זהו כלי שמאפשר לנו לגשת לדפי אינטרנט, ולהעביר קבצים במהירות וביעילות.

כדי לראות את המסמכים האלה בצורה קלה וברורה, אנחנו משתמשים בתוכנה שנקראת דפדפן. 
דפדפן (כמו גוגל כרום, פיירפוקס, או ספארי) יודע לתרגם את הקוד והמידע שנשלחים דרך האינטרנט למסכים שאנו יכולים לקרוא ולהבין. 
דפדפנים מציגים את המידע בצורה ויזואלית – כלומר, מסמכים, תמונות, טקסט, וכל מה שמופיע בדפי אינטרנט.

## **שלב 3: מה זה HTML?**
HTML (ראשי תיבות של HyperText Markup Language) היא השפה שבה משתמשים לבניית דפי אינטרנט. אפשר לחשוב על HTML כמו על ערכת לגו לבניית דפים: כל תג HTML הוא כמו לבנה שמבנה את הדף ומעניק לו את הצורה שלו.

## **שלב 4: מה זה קובץ ותיקיה?**
- **קובץ**: זהו יחידת מידע שניתן לשמור על מחשב. קובץ יכול להכיל מגוון סוגים של תוכן, כגון מסמכים, תמונות, שירים ועוד. במקרה של HTML, מדובר בקובץ שמכיל את הקוד של דף האינטרנט שלנו.
- **תיקיה**: תיקיה היא מקום על המחשב שבו נשמרים קבצים בצורה מסודרת. אפשר לחשוב עליה כמו על תיק נייר שמכיל מסמכים שונים. בתוך תיקיה אפשר לשמור קבצים ותיקיות נוספות, מה שעוזר לשמור על סדר וארגון.

## **שלב 5: מה צריך?**
כדי להתחיל לבנות דף אינטרנט, תצטרכו:
- מחשב.
- עורך טקסט (כגון Visual Studio Code, Notepad, או אפילו פנקס רשימות).
- דפדפן אינטרנט (כגון גוגל כרום, פיירפוקס, או ספארי).


## **שלב 6: יצירת קובץ HTML חדש**

עם התוכנה Visual Studio Code אנחנו יכולים ליצור קובץ חדש ולערוך אותו.

1. **פתחו את עורך הטקסט שלכם**: לדוגמה, נפתח את Visual Studio Code. אם אין לכם את התוכנה, אפשר להוריד אותה בחינם מהאתר של <a href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a>.

   ![Visual Studio Code download](/images/articles/iw/technology/coding-for-kids-1/vsdownload.png)

2. **יצירת קובץ חדש**:
   בתוך Visual Studio Code, לחצו על `File` (קובץ) בפינה השמאלית העליונה ואז על `New Text File` (קובץ טקסט חדש). זה יפתח מסמך חדש וריק.

   ![Visual Studio Code - new text file](/images/articles/iw/technology/coding-for-kids-1/2.png)

   זה המסך שתראו:

   ![Visual Studio Code - new text file](/images/articles/iw/technology/coding-for-kids-1/3.png)

3. **שמירת הקובץ כקובץ HTML**:
   לחצו שוב על **File** (קובץ) ואז על **Save As...** (שמירה בשם...).
   ![Visual Studio Code - save as](/images/articles/iw/technology/coding-for-kids-1/4.png)
   
   בחלון שנפתח, בחרו איפה לשמור את הקובץ (כמו למשל על שולחן העבודה).
   אפשר ליצור בכונן `C:` תיקייה בשם `MyWebsite`.
   ![folder](/images/articles/iw/technology/coding-for-kids-1/5.png)

   תנו שם לקובץ שלכם, למשל `index.html`. חשוב לסיים את שם הקובץ עם `.html` כדי שהמחשב יבין שזה דף אינטרנט.
   ![save index.html file](/images/articles/iw/technology/coding-for-kids-1/6.png)

   עכשיו יש לכם קובץ בשם `index.html`
   ![save index.html file](/images/articles/iw/technology/coding-for-kids-1/7.png)

## **שלב 7: כתיבת קוד ה-HTML הראשון שלכם**

בשלב זה נבנה דף אינטרנט שיראה כך:

![דף אינטנרט בדפדפן](/images/articles/iw/technology/coding-for-kids-1/8.png)

לפני שנתחיל לכתוב, נביא הסבר על שיטת הכתיבה שבעזרתה הדפדפן יפרש את הבקשות שלנו.

**מה הן תגיות ב-HTML?**
- **תגיות (Tags)** הן פקודות שמסבירות לדפדפן איך להציג את התוכן בדף אינטרנט.
- כל תגית מתחילה בסימן `<` ומסתיימת בסימן `>`.
- בדרך כלל, תגית פתיחה מגיעה עם תגית סגירה. תגית הסגירה נראית כמעט אותו הדבר, אבל היא כוללת גם קו נטוי (`/`). לדוגמה, `<p>` היא תגית פתיחה לפסקה, ו-`</p>` היא תגית הסגירה שלה.
- כל מה שנמצא בין תגית פתיחה לתגית סגירה הוא התוכן שיוצג בדף.

עכשיו נכתוב קצת קוד HTML בקובץ.

**הסבר על כל חלק בקוד:**

`DOCTYPE`: זוהי הצהרה שאומרת לדפדפן שזהו מסמך HTML5. זהו בעצם החלק שמבהיר למחשב באיזו גירסה של HTML להשתמש.

```html
<!DOCTYPE html>
```

  
`<html>`: תגית זו פותחת את דף ה-HTML שלכם. כל התוכן של הדף יהיה בתוך תגית זו ותגית הסגירה שלה `</html>`.

```html
<!DOCTYPE html>
<html>
</html>
```

`<head>`: זהו החלק של הדף שבו שמים מידע על הדף, כמו הכותרת שמופיעה בלשונית של הדפדפן. התוכן שבין `<head>` ל-`</head>` אינו מוצג ישירות בדף, אלא עוזר לדפדפן להבין דברים על הדף.

```html
<!DOCTYPE html>
<html>
<head>
</head>
</html>
```

`<title>`: התגית הזו מגדירה את הכותרת שמופיעה בחלק העליון של הדפדפן, בלשונית. במקרה שלנו, הכותרת תהיה "הדף הראשון שלי".

```html
<!DOCTYPE html>
<html>
<head>
   <title>הדף הראשון שלי</title>
</head>
</html>
```
  
`<body>`: זה החלק שבו נמצא כל התוכן שנראה בדף, כמו טקסט, תמונות, וקישורים. כל מה שנמצא בין `<body>` ל-`</body>` יוצג על המסך בדפדפן.

```html
<!DOCTYPE html>
<html>
<head>
   <title>הדף הראשון שלי</title>
</head>
<body>
</body>
</html>
```

`<h1>`: זוהי תגית שמסמנת כותרת גדולה, הכותרת הראשית של הדף. במקרה הזה, הכותרת היא "שלום, עולם!". אם רוצים כותרות קטנות יותר, אפשר להשתמש ב-`<h2>`, `<h3>`, וכן הלאה עד `<h6>`.

```html
<!DOCTYPE html>
<html>
<head>
   <title>הדף הראשון שלי</title>
</head>
<body>
   <h1>שלום</h1>
</body>
</html>
```


`<p>`: תגית זו יוצרת פסקה של טקסט. כל מה שנמצא בין `<p>` ל-`</p>` יוצג כפסקה אחת בדף האינטרנט.

```html
<!DOCTYPE html>
<html>
<head>
   <title>הדף הראשון שלי</title>
</head>
<body>
   <h1>שלום</h1>
   <p>זהו דף האינטרנט הראשון שלי.</p>
</body>
</html>
```

**איך נראה קוד HTML עם תגיות:**
- כל תגית מציינת למחשב מהי הפונקציה של התוכן. למשל, `<h1>` אומרת לדפדפן "זהו כותרת ראשית", והדפדפן יציג את הטקסט בגודל גדול ובולט.
- כאשר רוצים לסיים את השימוש בתגית מסוימת, משתמשים בתגית סגירה עם קו נטוי (`/`). זה חשוב כדי שהדפדפן ידע איפה נגמר החלק הזה של הדף.

---

## **שלב 8: פתיחת קובץ ה-HTML בדפדפן אינטרנט**

1. **מצאו את הקובץ שלכם**: לכו למקום שבו שמרתם את הקובץ (למשל, על שולחן העבודה). או בתיקייה `C:/MyWebsite/index.html`
2. **פתחו את הקובץ**: לחצו פעמיים על הקובץ `index.html`. הוא ייפתח אוטומטית בדפדפן האינטרנט שלכם (כמו כרום או פיירפוקס).
3. **תראו את הדף שלכם**: אתם אמורים לראות את דף האינטרנט שלכם עם המילים "שלום" ו"זהו דף האינטרנט הראשון שלי".

הדף שהכנתם כפי שמוצג בדפדפן:

![דף אינטנרט בדפדפן](/images/articles/iw/technology/coding-for-kids-1/8.png)

---

## **שלב 9: ערכו את הדף וראו את השינויים**

1. **חזרו ל-VS Code**: אם הקובץ לא פתוח, פתחו אותו שוב ב-VS Code.
2. **שנו את הטקסט**: נסו לשנות את הכותרת בתוך `<h1>` מ"שלום" ל"ברוכים הבאים".
3. **שמרו את השינויים**:
   - לחצו על **File** (קובץ) ואז על **Save** (שמירה), או פשוט לחצו על **Ctrl + S** במקלדת (או Cmd + S במק).
4. **רעננו את הדפדפן**:
   - חזרו לדפדפן שבו הדף שלכם פתוח.
   - לחצו על כפתור **רענן** או על **F5** במקלדת.
   - עכשיו תראו את השינויים בדף!


![דף אינטנרט בדפדפן](/images/articles/iw/technology/coding-for-kids-1/9.png)

---

## **סיכום קצר**
- יצרתם קובץ בשם `index.html`.
- כתבתם קוד HTML בסיסי כדי ליצור דף אינטרנט.
- פתחתם את הקובץ בדפדפן כדי לראות את הדף.
- ערכתם את הקוד וראיתם את השינויים בדפדפן.

---

תהנו מהלמידה ואל תפחדו לנסות דברים חדשים! ככל שתתרגלו יותר, תהיו טובים יותר. בהצלחה בקידוד! 😊

---

השיעור הבא:

<a href="../coding-for-kids-2/">תגיות כותרות ופסקאות ב-HTML</a>

---


### קישורים

1. <a href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a>

2. בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.

איך ליצור קובץ HTML פשוט, מה הן תגיות, מבנה בסיסי של דף אינטרנט, ופתיחת הדף בדפדפן.

Software