המדריך האולטימטיבי ל-HTML

🏛️ מבנה מסמך בסיסי

כל דף HTML מתחיל במבנה בסיסי זה. ה-<head> מכיל מידע על הדף (מטא-דאטה), וה-<body> מכיל את התוכן שמוצג למשתמש.

תגי `<head>` נפוצים

תגי Head

תג	תיאור
`<title>`	כותרת הדף (מופיעה בלשונית הדפדפן).
`<meta>`	מספק מידע על הדף (למשל: קידוד `charset="UTF-8"`, `viewport`).
`<link>`	מקשר קבצים חיצוניים, בעיקר קובץ CSS (עם `rel="stylesheet"`).
`<script>`	מטעין או מכיל קוד JavaScript (עם המאפיין `src` או קוד פנימי).
`<style>`	מכיל קוד CSS פנימי (Internal CSS).

עורך חי: הדף הראשון שלי

נסה לשנות את הטקסט ב-<h1> או ב-<p> ולראות את התוצאה בשידור חי.

<!DOCTYPE html>
<html>
<head>
    <title>הדף שלי</title>
</head>
<body>
    <h1>ברוכים הבאים לאתר שלי</h1>
    <p>זהו עורך HTML חי. נסו לערוך אותי!</p>
</body>
</html>

✍️ עיצוב טקסט

אלו התגים הנפוצים ביותר לעיצוב והבניית טקסט בדף.

תגי טקסט

תג	תיאור
`<h1>` - `<h6>`	כותרות. `<h1>` היא החשובה ביותר, `<h6>` הכי פחות.
`<p>`	פסקה (Paragraph).
`<a>`	קישור (Anchor). דורש מאפיין `href` לכתובת היעד.
`<strong>`	הדגשה חזקה (סמנטי, חשוב). מוצג כבולד.
`<em>`	הדגשה (Emphasis). מוצג כנטוי (Italic).
`<b>`, `<i>`, `<u>`	בולד, נטוי וקו תחתון (ויזואלי בלבד, ללא משמעות סמנטית).
`<br>`	ירידת שורה (Break).
`<hr>`	קו אופקי (Horizontal Rule).
`<code>`	מציג קטע קוד קצר.
`<pre>`	מציג טקסט מעוצב מראש (Preformatted), שומר על רווחים וירידות שורה.

עורך חי: עיצוב טקסט

נסה להוסיף קישור סביב מילה, או לשנות חלק מהטקסט ל-<strong>.

<h1>כותרת ראשית</h1>
<h2>כותרת משנה</h2>
<p>
    זוהי פסקה רגילה.
    אפשר להוסיף <strong>טקסט מודגש</strong>
    וגם <em>טקסט נטוי</em>.
</p>
<p>
    זהו קישור ל-Google:
    <a href="https://www.google.com" target="_blank">לחץ כאן</a>.
</p>
<pre>
<code>
body {
    background-color: #333;
}
</code>
</pre>

📋 רשימות

HTML תומך בשלושה סוגי רשימות עיקריים.

סוגי רשימות

<ul> - רשימה ללא סדר (Unordered List), משתמשת ב-<li> (נקודות).
<ol> - רשימה מסודרת (Ordered List), משתמשת ב-<li> (מספרים).
<dl> - רשימת הגדרות (Description List). משתמשת ב-<dt> (מונח) ו-<dd> (הגדרה).

עורך חי: סוגי רשימות

נסה להוסיף פריט נוסף (<li>) לרשימה הלא מסודרת.

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

<h3>הוראות (ol):</h3>
<ol>
    <li>לערבב קמח וסוכר</li>
    <li>להוסיף ביצים</li>
    <li>לאפות 30 דקות</li>
</ol>

<h3>מונחים (dl):</h3>
<dl>
    <dt>HTML</dt>
    <dd>שפת סימון לבניית דפי אינטרנט.</dd>
    <dt>CSS</dt>
    <dd>שפה לעיצוב דפי אינטרנט.</dd>
</dl>

🖼️ מדיה (תמונות, וידאו, אודיו)

הטמעת אלמנטים ויזואליים וקוליים בדף.

תגי מדיה

תג	תיאור ומאפיינים
`<img>`	תמונה. מאפיינים חובה: `src` (מקור הקובץ) ו-`alt` (טקסט חלופי).
`<video>`	וידאו. מאפיינים נפוצים: `src`, `controls` (מציג פקדים), `autoplay`, `muted`.
`<audio>`	אודיו. מאפיינים נפוצים: `src`, `controls`, `autoplay`.
`<iframe>`	טוען דף אינטרנט אחר בתוך מסגרת (למשל, סרטון יוטיוב או מפה).

עורך חי: הטמעת מדיה

שים לב כיצד התמונה משתמשת ב-URL חיצוני. נסה לשנות את width של התמונה.

<h3>תמונה (img):</h3>
<p>זוהי תמונה מגניבה מגוגל:</p>
<img
    src="https://placehold.co/600x300/0a0a0a/c9a96e?text=My+Image"
    alt="תמונת פלייסהולדר"
    width="300"
>

<h3>וידאו (video):</h3>
<p>(דרוש קובץ וידאו אמיתי כדי לנגן)</p>
<video controls width="300">
    <!--
    <source src="movie.mp4" type="video/mp4">
    -->
    הדפדפן שלך אינו תומך בתג הוידאו.
