0.5 טקסט, קישורים, תמונות ומדיה פתרון

פתרון תרגול 1 - דף מתכון¶

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>מתכון לפסטה ברוטב עגבניות</title>
</head>
<body>
    <h1>פסטה ברוטב עגבניות</h1>

    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg/800px-Good_Food_Display_-_NCI_Visuals_Online.jpg"
         alt="צלחת פסטה עם רוטב עגבניות ובזיליקום"
         width="400">

    <p>פסטה ברוטב עגבניות היא מנה קלאסית איטלקית שמתאימה לכל יום בשבוע. הכנה פשוטה, טעם מעולה.</p>

    <h2>מרכיבים</h2>
    <ul>
        <li>500 גרם פסטה (ספגטי או פנה)</li>
        <li>4 עגבניות בשלות</li>
        <li>3 שיני שום</li>
        <li>2 כפות שמן זית</li>
        <li>מלח ופלפל לפי הטעם</li>
        <li>עלי בזיליקום טרי</li>
        <li>פרמזן מגורד (אופציונלי)</li>
    </ul>

    <h2>הוראות הכנה</h2>
    <ol>
        <li>הביאו סיר מים גדול לרתיחה והוסיפו מלח.</li>
        <li>בישלו את הפסטה לפי ההוראות על האריזה.</li>
        <li>בזמן שהפסטה מתבשלת, חתכו את העגבניות לקוביות וקצצו את השום דק.</li>
        <li>חממו שמן זית במחבת גדולה על אש בינונית.</li>
        <li>הוסיפו את השום וטגנו דקה עד שהוא מזהיב.</li>
        <li>הוסיפו את העגבניות, מלח ופלפל, ובשלו 10 דקות עד שהרוטב מתעבה.</li>
        <li>סננו את הפסטה והוסיפו אותה למחבת עם הרוטב.</li>
        <li>ערבבו היטב, הוסיפו בזיליקום טרי ופרמזן מגורד.</li>
    </ol>

    <hr>

    <p>מתכון מתוך: <a href="https://www.example.com/recipes/pasta" target="_blank">אתר המתכונים</a></p>
</body>
</html>

פתרון תרגול 2 - גלריית תמונות¶

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>הגלרייה שלי</title>
</head>
<body>
    <h1>הגלרייה שלי</h1>

    <figure>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/24701-nature-702702.jpg/800px-24701-nature-702702.jpg"
             alt="נוף הרים ירוקים עם עננים"
             width="300">
        <figcaption>נוף הרים - צולם באביב</figcaption>
    </figure>

    <figure>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png"
             alt="פרח צהוב מקרוב"
             width="300">
        <figcaption>פרח בגינה הקהילתית</figcaption>
    </figure>

    <figure>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Sunset_on_the_sea.jpg/800px-Sunset_on_the_sea.jpg"
             alt="שקיעה כתומה מעל הים"
             width="300">
        <figcaption>שקיעה בחוף הים</figcaption>
    </figure>

    <figure>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Pleiades_large.jpg/800px-Pleiades_large.jpg"
             alt="כוכבים בשמיים בלילה"
             width="300">
        <figcaption>צילום לילה של כוכבים</figcaption>
    </figure>

    <p>אוסף תמונות טבע שצולמו במהלך טיולים ברחבי הארץ. כל תמונה מייצגת רגע מיוחד בטבע.</p>
</body>
</html>

פתרון תרגול 3 - עמוד עם סרטון יוטיוב¶

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>סרטון מעניין</title>
</head>
<body>
    <h1>איך האינטרנט עובד - הסבר פשוט</h1>

    <p>סרטון קצר ומובן שמסביר את העקרונות הבסיסיים של האינטרנט - מה קורה כשאנחנו מקלידים כתובת אתר בדפדפן ואיך המידע מגיע אלינו.</p>

    <iframe width="560" height="315"
        src="https://www.youtube.com/embed/x3c1ih2NJEg"
        title="How the Internet Works"
        allowfullscreen>
    </iframe>

    <h2>נקודות מעניינות מהסרטון</h2>
    <ul>
        <li>כל מחשב שמחובר לאינטרנט מקבל כתובת IP ייחודית.</li>
        <li>שרתי DNS מתרגמים שמות דומיין (כמו google.com) לכתובות IP.</li>
        <li>המידע עובר דרך כבלים פיזיים ברחבי העולם, כולל כבלים תת-ימיים.</li>
    </ul>

    <p>צפו בסרטון המלא ביוטיוב: <a href="https://www.youtube.com/watch?v=x3c1ih2NJEg" target="_blank">לחצו כאן</a></p>
</body>
</html>

פתרון תרגול 4 - דף תיק עבודות¶

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>תיק עבודות - ישראל ישראלי</title>
</head>
<body>
    <h1>ישראל ישראלי</h1>

    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Blank_woman_placeholder.svg/200px-Blank_woman_placeholder.svg.png"
         alt="תמונת פרופיל של ישראל ישראלי"
         width="200">

    <h2>על עצמי</h2>
    <p>שלום! אני ישראל, סטודנט לפיתוח פרונטאנד. אני אוהב לבנות אתרים יפים ונגישים. בזמני הפנוי אני אוהב לטייל, לקרוא ולשחק גיטרה.</p>

    <h2>הפרויקטים שלי</h2>
    <ul>
        <li><a href="https://www.example.com/project1" target="_blank">אתר תיק עבודות אישי</a></li>
        <li><a href="https://www.example.com/project2" target="_blank">מחשבון אונליין</a></li>
        <li><a href="https://www.example.com/project3" target="_blank">אפליקציית מזג אוויר</a></li>
        <li><a href="https://www.example.com/project4" target="_blank">בלוג טכנולוגי</a></li>
    </ul>

    <h2>כישורים</h2>
    <ul>
        <li>שפות תכנות
            <ul>
                <li>Python</li>
                <li>JavaScript</li>
                <li>HTML</li>
                <li>CSS</li>
            </ul>
        </li>
        <li>כלים
            <ul>
                <li>VS Code</li>
                <li>Git</li>
                <li>Chrome DevTools</li>
            </ul>
        </li>
        <li>שפות
            <ul>
                <li>עברית - שפת אם</li>
                <li>אנגלית - רמה גבוהה</li>
            </ul>
        </li>
    </ul>

    <hr>

    <blockquote>
        <p>הדרך הטובה ביותר ללמוד תכנות היא לכתוב קוד. הרבה קוד.</p>
    </blockquote>

    <p>צרו קשר: <a href="mailto:israel@example.com">israel@example.com</a></p>
