הקדמה ל-HTML

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

מה זה HTML?

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

מבנה בסיסי של דף HTML

        
<!DOCTYPE html>
  <html>
    <head>
      <title>כותרת הדף</title>
    </head>
   <body>
      <h1>שלום עולם!</h1>
      <p>זהו דף ה-HTML הראשון שלי.</p>
    </body>
  </html>

    

הסבר על התגיות:

  • <!DOCTYPE html> - מציינת לדפדפן שהמסמך הוא מסוג HTML5.
  • <html> - תגית שעוטפת את כל התוכן בדף ומציינת שזהו דף HTML.
  • <head> - חלק שמכיל מידע על הדף, כמו כותרת (title) ומטא נתונים.
  • <title> - הכותרת שתופיע בכרטיסיית הדפדפן.
  • <body> - חלק שמכיל את התוכן הראשי של הדף, כמו טקסט, תמונות, קישורים וכו'.
  • <h1> - כותרת ראשית בדף (Heading).
  • <p> - פסקה (Paragraph) של טקסט.

יצירת דף HTML פשוט

שלב 1: פתיחת עורך טקסט

כדי להתחיל, עלינו לפתוח עורך טקסט שבו נכתוב את קוד ה-HTML שלנו. ניתן להשתמש בעורכים כמו Visual Studio Code, Sublime Text או אפילו Notepad פשוט.

אנחנו ממליצים על Visual Studio Code (vscode) אפשר להוריד אותו כאן

שלב 2: כתיבת קוד HTML בסיסי

נכתוב את הקוד הבא בעורך הטקסט שלנו:

        
<!DOCTYPE html>
    <html>
      <head>
        <title>הדף הראשון שלי</title>
     </head>
       <body>
        <h1>ברוכים הבאים לדף הראשון שלי!</h1>
          <p>זהו דף ה-HTML הראשון שלי, ואני לומד כיצד לבנות דפי אינטרנט.</p>
      </body>
    </html>

    

שלב 3: שמירת הקובץ

נשמור את הקובץ עם הסיומת .html. למשל, index.html.

שלב 4: פתיחת הקובץ בדפדפן

נפתח את הקובץ ששמרנו בדפדפן שלנו (Chrome, Firefox, Edge וכו') ונראה את התוצאה.

התוצאה

אם ביצענו את כל השלבים כראוי, נוכל לראות את הכותרת "ברוכים הבאים לדף הראשון שלי!" ואת הפסקה "זהו דף ה-HTML הראשון שלי, ואני לומד כיצד לבנות דפי אינטרנט."

הצלחת? בואו נתחיל

הסבר על תגיות HTML

לחץ על תגית להסבר מלא כולל דוגמאות

שיתוף