0.4 הקדמה ל HTML הרצאה

הקדמה ל-HTML¶

עכשיו שסביבת העבודה מוכנה, הגיע הזמן ללמוד את הטכנולוגיה הראשונה - HTML. כל אתר אינטרנט בעולם בנוי על HTML, וזה הדבר הראשון שצריך להבין כדי לבנות אתרים.

מה זה HTML¶

HTML זה קיצור של HyperText Markup Language - שפת סימון של היפרטקסט.

נקודה חשובה: HTML היא לא שפת תכנות. היא שפת סימון (markup language). מה ההבדל?
- שפת תכנות (כמו Python, JavaScript) - כוללת לוגיקה: תנאים, לולאות, פונקציות, משתנים.
- שפת סימון (כמו HTML) - מגדירה מבנה ותוכן. היא אומרת "כאן יש כותרת", "כאן יש פסקה", "כאן יש תמונה" - אבל אין בה לוגיקה.

HTML מגדירה את המבנה של דף אינטרנט. היא אומרת לדפדפן מה יש בדף - אבל לא איך זה נראה (זה CSS) ולא מה קורה כשלוחצים על משהו (זה JavaScript).

היסטוריה קצרה¶

1991 - טים ברנרס-לי (Tim Berners-Lee) המציא את HTML ב-CERN (מעבדת פיזיקה בשוויץ). הוא רצה דרך לשתף מסמכים מדעיים עם קישורים ביניהם.
1995 - HTML 2.0 - הגרסה הראשונה הרשמית.
1997 - HTML 3.2 ו-4.0 - נוספו טבלאות, טפסים ועוד.
2014 - HTML5 - הגרסה הנוכחית. הוסיפה תמיכה בווידאו, אודיו, canvas, אלמנטים סמנטיים ועוד.

כיום כולם משתמשים ב-HTML5, וכשאנחנו אומרים "HTML" אנחנו מתכוונים ל-HTML5.

תגיות - tags¶

HTML בנוי מתגיות (tags). כל תגית מוקפת בסוגריים זוויתיים < > ומגדירה סוג של תוכן.

תגית פותחת וסוגרת¶

רוב התגיות בנויות מתגית פותחת ותגית סוגרת:

<p>This is a paragraph</p>

<p> - תגית פותחת (opening tag)
</p> - תגית סוגרת (closing tag) - שימו לב לסלאש / לפני שם התגית
This is a paragraph - התוכן שבין התגיות

יחד, התגית הפותחת + התוכן + התגית הסוגרת נקראים אלמנט (element).

עוד דוגמאות:

<h1>This is a heading</h1>
<div>This is a div</div>
<button>Click me</button>

תגיות עצמיות סגירה - self-closing tags¶

חלק מהתגיות לא צריכות תגית סוגרת כי אין להן תוכן בפנים:

<br>
<hr>
<img src="photo.jpg" alt="A photo">
<input type="text">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">

<br> - שבירת שורה (line break)
<hr> - קו אופקי (horizontal rule)
<img> - תמונה
<input> - שדה קלט

תגיות אלה נקראות self-closing כי הן סוגרות את עצמן. לפעמים תראו אותן כתובות עם סלאש בסוף כמו <br /> - זה אותו הדבר, שתי הצורות תקינות.

תכונות - attributes¶

לתגיות HTML אפשר להוסיף תכונות (attributes) שנותנות מידע נוסף על האלמנט. תכונות נכתבות בתוך התגית הפותחת:

<tag attribute="value">content</tag>

הנה תכונות נפוצות:

תכונת id¶

מזהה ייחודי לאלמנט. כל id חייב להיות ייחודי בדף - לא יכולים להיות שני אלמנטים עם אותו id.

<h1 id="main-title">Welcome</h1>
<div id="content">Some content here</div>

תכונת class¶

שם קבוצה שאפשר לתת לכמה אלמנטים. בניגוד ל-id, אותו class יכול להופיע על הרבה אלמנטים.

<p class="highlight">This is important</p>
<p class="highlight">This is also important</p>
<p>This is regular</p>

אלמנט יכול לקבל כמה classes, מופרדים ברווח:

<div class="card featured large">content</div>

תכונת style¶

מאפשרת להוסיף CSS ישירות על אלמנט (inline style):

<p style="color: red; font-size: 20px;">Red text</p>

בדרך כלל לא נשתמש ב-style ישירות - נעדיף לכתוב CSS בקובץ נפרד. אבל טוב להכיר.

תכונת src¶

מציינת מקור (source) של משאב חיצוני, כמו תמונה:

<img src="photo.jpg" alt="A nice photo">
<script src="app.js"></script>

תכונת href¶

מציינת כתובת יעד של קישור:

<a href="https://www.google.com">Go to Google</a>
<link rel="stylesheet" href="style.css">

נכיר עוד תכונות רבות בהמשך. העיקרון תמיד אותו הדבר - שם התכונה, סימן שווה, וערך במירכאות.

מבנה מסמך HTML¶

כל מסמך HTML בנוי לפי מבנה קבוע. בואו נראה דוגמה מלאה ונפרק אותה:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>Welcome to my website.</p>
</body>
</html>

הצהרת DOCTYPE¶

<!DOCTYPE html>

השורה הראשונה בכל מסמך HTML. היא אומרת לדפדפן שמדובר במסמך HTML5. זו לא תגית רגילה - היא הצהרה (declaration). תמיד שמים אותה בשורה הראשונה.

תגית html¶

<html lang="en">
    ...
</html>