</body>
</html>

פתרון תרגול 5 - דף תוכן מעוצב¶

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>מדריך HTML למתחילים</title>
</head>
<body>
    <h1>מדריך HTML למתחילים</h1>

    <h2>תוכן עניינים</h2>
    <ul>
        <li><a href="#what-is-html">מה זה HTML?</a></li>
        <li><a href="#basic-tags">תגיות בסיסיות</a></li>
        <li><a href="#tips">טיפים חשובים</a></li>
    </ul>

    <hr>

    <h2 id="what-is-html">מה זה HTML?</h2>
    <p><strong>HTML</strong> (ראשי תיבות של <em>HyperText Markup Language</em>) היא שפת הסימון הבסיסית ביותר של האינטרנט. היא מגדירה את <strong>המבנה</strong> של דפי אינטרנט.</p>
    <p>כל אתר אינטרנט שאתם מבקרים בו בנוי על <em>HTML</em>. בלי HTML, אין אינטרנט כפי שאנחנו מכירים אותו.</p>

    <h2 id="basic-tags">תגיות בסיסיות</h2>
    <p>כל מסמך HTML בנוי מ<strong>תגיות</strong>. תגית נפתחת עם הסימנים <code>&lt;tag&gt;</code> ונסגרת עם <code>&lt;/tag&gt;</code>.</p>
    <p>הנה דוגמה בסיסית למבנה HTML:</p>
    <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;My Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Hello World&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
    <p>שימו לב: הסימנים <code>&amp;lt;</code> ו-<code>&amp;gt;</code> משמשים להצגת הסימנים &lt; ו-&gt; בדף, כי אם נשים אותם ישירות הדפדפן יחשוב שמדובר בתגיות.</p>

    <h2 id="tips">טיפים חשובים</h2>
    <p>הנה כמה טיפים למתחילים:</p>
    <ul>
        <li><strong>תמיד סגרו תגיות</strong> - כל תגית שנפתחת צריכה להיסגר (מלבד תגיות ריקות כמו <code>&lt;br&gt;</code> ו-<code>&lt;img&gt;</code>).</li>
        <li><em>שמרו על הזחה נכונה</em> - קוד עם הזחה (indentation) הרבה יותר קל לקריאה.</li>
        <li>השתמשו בסימן <code>&amp;amp;</code> כדי להציג את התו &amp; על המסך.</li>
    </ul>
</body>
</html>

פתרון תרגול 6 - שאלות תיאורטיות¶

1. מה ההבדל בין strong לבין b?
- תגית strong מסמנת שהטקסט חשוב מבחינה סמנטית. קוראי מסך ישימו דגש מיוחד עליו.
- תגית b רק משנה את המראה הויזואלי לבולד, בלי להוסיף משמעות.
- עדיף להשתמש בstrong ברוב המקרים כי הוא מוסיף משמעות לתוכן.

2. מה התכונה alt עושה?
- alt מגדירה טקסט חלופי שמתאר את התמונה.
- היא חשובה לנגישות - קוראי מסך קוראים את הalt בקול לאנשים עם לקות ראייה.
- כשתמונה לא נטענת, הalt מוצג במקומה.
- מנועי חיפוש משתמשים בalt כדי להבין את התמונה.

3. ol מול ul:
- רשימה מסודרת (ol) - כשהסדר חשוב. דוגמה: שלבי הכנת מתכון, הוראות התקנה.
- רשימה לא מסודרת (ul) - כשהסדר לא חשוב. דוגמה: רשימת קניות, רשימת כישורים.

4. מה ההבדל בין div לבין span?
- div הוא אלמנט block - תופס שורה שלמה ומתחיל בשורה חדשה.
- span הוא אלמנט inline - נשאר בתוך השורה ותופס רק את רוחב התוכן שלו.

5. למה כדאי להוסיף width ו-height לתמונות?
- הדפדפן שומר מקום לתמונה בזמן הטעינה, כך שהדף לא "קופץ" כשהתמונה נטענת.
- זה משפר את חוויית המשתמש ואת ביצועי הדף.

6. כתובת יחסית מול מוחלטת:
- כתובת מוחלטת כוללת את הכתובת המלאה (https://...) - שימושי לקישורים לאתרים אחרים.
- כתובת יחסית נמדדת ביחס לקובץ הנוכחי - שימושי לקבצים בפרויקט שלכם, כי ימשיכו לעבוד גם אם תעבירו את הפרויקט.

7. מתי להשתמש בfigure?
- כשרוצים להוסיף כיתוב לתמונה שמקושר אליה סמנטית.
- figure מתאים לתוכן עצמאי כמו תמונות, דיאגרמות וקטעי קוד שאפשר להוציא מההקשר ולהבין אותם בפני עצמם.