HTML — לימודי תכנות בעברית

מפתח

ברוכים הבאים!

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

למה HTML?

📄 שפת הבסיס לכל דף אינטרנט
🏗️ מגדירה את המבנה והתוכן של דפי וואב
🔗 עובדת יחד עם CSS ו-JavaScript
🌍 סטנדרט אוניברסלי בכל הדפדפנים

📚 מבנה הקורס

חלק א' - יסודות

מספר	נושא	קובץ
1	רקע והיסטוריה	01_background.md
2	מבנה מסמך HTML	02_structure.md
3	תחביר בסיסי	03_syntax.md

חלק ב' - אלמנטים

מספר	נושא	קובץ
4	אלמנטים לטקסט	04_text_elements.md
5	קישורים ותמונות	05_links_images.md
6	רשימות	06_lists.md
7	טבלאות	07_tables.md

חלק ג' - מתקדם

מספר	נושא	קובץ
8	טפסים	08_forms.md
9	אלמנטים סמנטיים	09_semantic.md
10	תכונות (Attributes)	10_attributes.md
11	שיטות עבודה מומלצות	11_best_practices.md

📁 דוגמאות קוד

מספר	נושא	קובץ
1	מבנה בסיסי	01_basic_structure.html
2	אלמנטים לטקסט	02_text_elements.html
3	קישורים ותמונות	03_links_images.html
4	רשימות	04_lists.html
5	טבלאות	05_tables.html
6	טפסים	06_forms.html
7	אלמנטים סמנטיים	07_semantic.html
8	דף שלם	08_complete_page.html

🚀 איך להתחיל?

צעד 1: יצירת קובץ HTML ראשון

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>הדף הראשון שלי</title>
</head>
<body>
    <h1>שלום עולם!</h1>
    <p>זהו הדף הראשון שלי ב-HTML.</p>
</body>
</html>

צעד 2: שמירה ופתיחה

שמור את הקובץ עם סיומת .html (לדוגמה: index.html)
פתח את הקובץ בדפדפן (גרור אותו לחלון הדפדפן)
צפה בתוצאה!

📖 סדר לימוד מומלץ

יום 1: רקע + מבנה + תחביר (פרקים 1-3)
יום 2: טקסט + קישורים + תמונות (פרקים 4-5)
יום 3: רשימות + טבלאות (פרקים 6-7)
יום 4: טפסים (פרק 8)
יום 5: סמנטיקה + תכונות + Best Practices (פרקים 9-11)

📋 נושאים שנכללים

✅ מבנה מסמך HTML בסיסי
✅ תגיות פותחות וסוגרות
✅ כותרות ופסקאות
✅ עיצוב טקסט (bold, italic, underline)
✅ קישורים פנימיים וחיצוניים
✅ הוספת תמונות
✅ רשימות מסודרות ולא מסודרות
✅ יצירת טבלאות
✅ טפסים ואלמנטי קלט
✅ HTML סמנטי (header, nav, main, footer)
✅ תכונות נפוצות (id, class, style)
✅ נגישות (accessibility) בסיסית

🛠️ כלים מומלצים

עורכי קוד

Visual Studio Code - חינמי ופופולרי
Sublime Text
Notepad++

תוספים מומלצים ל-VS Code

Live Server - לרענון אוטומטי
HTML CSS Support
Auto Rename Tag

בהצלחה בלימוד HTML! 🎉

📜 רקע והיסטוריה של HTML

מה זה HTML?

HTML (HyperText Markup Language) היא שפת סימון המשמשת ליצירת מבנה ותוכן של דפי אינטרנט. היא אינה שפת תכנות, אלא שפת סימון שמגדירה את המבנה והמשמעות של התוכן.

HTML = HyperText + Markup + Language

HyperText: טקסט עם קישורים לדפים אחרים
Markup: סימונים (תגיות) שמגדירים את מבנה התוכן
Language: שפה עם כללים וסינטקס מוגדרים

📅 היסטוריה

1989-1991: ההתחלה

טים ברנרס-לי (Tim Berners-Lee) המציא את ה-World Wide Web ב-CERN
יצר את הגרסה הראשונה של HTML עם 18 תגיות בלבד

1995: HTML 2.0

הגרסה הראשונה הרשמית
תמיכה בטפסים

1997: HTML 3.2 ו-4.0

הוספת טבלאות
תמיכה ב-JavaScript
הפרדה בין מבנה (HTML) לעיצוב (CSS)

2000-2008: XHTML

ניסיון לשלב HTML עם XML
כללים מחמירים יותר

2014: HTML5

הגרסה הנוכחית
תמיכה במולטימדיה (audio, video)
אלמנטים סמנטיים חדשים
API-ים חדשים (Canvas, Geolocation, Storage)

🔄 HTML כחלק מה-Web Stack

┌─────────────────────────────────┐
│           JavaScript            │  ← התנהגות ולוגיקה
├─────────────────────────────────┤
│              CSS                │  ← עיצוב ומראה
├─────────────────────────────────┤
│             HTML                │  ← מבנה ותוכן
└─────────────────────────────────┘

שפה	תפקיד	דוגמה
HTML	מבנה ותוכן	"יש כאן כותרת וכפתור"
CSS	עיצוב ומראה	"הכפתור כחול ועגול"
JavaScript	התנהגות	"בלחיצה על הכפתור - הצג הודעה"

🌐 למה HTML חשוב?

בסיס לכל דף אינטרנט - כל אתר מבוסס על HTML
סטנדרט אוניברסלי - עובד בכל הדפדפנים
קל ללמידה - שפה אינטואיטיבית
נגישות - מאפשר גישה למידע לכולם
SEO - מנועי חיפוש קוראים HTML

📝 דוגמה ראשונה

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>הדף הראשון שלי</title>
</head>
<body>
    <h1>שלום עולם!</h1>
    <p>זהו דף ה-HTML הראשון שלי.</p>
</body>
</html>

🔗 משאבים נוספים

→ המשך למדריך הבא: מבנה מסמך HTML

🏗️ מבנה מסמך HTML

מבנה בסיסי

כל מסמך HTML בנוי ממבנה קבוע. להלן התבנית הבסיסית:

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>כותרת הדף</title>
</head>
<body>
    <!-- תוכן הדף כאן -->
</body>
</html>

📋 פירוט הרכיבים

1. `<!DOCTYPE html>`

<!DOCTYPE html>

מה זה: הצהרה שמגדירה את סוג המסמך
מיקום: תמיד בשורה הראשונה
חשיבות: מבטיח שהדפדפן יעבד את הדף במצב סטנדרטי

⚠️ שים לב: זו לא תגית HTML רגילה - זו הצהרה!

2. `<html>`

<html lang="he" dir="rtl">
    ...
</html>

מה זה: האלמנט השורש של המסמך
תכונות חשובות:
lang="he" - שפת הדף (עברית)
dir="rtl" - כיוון הטקסט (ימין לשמאל)

ערך lang	שפה
`he`	עברית
`en`	אנגלית
`ar`	ערבית

3. `<head>`

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>כותרת הדף</title>
    <link rel="stylesheet" href="style.css">
</head>

מה זה: מכיל מידע על הדף (metadata)
התוכן לא מוצג בדף עצמו
מכיל:
הגדרות מטא
כותרת הדף
קישורים לקבצי CSS
קישורים לפונטים
אייקון האתר (favicon)

