מבוא ל-HTML: ההרצאה המלאה למתחילים¶

הקדמה¶

ברוכים הבאים להרצאה על HTML! במפגש הזה נלמד את הבסיס של HTML – שפת התגיות (markup language) המשמשת ליצירת דפי אינטרנט. HTML היא הבסיס לכל אתר אינטרנט, וללא ידע בה אי אפשר לבנות דפים שמופיעים בדפדפן.

את כל הקוד שאני מראה לכם בהרצאה תשימו בקובץ ותריצו עם xampp.

פרק 1: מה זה HTML?¶

שפת HTML (HyperText Markup Language) היא שפת תגיות המשמשת ליצירת מבנה של דף אינטרנט. זוהי לא שפת תכנות, אלא שפה המתארת את מבנה הדף בעזרת תגיות (tags).

דוגמה לדף HTML בסיסי:¶

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

בואו נבין את הקוד:

<!DOCTYPE html> - מציין שהדף משתמש ב-HTML5.
<html> - תגית הפותחת את המסמך.
<head> - מכיל מידע על הדף כמו כותרת וסגנונות.
<title> - קובע את שם הדף שמופיע בלשונית הדפדפן.
<body> - החלק שבו מופיע התוכן של הדף.
<h1> - כותרת ראשית.
<p> - פסקה.

פרק 2: מבנה הדף ותגיות עיקריות¶

כותרות (Headings)¶

שפת HTML מספקת 6 רמות של כותרות:

<h1>כותרת ראשית</h1>
<h2>כותרת משנית</h2>
<h3>כותרת שלישית</h3>
<h4>כותרת רביעית</h4>
<h5>כותרת חמישית</h5>
<h6>כותרת שישית</h6>

כותרות משמשות לארגון תוכן וחשובות גם למנועי חיפוש.

פסקאות וקווי הפרדה¶

<p>זהו טקסט בתוך פסקה.</p>
<hr> <!-- קו הפרדה -->
<p>עוד פסקה אחרי קו ההפרדה.</p>

קישורים (Links)¶

<a href="https://www.example.com">לחץ כאן לביקור באתר</a>

תמונות¶

<img src="image.jpg" alt="תיאור התמונה" width="300">

src - מגדיר את כתובת התמונה.
alt - טקסט חלופי אם התמונה לא נטענת.
width - קובע את הרוחב בפיקסלים.

רשימות¶

רשימה לא מסודרת (Bulleted List):¶

<ul>
    <li>תפוח</li>
    <li>בננה</li>
    <li>תות</li>
</ul>

רשימה מסודרת (Numbered List):¶

<ol>
    <li>שלב ראשון</li>
    <li>שלב שני</li>
    <li>שלב שלישי</li>
</ol>

פרק 3: טפסים וכניסת משתמש¶

טפסים מאפשרים למשתמשים להזין נתונים ולהגיש אותם.

<form action="submit.php" method="post">
    <label for="name">שם:</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">אימייל:</label>
    <input type="email" id="email" name="email" required>
    <br>
    <input type="submit" value="שלח">
</form>

תגיות חשובות בטפסים:

<form> - מגדירה טופס.
<input> - שדה קלט (טקסט, אימייל וכו').
<label> - תווית לשדה קלט.
<submit> - כפתור שליחה.

נקודה חשובה: אחרי שתלחצו על submit, המידע שהוזן בטופס ישלח לכתובת של האתר שלכם לקובץ submit.php (שלא קיים) בבקשת post.
בעתיד נלמד כיצד לכתוב קוד צד שרת, שידע לטפל בבקשות כאלו מהhtml שאנחנו כותבים.

פרק 4: טבלאות ואלמנטים מתקדמים¶

יצירת טבלה¶

<table border="1">
    <tr>
        <th>שם</th>
        <th>גיל</th>
    </tr>
    <tr>
        <td>דני</td>
        <td>25</td>
    </tr>
    <tr>
        <td>רותי</td>
        <td>30</td>
    </tr>
</table>

אלמנטים:

<table> - טבלה.
<tr> - שורה.
<th> - כותרת עמודה.
<td> - תא בטבלה.

פרק 5: HTML, CSS ו-JavaScript¶

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

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

דוגמה לשילוב CSS¶

<style>
    body { background-color: lightblue; }
    h1 { color: darkblue; }
</style>

דוגמה לשילוב JavaScript¶

<script>
    function sayHello() {
        alert("שלום עולם!");
    }
</script>
<button onclick="sayHello()">לחץ כאן</button>

בהרצאות הבאות נלמד על javascript ועל css וכיצד אפשר להעשיר את אתר האינטרנט שלנו.