לדלג לתוכן

0.5 טקסט, קישורים, תמונות ומדיה הרצאה

כותרות - headings

בHTML יש לנו 6 רמות של כותרות, מh1 ועד h6. הכותרת h1 היא הכי גדולה והכי חשובה, וh6 היא הכי קטנה.

<h1>כותרת ראשית</h1>
<h2>כותרת משנית</h2>
<h3>כותרת רמה 3</h3>
<h4>כותרת רמה 4</h4>
<h5>כותרת רמה 5</h5>
<h6>כותרת רמה 6</h6>
  • כותרת h1 צריכה להופיע פעם אחת בלבד בכל עמוד. היא מייצגת את הנושא הראשי של הדף.
  • הכותרות צריכות לשמור על היררכיה - אל תדלגו מh1 ישר לh4. תשמרו על הסדר: h1, אז h2, אז h3 וכן הלאה.
  • מנועי חיפוש כמו גוגל משתמשים בכותרות כדי להבין על מה הדף מדבר, אז חשוב להשתמש בהם נכון.

פסקאות ושורות - paragraphs

תגית פסקה - p

תגית p יוצרת פסקה. הדפדפן מוסיף אוטומטית רווח לפני ואחרי כל פסקה.

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

שבירת שורה - br

תגית br שוברת שורה בלי ליצור פסקה חדשה. זו תגית ריקה - אין לה תגית סוגרת.

<p>שורה ראשונה<br>שורה שנייה<br>שורה שלישית</p>

קו אופקי - hr

תגית hr מציירת קו אופקי על הדף. שימושי להפרדה בין חלקים שונים בתוכן.

<p>חלק ראשון של התוכן</p>
<hr>
<p>חלק שני של התוכן</p>

גם hr היא תגית ריקה - אין לה תגית סוגרת.

עיצוב טקסט - text formatting

מודגש - bold

יש שתי דרכים לעשות טקסט מודגש:

<strong>טקסט חשוב ומודגש</strong>
<b>טקסט מודגש ויזואלית</b>
  • תגית strong מסמנת שהטקסט חשוב מבחינה סמנטית. קוראי מסך (screen readers) ישימו דגש על הטקסט הזה.
  • תגית b רק משנה את המראה ויזואלית לבולד, בלי משמעות סמנטית.
  • ברוב המקרים עדיף להשתמש בstrong כי זה מוסיף משמעות לתוכן.

נטוי - italic

באופן דומה, יש שתי דרכים לעשות טקסט נטוי:

<em>טקסט עם הדגשה</em>
<i>טקסט נטוי ויזואלית</i>
  • תגית em (emphasis) מציינת הדגשה סמנטית. קוראי מסך ישנו את הטון כשהם קוראים את הטקסט הזה.
  • תגית i רק משנה את המראה לנטוי, בלי משמעות מיוחדת.
  • גם כאן, עדיף להשתמש בem ברוב המקרים.

סיכום: strong וem הם סמנטיים (בעלי משמעות), b וi הם ויזואליים בלבד. תמיד תעדיפו את הגרסה הסמנטית.

קישורים - links

תגית a (anchor) יוצרת קישור שאפשר ללחוץ עליו.

קישור בסיסי

<a href="https://www.google.com">לחצו כאן כדי להגיע לגוגל</a>
  • התכונה href מגדירה לאן הקישור מוביל.
  • הטקסט בין תגיות הפתיחה והסגירה הוא מה שהמשתמש רואה על המסך.

פתיחה בחלון חדש - target

<a href="https://www.google.com" target="_blank">יפתח בטאב חדש</a>
  • הערך _blank גורם לקישור להיפתח בטאב חדש בדפדפן.
  • בלי target, הקישור יפתח באותו הטאב.

קישור להורדת קובץ - download

<a href="files/document.pdf" download>הורד את המסמך</a>
  • התכונה download אומרת לדפדפן להוריד את הקובץ במקום לפתוח אותו.

כתובות יחסיות מול מוחלטות - relative vs absolute URLs

יש שני סוגים של כתובות:

<!-- absolute URL - full address -->
<a href="https://www.example.com/about.html">כתובת מוחלטת</a>