4. תגיות Meta נפוצות

קידוד תווים

<meta charset="UTF-8">

מאפשר תצוגה של עברית ותווים מיוחדים.

Viewport (לתאימות למובייל)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

מבטיח תצוגה נכונה במכשירים ניידים.

תיאור הדף (SEO)

<meta name="description" content="תיאור קצר של הדף">

מילות מפתח (SEO)

<meta name="keywords" content="html, למידה, מדריך">

מחבר

<meta name="author" content="שם המחבר">

5. `<title>`

<title>כותרת הדף</title>

מה זה: כותרת הדף שמופיעה בלשונית הדפדפן
חשיבות: קריטי ל-SEO
המלצות:
עד 60 תווים
כולל את שם האתר
תיאורית ורלוונטית

6. `<body>`

<body>
    <h1>ברוכים הבאים!</h1>
    <p>זהו התוכן הנראה של הדף.</p>
</body>

מה זה: מכיל את כל התוכן הנראה של הדף
כאן נמצאים: טקסטים, תמונות, קישורים, טפסים וכו'

🔄 סיכום המבנה

<!DOCTYPE html>  ← הצהרה על סוג המסמך
└── <html>       ← אלמנט שורש
    ├── <head>   ← מידע על הדף (לא נראה)
    │   ├── <meta>
    │   └── <title>
    └── <body>   ← תוכן הדף (נראה)
        ├── <h1>
        ├── <p>
        └── ...

📝 דוגמה מלאה

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <!-- קידוד תווים -->
    <meta charset="UTF-8">

    <!-- תאימות למובייל -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- מידע SEO -->
    <meta name="description" content="אתר ללימוד HTML">
    <meta name="author" content="נפי">

    <!-- כותרת הדף -->
    <title>מבוא ל-HTML | האתר שלי</title>

    <!-- קישור ל-CSS -->
    <link rel="stylesheet" href="styles.css">

    <!-- אייקון -->
    <link rel="icon" href="favicon.ico">
</head>
<body>
    <h1>ברוכים הבאים לאתר!</h1>
    <p>כאן תלמדו HTML מאפס.</p>
</body>
</html>

✅ בדיקת הבנה

מה התפקיד של <!DOCTYPE html>?
מה ההבדל בין <head> ל-<body>?
למה חשוב להגדיר charset="UTF-8"?
מה תפקיד תגית <title>?

← חזרה: רקע והיסטוריה | → המשך: תחביר בסיסי

⌨️ תחביר בסיסי

מהי תגית (Tag)?

תגית היא אלמנט בסיסי ב-HTML שמסמן סוג של תוכן. תגיות נכתבות בסוגריים משולשים < >.

<שם-התגית>תוכן</שם-התגית>

📐 מבנה תגית

תגיות עם תוכן (Opening & Closing Tags)

רוב התגיות מורכבות משני חלקים:

<p>זוהי פסקה</p>
 │           │
 │           └── תגית סוגרת (עם /)
 └── תגית פותחת

דוגמאות:

<h1>כותרת ראשית</h1>
<p>פסקה</p>
<strong>טקסט מודגש</strong>
<div>מכולה</div>

תגיות עצמאיות (Self-Closing Tags)

חלק מהתגיות לא דורשות תגית סוגרת:

<br>        <!-- שבירת שורה -->
<hr>        <!-- קו אופקי -->
<img>       <!-- תמונה -->
<input>     <!-- שדה קלט -->
<meta>      <!-- מטא-דאטה -->
<link>      <!-- קישור לקובץ חיצוני -->

💡 טיפ: ב-HTML5 אין צורך לסגור אותן עם /, אבל אפשר:
<br />    
<img />

🏷️ תכונות (Attributes)

תכונות מוסיפות מידע נוסף לתגית:

<תגית תכונה="ערך">תוכן</תגית>

מבנה:

<a href="https://google.com" target="_blank">לחץ כאן</a>
   │     │                   │       │
   │     │                   │       └── ערך התכונה
   │     │                   └── שם התכונה
   │     └── ערך התכונה
   └── שם התכונה

דוגמאות נפוצות:

<!-- קישור -->
<a href="page.html">קישור</a>

<!-- תמונה -->
<img src="image.jpg" alt="תיאור התמונה">

<!-- מזהה וקלאס -->
<div id="main" class="container">תוכן</div>

<!-- סגנון מוטבע -->
<p style="color: blue;">טקסט כחול</p>

📁 קינון (Nesting)

תגיות יכולות להכיל תגיות אחרות בתוכן:

<div>
    <h1>כותרת</h1>
    <p>פסקה עם <strong>טקסט מודגש</strong></p>
</div>

כללי קינון:

✅ נכון - תגיות נסגרות בסדר הפוך לפתיחה:

<div>
    <p>טקסט <strong>מודגש</strong></p>
</div>

❌ שגוי - חפיפה בין תגיות:

<p>טקסט <strong>מודגש</p></strong>

📏 הזחה (Indentation)

הזחה נכונה משפרת קריאות הקוד:

✅ עם הזחה (מומלץ):

<div>
    <header>
        <h1>כותרת</h1>
        <nav>
            <a href="#">קישור 1</a>
            <a href="#">קישור 2</a>
        </nav>
    </header>
</div>

❌ בלי הזחה (קשה לקריאה):

<div><header><h1>כותרת</h1><nav><a href="#">קישור 1</a><a href="#">קישור 2</a></nav></header></div>

💬 הערות (Comments)

הערות לא מוצגות בדפדפן, משמשות לתיעוד:

<!-- זוהי הערה -->

<!-- 
    זוהי הערה
    בכמה שורות
-->

<p>טקסט נראה</p>
<!-- <p>טקסט מוסתר</p> -->

שימושים: - תיעוד קוד - "הסתרה" זמנית של קוד - סימון חלקים בקוד

🔤 רגישות לאותיות

HTML לא רגיש לאותיות גדולות/קטנות, אבל המוסכמה היא לכתוב תגיות באותיות קטנות:

<!-- תקין אבל לא מומלץ -->
<DIV>
    <P>תוכן</P>
</DIV>

<!-- מומלץ -->
<div>
    <p>תוכן</p>
</div>

📌 ריווחים ושורות ריקות

HTML מתעלם מריווחים מרובים ושורות ריקות:

<!-- כל הדוגמאות הבאות יציגו אותו דבר -->

<p>שלום    עולם</p>

<p>שלום 
   עולם</p>

<p>שלום עולם</p>

תוצאה: שלום עולם

💡 טיפ: כדי ליצור שורה חדשה, השתמש ב-<br>

🔣 תווים מיוחדים (HTML Entities)

תווים מסוימים דורשים קידוד מיוחד:

תו	קוד	שם
`<`	`<`	פחות מ
`>`	`>`	גדול מ
`&`	`&`	אמפרסנד
`"`	`"`	מרכאות
רווח (לא נשבר)	` `	Non-breaking space
©	`©`	זכויות יוצרים
®	`®`	סימן רשום
♥	`&hearts;`	לב

דוגמה:

<p>5 &lt; 10 &amp;&amp; 10 &gt; 5</p>
<!-- מציג: 5 < 10 && 10 > 5 -->

✅ סיכום כללי התחביר

