Bölüm 3: Resimler, Medya ve Dosya Yönetimi

15 Haziran 2025

3 dk okuma süresi

resimler-medya-dosya-yonetimi

Resimlerin Web Sayfasındaki Önemi

Resimler, web sayfalarını görsel olarak zenginleştirir ve kullanıcı deneyimini önemli ölçüde artırır. Bu bölümde HTML ile resim ekleme ve medya yönetimi konularını öğreneceksiniz.

Resim Etiketi (`<img>`)

HTML’de resim eklemek için <img> etiketi kullanılır. Bu etiket kendini kapatan bir etikettir.

Temel Resim Ekleme

<img src="resim.jpg" alt="Resim açıklaması">

Temel Özellikler

<img 
    src="resimler/logo.png" 
    alt="Şirket logosu" 
    width="200" 
    height="100"
    title="Şirket logomuz">

Özellik Açıklamaları:

src: Resim dosyasının yolu (zorunlu)
alt: Resim açıklaması (erişilebilirlik için zorunlu)
width: Resim genişliği (piksel)
height: Resim yüksekliği (piksel)
title: Fare üzerine geldiğinde görünen açıklama

Uyarı

Önemli: alt özelliğini mutlaka kullanın! Bu, görme engelli kullanıcılar için kritik öneme sahiptir ve SEO için de gereklidir.

Dosya Yolları (File Paths)

Göreceli Yollar (Relative Paths)

<!-- Aynı klasörde -->
<img src="logo.png" alt="Logo">
 
<!-- Alt klasörde -->
<img src="resimler/banner.jpg" alt="Banner">
 
<!-- Üst klasörde -->
<img src="../images/photo.png" alt="Fotoğraf">
 
<!-- İki seviye üst klasörde -->
<img src="../../assets/icon.svg" alt="İkon">

Mutlak Yollar (Absolute Paths)

<!-- Web sitesi kökünden -->
<img src="/images/logo.png" alt="Logo">
 
<!-- Tam URL ile -->
<img src="https://example.com/images/photo.jpg" alt="Dış kaynak resim">

Resim Formatları ve Kullanım Alanları

Format	Kullanım Alanı	Özellikler
JPEG (.jpg)	Fotoğraflar	Küçük dosya boyutu, şeffaflık yok
PNG (.png)	Logolar, ikonlar	Şeffaflık desteği, kaliteli
SVG (.svg)	Vektör grafikler	Ölçeklenebilir, küçük boyut
WebP (.webp)	Modern web	En iyi sıkıştırma, yeni format
GIF (.gif)	Animasyonlar	Düşük kalite, animasyon desteği

Modern Resim Teknikleri

Responsive Resimler

<img 
    src="small.jpg" 
    srcset="small.jpg 480w, 
            medium.jpg 800w, 
            large.jpg 1200w"
    sizes="(max-width: 480px) 100vw, 
           (max-width: 800px) 50vw, 
           25vw"
    alt="Responsive resim">

Picture Elementi

<picture>
    <source media="(min-width: 800px)" srcset="large.webp">
    <source media="(min-width: 400px)" srcset="medium.webp">
    <img src="small.jpg" alt="Fallback resim">
</picture>

Figure ve Figcaption

Resimler için anlamsal yapı:

<figure>
    <img src="chart.png" alt="Satış grafiği">
    <figcaption>
        2024 yılı satış rakamları grafiği
    </figcaption>
</figure>

Video Entegrasyonu

HTML5 Video Etiketi

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <p>Tarayıcınız video etiketini desteklemiyor.</p>
</video>

Video Özellikleri

<video 
    width="800" 
    height="450" 
    controls 
    autoplay 
    muted 
    loop 
    poster="video-thumbnail.jpg">
    
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    
    <!-- Alt yazı dosyaları -->
    <track kind="subtitles" src="subs-tr.vtt" srclang="tr" label="Türkçe">
    <track kind="subtitles" src="subs-en.vtt" srclang="en" label="English">
    
    <p>Video oynatılamıyor. <a href="video.mp4">Videoyu indirin</a></p>
</video>

Video Özellik Açıklamaları:

controls: Oynatma kontrolleri gösterir
autoplay: Otomatik oynatma (muted ile birlikte kullanın)
muted: Sessiz başlatma
loop: Sürekli tekrar
poster: Video yüklenmeden önce gösterilen resim

Ipucu

Mobil İpucu: autoplay özelliği mobil cihazlarda çoğunlukla çalışmaz. Kullanıcı etkileşimi gerektirir.

YouTube Video Entegrasyonu

<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    title="YouTube video oynatıcısı" 
    frameborder="0" 
    allowfullscreen>
</iframe>

Responsive YouTube Video

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
    <iframe 
        src="https://www.youtube.com/embed/VIDEO_ID"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
        frameborder="0" 
        allowfullscreen>
    </iframe>
</div>

Ses (Audio) Entegrasyonu

HTML5 Audio Etiketi

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    <p>Tarayıcınız ses etiketini desteklemiyor.</p>
</audio>

Gelişmiş Ses Kontrolü

<audio 
    controls 
    preload="metadata" 
    loop>
    
    <source src="podcast.mp3" type="audio/mpeg">
    <source src="podcast.ogg" type="audio/ogg">
    
    <p>
        Ses dosyası oynatılamıyor. 
        <a href="podcast.mp3">Dosyayı indirin</a>
    </p>