<!-- relative URL - relative to current page -->
<a href="about.html">עמוד באותה תיקייה</a>
<a href="pages/contact.html">עמוד בתיקיית משנה</a>
<a href="../index.html">עמוד בתיקייה למעלה</a>
  • כתובת מוחלטת מכילה את הכתובת המלאה כולל https ושם הדומיין.
  • כתובת יחסית מתחילה מהמיקום הנוכחי של הקובץ.
  • שימוש בנקודה אחת . מתייחס לתיקייה הנוכחית, שתי נקודות .. מתייחסות לתיקיית האב.

קישורי עוגן - anchor links

אפשר ליצור קישורים שקופצים למיקום ספציפי באותו דף:

<!-- the link -->
<a href="#section2">קפצו לחלק 2</a>

<!-- the target -->
<h2 id="section2">חלק 2</h2>
  • הסימן # לפני שם הid מסמן שמדובר בקישור עוגן.
  • כשלוחצים על הקישור, הדפדפן גולל אוטומטית לאלמנט עם הid התואם.

קישור למייל ולטלפון

<a href="mailto:info@example.com">שלחו לנו מייל</a>
<a href="tel:+972501234567">התקשרו אלינו</a>

רשימות - lists

רשימה לא מסודרת - ul

רשימה עם נקודות (bullets), בלי סדר ספציפי:

<ul>
    <li>תפוח</li>
    <li>בננה</li>
    <li>תפוז</li>
</ul>
  • משתמשים בul כשהסדר לא חשוב, למשל רשימת קניות.

רשימה מסודרת - ol

רשימה ממוספרת, כשהסדר כן חשוב:

<ol>
    <li>חממו את התנור</li>
    <li>ערבבו את המרכיבים</li>
    <li>שימו בתנור ל-30 דקות</li>
</ol>
  • משתמשים בol כשהסדר חשוב, למשל הוראות הכנה או שלבים בתהליך.

רשימות מקוננות - nested lists

אפשר לשים רשימה בתוך רשימה:

<ul>
    <li>פירות
        <ul>
            <li>תפוח</li>
            <li>בננה</li>
        </ul>
    </li>
    <li>ירקות
        <ul>
            <li>מלפפון</li>
            <li>עגבנייה</li>
        </ul>
    </li>
</ul>
  • הרשימה הפנימית נכנסת בתוך פריט li של הרשימה החיצונית.

ציטוטים - quotes

ציטוט בלוק - blockquote

לציטוטים ארוכים שתופסים פסקה שלמה:

<blockquote>
    <p>הדמיון חשוב יותר מהידע. ידע מוגבל. דמיון מקיף את העולם כולו.</p>
</blockquote>
  • הדפדפן מזיז את הציטוט פנימה (indent) כדי להבדיל אותו משאר הטקסט.

ציטוט בתוך שורה - q

לציטוטים קצרים בתוך משפט:

<p>אלברט איינשטיין אמר <q>הדמיון חשוב יותר מהידע</q> והוא צדק.</p>
  • הדפדפן מוסיף אוטומטית מרכאות סביב הטקסט.

תגיות קוד - code tags

קוד בתוך שורה - code

<p>השתמשו בפונקציה <code>console.log()</code> כדי להדפיס לקונסול.</p>
  • תגית code מציגה את הטקסט בפונט monospace, שמתאים להצגת קוד.

בלוק קוד - pre

<pre>
<code>
function greet(name) {
    return "Hello, " + name;
}
</code>
</pre>
  • תגית pre (preformatted) שומרת על כל הרווחים והשורות החדשות בדיוק כפי שנכתבו בקוד.
  • שימוש נפוץ הוא לעטוף code בתוך pre כדי להציג בלוק קוד שלם.

מכולות - containers

מכולת בלוק - div

<div>
    <h2>כותרת החלק</h2>
    <p>תוכן החלק</p>
</div>
  • div הוא אלמנט מסוג block - הוא תופס את כל רוחב השורה ומתחיל בשורה חדשה.
  • div כשלעצמו לא עושה כלום ויזואלית, הוא משמש כמכולה לקיבוץ אלמנטים יחד.
  • שימושי במיוחד כשרוצים להוסיף עיצוב CSS לקבוצה של אלמנטים.

מכולת שורה - span

