לדלג לתוכן

0.4 הקדמה ל HTML פתרון

פתרונות

תרגיל 1: בניית מסמך HTML מאפס

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me</title>
</head>
<body>
    <h1>John Doe</h1>
    <p>I am a student learning web development. I enjoy coding and building websites.</p>

    <h2>My Hobbies</h2>
    <p>I like reading books, playing guitar, and programming in Python.</p>
</body>
</html>

תרגיל 2: שאלות הבנה

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

  2. <!DOCTYPE html> אומרת לדפדפן שמדובר במסמך HTML5. בלעדיה הדפדפן עלול לעבור למצב "quirks mode" שמציג דברים אחרת. היא תמיד חייבת להיות בשורה הראשונה.

  3. ה-head מכיל מידע על הדף (metadata) שהמשתמש לא רואה ישירות: כותרת הלשונית, קידוד תווים, קישורים ל-CSS ו-JS. ה-body מכיל את כל התוכן שהמשתמש רואה על המסך: כותרות, פסקאות, תמונות, כפתורים.

  4. תגית עצמית סגירה היא תגית שלא צריכה תגית סוגרת כי אין לה תוכן בפנים. דוגמאות:

  5. <br> - שבירת שורה
  6. <img src="photo.jpg" alt="photo"> - תמונה
  7. <input type="text"> - שדה קלט
  8. <hr> - קו אופקי

  9. <meta charset="UTF-8"> - מטא-תגית

  10. id הוא מזהה ייחודי - כל id חייב להופיע רק פעם אחת בדף. משתמשים בו כשצריך לזהות אלמנט ספציפי אחד. class הוא שם קבוצה שיכול להופיע על הרבה אלמנטים. משתמשים בו כשרוצים לתת עיצוב או התנהגות זהה לכמה אלמנטים.

  11. <meta charset="UTF-8"> מגדיר את קידוד התווים של הדף. UTF-8 תומך בכמעט כל השפות בעולם. בלי זה, תווים בעברית, ערבית, סינית ועוד עלולים להופיע כג'יבריש.

  12. <meta name="viewport" content="width=device-width, initial-scale=1.0"> אומרת לדפדפן בטלפון להתאים את רוחב הדף לרוחב המסך של המכשיר. בלי זה, אתרים נראים כאילו הם מוצגים על מסך מחשב ואז מוקטנים - קטן ולא קריא.

תרגיל 3: זיהוי שגיאות

הנה השגיאות ותיקונן:

  1. חסר DOCTYPE - צריך להוסיף <!DOCTYPE html> בשורה הראשונה.
  2. תגית title סוגרת לא נכונה - כתוב <title> במקום </title>. צריך לתקן ל-</title>.
  3. תגית h1 נסגרת עם h2 - כתוב <h1>Welcome</h2>. צריך לתקן ל-<h1>Welcome</h1>.
  4. תגית p בלי סוגרת - <p>This is a paragraph חסרה </p> בסוף.
  5. ערך class בלי מירכאות - כתוב class=highlight במקום class="highlight".
  6. תגית body סוגרת בלי סלאש - כתוב <body> במקום </body>.

הקוד המתוקן:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Welcome</h1>
    <p>This is a paragraph</p>
    <img src="photo.jpg" alt="photo">
    <p class="highlight">Important text</p>
</body>
</html>

תרגיל 4: הוספת הערות

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Restaurant Menu</title>
</head>
<body>
    <!-- Restaurant name and welcome message -->
    <h1>The Best Restaurant</h1>
    <p>Welcome to our restaurant. We serve the best food in town.</p>

    <!-- Appetizers section -->
    <h2>Appetizers</h2>
    <p>Soup of the day - $5</p>
    <p>Salad - $7</p>

    <!-- Main courses section -->
    <h2>Main Courses</h2>
    <p>Steak - $25</p>
    <p>Pasta - $15</p>
    <p>Fish - $20</p>

    <!-- Desserts section -->
    <h2>Desserts</h2>
    <p>Ice cream - $6</p>
    <p>Cake - $8</p>

    <!-- Separator line and opening hours -->
    <hr>
    <p>Open daily from 10:00 to 22:00</p>
</body>
</html>

תרגיל 5: בניית דף עם תכונות

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attributes Practice</title>
</head>
<body>
    <h1 id="main-title">Attributes Practice</h1>

    <p class="paragraph">This is the first paragraph.</p>
    <p class="paragraph">This is the second paragraph.</p>
    <p class="paragraph">This is the third paragraph.</p>
    <p class="paragraph highlight">This paragraph is highlighted and important.</p>

    <a href="https://www.google.com">Go to Google</a>

    <br>

    <img src="https://via.placeholder.com/300x200" alt="Placeholder image">

    <br>

    <button id="my-button">Click Me</button>
</body>
</html>

תרגיל 6: head מול body

  1. <title>My Page</title> - head
  2. <h1>Welcome</h1> - body
  3. <meta charset="UTF-8"> - head
  4. <p>Hello world</p> - body
  5. <link rel="stylesheet" href="style.css"> - head
  6. <button>Click me</button> - body
  7. <meta name="viewport" ...> - head
  8. <script src="app.js"></script> - head (יכול גם להיות ב-body, בדרך כלל שמים בסוף ה-body, אבל גם ב-head תקין)
  9. <img src="photo.jpg" alt="photo"> - body
  10. <meta name="description" ...> - head

תרגיל 7: Emmet ומבנה

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>My Portfolio</h1>
    <hr>

    <h2>Projects</h2>
    <p>Weather App - A web application that shows the weather forecast for any city.</p>
    <p>Todo List - A task management app with add, delete, and mark as complete features.</p>
    <p>Calculator - A simple calculator with basic math operations.</p>

    <hr>

    <h2>Contact</h2>
    <p>Email: john.doe@example.com</p>

    <!-- Footer will be added later -->
</body>
</html>

תרגיל 8: חקירה ב-DevTools

  • הערות HTML כן מופיעות ב-DOM (ב-Elements tab) אבל לא מוצגות על המסך. אפשר לראות אותן כטקסט אפור ב-DevTools.
  • בתוך ה-head נמצאים: meta charset, meta viewport, title, ואולי עוד אלמנטים שהדפדפן הוסיף אוטומטית.
  • על h1 חלים סגנונות ברירת מחדל של הדפדפן (user agent stylesheet): display: block, font-size: 2em, margin-block-start: 0.67em, font-weight: bold.
  • כששינינו את הטקסט ב-DevTools, הוא השתנה מיד על המסך. אבל זה שינוי זמני - אם מרעננים את הדף (F5), הטקסט חוזר למקור כי הקובץ לא השתנה.