כלל	דוגמה
תגיות באותיות קטנות	`<div>` לא `<DIV>`
תכונות עם מרכאות	`class="name"`
סגירת תגיות בסדר הפוך	`<div><p></p></div>`
הזחה של 2-4 רווחים	לכל רמת קינון
שימוש בהערות	`<!-- הערה -->`

📝 תרגול

נסה לזהות את השגיאות בקוד הבא:

<div>
<P class=text>
טקסט עם <strong>הדגשה</P></strong>
<img src="image.jpg">
</DIV>

הצג תשובה

<div>
    <p class="text">
        טקסט עם <strong>הדגשה</strong>
    </p>
    <img src="image.jpg" alt="תיאור">
</div>

**שגיאות שתוקנו:** 1. תגיות גדולות → קטנות 2. חוסר מרכאות בתכונה 3. סדר סגירה שגוי 4. חוסר הזחה 5. חוסר alt בתמונה

← חזרה: מבנה מסמך | → המשך: אלמנטים לטקסט

✍️ אלמנטים לטקסט

כותרות (Headings)

HTML מספק 6 רמות של כותרות, מ-<h1> (הגדולה ביותר) עד <h6> (הקטנה ביותר):

<h1>כותרת ראשית - הכי חשובה</h1>
<h2>כותרת משנית</h2>
<h3>כותרת שלישית</h3>
<h4>כותרת רביעית</h4>
<h5>כותרת חמישית</h5>
<h6>כותרת שישית - הכי פחות חשובה</h6>

כללים: - ✅ רק <h1> אחד בדף (חשוב ל-SEO) - ✅ שמור על היררכיה (אל תדלג מ-h1 ל-h4) - ✅ השתמש לפי משמעות, לא לפי גודל

<!-- ✅ נכון -->
<h1>שם האתר</h1>
<h2>מאמר ראשי</h2>
<h3>נושא משנה</h3>

<!-- ❌ שגוי - דילוג ברמות -->
<h1>כותרת</h1>
<h4>משהו</h4>

פסקאות (Paragraphs)

תגית <p> יוצרת פסקה:

<p>זוהי הפסקה הראשונה. היא מכילה טקסט שמתאר משהו.</p>

<p>זוהי פסקה שנייה. שים לב לרווח האוטומטי בין הפסקאות.</p>

💡 הדפדפן מוסיף רווח אוטומטית לפני ואחרי פסקה.

עיצוב טקסט בסיסי

מודגש (Bold)

<!-- משמעות סמנטית - חשוב -->
<strong>טקסט חשוב מאוד</strong>

<!-- רק מראה - בלי משמעות -->
<b>טקסט מודגש</b>

מתי להשתמש: - <strong> - כשהטקסט באמת חשוב - <b> - רק לעיצוב ויזואלי

נטוי (Italic)

<!-- משמעות סמנטית - הדגשה -->
<em>טקסט מודגש</em>

<!-- רק מראה - בלי משמעות -->
<i>טקסט נטוי</i>

מתי להשתמש: - <em> - להדגשה (emphasis) - <i> - למונחים זרים, שמות ספרים

סימון (Mark)

<p>המילה <mark>חשובה</mark> מסומנת בצהוב.</p>

קו תחתון (Underline)

<p>טקסט עם <u>קו תחתון</u></p>

⚠️ זהירות: קו תחתון עלול להיראות כקישור!

קו חוצה (Strikethrough)

<!-- מחיקה עם משמעות - כבר לא רלוונטי -->
<del>מחיר קודם: 100 ש"ח</del>

<!-- רק מראה -->
<s>טקסט עם קו חוצה</s>

טקסט שהוכנס

<p>המחיר <del>100</del> <ins>80</ins> ש"ח</p>

מציג שינוי מ-100 ל-80.

טקסט קטן וגדול

<p>טקסט רגיל <small>טקסט קטן</small></p>

<p>טקסט רגיל <big>טקסט גדול</big></p>

כתב עילי ותחתי

<!-- כתב עילי - Superscript -->
<p>E = mc<sup>2</sup></p>
<p>הערה<sup>1</sup></p>

<!-- כתב תחתי - Subscript -->
<p>H<sub>2</sub>O</p>
<p>CO<sub>2</sub></p>

שבירת שורה וקו אופקי

שבירת שורה

<p>
    שורה ראשונה<br>
    שורה שנייה<br>
    שורה שלישית
</p>

קו אופקי

<p>קטע ראשון</p>
<hr>
<p>קטע שני</p>

קוד ומקלדת

קוד בשורה

<p>השתמש בפקודה <code>npm install</code> להתקנה.</p>

בלוק קוד

<pre>
<code>
function hello() {
    console.log("שלום!");
}
</code>
</pre>

פלט מחשב

<p>הפקודה מציגה: <samp>Hello World</samp></p>

קלט מקלדת

<p>לחץ <kbd>Ctrl</kbd> + <kbd>C</kbd> להעתקה.</p>

ציטוטים

ציטוט בשורה

<p>כמו שאמר איינשטיין: <q>הדמיון חשוב מהידע</q></p>

ציטוט בלוק

<blockquote>
    <p>הדמיון חשוב יותר מהידע. כי הידע מוגבל, והדמיון מקיף את העולם כולו.</p>
    <footer>— אלברט איינשטיין</footer>
</blockquote>

מקור ציטוט

<blockquote cite="https://example.com/source">
    ציטוט עם מקור
</blockquote>

כתובות ופרטי קשר

<address>
    נכתב על ידי: נפי<br>
    כתובת: רחוב הדוגמה 123<br>
    אימייל: <a href="mailto:[email protected]">[email protected]</a>
</address>

סיכום התגיות

תגית	שימוש	דוגמה
`<h1>` - `<h6>`	כותרות	כותרת דף, כותרת סעיף
`<p>`	פסקה	טקסט רציף
`<strong>`	מודגש (חשוב)	אזהרה
`<em>`	נטוי (הדגשה)	מונח חדש
`<mark>`	סימון צהוב	מילת מפתח
`<u>`	קו תחתון	שם עצם
`<del>`	מחוק	מחיר ישן
`<ins>`	הוסף	מחיר חדש
`<br>`	שבירת שורה	כתובת
`<hr>`	קו אופקי	הפרדה
`<code>`	קוד	שם פונקציה
`<blockquote>`	ציטוט	אמרה

← חזרה: תחביר בסיסי | → המשך: קישורים ותמונות

🔗 קישורים ותמונות

קישורים (Links)

תגית `<a>` (Anchor)

קישורים נוצרים באמצעות תגית <a>:

<a href="כתובת">טקסט הקישור</a>

סוגי קישורים

1. קישור לאתר חיצוני

<a href="https://www.google.com">גוגל</a>

2. קישור לדף פנימי

<a href="about.html">אודות</a>
<a href="pages/contact.html">צור קשר</a>

3. קישור לאימייל

<a href="mailto:[email protected]">שלח אימייל</a>
<a href="mailto:[email protected]?subject=שאלה">שלח אימייל עם נושא</a>

4. קישור לטלפון

<a href="tel:+972501234567">חייג אלינו</a>

5. קישור למקום בדף (עוגן)

<!-- הקישור -->
<a href="#section2">קפוץ לסעיף 2</a>

<!-- היעד -->
<h2 id="section2">סעיף 2</h2>

6. קישור להורדת קובץ

<a href="document.pdf" download>הורד PDF</a>
<a href="image.jpg" download="my-image">הורד תמונה</a>

