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

0 תוצאות
חזרה לקורס 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> ולראות את התוצאה בשידור חי.

✍️ עיצוב טקסט

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

תגי טקסט
תג תיאור
<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>.

📋 רשימות

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

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

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

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

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

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

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

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

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

📬 טפסים (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">.

📊 טבלאות

משמשות להצגת נתונים טבלאיים (שורות ועמודות).

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

נסו להוסיף עמודה (<th> בכותרת ו-<td> בכל שורה) עבור "מייל".

🏛️ HTML סמנטי

שימוש בתגים שמתארים את *משמעות* התוכן, לא רק את המראה שלו. זה קריטי לנגישות (SEO) ולמנועי חיפוש.

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

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

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

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

תגים אלו מספקים פונקציונליות מובנית בדפדפן, משפרים נגישות ומהווים את הבסיס ל-Web Components.

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

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

נסו ללחוץ על "לחץ לפתיחה". זוהי התנהגות מובנית של <details> ו-<summary>. נסו גם להקליד "ג" בשדה החיפוש.

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

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

תפיסת "קופסאות בתוך קופסאות"

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

  • הקופסה הגדולה ביותר: <body>.
  • קופסאות ראשיות (שלד): <header>, <main>, <footer>. אלו מגדירות את האזורים הראשיים של הדף.
  • קופסאות עיצוב (קונטיינרים): לרוב <div>-ים עם class. למשל, <div class="container"> שמרכז את כל התוכן למרכז הדף.
  • קופסאות תוכן: <section>, <article>, או <div>-ים פשוטים שמקבצים תוכן קשור (כמו "כרטיס מוצר").
  • הקופסאות הקטנות ביותר: <h1>, <p>, <img>, <a>. אלו התוכן עצמו.

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

  1. שלב 1: סקיצה (Wireframe) - לפני שכותבים שורת קוד אחת, ציירו (אפילו על דף נייר) את מבנה הדף. איפה יהיה הלוגו? הניווט? התוכן המרכזי? הסיידבר?
  2. שלב 2: שלד סמנטי - התחילו ב-<body> והוסיפו את התגים הסמנטיים הראשיים: <header>, <main>, ו-<footer>.
  3. שלב 3: הוספת "קונטיינר" (Container) - בתוך כל אזור ראשי (כמו <main>), נהוג להוסיף <div class="container">. תפקידו (בעזרת CSS) הוא לקבוע רוחב מקסימלי ולמרכז את התוכן, כך שהוא לא יימתח על כל המסך במסכים רחבים.
  4. שלב 4: מילוי תוכן - התחילו למלא כל אזור בתוכן האמיתי: הוסיפו <h1>, <p>, <img> וכו'.
  5. שלב 5: קיבוץ (Grouping) - רק אם צריך, השתמשו ב-<div>-ים נוספים כדי לקבץ אלמנטים שצריכים עיצוב משותף (למשל, קבוצת כרטיסים שתרצו לסדר עם Flexbox).

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

כך נראה השילוב בין תגים סמנטיים (למשמעות) לבין div-ים (לעיצוב):

<body>
    <!-- אזור עליון סמנטי -->
    <header>
        <!-- קונטיינר למירכוז וריווח -->
        <div class="container">
            <h1>הלוגו שלי</h1>
            <nav>...</nav>
        </div>
    </header>

    <!-- תוכן מרכזי סמנטי -->
    <main>
        <!-- קונטיינר למירכוז וריווח -->
        <div class="container">
            <h2>כותרת הדף</h2>
            <p>התוכן של הדף...</p>
        </div>
    </main>

    <!-- אזור תחתון סמנטי -->
    <footer>
        <!-- קונטיינר למירכוז וריווח -->
        <div class="container">
            <p>זכויות יוצרים © 2025</p>
        </div>
    </footer>
</body>

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

בחרו תג HTML מהרשימה כדי לראות את המאפיינים (Attributes) הנפוצים והחשובים ביותר שלו.

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