<p>הטקסט הזה מכיל <span>מילה מיוחדת</span> בתוכו.</p>
  • span הוא אלמנט מסוג inline - הוא לא שובר שורה ותופס רק את הרוחב של התוכן שלו.
  • בדומה לdiv, הוא לא עושה כלום ויזואלית כשלעצמו, אבל מאפשר לסמן חלק מטקסט כדי להוסיף לו עיצוב.

ההבדל העיקרי: div הוא block (שורה חדשה, כל הרוחב), span הוא inline (בתוך שורה, רק רוחב התוכן).

ישויות HTML - HTML entities

לפעמים צריך להציג תווים מיוחדים שHTML משתמשת בהם לצרכים שלה. לדוגמה, אם רוצים להציג את הסימן < על המסך, HTML תחשוב שזו תחילת תגית. לכן משתמשים בישויות מיוחדות:

ישות תו הסבר
&amp; & סימן אמפרסנד
&lt; < פחות מ (less than)
&gt; > גדול מ (greater than)
&nbsp; רווח שלא נשבר (non-breaking space)
&copy; (c) סימן זכויות יוצרים
&quot; " גרשיים כפולים 
<p>בHTML תגית נפתחת עם &lt;tag&gt; ונסגרת עם &lt;/tag&gt;</p>
<p>&copy; 2026 כל הזכויות שמורות</p>
<p>מחיר:&nbsp;50&nbsp;שקלים</p>
  • הישות &nbsp; שימושית כשרוצים רווח שהדפדפן לא ישבור בו שורה.

תמונות - images

תגית תמונה - img

<img src="images/cat.jpg" alt="חתול כתום יושב על ספה">
  • התכונה src מגדירה את הנתיב לקובץ התמונה.
  • התכונה alt מגדירה טקסט חלופי שמתאר את התמונה.

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

רוחב וגובה - width, height

<img src="images/cat.jpg" alt="חתול כתום" width="400" height="300">
  • מומלץ תמיד להגדיר width וheight כדי שהדפדפן ישריין מקום לתמונה בזמן הטעינה.
  • הערכים הם בפיקסלים.
  • אם מגדירים רק אחד מהם, הדפדפן ישמור על היחס (aspect ratio) אוטומטית.

תמונות רספונסיביות - responsive images

אלמנט picture

אלמנט picture מאפשר להציג תמונות שונות לפי גודל המסך:

<picture>
    <source media="(min-width: 800px)" srcset="images/cat-large.jpg">
    <source media="(min-width: 400px)" srcset="images/cat-medium.jpg">
    <img src="images/cat-small.jpg" alt="חתול כתום">
</picture>
  • הדפדפן בודק את תגיות source מלמעלה למטה ובוחר את הראשונה שמתאימה לגודל המסך.
  • תגית img בסוף היא הברירת מחדל - אם אף source לא מתאים, או אם הדפדפן לא תומך בpicture.
  • כך אפשר לשלוח תמונה קטנה למובייל ותמונה גדולה למחשב, ולחסוך בנתונים.

פורמטים של תמונות

חשוב לדעת מתי להשתמש בכל פורמט:

פורמט שימוש יתרונות חסרונות
JPG תמונות, צילומים קובץ קטן, תמיכה רחבה אין שקיפות, איכות נפגעת בדחיסה
PNG גרפיקה, לוגו, צילומי מסך תומך בשקיפות, איכות גבוהה קובץ גדול יותר
GIF אנימציות קצרות תומך באנימציה מוגבל ל-256 צבעים
SVG אייקונים, לוגואים, גרפיקה וקטורית ניתן להגדלה בלי אובדן איכות, קובץ קטן לא מתאים לצילומים
WebP תמונות וגרפיקה מודרנית קובץ קטן מJPG וPNG, תומך בשקיפות תמיכה לא אוניברסלית בדפדפנים ישנים

כלל אצבע:
- צילום? תשתמשו בJPG או WebP.
- גרפיקה עם שקיפות? תשתמשו בPNG או WebP.
- אייקון או לוגו? תשתמשו בSVG.
- אנימציה קצרה? תשתמשו בGIF.

תמונה עם כיתוב - figure

אלמנט figure ו-figcaption

<figure>
    <img src="images/sunset.jpg" alt="שקיעה מעל הים">
    <figcaption>שקיעה בחוף הים, אוגוסט 2025</figcaption>