תכונת `target`

קובעת היכן הקישור ייפתח:

ערך	התנהגות
`_self`	באותו חלון (ברירת מחדל)
`_blank`	בחלון/לשונית חדשה
`_parent`	במסגרת האב
`_top`	במסגרת העליונה

<!-- נפתח באותו חלון -->
<a href="page.html">קישור</a>

<!-- נפתח בלשונית חדשה -->
<a href="https://google.com" target="_blank">גוגל</a>

⚠️ אבטחה: כשמשתמשים ב-target="_blank", מומלץ להוסיף:
<a href="..." target="_blank" rel="noopener noreferrer">קישור</a>

תכונת `title`

מציגה tooltip כשעומדים על הקישור:

<a href="help.html" title="לחץ לעזרה נוספת">עזרה</a>

קישור עם תמונה

<a href="page.html">
    <img src="logo.png" alt="לוגו">
</a>

תמונות (Images)

תגית `<img>`

תמונות נוספות באמצעות תגית <img> (תגית עצמאית):

<img src="נתיב-לתמונה" alt="תיאור התמונה">

תכונות חובה

תכונה	תיאור
`src`	נתיב לקובץ התמונה
`alt`	טקסט חלופי (נגישות + SEO)

<img src="cat.jpg" alt="חתול חמוד ישן על ספה">

תכונות נוספות

<img 
    src="image.jpg" 
    alt="תיאור התמונה"
    width="400"
    height="300"
    title="טקסט כשעומדים על התמונה"
    loading="lazy"
>

תכונה	תיאור
`width`	רוחב בפיקסלים
`height`	גובה בפיקסלים
`title`	tooltip
`loading`	`lazy` לטעינה עצלה

נתיבים לתמונות

נתיב יחסי (Relative Path)

<!-- באותה תיקייה -->
<img src="photo.jpg" alt="...">

<!-- בתת-תיקייה -->
<img src="images/photo.jpg" alt="...">

<!-- תיקייה אחורה -->
<img src="../photo.jpg" alt="...">

נתיב מוחלט (Absolute Path)

<!-- מ-root -->
<img src="/images/photo.jpg" alt="...">

<!-- URL מלא -->
<img src="https://example.com/image.jpg" alt="...">

מבנה תיקיות מומלץ

project/
├── index.html
├── pages/
│   └── about.html
└── images/
    ├── logo.png
    └── photos/
        └── cat.jpg

<!-- מ-index.html -->
<img src="images/logo.png" alt="...">

<!-- מ-pages/about.html -->
<img src="../images/logo.png" alt="...">

פורמטים של תמונות

פורמט	שימוש	יתרונות
JPEG/JPG	תמונות, צילומים	דחיסה טובה
PNG	גרפיקה, שקיפות	איכות גבוהה
GIF	אנימציות	תמיכה באנימציה
SVG	אייקונים, לוגו	וקטורי, מתארגן
WebP	כללי	דחיסה מעולה

תמונה רספונסיבית

עם CSS

<img src="photo.jpg" alt="..." style="max-width: 100%; height: auto;">

עם srcset

<img 
    src="small.jpg"
    srcset="small.jpg 480w,
            medium.jpg 800w,
            large.jpg 1200w"
    sizes="(max-width: 600px) 480px,
           (max-width: 1000px) 800px,
           1200px"
    alt="תמונה רספונסיבית"
>

תגית `<figure>` ו-`<figcaption>`

מקבצת תמונה עם כיתוב:

<figure>
    <img src="sunset.jpg" alt="שקיעה בחוף הים">
    <figcaption>שקיעה מרהיבה בחוף תל אביב, 2024</figcaption>
</figure>

Image Maps (מפות תמונה)

יצירת אזורים לחיצים בתמונה:

<img src="map.jpg" alt="מפה" usemap="#workmap">

<map name="workmap">
    <area 
        shape="rect" 
        coords="34,44,270,350" 
        alt="חדר" 
        href="room.html"
    >
    <area 
        shape="circle" 
        coords="337,300,44" 
        alt="כפתור" 
        href="button.html"
    >
</map>

דוגמה משולבת

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>גלריה</title>
</head>
<body>
    <h1>הגלריה שלי</h1>

    <nav>
        <a href="#photos">לתמונות</a> |
        <a href="#contact">צור קשר</a>
    </nav>

    <section id="photos">
        <h2>תמונות</h2>

        <figure>
            <a href="large/sunset.jpg">
                <img src="thumbnails/sunset.jpg" 
                     alt="שקיעה" 
                     width="200">
            </a>
            <figcaption>שקיעה בחוף</figcaption>
        </figure>
    </section>

    <section id="contact">
        <h2>צור קשר</h2>
        <p>
            <a href="mailto:[email protected]">שלח אימייל</a><br>
            <a href="tel:+972501234567">חייג אלינו</a>
        </p>
    </section>

    <footer>
        <a href="#" title="חזרה למעלה">↑ לראש הדף</a>
    </footer>
</body>
</html>

✅ סיכום

קישורים

תבנית	שימוש
`<a href="url">`	קישור רגיל
`<a href="#id">`	עוגן בדף
`<a href="mailto:">`	אימייל
`<a href="tel:">`	טלפון
`target="_blank"`	לשונית חדשה

תמונות

תבנית	שימוש
`<img src="" alt="">`	תמונה בסיסית
`width` / `height`	גודל
`loading="lazy"`	טעינה עצלה
`<figure>` + `<figcaption>`	תמונה עם כיתוב

← חזרה: אלמנטים לטקסט | → המשך: רשימות

📋 רשימות

סוגי רשימות ב-HTML

HTML מספק שלושה סוגי רשימות: 1. רשימה לא מסודרת (Unordered List) - עם נקודות 2. רשימה מסודרת (Ordered List) - עם מספרים 3. רשימת הגדרות (Definition List) - מונחים והגדרות

1️⃣ רשימה לא מסודרת (`<ul>`)

רשימה עם נקודות (bullets):

<ul>
    <li>פריט ראשון</li>
    <li>פריט שני</li>
    <li>פריט שלישי</li>
</ul>

תוצאה: - פריט ראשון - פריט שני - פריט שלישי

שינוי סגנון הנקודות

באמצעות CSS או תכונת type:

<!-- עיגול מלא (ברירת מחדל) -->
<ul style="list-style-type: disc;">
    <li>פריט</li>
</ul>

<!-- עיגול ריק -->
<ul style="list-style-type: circle;">
    <li>פריט</li>
</ul>

<!-- ריבוע -->
<ul style="list-style-type: square;">
    <li>פריט</li>
</ul>

<!-- ללא סימון -->
<ul style="list-style-type: none;">
    <li>פריט</li>
</ul>

2️⃣ רשימה מסודרת (`<ol>`)

רשימה עם מספרים:

<ol>
    <li>צעד ראשון</li>
    <li>צעד שני</li>
    <li>צעד שלישי</li>
</ol>

תוצאה: 1. צעד ראשון 2. צעד שני 3. צעד שלישי

תכונות של `<ol>`

תכונה	תיאור	דוגמה
`type`	סוג המספור	`1`, `A`, `a`, `I`, `i`
`start`	מספר התחלה	`start="5"`
`reversed`	סדר הפוך	`reversed`