</video>

<h3>סרטון YouTube מוטמע (iframe):</h3>
<iframe
    width="100%"
    height="315"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
</iframe>

📬 טפסים (Forms)

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

רכיבי טופס

תג	תיאור
`<form>`	העטיפה של כל הטופס. `action` (לאן לשלוח) ו-`method` (איך: GET/POST).
`<label>`	תווית המתארת שדה קלט. מאפיין `for` מקשר אותה ל-`id` של השדה.
`<input>`	התג המרכזי לקלט. המאפיין `type` משנה את התנהגותו.
`<textarea>`	תיבת טקסט רב-שורתי.
`<select>`	רשימת בחירה נפתחת (Dropdown). מכילה תגי `<option>`.
`<button>`	כפתור לחיץ (לרוב לשליחת טופס, `type="submit"`).
`<fieldset>`	קבוצת שדות קשורים (למשל "פרטים אישיים").
`<legend>`	כותרת עבור `<fieldset>`.

עורך חי: טופס יצירת קשר

נסה להוסיף סוג קלט חדש, למשל <input type="date">.

<form action="/submit-form" method="post">
    <fieldset>
        <legend>טופס יצירת קשר</legend>

        <div>
            <label for="name">שם:</label>
            <input type="text" id="name" name="user_name" required>
        </div>

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

        <div>
            <label for="color">צבע אהוב:</label>
            <input type="color" id="color" name="user_color" value="#c9a96e">
        </div>

        <div>
            <label for="msg">הודעה:</label>
            <textarea id="msg" name="user_message">

סיבת הפנייה:

צרף אותי לניוזלטר

תג	תיאור
`<header>`	הכותרת העליונה של הדף או של אזור.
`<nav>`	מכיל את הניווט הראשי של האתר.
`<main>`	התוכן המרכזי והייחודי של הדף.
`<aside>`	תוכן צדדי (סיידבר), פחות קשור לתוכן המרכזי.
`<footer>`	החלק התחתון של הדף (קרדיטים, קישורים וכו').
`<section>`	אזור תוכן כללי (למשל, "אודות", "צור קשר").
`<article>`	קטע תוכן עצמאי (כמו פוסט בבלוג או כתבה).
`<figure>`	עוטף מדיה (כמו תמונה) וקושר אותה לכיתוב.
`<figcaption>`	כיתוב עבור `<figure>`.

תג	תיאור
`<details>`	יוצר "אקורדיון" או אזור תוכן נסתר שניתן לפתוח.
`<summary>`	הכותרת הלחיצה עבור `<details>`. חייב להיות הילד הראשון.
`<dialog>`	יוצר חלון מודאלי (פופאפ) מובנה בדפדפן. נשלט ע"י JavaScript.
`<datalist>`	מספק רשימת הצעות השלמה אוטומטית עבור שדה `<input>`.
`<progress>`	מציג סרגל התקדמות (למשל, להעלאת קובץ).
`<meter>`	מציג מד (כמו עוצמת סיסמה או שימוש בנפח אחסון).
`<template>`	מכיל HTML שאינו מוצג בטעינה, אך ניתן לשכפול ולהשתמש בו ע"י JavaScript.
`<slot>`	משמש בתוך Web Components (עם Shadow DOM) כ"ממלא מקום" לתוכן שמוזרק מבחוץ.

🏛️ מבנה מסמך בסיסי

תגי `<head>` נפוצים

עורך חי: הדף הראשון שלי

✍️ עיצוב טקסט

עורך חי: עיצוב טקסט

📋 רשימות

עורך חי: סוגי רשימות

🖼️ מדיה (תמונות, וידאו, אודיו)

עורך חי: הטמעת מדיה

📬 טפסים (Forms)

עורך חי: טופס יצירת קשר

📊 טבלאות

עורך חי: טבלת נתונים

🏛️ HTML סמנטי

עורך חי: מבנה דף סמנטי

✨ תגים מתקדמים ומודרניים

עורך חי: תגים אינטראקטיביים

🧱 איך לגשת לבניית דף HTML? (אסטרטגיה וטיפים)

תהליך בנייה מומלץ (שלב אחר שלב)

דוגמה: שלד וקונטיינר

🔬 מפקח מאפייני תגים (Tag Inspector)

מאפיינים עבור `<a>`

🏛️ מבנה מסמך בסיסי

תגי <head> נפוצים

עורך חי: הדף הראשון שלי

✍️ עיצוב טקסט

עורך חי: עיצוב טקסט

📋 רשימות

עורך חי: סוגי רשימות

🖼️ מדיה (תמונות, וידאו, אודיו)

עורך חי: הטמעת מדיה

📬 טפסים (Forms)

עורך חי: טופס יצירת קשר

📊 טבלאות

עורך חי: טבלת נתונים

🏛️ HTML סמנטי

עורך חי: מבנה דף סמנטי

✨ תגים מתקדמים ומודרניים

עורך חי: תגים אינטראקטיביים

🧱 איך לגשת לבניית דף HTML? (אסטרטגיה וטיפים)

תהליך בנייה מומלץ (שלב אחר שלב)

דוגמה: שלד וקונטיינר

🔬 מפקח מאפייני תגים (Tag Inspector)

מאפיינים עבור <a>

תגי `<head>` נפוצים

מאפיינים עבור `<a>`