HTML

תחביר בסיסי

מהי תגית (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)

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

דוגמה:

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

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

תרגול

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

<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>

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