HTML

קישורים ותמונות

קישורים (Links)

תגית <a> (Anchor)

קישורים נוצרים באמצעות תגית <a>:

<a href="כתובת">טקסט הקישור</a>

סוגי קישורים

1. קישור לאתר חיצוני

<a href="https://www.google.com">גוגל</a>

2. קישור לדף פנימי

<a href="about.html">אודות</a>
<a href="pages/contact.html">צור קשר</a>

3. קישור לאימייל

<a href="mailto:[email protected]">שלח אימייל</a>
<a href="mailto:[email protected]?subject=שאלה">שלח אימייל עם נושא</a>

4. קישור לטלפון

<a href="tel:+972501234567">חייג אלינו</a>

5. קישור למקום בדף (עוגן)

<!-- הקישור -->
<a href="#section2">קפוץ לסעיף 2</a>

<!-- היעד -->
<h2 id="section2">סעיף 2</h2>

6. קישור להורדת קובץ

<a href="document.pdf" download>הורד PDF</a>
<a href="image.jpg" download="my-image">הורד תמונה</a>

תכונת target

קובעת היכן הקישור ייפתח:

<!-- נפתח באותו חלון -->
<a href="page.html">קישור</a>

<!-- נפתח בלשונית חדשה -->
<a href="https://google.com" target="_blank">גוגל</a>

⚠️ אבטחה: כשמשתמשים ב-target="_blank", מומלץ להוסיף:

<a href="..." target="_blank" rel="noopener noreferrer">קישור</a>

תכונת title

מציגה tooltip כשעומדים על הקישור:

<a href="help.html" title="לחץ לעזרה נוספת">עזרה</a>

קישור עם תמונה

<a href="page.html">
    <img src="logo.png" alt="לוגו">
</a>

תמונות (Images)

תגית <img>

תמונות נוספות באמצעות תגית <img> (תגית עצמאית):

<img src="נתיב-לתמונה" alt="תיאור התמונה">

תכונות חובה

<img src="cat.jpg" alt="חתול חמוד ישן על ספה">

תכונות נוספות

<img 
    src="image.jpg" 
    alt="תיאור התמונה"
    width="400"
    height="300"
    title="טקסט כשעומדים על התמונה"
    loading="lazy"
>

נתיבים לתמונות

נתיב יחסי (Relative Path)

<!-- באותה תיקייה -->
<img src="photo.jpg" alt="...">

<!-- בתת-תיקייה -->
<img src="images/photo.jpg" alt="...">

<!-- תיקייה אחורה -->
<img src="../photo.jpg" alt="...">

נתיב מוחלט (Absolute Path)

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

<!-- URL מלא -->
<img src="https://example.com/image.jpg" alt="...">

מבנה תיקיות מומלץ

project/
├── index.html
├── pages/
│   └── about.html
└── images/
    ├── logo.png
    └── photos/
        └── cat.jpg

<!-- מ-index.html -->
<img src="images/logo.png" alt="...">

<!-- מ-pages/about.html -->
<img src="../images/logo.png" alt="...">

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

תמונה רספונסיבית

עם CSS

<img src="photo.jpg" alt="..." style="max-width: 100%; height: auto;">

עם srcset

<img 
    src="small.jpg"
    srcset="small.jpg 480w,
            medium.jpg 800w,
            large.jpg 1200w"
    sizes="(max-width: 600px) 480px,
           (max-width: 1000px) 800px,
           1200px"
    alt="תמונה רספונסיבית"
>

תגית <figure> ו-<figcaption>

מקבצת תמונה עם כיתוב:

<figure>
    <img src="sunset.jpg" alt="שקיעה בחוף הים">
    <figcaption>שקיעה מרהיבה בחוף תל אביב, 2024</figcaption>
</figure>

Image Maps (מפות תמונה)

יצירת אזורים לחיצים בתמונה:

<img src="map.jpg" alt="מפה" usemap="#workmap">

<map name="workmap">
    <area 
        shape="rect" 
        coords="34,44,270,350" 
        alt="חדר" 
        href="room.html"
    >
    <area 
        shape="circle" 
        coords="337,300,44" 
        alt="כפתור" 
        href="button.html"
    >
</map>

דוגמה משולבת

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

    <nav>
        <a href="#photos">לתמונות</a> |
        <a href="#contact">צור קשר</a>
    </nav>

    <section id="photos">
        <h2>תמונות</h2>

        <figure>
            <a href="large/sunset.jpg">
                <img src="thumbnails/sunset.jpg" 
                     alt="שקיעה" 
                     width="200">
            </a>
            <figcaption>שקיעה בחוף</figcaption>
        </figure>
    </section>

    <section id="contact">
        <h2>צור קשר</h2>
        <p>
            <a href="mailto:[email protected]">שלח אימייל</a><br>
            <a href="tel:+972501234567">חייג אלינו</a>
        </p>
    </section>

    <footer>
        <a href="#" title="חזרה למעלה">↑ לראש הדף</a>
    </footer>
</body>
</html>

סיכום

קישורים

תמונות

← חזרה: אלמנטים לטקסט | → המשך: רשימות