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" - כיוון הטקסט (ימין לשמאל)

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>

בדיקת הבנה

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

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