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

כותרות - headings¶

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

<h1>Main heading</h1>
<h2>Secondary heading</h2>
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<h5>Level 5 heading</h5>
<h6>Level 6 heading</h6>

כותרת h1 צריכה להופיע פעם אחת בלבד בכל עמוד. היא מייצגת את הנושא הראשי של הדף.
הכותרות צריכות לשמור על היררכיה - אל תדלגו מh1 ישר לh4. תשמרו על הסדר: h1, אז h2, אז h3 וכן הלאה.
מנועי חיפוש כמו גוגל משתמשים בכותרות כדי להבין על מה הדף מדבר, אז חשוב להשתמש בהם נכון.

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

הtag פסקה - p¶

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

<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>

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

שבירת שורה - br¶

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

<p>First line<br>Second line<br>Third line</p>

קו אופקי - hr¶

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

<p>First part of the content</p>
<hr>
<p>Second part of the content</p>

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

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

מודגש - bold¶

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

<strong>Important and bold text</strong>
<b>Visually bold text</b>

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

נטוי - italic¶

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

<em>Text with emphasis</em>
<i>Visually italic text</i>

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

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

קישורים - links¶

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

קישור בסיסי¶

<a href="https://www.google.com">Click here to go to Google</a>

הattribute href מגדיר לאן הקישור מוביל.
הטקסט בין tags הפתיחה והסגירה הוא מה שהמשתמש רואה על המסך.

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

<a href="https://www.google.com" target="_blank">Opens in a new tab</a>

הערך _blank גורם לקישור להיפתח בטאב חדש בדפדפן.
בלי target, הקישור יפתח באותו הטאב.

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

<a href="files/document.pdf" download>Download the document</a>

הattribute download אומר לדפדפן להוריד את הקובץ במקום לפתוח אותו.

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

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

<!-- absolute URL - full address -->
<a href="https://www.example.com/about.html">Absolute address</a>

<!-- relative URL - relative to current page -->
<a href="about.html">Page in the same folder</a>
<a href="pages/contact.html">Page in a subfolder</a>
<a href="../index.html">Page in the parent folder</a>

כתובת מוחלטת מכילה את הכתובת המלאה כולל https ושם הדומיין.
כתובת יחסית מתחילה מהמיקום הנוכחי של הקובץ.
שימוש בנקודה אחת . מתייחס לתיקייה הנוכחית, שתי נקודות .. מתייחסות לתיקיית האב.

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

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

<!-- the link -->
<a href="#section2">Jump to section 2</a>

<!-- the target -->
<h2 id="section2">Section 2</h2>

הסימן # לפני שם הid מסמן שמדובר בקישור עוגן.
כשלוחצים על הקישור, הדפדפן גולל אוטומטית לאלמנט עם הid התואם.

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

<a href="mailto:info@example.com">Send us an email</a>
<a href="tel:+972501234567">Call us</a>

רשימות - lists¶

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

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

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
</ul>

משתמשים בul כשהסדר לא חשוב, למשל רשימת קניות.

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

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

<ol>
    <li>Preheat the oven</li>
    <li>Mix the ingredients</li>
    <li>Put in the oven for 30 minutes</li>
</ol>

משתמשים בol כשהסדר חשוב, למשל הוראות הכנה או שלבים בתהליך.

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

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

<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Banana</li>
        </ul>
    </li>
    <li>Vegetables
        <ul>
            <li>Cucumber</li>
            <li>Tomato</li>
        </ul>
    </li>
</ul>

הרשימה הפנימית נכנסת בתוך פריט li של הרשימה החיצונית.

ציטוטים - quotes¶

ציטוט בלוק - blockquote¶

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

<blockquote>
    <p>Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world.</p>
</blockquote>

הדפדפן מזיז את הציטוט פנימה (indent) כדי להבדיל אותו משאר הטקסט.

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

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

<p>Albert Einstein said <q>Imagination is more important than knowledge</q> and he was right.</p>

הדפדפן מוסיף אוטומטית מרכאות סביב הטקסט.

תגיות קוד - code tags¶

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

<p>Use the <code>console.log()</code> function to print to the console.</p>

הtag code מציג את הטקסט בפונט monospace, שמתאים להצגת קוד.

בלוק קוד - pre¶

<pre>
<code>
function greet(name) {
    return "Hello, " + name;
}
</code>
</pre>

הtag pre (preformatted) שומר על כל הרווחים והשורות החדשות בדיוק כפי שנכתבו בקוד.
שימוש נפוץ הוא לעטוף code בתוך pre כדי להציג בלוק קוד שלם.

מכולות - containers¶

מכולת בלוק - div¶

<div>
    <h2>Section title</h2>
    <p>Section content</p>
</div>

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

מכולת שורה - span¶

<p>This text contains <span>a special word</span> inside it.</p>

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

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

ישויות HTML - HTML entities¶

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

ישות	תו	הסבר
`&`	&	סימן אמפרסנד
`<`	<	פחות מ (less than)
`>`	>	גדול מ (greater than)
` `		רווח שלא נשבר (non-breaking space)
`©`	(c)	סימן זכויות יוצרים
`"`	"	גרשיים כפולים

<p>In HTML a tag opens with &lt;tag&gt; and closes with &lt;/tag&gt;</p>
<p>&copy; 2026 All rights reserved</p>
<p>Price:&nbsp;50&nbsp;shekels</p>

הישות   שימושית כשרוצים רווח שהדפדפן לא ישבור בו שורה.

תמונות - images¶

הtag תמונה - img¶

<img src="images/cat.jpg" alt="An orange cat sitting on a couch">

הattribute src מגדיר את הנתיב לקובץ התמונה.
הattribute alt מגדיר טקסט חלופי שמתאר את התמונה.

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

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

<img src="images/cat.jpg" alt="Orange cat" 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="Orange cat">
</picture>

הדפדפן בודק את tags source מלמעלה למטה ובוחר את הראשונה שמתאימה לגודל המסך.
הtag 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="Sunset over the sea">
    <figcaption>Sunset at the beach, August 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">
    Your browser doesn't support the video tag.
</video>

הטקסט בסוף מוצג רק אם הדפדפן לא תומך בvideo בכלל (דפדפנים ישנים מאוד).
אפשר לתת כמה source עם פורמטים שונים, והדפדפן יבחר את הראשון שהוא תומך בו.

הattributes החשובים של video¶

הattribute	הסבר
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">
    Your browser doesn't support the audio tag.
</audio>

עובד בצורה דומה מאוד לvideo.
גם כאן יש את הattributes controls, autoplay, loop, ו-muted.

הטמעה - iframe¶

הtag 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).
עדיף להשתמש בנתיבים יחסיים כשעובדים על פרויקט מקומי, כי הם ימשיכו לעבוד גם אם תעבירו את הפרויקט למחשב אחר.