</figure>
  • figure עוטף תוכן עצמאי כמו תמונה, דיאגרמה או קטע קוד.
  • figcaption מוסיף כיתוב לfigure.
  • זה לא רק ויזואלי - figure ו-figcaption הם סמנטיים, כלומר הם עוזרים לקוראי מסך ומנועי חיפוש להבין שהכיתוב שייך לתמונה.

וידאו - video

<video width="640" height="360" controls>
    <source src="videos/intro.mp4" type="video/mp4">
    <source src="videos/intro.webm" type="video/webm">
    הדפדפן שלך לא תומך בתגית video.
</video>
  • הטקסט בסוף מוצג רק אם הדפדפן לא תומך בvideo בכלל (דפדפנים ישנים מאוד).
  • אפשר לתת כמה source עם פורמטים שונים, והדפדפן יבחר את הראשון שהוא תומך בו.

תכונות חשובות של video

תכונה הסבר
controls מציג כפתורי שליטה (play, pause, volume)
autoplay הסרטון מתחיל לנגן אוטומטית
loop הסרטון חוזר על עצמו כשהוא מסתיים
muted הסרטון מתחיל מושתק
poster תמונה שמוצגת לפני שהסרטון מתחיל 
<video width="640" height="360" controls poster="images/thumbnail.jpg" loop muted>
    <source src="videos/background.mp4" type="video/mp4">
</video>
  • שימו לב: רוב הדפדפנים חוסמים autoplay אם הסרטון לא muted. אם רוצים autoplay, צריך להוסיף גם muted.

אודיו - audio

<audio controls>
    <source src="audio/song.mp3" type="audio/mpeg">
    <source src="audio/song.ogg" type="audio/ogg">
    הדפדפן שלך לא תומך בתגית audio.
</audio>
  • עובד בצורה דומה מאוד לvideo.
  • גם כאן יש את התכונות controls, autoplay, loop, ו-muted.

הטמעה - iframe

תגית iframe מאפשרת להטמיע עמוד אינטרנט אחר בתוך העמוד שלנו.

הטמעת סרטון יוטיוב

<iframe width="560" height="315"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube video"
    allowfullscreen>
</iframe>
  • ביוטיוב לוחצים על "Share" ואז "Embed" כדי לקבל את קוד הiframe.
  • שימו לב שהurl של הטמעה שונה מurl רגיל - יש בו embed.

הטמעת מפת גוגל

<iframe src="https://www.google.com/maps/embed?pb=..."
    width="600" height="450"
    style="border:0;"
    allowfullscreen
    loading="lazy">
</iframe>

הטמעת אתר חיצוני

<iframe src="https://www.example.com" width="800" height="600" title="example website"></iframe>
  • לא כל האתרים מאפשרים הטמעה בiframe. אתרים רבים חוסמים את זה מטעמי אבטחה.
  • תמיד תוסיפו title לiframe לצורכי נגישות.

נתיבים יחסיים ומוחלטים למשאבים - paths

כשמפנים לתמונות, סרטונים או קבצים אחרים, חשוב להבין את ההבדל בין נתיבים:

נתיב מוחלט - absolute path

<!-- full URL -->
<img src="https://www.example.com/images/photo.jpg" alt="photo">

<!-- absolute from site root -->
<img src="/images/photo.jpg" alt="photo">
  • כתובת מלאה עם https - מצביע על משאב באתר אחר.
  • נתיב שמתחיל ב/ - מתחיל מהשורש (root) של האתר.

נתיב יחסי - relative path

<!-- same folder -->
<img src="photo.jpg" alt="photo">

<!-- subfolder -->
<img src="images/photo.jpg" alt="photo">

<!-- parent folder -->
<img src="../photo.jpg" alt="photo">

<!-- two folders up, then into images -->
<img src="../../images/photo.jpg" alt="photo">
  • נתיב יחסי נמדד ביחס למיקום של קובץ הHTML הנוכחי.
  • . מתייחס לתיקייה הנוכחית.
  • .. מתייחס לתיקיית האב (parent).
  • עדיף להשתמש בנתיבים יחסיים כשעובדים על פרויקט מקומי, כי הם ימשיכו לעבוד גם אם תעבירו את הפרויקט למחשב אחר.