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

הקדמה¶

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

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

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

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

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

<!DOCTYPE html>
<html>
    <head>
        <title>My First Page</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>This is my first page in HTML.</p>
    </body>
</html>

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

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

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

כותרות (Headings)¶

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

<h1>Main Heading</h1>
<h2>Secondary Heading</h2>
<h3>Third Heading</h3>
<h4>Fourth Heading</h4>
<h5>Fifth Heading</h5>
<h6>Sixth Heading</h6>

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

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

<p>This is text inside a paragraph.</p>
<hr> <!-- horizontal rule -->
<p>Another paragraph after the horizontal rule.</p>

קישורים (Links)¶

<a href="https://www.example.com">Click here to visit the site</a>

תמונות¶

<img src="image.jpg" alt="Image description" width="300">

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

רשימות¶

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

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Strawberry</li>
</ul>

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

<ol>
    <li>Step one</li>
    <li>Step two</li>
    <li>Step three</li>
</ol>

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

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

<form action="submit.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <br>
    <input type="submit" value="Send">
</form>

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

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

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

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

יצירת טבלה¶

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Dan</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Ruth</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("Hello World!");
    }
</script>
<button onclick="sayHello()">Click here</button>

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