<!-- אותיות גדולות -->
<ol type="A">
    <li>פריט A</li>
    <li>פריט B</li>
</ol>

<!-- אותיות קטנות -->
<ol type="a">
    <li>פריט a</li>
    <li>פריט b</li>
</ol>

<!-- ספרות רומיות גדולות -->
<ol type="I">
    <li>פריט I</li>
    <li>פריט II</li>
</ol>

<!-- ספרות רומיות קטנות -->
<ol type="i">
    <li>פריט i</li>
    <li>פריט ii</li>
</ol>

<!-- מתחיל מ-5 -->
<ol start="5">
    <li>פריט (5)</li>
    <li>פריט (6)</li>
</ol>

<!-- סדר הפוך -->
<ol reversed>
    <li>פריט (3)</li>
    <li>פריט (2)</li>
    <li>פריט (1)</li>
</ol>

ערך מותאם לפריט

<ol>
    <li>פריט 1</li>
    <li value="10">פריט 10</li>
    <li>פריט 11</li>
</ol>

3️⃣ רשימת הגדרות (`<dl>`)

לזוגות של מונח והגדרה:

<dl>
    <dt>HTML</dt>
    <dd>שפת סימון ליצירת מבנה דפי אינטרנט</dd>

    <dt>CSS</dt>
    <dd>שפת סגנון לעיצוב דפי אינטרנט</dd>

    <dt>JavaScript</dt>
    <dd>שפת תכנות להוספת אינטראקטיביות</dd>
</dl>

תגית	משמעות
`<dl>`	Definition List - הרשימה עצמה
`<dt>`	Definition Term - המונח
`<dd>`	Definition Description - ההגדרה

מונח עם מספר הגדרות

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dd>שפת סימון לאינטרנט</dd>
</dl>

🔄 רשימות מקוננות

ניתן לקנן רשימות בתוך רשימות:

<ul>
    <li>פירות
        <ul>
            <li>תפוח</li>
            <li>בננה</li>
            <li>תפוז</li>
        </ul>
    </li>
    <li>ירקות
        <ul>
            <li>מלפפון</li>
            <li>עגבנייה</li>
        </ul>
    </li>
</ul>

תוצאה: - פירות - תפוח - בננה - תפוז - ירקות - מלפפון - עגבנייה

שילוב סוגי רשימות

<ol>
    <li>שלב ראשון
        <ul>
            <li>פעולה א'</li>
            <li>פעולה ב'</li>
        </ul>
    </li>
    <li>שלב שני
        <ul>
            <li>פעולה ג'</li>
            <li>פעולה ד'</li>
        </ul>
    </li>
</ol>

📝 דוגמאות שימוש

תפריט ניווט

<nav>
    <ul>
        <li><a href="/">בית</a></li>
        <li><a href="/about">אודות</a></li>
        <li><a href="/contact">צור קשר</a></li>
    </ul>
</nav>

רשימת משימות

<h3>רשימת קניות</h3>
<ul>
    <li>חלב</li>
    <li>לחם</li>
    <li>ביצים</li>
</ul>

הוראות מתכון

<h3>איך להכין קפה</h3>
<ol>
    <li>מחממים מים</li>
    <li>מוסיפים כפית קפה</li>
    <li>מוזגים את המים</li>
    <li>מוסיפים סוכר לפי הטעם</li>
</ol>

מילון מונחים

<h3>מילון תכנות</h3>
<dl>
    <dt>Variable</dt>
    <dd>משתנה - מקום לאחסון נתונים</dd>

    <dt>Function</dt>
    <dd>פונקציה - בלוק קוד שניתן לקרוא לו</dd>

    <dt>Loop</dt>
    <dd>לולאה - ביצוע קוד מספר פעמים</dd>
</dl>

✅ סיכום

תגית	סוג	שימוש
`<ul>`	לא מסודרת	רשימה עם נקודות
`<ol>`	מסודרת	רשימה ממוספרת
`<li>`	פריט	פריט ברשימה
`<dl>`	הגדרות	מונחים והסברים
`<dt>`	מונח	שם המונח
`<dd>`	הגדרה	הסבר המונח

← חזרה: קישורים ותמונות | → המשך: טבלאות

📊 טבלאות

מבנה בסיסי

טבלאות ב-HTML מורכבות מתגיות מקוננות:

<table>
    <tr>
        <th>כותרת 1</th>
        <th>כותרת 2</th>
    </tr>
    <tr>
        <td>תא 1</td>
        <td>תא 2</td>
    </tr>
</table>

תגית	משמעות
`<table>`	הטבלה עצמה
`<tr>`	Table Row - שורה
`<th>`	Table Header - כותרת עמודה
`<td>`	Table Data - תא רגיל

📋 דוגמה בסיסית

<table>
    <tr>
        <th>שם</th>
        <th>גיל</th>
        <th>עיר</th>
    </tr>
    <tr>
        <td>דני</td>
        <td>25</td>
        <td>תל אביב</td>
    </tr>
    <tr>
        <td>שרה</td>
        <td>30</td>
        <td>ירושלים</td>
    </tr>
</table>

תוצאה:

שם	גיל	עיר
דני	25	תל אביב
שרה	30	ירושלים

🏷️ חלקי טבלה מתקדמים

`<thead>`, `<tbody>`, `<tfoot>`

מבנה סמנטי לחלקי הטבלה:

<table>
    <!-- ראש הטבלה -->
    <thead>
        <tr>
            <th>מוצר</th>
            <th>מחיר</th>
        </tr>
    </thead>

    <!-- גוף הטבלה -->
    <tbody>
        <tr>
            <td>חולצה</td>
            <td>99 ₪</td>
        </tr>
        <tr>
            <td>מכנסיים</td>
            <td>149 ₪</td>
        </tr>
    </tbody>

    <!-- תחתית הטבלה -->
    <tfoot>
        <tr>
            <th>סה"כ</th>
            <td>248 ₪</td>
        </tr>
    </tfoot>
</table>

יתרונות: - ✅ קריאות קוד טובה יותר - ✅ עיצוב נפרד לכל חלק - ✅ גלילה עם כותרת קבועה - ✅ הדפסה נכונה (כותרת בכל עמוד)

🔗 מיזוג תאים

`colspan` - מיזוג עמודות

<table>
    <tr>
        <th colspan="3">מידע אישי</th>
    </tr>
    <tr>
        <th>שם</th>
        <th>גיל</th>
        <th>עיר</th>
    </tr>
    <tr>
        <td>דני</td>
        <td>25</td>
        <td>תל אביב</td>
    </tr>
</table>

`rowspan` - מיזוג שורות

<table>
    <tr>
        <th>קטגוריה</th>
        <th>מוצר</th>
        <th>מחיר</th>
    </tr>
    <tr>
        <td rowspan="2">ביגוד</td>
        <td>חולצה</td>
        <td>99 ₪</td>
    </tr>
    <tr>
        <td>מכנסיים</td>
        <td>149 ₪</td>
    </tr>
    <tr>
        <td>נעליים</td>
        <td>סניקרס</td>
        <td>299 ₪</td>
    </tr>
</table>

שילוב colspan ו-rowspan

<table>
    <tr>
        <th colspan="2" rowspan="2">לוגו</th>
        <th colspan="3">2024</th>
    </tr>
    <tr>
        <th>ינואר</th>
        <th>פברואר</th>
        <th>מרץ</th>
    </tr>
    <tr>
        <th>מכירות</th>
        <th>דרום</th>
        <td>100</td>
        <td>200</td>
        <td>300</td>
    </tr>