התגית הראשית שעוטפת את כל התוכן. התכונה lang="en" מציינת את שפת הדף (אנגלית במקרה הזה, he לעברית). כל שאר התגיות נמצאות בתוכה.

חלק ה-head¶

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
</head>

ה-head מכיל מידע על הדף - מידע שהמשתמש לא רואה ישירות על המסך, אבל הדפדפן צריך אותו. בואו נפרק:

<meta charset="UTF-8"> - מגדיר את קידוד התווים. UTF-8 תומך בכמעט כל השפות בעולם, כולל עברית, ערבית, סינית ועוד. תמיד שמים את זה.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - מגדיר שהדף יתאים את עצמו לרוחב המסך של המכשיר. בלי השורה הזו, אתרים נראים מוזר בטלפונים. תמיד שמים את זה.
<title>My First Page</title> - הכותרת של הדף שמופיעה בלשונית של הדפדפן (tab). גם מופיעה בתוצאות חיפוש של גוגל.

עוד דברים שיכולים להיות ב-head:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page</title>

    <!-- link to external CSS file -->
    <link rel="stylesheet" href="style.css">

    <!-- link to external JavaScript file -->
    <script src="app.js"></script>

    <!-- favicon - the small icon in the browser tab -->
    <link rel="icon" href="favicon.ico">

    <!-- description for search engines -->
    <meta name="description" content="This is my awesome website">
</head>

חלק ה-body¶

<body>
    <h1>Hello World!</h1>
    <p>Welcome to my website.</p>
</body>

ה-body מכיל את כל התוכן שהמשתמש רואה על המסך. כל כותרת, פסקה, תמונה, כפתור, טופס - הכל נמצא בתוך ה-body.

הכלל פשוט:
- head = מידע על הדף (metadata) שהמשתמש לא רואה
- body = התוכן שהמשתמש רואה

הזחה ופורמט - indentation¶

הזחה (indentation) היא הרווחים שמוסיפים בתחילת שורה כדי להראות מבנה היררכי. ב-HTML הנוהג הוא להזיח כל אלמנט שנמצא בתוך אלמנט אחר.

דוגמה לקוד עם הזחה נכונה:

<body>
    <div>
        <h1>Title</h1>
        <p>Paragraph</p>
    </div>
</body>

דוגמה לקוד בלי הזחה (קשה לקריאה):

<body>
<div>
<h1>Title</h1>
<p>Paragraph</p>
</div>
</body>

שני הקודים עובדים בדיוק אותו הדבר - הדפדפן לא מתעניין בהזחות. אבל בשביל קריאות הקוד, הזחה נכונה היא הכרחית. שמרו על הזחה של 4 רווחים (או 2 רווחים - העיקר שזה עקבי) לכל רמה של קינון.

Prettier (התוסף שהתקנו) יסדר לכם את ההזחות אוטומטית כששומרים את הקובץ.

הערות - comments¶

לפעמים רוצים להוסיף הערות בקוד - טקסט שהדפדפן מתעלם ממנו. זה שימושי כדי:
- להסביר חלקים מורכבים בקוד
- לסמן אזורים בקוד ("כאן מתחיל הheader", "כאן נגמר הfooter")
- לבטל זמנית אלמנט בלי למחוק אותו

תחביר הערה ב-HTML:

<!-- This is a comment -->

<!--
    This is a multi-line comment.
    The browser ignores everything between the markers.
-->

<h1>Visible heading</h1>
<!-- <p>This paragraph is hidden</p> -->
<p>Visible paragraph</p>

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

ב-VS Code אפשר להפוך שורה להערה עם Ctrl+/ (במקום לכתוב ידנית את ).

הדף הראשון שלנו - דוגמה מלאה¶

בואו נבנה דף HTML שלם עם כל מה שלמדנו:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <!-- Main heading -->
    <h1>Welcome to My First Page</h1>

    <!-- Introduction paragraph -->
    <p>This is my first HTML page. I am learning web development.</p>

    <!-- A second heading -->
    <h2>About Me</h2>
    <p>I am a student learning frontend development.</p>

    <!-- A horizontal line -->
    <hr>

    <!-- Another section -->
    <h2>My Skills</h2>
    <p>I know Python and now I am learning HTML.</p>

    <!-- A button -->
    <button>Click Me</button>
</body>
</html>

צרו קובץ חדש, העתיקו את הקוד, שמרו אותו בתור index.html ופתחו עם Live Server. תראו דף עם כותרות, פסקאות, קו אופקי וכפתור.

בואו נסתכל מה כל חלק עושה:
- <h1> ו-<h2> - כותרות. h1 היא הכותרת הכי גדולה, h2 קצת יותר קטנה. קיימים h1 עד h6.
- <p> - פסקה (paragraph). טקסט רגיל.
- <hr> - קו אופקי שמפריד בין חלקים.
- <button> - כפתור. כרגע הוא לא עושה כלום כשלוחצים - נצטרך JavaScript בשביל זה.
-  - הערות שהדפדפן מתעלם מהן.

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

סיכום¶

HTML היא שפת סימון (לא תכנות) שמגדירה את המבנה של דפי אינטרנט.
HTML בנוי מתגיות (tags) - פותחת וסוגרת, או עצמיות סגירה.
לתגיות יש תכונות (attributes) כמו id, class, src, href.
מסמך HTML בנוי מ-DOCTYPE, תגית html, חלק head (מידע על הדף) וחלק body (התוכן הנראה).
ב-head שמים meta charset, meta viewport, title, קישורים ל-CSS ו-JS.
ב-body שמים את כל התוכן שהמשתמש רואה.
הזחה נכונה חשובה לקריאות הקוד.
הערות ב-HTML נכתבות עם .