</audio>

Dosya İndirme Linkleri

Basit İndirme Linki

<a href="document.pdf" download>PDF İndir</a>

Özel İsimle İndirme

<a href="report-2025.pdf" download="Yıllık_Rapor.pdf">
    Yıllık Raporu İndir
</a>

Farklı Dosya Türleri

<ul>
    <li><a href="files/document.pdf" download>📄 PDF İndir</a></li>
    <li><a href="files/spreadsheet.xlsx" download>📊 Excel İndir</a></li>
    <li><a href="files/presentation.pptx" download>📈 PowerPoint İndir</a></li>
    <li><a href="files/archive.zip" download>📦 ZIP İndir</a></li>
</ul>

Embed ve Object Etiketleri

PDF Görüntüleme

<embed 
    src="document.pdf" 
    type="application/pdf" 
    width="100%" 
    height="600px">

Harici İçerik Gömme

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

Performans ve Optimizasyon

Lazy Loading

<img 
    src="image.jpg" 
    alt="Açıklama" 
    loading="lazy">
 
<iframe 
    src="video.html" 
    loading="lazy">
</iframe>

Preload Hints

<head>
    <!-- Kritik resimler için -->
    <link rel="preload" href="hero-image.jpg" as="image">
    
    <!-- Video için -->
    <link rel="preload" href="intro-video.mp4" as="video">
</head>

Resim Optimizasyon İpuçları

Uygun format seçin: Fotoğraf için JPEG, logo için SVG/PNG
Boyutları optimize edin: Gerekenden büyük resim kullanmayın
Compression kullanın: TinyPNG gibi araçlarla sıkıştırın
Alt text yazın: SEO ve erişilebilirlik için önemli
Lazy loading kullanın: Sayfa yükleme hızını artırır

Pratik Örnek: Medya Galerisi

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medya Galerisi</title>
</head>
<body>
    <h1>Şirketimiz Medya Galerisi</h1>
    
    <!-- Resim Galerisi -->
    <section>
        <h2>Fotoğraf Galerisi</h2>
        
        <figure>
            <img src="images/office1.jpg" 
                 alt="Modern ofis alanı" 
                 width="400" 
                 loading="lazy">
            <figcaption>Yeni ofis binamız</figcaption>
        </figure>
        
        <figure>
            <img src="images/team.jpg" 
                 alt="Ekip fotoğrafı" 
                 width="400" 
                 loading="lazy">
            <figcaption>Geliştirici ekibimiz</figcaption>
        </figure>
    </section>
    
    <!-- Video Bölümü -->
    <section>
        <h2>Tanıtım Videosu</h2>
        
        <video width="640" height="360" controls poster="video-poster.jpg">
            <source src="videos/company-intro.mp4" type="video/mp4">
            <source src="videos/company-intro.webm" type="video/webm">
            <p>Video oynatılamıyor. <a href="videos/company-intro.mp4">Videoyu indirin</a></p>
        </video>
    </section>
    
    <!-- Ses Bölümü -->
    <section>
        <h2>CEO Mesajı</h2>
        
        <audio controls preload="metadata">
            <source src="audio/ceo-message.mp3" type="audio/mpeg">
            <source src="audio/ceo-message.ogg" type="audio/ogg">
            <p>Ses dosyası oynatılamıyor.</p>
        </audio>
    </section>
    
    <!-- İndirme Linkleri -->
    <section>
        <h2>Dosya İndirmeleri</h2>
        <ul>
            <li><a href="downloads/catalog.pdf" download>📄 Ürün Kataloğu (PDF)</a></li>
            <li><a href="downloads/price-list.xlsx" download>💰 Fiyat Listesi (Excel)</a></li>
            <li><a href="downloads/company-profile.zip" download>📦 Şirket Profili (ZIP)</a></li>
        </ul>
    </section>
</body>
</html>

Erişilebilirlik ve En İyi Uygulamalar

Alt Text Yazma İpuçları

<!-- İyi örnekler -->
<img src="graph.png" alt="2024 satışları %25 artış gösterdi">
<img src="dog.jpg" alt="Golden Retriever köpek parkta koşuyor">
 
<!-- Kötü örnekler -->
<img src="graph.png" alt="Grafik">
<img src="dog.jpg" alt="Resim">

Dekoratif Resimler

<!-- Dekoratif resim için boş alt -->
<img src="decoration.png" alt="" role="presentation">

Özet ve Ödev

Bu bölümde öğrendikleriniz:

✅ Resim ekleme ve optimizasyon teknikleri
✅ Video ve ses entegrasyonu
✅ Dosya yolları ve indirme linkleri
✅ Modern medya teknikleri (responsive, lazy loading)
✅ Erişilebilirlik en iyi uygulamaları

Pratik Ödev

Kişisel portfolio sayfası oluşturun:
- Profil fotoğrafınızı ekleyin
- Projelerinizin ekran görüntülerini gösterin
- Tanıtım videosu ekleyin (YouTube veya yerel)
- CV’nizi indirilebilir PDF olarak ekleyin
Medya galerisi sayfası oluşturun:
- En az 5 resim içeren galeri
- Resim açıklamaları (figcaption)
- Responsive resim teknikleri
- Lazy loading uygulayın

Sonraki bölümde HTML formları ve kullanıcı girişlerini öğreneceksiniz!