</table>

📝 כותרת טבלה (`<caption>`)

<table>
    <caption>טבלת ציונים - סמסטר א'</caption>
    <tr>
        <th>תלמיד</th>
        <th>ציון</th>
    </tr>
    <tr>
        <td>יוסי</td>
        <td>85</td>
    </tr>
</table>

💡 <caption> חייב להיות מיד אחרי פתיחת <table>

🔧 תכונות טבלה

תכונות ישנות (לא מומלצות)

<!-- לא מומלץ - השתמש ב-CSS במקום -->
<table border="1" cellpadding="10" cellspacing="5" width="100%">

הדרך הנכונה (CSS)

<table class="my-table">
    ...
</table>

<style>
.my-table {
    width: 100%;
    border-collapse: collapse;
}
.my-table th,
.my-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: right;
}
.my-table th {
    background-color: #f0f0f0;
}
</style>

📐 סגנון CSS נפוץ לטבלאות

/* טבלה בסיסית */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

/* תאים */
th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: right;
}

/* כותרות */
th {
    background-color: #4a90d9;
    color: white;
}

/* שורות לסירוגין */
tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* hover */
tbody tr:hover {
    background-color: #f1f1f1;
}

📱 טבלה רספונסיבית

<div style="overflow-x: auto;">
    <table>
        <!-- תוכן הטבלה -->
    </table>
</div>

🎯 נגישות בטבלאות

scope attribute

<table>
    <tr>
        <th scope="col">שם</th>
        <th scope="col">גיל</th>
    </tr>
    <tr>
        <th scope="row">דני</th>
        <td>25</td>
    </tr>
</table>

ערך	משמעות
`col`	כותרת עמודה
`row`	כותרת שורה
`colgroup`	קבוצת עמודות
`rowgroup`	קבוצת שורות

תיאור טבלה

<table aria-describedby="table-desc">
    <caption>ציונים</caption>
    ...
</table>
<p id="table-desc">טבלה זו מציגה את הציונים של כל התלמידים בכיתה.</p>

