לדלג לתוכן

0.4 הקדמה ל HTML תרגול

תרגילים

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

צרו קובץ HTML חדש בשם about.html וכתבו אותו מאפס (בלי Emmet). הקובץ צריך לכלול:

  1. הצהרת DOCTYPE
  2. תגית html עם תכונת lang
  3. חלק head עם:
  4. meta charset
  5. meta viewport
  6. title שאומר "About Me"
  7. חלק body עם:
  8. כותרת h1 עם השם שלכם
  9. פסקה שמספרת עליכם משפט או שניים
  10. כותרת h2 שאומרת "My Hobbies"
  11. פסקה שמפרטת תחביבים

פתחו את הקובץ עם Live Server ובדקו שהוא מוצג נכון.

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

ענו על השאלות הבאות:

  1. מה ההבדל בין שפת סימון (markup language) לשפת תכנות (programming language)?
  2. מה עושה הצהרת <!DOCTYPE html> ולמה חייבים אותה?
  3. מה ההבדל בין head ל-body? מה שמים בכל אחד?
  4. מה זה תגית עצמית סגירה (self-closing tag)? תנו 3 דוגמאות.
  5. מה ההבדל בין id ל-class? מתי משתמשים בכל אחד?
  6. למה חשוב לשים <meta charset="UTF-8">?
  7. מה עושה <meta name="viewport" content="width=device-width, initial-scale=1.0">?

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

בקוד הבא יש מספר שגיאות. מצאו ותקנו אותן:

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

רשימת השגיאות שעליכם למצוא (רמז - יש לפחות 5):
- חסר DOCTYPE
- תגית סוגרת לא נכונה
- תגית פותחת בלי סוגרת
- ערך תכונה בלי מירכאות
- תגית סגירה לא נכונה

תרגיל 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>
    <h1>The Best Restaurant</h1>
    <p>Welcome to our restaurant. We serve the best food in town.</p>

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

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

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

    <hr>
    <p>Open daily from 10:00 to 22:00</p>
</body>
</html>

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

צרו קובץ HTML חדש בשם attributes.html שמכיל:

  1. כותרת h1 עם id בשם "main-title"
  2. שלוש פסקאות עם class בשם "paragraph"
  3. פסקה אחת עם שני classes: "paragraph" ו-"highlight"
  4. קישור (תגית a) לאתר גוגל עם תכונת href
  5. תמונה (תגית img) עם תכונות src ו-alt (אפשר לשים כתובת URL של תמונה כלשהי מהאינטרנט)
  6. כפתור עם id בשם "my-button"

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

סווגו כל אלמנט - האם הוא שייך ל-head או ל-body:

  1. <title>My Page</title>
  2. <h1>Welcome</h1>
  3. <meta charset="UTF-8">
  4. <p>Hello world</p>
  5. <link rel="stylesheet" href="style.css">
  6. <button>Click me</button>
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <script src="app.js"></script>
  9. <img src="photo.jpg" alt="photo">
  10. <meta name="description" content="My website">

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

השתמשו ב-Emmet כדי ליצור שלד HTML מלא (כתבו html:5 ולחצו Tab), ואז הוסיפו בתוך ה-body:

  1. כותרת h1 שאומרת "My Portfolio"
  2. קו אופקי (hr)
  3. כותרת h2 שאומרת "Projects"
  4. שלוש פסקאות שמתארות פרויקטים שעשיתם (אפשר להמציא)
  5. קו אופקי (hr)
  6. כותרת h2 שאומרת "Contact"
  7. פסקה עם כתובת אימייל (בדויה)
  8. הערה בסוף שאומרת "Footer will be added later"

שמרו ופתחו עם Live Server.

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

  1. פתחו את הקובץ שיצרתם בתרגיל 7 בדפדפן.
  2. פתחו DevTools (F12) ועברו ללשונית Elements.
  3. ענו:
  4. האם אתם רואים את ההערות שכתבתם ב-HTML? (רמז: כן, הערות מופיעות ב-DOM אבל לא על המסך)
  5. מצאו את תגית ה-head - מה יש בתוכה?
  6. לחצו על אלמנט h1 ובדקו אילו חוקי CSS חלים עליו (אלה סגנונות ברירת מחדל של הדפדפן)
  7. נסו לשנות את הטקסט של h1 ישירות ב-DevTools. מה קרה?