מדריך HTML - HyperText Markup Language

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

פקודות בסיסיות ב-HTML:

<!DOCTYPE html> - הצהרת סוג מסמך

הצהרה זו תמיד ממוקמת בראש מסמך ה-HTML ומיידעת את הדפדפן באיזה תקן HTML להשתמש (HTML5 במקרה זה).

<!DOCTYPE html>
<html> - אלמנט שורש

עוטף את כל תוכן ה-HTML בדף. מאפיין `lang` מגדיר את שפת התוכן.

<html lang="he">
  <!-- תוכן הדף כאן -->
</html>
<head> - מטא-נתונים

מכיל מידע על הדף שאינו מוצג ישירות למשתמש, כמו קידוד תווים, כותרת הדף, וקישורים לקבצי CSS ו-JavaScript חיצוניים.

<head>
  <meta charset="UTF-8">
  <title>שם הדף</title>
</head>
<body> - גוף המסמך

מכיל את כל התוכן הגלוי של דף האינטרנט, כמו טקסט, תמונות, קישורים וטפסים.

<body>
  <p>זהו תוכן שמוצג למשתמש.</p>
</body>
<h1> עד <h6> - כותרות

מגדיר כותרות שונות בגודלן, כאשר <h1> היא החשובה ביותר ו-<h6> היא הפחותה. משמשות לארגון תוכן היררכי.

<h1>כותרת ראשית לדף</h1>
<h3>כותרת משנה בסקשן</h3>
<p> - פסקה

ליצירת פסקאות טקסט רגיל. כל תוכן טקסט שאינו כותרת או רשימה בדרך כלל ייכנס לפסקה.

<p>זוהי פסקה קצרה המכילה מידע כלשהו על הנושא הנלמד.</p>
<a> - קישור

ליצירת קישורים (היפר-קישורים) המפנים לדפים אחרים או לאתרים חיצוניים. המאפיין `href` מגדיר את כתובת היעד.

<a href="https://www.wikipedia.org/" target="_blank">ויקיפדיה</a>
<img> - תמונה

להצגת תמונות. מאפיין `src` מציין את נתיב התמונה, ו-`alt` מספק טקסט חלופי חשוב לנגישות.

<img src="https://placehold.co/300x200/4CAF50/ffffff?text=תמונה+ירוקה" alt="תמונה ירוקה מלבנית">
<ul>, <ol>, <li> - רשימות

ליצירת רשימות. <ul> (לא ממוספרת) ו-<ol> (ממוספרת) מכילות פריטים <li>.

<ul>
  <li>פריט ראשון</li>
  <li>פריט שני</li>
</ul>
<div> - גוש כללי

תגית נפוצה המשמשת כמיכל (container) לאלמנטים אחרים. אין לה משמעות סמנטית כשלעצמה, ומשמשת בעיקר לעיצוב באמצעות CSS.

<div style="background-color: #444; padding: 10px; border-radius: 5px;">
  <p>תוכן בתוך DIV.</p>
</div>
<span> - טווח טקסט פנימי

אלמנט קובי (inline) המשמש לסימון קטע טקסט קטן בתוך פסקה או כותרת לצורך עיצוב או סקריפטינג, ללא שבירת שורה.

<p>זהו טקסט עם <span style="color: yellow; font-weight: bold;">קטע מודגש</span> בתוכו.</p>
<input> - שדה קלט

ליצירת שדה קלט בטופס. המאפיין `type` מגדיר את סוג הקלט (text, password, email, number, checkbox ועוד).

<label for="username">שם משתמש:</label>
<input type="text" id="username" name="username" placeholder="הקלד כאן" style="background-color: #555; border: 1px solid #777; color: white; padding: 8px; border-radius: 4px;">
<button> - כפתור

ליצירת כפתור שניתן ללחוץ עליו כדי להפעיל פעולה ב-JavaScript או לשלוח טופס.

<button type="button" onclick="alert('נלחץ!')" style="background-color: #04AA6D; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer;">לחץ עלי</button>
<form> - טופס

ליצירת טופס אינטראקטיבי לקבלת קלט ממשתמשים.

<form action="/submit-form" method="post">
  <label for="email_form" style="color: #ddd;">אימייל:</label>
  <input type="email" id="email_form" style="background-color: #555; border: 1px solid #777; color: white;">
  <button type="submit" style="background-color: #04AA6D; color: white;">שלח</button>
</form>
<table>, <tr>, <th>, <td> - טבלאות

ליצירת טבלאות נתונים. <table> מכיל <tr> (שורת טבלה), אשר מכילה <th> (כותרת עמודה) או <td> (תא נתונים).

<table border="1" style="width:100%; border-collapse: collapse; background-color: #444; color: #f8f8f8;">
  <tr>
    <th style="padding: 8px; border: 1px solid #666;">שם</th>
    <th style="padding: 8px; border: 1px solid #666;">עיר</th>
  </tr>
  <tr>
    <td style="padding: 8px; border: 1px solid #666;">יוסי</td>
    <td style="padding: 8px; border: 1px solid #666;">תל אביב</td>
  </tr>
</table>
<br> - שבירת שורה

ליצירת שבירת שורה בודדת (מעבר לשורה חדשה) בתוך טקסט.

<p>שורה ראשונה.<br>שורה שנייה.</p>
<hr> - קו הפרדה אופקי

ליצירת קו אופקי המציין הפסקה תמטית בתוכן.

<p>חלק ראשון.</p>
<hr style="border-top: 1px dashed #666; margin: 20px 0;">
<p>חלק שני.</p>
<header>, <footer> - תגיות סמנטיות

תגיות סמנטיות ב-HTML5 שמציינות את אזור הכותרת העליונה ואת אזור הכותרת התחתונה של הדף או סקשן.

<header>
  <h1>לוגו האתר</h1>
</header>
<footer>
  <p>זכויות יוצרים ©</p>
</footer>
<video> - וידאו

להטמעת קבצי וידאו ישירות בדף האינטרנט.

<video width="320" height="240" controls style="border-radius: 8px;">
  <source src="movie.mp4" type="video/mp4">
  הדפדפן שלך אינו תומך בוידאו.
</video>
<link> - קישור למשאב חיצוני (CSS)

לקישור קובץ CSS חיצוני לדף ה-HTML לצורך עיצוב.

<link rel="stylesheet" href="styles.css">
<script> - קישור לקוד JavaScript

להטמעת קוד JavaScript ישירות בדף או לקישור לקובץ JavaScript חיצוני.

<script src="script.js"></script>
<meta> - מטא מידע

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

<meta name="description" content="מדריך שפות תכנות">
<label> - תווית לטופס

מקשרת טקסט לשדה קלט בטופס, משפרת נגישות.

<label for="input_field" style="color: #ddd;">שדה קלט:</label>
<input type="text" id="input_field">
<select>, <option> - רשימת בחירה

ליצירת רשימה נפתחת שבה המשתמש יכול לבחור אפשרויות.

<select id="items" style="background-color: #555; border: 1px solid #777; color: white; padding: 5px; border-radius: 4px;">
  <option value="item1">פריט 1</option>
  <option value="item2">פריט 2</option>
</select>
<textarea> - שדה טקסט רב-שורתי

ליצירת שדה קלט גדול יותר המאפשר הזנת טקסט במספר שורות.

<textarea id="message" rows="3" cols="20" style="background-color: #555; border: 1px solid #777; color: white; padding: 8px; border-radius: 4px;"></textarea>
<!-- --> - הערות

לכתיבת הערות בתוך קוד ה-HTML. הערות אינן מוצגות בדפדפן.

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