📝 דוגמה מלאה

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>טבלת מוצרים</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            font-family: Arial, sans-serif;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: right;
        }
        th {
            background-color: #2196F3;
            color: white;
        }
        tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tbody tr:hover {
            background-color: #ddd;
        }
        tfoot {
            font-weight: bold;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <table>
        <caption>רשימת הזמנות - דצמבר 2024</caption>
        <thead>
            <tr>
                <th scope="col">מס'</th>
                <th scope="col">מוצר</th>
                <th scope="col">כמות</th>
                <th scope="col">מחיר</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>מקלדת</td>
                <td>2</td>
                <td>200 ₪</td>
            </tr>
            <tr>
                <td>2</td>
                <td>עכבר</td>
                <td>3</td>
                <td>150 ₪</td>
            </tr>
            <tr>
                <td>3</td>
                <td>מסך</td>
                <td>1</td>
                <td>800 ₪</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">סה"כ</td>
                <td>1,150 ₪</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

✅ סיכום

תגית	תפקיד
`<table>`	מגדיר טבלה
`<tr>`	שורה
`<th>`	תא כותרת
`<td>`	תא נתונים
`<thead>`	ראש הטבלה
`<tbody>`	גוף הטבלה
`<tfoot>`	תחתית הטבלה
`<caption>`	כותרת הטבלה
`colspan`	מיזוג עמודות
`rowspan`	מיזוג שורות

← חזרה: רשימות | → המשך: טפסים

📝 טפסים

מבנה בסיסי

טופס ב-HTML נוצר עם תגית <form>:

<form action="/submit" method="POST">
    <!-- שדות הטופס כאן -->
</form>

תכונות חשובות:

תכונה	תיאור	דוגמה
`action`	לאן לשלוח את הנתונים	`/submit`
`method`	שיטת השליחה	`GET` או `POST`
`enctype`	סוג קידוד	`multipart/form-data`

📥 שדות קלט (`<input>`)

סוגי קלט נפוצים

<!-- טקסט -->
<input type="text" name="username">

<!-- סיסמה -->
<input type="password" name="password">

<!-- אימייל -->
<input type="email" name="email">

<!-- מספר -->
<input type="number" name="age" min="0" max="120">

<!-- טלפון -->
<input type="tel" name="phone">

<!-- URL -->
<input type="url" name="website">

<!-- תאריך -->
<input type="date" name="birthday">

<!-- שעה -->
<input type="time" name="appointment">

<!-- תאריך ושעה -->
<input type="datetime-local" name="meeting">

<!-- צבע -->
<input type="color" name="favorite_color">

<!-- טווח (slider) -->
<input type="range" name="volume" min="0" max="100">

<!-- חיפוש -->
<input type="search" name="query">

<!-- העלאת קובץ -->
<input type="file" name="document">

<!-- קובץ מרובה -->
<input type="file" name="photos" multiple>

<!-- מוסתר -->
<input type="hidden" name="user_id" value="123">

`checkbox` ו-`radio`

<!-- Checkbox - בחירה מרובה -->
<label>
    <input type="checkbox" name="hobby" value="reading"> קריאה
</label>
<label>
    <input type="checkbox" name="hobby" value="sports"> ספורט
</label>
<label>
    <input type="checkbox" name="hobby" value="music" checked> מוזיקה
</label>

<!-- Radio - בחירה אחת -->
<label>
    <input type="radio" name="gender" value="male"> זכר
</label>
<label>
    <input type="radio" name="gender" value="female"> נקבה
</label>
<label>
    <input type="radio" name="gender" value="other"> אחר
</label>

🏷️ תוויות (`<label>`)

שתי דרכים לקישור

<!-- דרך 1: עטיפה -->
<label>
    שם מלא:
    <input type="text" name="fullname">
</label>

<!-- דרך 2: עם for -->
<label for="email">כתובת אימייל:</label>
<input type="email" id="email" name="email">

💡 חשוב: <label> משפר נגישות ושימושיות!

📋 תכונות נפוצות של `<input>`

תכונה	תיאור	דוגמה
`name`	שם השדה (לשרת)	`name="email"`
`id`	מזהה (ל-label)	`id="email"`
`value`	ערך התחלתי	`value="ברירת מחדל"`
`placeholder`	טקסט רמז	`placeholder="הקלד כאן..."`
`required`	שדה חובה	`required`
`disabled`	מושבת	`disabled`
`readonly`	קריאה בלבד	`readonly`
`maxlength`	אורך מקסימלי	`maxlength="50"`
`minlength`	אורך מינימלי	`minlength="3"`
`pattern`	תבנית regex	`pattern="[0-9]{9}"`
`autofocus`	פוקוס אוטומטי	`autofocus`
`autocomplete`	השלמה אוטומטית	`autocomplete="off"`

<input 
    type="text" 
    name="username"
    id="username"
    placeholder="שם משתמש"
    required
    minlength="3"
    maxlength="20"
    pattern="[a-zA-Z0-9_]+"
    autofocus
>

📄 שדות נוספים

`<textarea>` - טקסט ארוך

<label for="message">הודעה:</label>
<textarea 
    id="message" 
    name="message" 
    rows="5" 
    cols="40"
    placeholder="כתוב כאן את ההודעה..."
    required
></textarea>

`<select>` - רשימה נפתחת

<label for="city">עיר:</label>
<select id="city" name="city" required>
    <option value="">בחר עיר</option>
    <option value="tlv">תל אביב</option>
    <option value="jlm">ירושלים</option>
    <option value="hfa" selected>חיפה</option>
</select>

קבוצות אפשרויות

<select name="car">
    <optgroup label="יפניות">
        <option value="toyota">טויוטה</option>
        <option value="honda">הונדה</option>
    </optgroup>
    <optgroup label="גרמניות">
        <option value="bmw">BMW</option>
        <option value="audi">אודי</option>
    </optgroup>
</select>

בחירה מרובה

<select name="skills" multiple size="4">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
    <option value="react">React</option>
</select>

`<datalist>` - הצעות אוטומטיות

<label for="browser">דפדפן אהוב:</label>
<input list="browsers" id="browser" name="browser">

<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist>

🔘 כפתורים

<!-- כפתור שליחה -->
<button type="submit">שלח</button>

<!-- כפתור איפוס -->
<button type="reset">נקה טופס</button>

<!-- כפתור רגיל (ל-JavaScript) -->
<button type="button" onclick="alert('נלחץ!')">לחץ עליי</button>

<!-- גם אפשר עם input -->
<input type="submit" value="שלח">
<input type="reset" value="נקה">
<input type="button" value="לחץ">

📦 קבוצת שדות (`<fieldset>`)

<form>
    <fieldset>
        <legend>פרטים אישיים</legend>

        <label for="fname">שם פרטי:</label>
        <input type="text" id="fname" name="fname"><br><br>

        <label for="lname">שם משפחה:</label>
        <input type="text" id="lname" name="lname">
    </fieldset>

    <fieldset>
        <legend>פרטי התקשרות</legend>

        <label for="email">אימייל:</label>
        <input type="email" id="email" name="email"><br><br>

        <label for="phone">טלפון:</label>
        <input type="tel" id="phone" name="phone">
    </fieldset>

    <button type="submit">שלח</button>
</form>

✅ Validation (אימות)

אימות מובנה

<!-- שדה חובה -->
<input type="text" required>

<!-- תבנית (pattern) -->
<input type="text" pattern="[0-9]{9}" title="9 ספרות">

<!-- אימייל -->
<input type="email">

<!-- מספר עם טווח -->
<input type="number" min="1" max="100">

<!-- אורך טקסט -->
<input type="text" minlength="3" maxlength="20">

הודעות שגיאה מותאמות

<input 
    type="email" 
    required
    oninvalid="this.setCustomValidity('אנא הכנס אימייל תקין')"
    oninput="this.setCustomValidity('')"
>

📝 דוגמה - טופס הרשמה מלא

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>טופס הרשמה</title>
    <style>
        form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
        }
        fieldset {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        legend {
            font-weight: bold;
            padding: 0 10px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input, select, textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            width: 100%;
            padding: 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <form action="/register" method="POST">
        <h2>הרשמה לאתר</h2>

        <fieldset>
            <legend>פרטים אישיים</legend>

            <label for="fullname">שם מלא:</label>
            <input type="text" id="fullname" name="fullname" required>

            <label for="email">אימייל:</label>
            <input type="email" id="email" name="email" required>

            <label for="password">סיסמה:</label>
            <input type="password" id="password" name="password" 
                   minlength="8" required>

            <label for="birthdate">תאריך לידה:</label>
            <input type="date" id="birthdate" name="birthdate">
        </fieldset>

        <fieldset>
            <legend>העדפות</legend>

            <label for="city">עיר:</label>
            <select id="city" name="city">
                <option value="">בחר עיר</option>
                <option value="tlv">תל אביב</option>
                <option value="jlm">ירושלים</option>
                <option value="hfa">חיפה</option>
            </select>

            <label>תחומי עניין:</label>
            <label><input type="checkbox" name="interests" value="tech"> טכנולוגיה</label>
            <label><input type="checkbox" name="interests" value="sports"> ספורט</label>
            <label><input type="checkbox" name="interests" value="music"> מוזיקה</label>
        </fieldset>

        <fieldset>
            <legend>הודעה</legend>

            <label for="message">ספר לנו על עצמך:</label>
            <textarea id="message" name="message" rows="4" 
                      placeholder="כתוב כאן..."></textarea>
        </fieldset>

        <label>
            <input type="checkbox" required>
            אני מסכים/ה לתנאי השימוש
        </label>

        <button type="submit">הרשמה</button>
    </form>
</body>
</html>

✅ סיכום

תגית	תפקיד
`<form>`	מגדיר טופס
`<input>`	שדה קלט
`<label>`	תווית לשדה
`<textarea>`	טקסט ארוך
`<select>`	רשימה נפתחת
`<option>`	אפשרות ברשימה
`<fieldset>`	קבוצת שדות
`<legend>`	כותרת לקבוצה
`<button>`	כפתור

← חזרה: טבלאות | → המשך: אלמנטים סמנטיים

🏛️ אלמנטים סמנטיים

מה זה Semantic HTML?

HTML סמנטי משתמש בתגיות שמתארות את המשמעות של התוכן, לא רק את המראה שלו.

<!-- לא סמנטי -->
<div id="header">...</div>
<div id="main">...</div>
<div id="footer">...</div>

<!-- סמנטי -->
<header>...</header>
<main>...</main>
<footer>...</footer>

🎯 למה זה חשוב?

יתרון	הסבר
נגישות	קורא מסך מבין את מבנה הדף
SEO	מנועי חיפוש מבינים טוב יותר
קריאות	קוד ברור יותר למפתחים

📦 אלמנטים עיקריים

`<header>` - כותרת עליונה

<header>
    <h1>שם האתר</h1>
    <nav>...</nav>
</header>

`<nav>` - ניווט

<nav>
    <a href="/">בית</a>
    <a href="/about">אודות</a>
</nav>

`<main>` - תוכן עיקרי

<main>
    <h1>התוכן העיקרי</h1>
</main>

⚠️ רק <main> אחד בדף!

`<footer>` - תחתית

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

`<aside>` - תוכן צדדי

<aside>
    <h3>מאמרים קשורים</h3>
</aside>

📰 אלמנטים לתוכן

`<article>` - תוכן עצמאי

<article>
    <h2>כותרת המאמר</h2>
    <p>תוכן המאמר...</p>
</article>

`<section>` - סעיף

<section>
    <h2>נושא</h2>
    <p>תוכן...</p>
</section>

`<figure>` + `<figcaption>`

<figure>
    <img src="chart.png" alt="תרשים">
    <figcaption>תרשים מכירות</figcaption>
</figure>

`<time>` - תאריך

<time datetime="2024-12-25">25 בדצמבר</time>

`<details>` + `<summary>`

<details>
    <summary>לחץ לפרטים</summary>
    <p>תוכן מוסתר...</p>
</details>

🗂️ מבנה דף

<header>
    <nav>...</nav>
</header>
<main>
    <article>
        <section>...</section>
    </article>
    <aside>...</aside>
</main>
<footer>...</footer>

← חזרה: טפסים | → המשך: תכונות

🏷️ תכונות (Attributes)

מה זה Attributes?

תכונות מוסיפות מידע נוסף לאלמנטים:

<תגית תכונה="ערך">תוכן</תגית>

דוגמה:

<a href="https://google.com" target="_blank">גוגל</a>

🌐 תכונות גלובליות

תכונות שעובדות על כל האלמנטים:

`id` - מזהה ייחודי

<div id="main-content">תוכן</div>

- ייחודי בכל הדף - משמש לקישורים, CSS, JavaScript

`class` - קלאס

<p class="highlight important">טקסט</p>

- ניתן לחזור על אותו קלאס - מספר קלאסים מופרדים ברווח

`style` - סגנון inline

<p style="color: blue; font-size: 18px;">טקסט כחול</p>

`title` - Tooltip

<abbr title="HyperText Markup Language">HTML</abbr>

`hidden` - הסתרה

<div hidden>אלמנט מוסתר</div>

`lang` - שפה

<p lang="en">This is English</p>

`dir` - כיוון

<p dir="rtl">עברית מימין לשמאל</p>
<p dir="ltr">English left to right</p>

`tabindex` - סדר Tab

<input tabindex="1">
<input tabindex="2">

📊 תכונות Data (data-*)

תכונות מותאמות אישית:

<div 
    data-user-id="123" 
    data-role="admin"
    data-created="2024-12-15"
>
    מידע משתמש
</div>

גישה ב-JavaScript:

const div = document.querySelector('div');
console.log(div.dataset.userId);  // "123"
console.log(div.dataset.role);    // "admin"

♿ תכונות נגישות (ARIA)

`role` - תפקיד

<div role="navigation">תפריט</div>
<div role="button">כפתור</div>

`aria-label` - תיאור

<button aria-label="סגור חלון">X</button>

`aria-hidden` - הסתרה מקורא מסך

<span aria-hidden="true">🎉</span>

`aria-describedby` - קישור להסבר

<input aria-describedby="help-text">
<p id="help-text">הכנס 9 ספרות</p>

📝 סיכום

תכונה	שימוש
`id`	מזהה ייחודי
`class`	קלאס לעיצוב
`style`	CSS inline
`title`	tooltip
`data-*`	נתונים מותאמים
`aria-*`	נגישות

← חזרה: אלמנטים סמנטיים | → המשך: שיטות עבודה מומלצות

✨ שיטות עבודה מומלצות

📝 קונבנציות קוד

תגיות באותיות קטנות

<!-- ✅ נכון -->
<div>
    <p>תוכן</p>
</div>

<!-- ❌ שגוי -->
<DIV>
    <P>תוכן</P>
</DIV>

מרכאות לתכונות

<!-- ✅ נכון -->
<a href="page.html">קישור</a>

<!-- ❌ שגוי -->
<a href=page.html>קישור</a>

הזחה עקבית

השתמש ב-2 או 4 רווחים לכל רמה.

סגירת תגיות בסדר הפוך

<!-- ✅ נכון -->
<div><p><strong>טקסט</strong></p></div>

<!-- ❌ שגוי -->
<div><p><strong>טקסט</p></strong></div>

♿ נגישות (Accessibility)

alt לתמונות

<img src="dog.jpg" alt="כלב חום רץ בפארק">

label לשדות

<label for="email">אימייל:</label>
<input type="email" id="email" name="email">

מבנה כותרות נכון

רק <h1> אחד בדף
לא לדלג על רמות

ניגודיות צבעים

וודא טקסט קריא על הרקע.

🔍 SEO בסיסי

Title ייחודי לכל דף

<title>מדריך HTML | האתר שלי</title>

Meta Description

<meta name="description" content="תיאור קצר של הדף">

כותרות משמעותיות

השתמש בכותרות לתוכן, לא לסטיילינג.

HTML סמנטי

<article>, <nav>, <main>, <footer>

⚡ ביצועים

טעינה עצלה

<img src="image.jpg" loading="lazy" alt="...">

גדלי תמונה

<img src="photo.jpg" width="400" height="300" alt="...">

CSS ו-JS בסוף

<body>
    ...
    <script src="app.js"></script>
</body>

✅ בדיקות

W3C Validator - תקינות HTML
Lighthouse - ביצועים ונגישות
קורא מסך - בדיקת נגישות

← חזרה: תכונות | → חזרה לתפריט הראשי

מפתח

ברוכים הבאים!

למה HTML?

📚 מבנה הקורס

חלק א' - יסודות

חלק ב' - אלמנטים

חלק ג' - מתקדם

📁 דוגמאות קוד

🚀 איך להתחיל?

צעד 1: יצירת קובץ HTML ראשון

צעד 2: שמירה ופתיחה

📖 סדר לימוד מומלץ

📋 נושאים שנכללים

🛠️ כלים מומלצים

עורכי קוד

תוספים מומלצים ל-VS Code

📜 רקע והיסטוריה של HTML

מה זה HTML?

📅 היסטוריה

1989-1991: ההתחלה

1995: HTML 2.0

1997: HTML 3.2 ו-4.0

2000-2008: XHTML

2014: HTML5

🔄 HTML כחלק מה-Web Stack

🌐 למה HTML חשוב?

📝 דוגמה ראשונה

🔗 משאבים נוספים

🏗️ מבנה מסמך HTML

מבנה בסיסי

📋 פירוט הרכיבים

1. <!DOCTYPE html>

2. <html>

3. <head>

4. תגיות Meta נפוצות

קידוד תווים

Viewport (לתאימות למובייל)

תיאור הדף (SEO)

מילות מפתח (SEO)

מחבר

5. <title>

6. <body>

🔄 סיכום המבנה

📝 דוגמה מלאה

✅ בדיקת הבנה

⌨️ תחביר בסיסי

מהי תגית (Tag)?

📐 מבנה תגית

תגיות עם תוכן (Opening & Closing Tags)

תגיות עצמאיות (Self-Closing Tags)

🏷️ תכונות (Attributes)

📁 קינון (Nesting)

📏 הזחה (Indentation)

💬 הערות (Comments)

🔤 רגישות לאותיות

📌 ריווחים ושורות ריקות

🔣 תווים מיוחדים (HTML Entities)

✅ סיכום כללי התחביר

📝 תרגול

✍️ אלמנטים לטקסט

כותרות (Headings)

פסקאות (Paragraphs)

עיצוב טקסט בסיסי

מודגש (Bold)

נטוי (Italic)

סימון (Mark)

קו תחתון (Underline)

קו חוצה (Strikethrough)

טקסט שהוכנס

טקסט קטן וגדול

כתב עילי ותחתי

שבירת שורה וקו אופקי

שבירת שורה

קו אופקי

קוד ומקלדת

קוד בשורה

בלוק קוד

פלט מחשב

קלט מקלדת

ציטוטים

1. `<!DOCTYPE html>`

2. `<html>`

3. `<head>`

5. `<title>`

6. `<body>`

תגית `<a>` (Anchor)

תכונת `target`

תכונת `title`

תגית `<img>`

תגית `<figure>` ו-`<figcaption>`

1️⃣ רשימה לא מסודרת (`<ul>`)

2️⃣ רשימה מסודרת (`<ol>`)

תכונות של `<ol>`

3️⃣ רשימת הגדרות (`<dl>`)

`<thead>`, `<tbody>`, `<tfoot>`

`colspan` - מיזוג עמודות

`rowspan` - מיזוג שורות

📝 כותרת טבלה (`<caption>`)