HTML Görsel Medya Rehberi: img, video ve audio

HTML'in ilk günlerinde web, sadece metin ve bağlantılardan ( hyperlinks ) ibaret, akademik bir bilgi paylaşım ağıydı.

Ancak günümüzde web, Görsel ve Medya Etiketleri ( <img>, <audio>, <video>) sayesinde

zengin, etkileşimli ve dinamik bir multimedya platformuna evrilmiştir.

Bu etiketler, harici medya dosyalarını ( .jpg , .png , .gif , .svg , .mp4 , .mp3 vb. ) sayfa yapısına dahil ederek, kullanıcıların içeriği sadece okumasını değil; izlemesini, dinlemesini ve görsel olarak etkileşime girmesini sağlar.

Temel Fonksiyonlar ve Mimari Önem

Medya etiketleri, modern web mimarisinde sadece "resim göstermekten" çok daha derin rollere sahiptir:

Yerel (Native) Medya Desteği ve HTML5 Devrimi

Eskiden web üzerinde video veya ses oynatmak için Adobe Flash Player veya Silverlight gibi harici, güvenlik açıklarıyla dolu ve ağır tarayıcı eklentilerine ( plugins ) ihtiyaç duyulurdu.

Doğrudan Entegrasyon:

HTML5 ile gelen <audio> ve <video> etiketleri, tarayıcının bu dosyaları kendi motoruyla işlemesini ( native ) sağlar.

Performans ve Güvenlik:

Bu değişim, eklenti bağımlılığını ortadan kaldırarak sayfa yükleme hızını artırmış, pil ömrünü korumuş ve

siber güvenlik risklerini minimize etmiştir.

Erişilebilirlik (A11Y) ve SEO Köprüsü

Medya etiketleri, görsel ve işitsel veriyi sadece sunmakla kalmaz, aynı zamanda bu verinin semantik anlamını da taşır.

Anlamsal Bağlam:

Özellikle <img> etiketindeki alt ( alternatif metin ) niteliği, görseli göremeyen kullanıcılar için görselin içeriğini betimler.

Arama Motorları:

Google botları gibi arama motoru örümcekleri resimleri "göremez", ancak "alt etiketlerini okuyabilir."

Bu sayede görsel içerikleriniz de arama sonuçlarında doğru şekilde indekslenir.

Tarayıcı Uyumluluğu ve Format Esnekliği

Her tarayıcı farklı video ve ses kodeklerini tercih edebilir.

Medya etiketleri, <source> alt etiketi sayesinde bu karmaşayı çözer.

Çoklu Format Sunumu:

Geliştirici olarak sisteme birden fazla format ( .mp4 ve .webm ) sunabilirsiniz.

Akıllı Seçim:

Tarayıcı, sunulan seçenekler arasından kendi altyapısına en uygun olan formatı otomatik olarak seçer ve oynatır.

Bu, "Bu video tarayıcınızda oynatılamıyor" hatasını tarihe gömen mimari çözümdür.

<img> etiketi, bir web sayfasına resim dosyası ( JPEG , PNG , GIF , SVG , WebP vb. ) yerleştirmek için kullanılan

en temel elementtir.

Bu etiket, HTML'in yapısı gereği "boş element" ( void element ) olarak adlandırılır; yani metin içeriği barındırmaz ve bir kapanış etiketine ( </img> ) ihtiyaç duymaz.

Kendi kendini kapatan ( self-closing ) bu yapı, tarayıcıya sayfada bir görselin oluşturulması gerektiğini ve bu görselin nerede bulunacağını bildirir.

Kaynak Belirtme ve Anlamsal Tanımlama (src ve alt)

Bir resim etiketinin işlevsel olabilmesi için teknik olarak iki hayati niteliğe ihtiyacı vardır: src ve alt.

Görselin Konumu (src):

Src niteliği, etiketin çalışması için zorunlu olan birincil niteliktir.

HTML sayfası, resim dosyasının kendisini kodun içinde saklamaz; bunun yerine src niteliği aracılığıyla resmin bulunduğu

sunucu yolunu veya URL'sini referans gösterir.

Tarayıcı sayfayı yüklerken bu adrese bir istek gönderir, resmi indirir ve sayfada ilgili koordinatlara yerleştirir.

Bu kaynak, projenizin klasöründeki yerel bir dosya olabileceği gibi, internet üzerindeki harici bir bağlantı da olabilir.

Erişilebilirlik ve SEO (alt):

Alt (Alternative Text/Alternatif Metin) niteliği, görselin teknik olarak yüklenemediği veya algılanamadığı durumlar için bir yedekleme mekanizmasıdır.

Bu nitelik, resmin ne içerdiğini veya ne anlama geldiğini metinsel olarak tarif eder.

Bu metnin önemi üç ana başlıkta toplanır:

Erişilebilirlik (Accessibility):

Görme engelli kullanıcılar web sayfalarını ekran okuyucu ( screen reader ) teknolojileriyle gezerler.

Ekran okuyucu bir resme geldiğinde görseli "göremez", ancak alt niteliğindeki metni kullanıcıya sesli olarak okur.

Eğer bu nitelik boş bırakılırsa veya kullanılmazsa, bu kullanıcılar içerikten mahrum kalır.

Hata Yönetimi:

Resim yüklenemezse, tarayıcı kırık resim ikonu ile birlikte bu alternatif metni ekrana basar.

Böylece kullanıcı resmi göremese bile orada ne olması gerektiğini anlar.

SEO (Arama Motoru Optimizasyonu):

Arama motoru botları ( Google , Bing vb. ) görselleri görsel olarak analiz etmekte sınırlıdır.

Alt etiketi, bu botlara resmin içeriği hakkında bağlam sunar ve görselin ilgili arama sonuçlarında

doğru anahtar kelimelerle indekslenmesini sağlar.

<!DOCTYPE html>
            <html lang="tr">
            
            <head>
                <meta charset="UTF-8">
                <title>IMG Etiketi Örneği</title>
                <link rel="stylesheet" href="style.css?v=1.0.150">
            </head>
            
            <body>
            
                <div class="image-container">
                    <h3>Görsel Entegrasyonu</h3>
            
                    <img src="/img/manzara.jpg" alt="Dağlık alanda kış manzarası" width="800" height="600">
            
                    <p>
                        Resim, **`src`** ile yüklendi ve **`alt`** ile tanımlandı.
                    </p>
                </div>
            
            </body>
            
            </html>

body {
                font-family: 'Verdana', sans-serif;
                background-color: #f9f9f9;
                padding: 30px;
            }
            
            .image-container {
                max-width: 400px;
                margin: auto;
                padding: 15px;
                border: 1px solid #ccc;
                border-radius: 8px;
                background-color: #fff;
            }
            
            h3 {
                color: #2c3e50;
            }
            
            img {
                display: block;
                width: 100%;
                height: auto;
                border-radius: 6px;
            }
            
            .image-container p {
                text-align: center;
                font-size: 0.9em;
                margin-top: 10px;
                color: #666;
                border-top: 1px dashed #eee;
                padding-top: 10px;
            }

<audio> etiketi, HTML5 devrimiyle birlikte hayatımıza giren ve ses dosyalarını ( müzik, podcast, ses efektleri ) doğrudan web sayfasına gömmek için kullanılan standart elementtir.

Bu etiket sayesinde, herhangi bir üçüncü taraf eklentiye ihtiyaç duymadan, tarayıcının kendi yerel medya oynatıcısı üzerinden yüksek kaliteli ses deneyimi sunulabilir.

Kullanıcı Arayüzü ve Oynatma Kontrolleri (controls)

<audio> etiketi, varsayılan olarak sayfada görsel bir alan kaplamaz ve "görünmez" bir şekilde arka planda durur.

Kullanıcının ses dosyasıyla etkileşime girebilmesi için controls niteliğinin eklenmesi gerekir.

Bu nitelik eklendiğinde, tarayıcı Play/Pause düğmesi, zaman çizelgesi ve ses ayarı gibi standart bir oynatıcı arayüzünü otomatik olarak oluşturur.

Eğer bu nitelik kullanılmazsa, ses dosyasını oynatmak için özel JavaScript kodları yazılması gerekir.

Oynatma Davranışları (autoplay ve loop)

Geliştiriciler, sesin nasıl davranacağını belirleyen çeşitli nitelikleri bu etiketle birlikte kullanabilirler.

Autoplay:

Ses dosyasının sayfa yüklenir yüklenmez otomatik olarak başlamasını talep eder.

Ancak modern tarayıcı politikaları, ani gürültüyü önlemek amacıyla, kullanıcı etkileşime girmeden bu durumu genellikle engeller.

Loop:

Ses dosyasının sona erdiğinde otomatik olarak başa sarmasını ve sonsuz döngüde çalmasını sağlar.

Muted:

Sesin varsayılan olarak sessiz başlatılmasını sağlar.

Çoklu Format Desteği ve Uyumluluk:

Basit senaryolarda src niteliği doğrudan <audio> etiketine yazılarak dosya yolu belirtilebilir.

Ancak, profesyonel geliştirmede en iyi uygulama, <source> etiketlerini kullanmaktır.

Her tarayıcı her ses formatını (codec) desteklemeyebilir ( .mp3 , .ogg veya .wav).

<audio> etiketi içine birden fazla <source> etiketi yerleştirerek tarayıcının oynatabildiği ilk formatı otomatik seçmesi sağlanır.

Bu yapı, tarayıcılar arası uyumluluğu ( Cross-Browser Compatibility) garanti altına alır.

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <title>AUDIO Etiketi Örneği</title>
    <style>

    </style>
</head>

<body>

    <div class="audio-container">
        <h3>Arka Plan Müziği</h3>

        <audio controls>
            <source src="assets/media/muzik.mp3" type="audio/mpeg">
            <source src="assets/media/muzik.ogg" type="audio/ogg">

            Tarayıcınız ses oynatmayı desteklemiyor.
        </audio>

        <p>
            **<code>controls</code>** ile oynatıcı arayüzü görünür hale geldi.
        </p>
    </div>

</body>

</html>

body {
    font-family: 'Verdana', sans-serif;
    background-color: #f9f9f9;
    padding: 30px;
}

.audio-container {
    max-width: 400px;
    margin: auto;
    padding: 15px;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    background-color: #e8f5e9;
}

h3 {
    color: #388e3c;
}

audio {
    width: 100%;
    margin-top: 10px;
}

.audio-container p {
    text-align: center;
    font-size: 0.9em;
    margin-top: 10px;
    color: #666;
    border-top: 1px dashed #eee;
    padding-top: 10px;
}

<video> etiketi, video dosyalarını doğrudan bir web sayfasına yerleştirmek ve kullanıcıya oynatma işlevselliği sunmak için kullanılan temel HTML5 elementidir.

Tıpkı <audio> gibi, bu etiket de üçüncü taraf eklenti ( Flash gibi ) gereksinimini ortadan kaldırarak videoların tarayıcıların yerel motorları aracılığıyla yüksek performansla ve güvenli bir şekilde oynatılmasını sağlar.

Benzerlikler ve Temel Kontroller

Video etiketi, işlevsellik açısından ses etiketine çok benzerdir ve aynı temel niteliklerin çoğunu destekler:

Controls:

Kullanıcının videoyla etkileşim kurabilmesi için oynat/durdur, ses seviyesi , tam ekran ve zaman çubuğu gibi standart oynatıcı arayüzünü (UI) gösterir.

Autoplay:

Video içeriğinin sayfa yüklenir yüklenmez otomatik olarak başlamasını talep eder.

Ancak, bu niteliğin modern tarayıcılarda başarılı olması için genellikle videonun muted ( Sessiz ) olarak başlatılması gerekir.

Loop:

Video sona erdiğinde otomatik olarak başa sararak kesintisiz bir döngüde devam etmesini sağlar.

Source Etiketi:

Tarayıcı uyumluluğunu sağlamak için kritik öneme sahiptir.

<video> etiketi içine yerleştirilen birden fazla <source> etiketi, aynı videonun farklı formatlarını ( .mp4, .webm ) sunar.

Video Etiketine Özgü Kritik Nitelikler

Video içeriği, görsel bir bileşen taşıdığı için yapısal boyutları kontrol eden bazı ek niteliklere sahiptir:

Poster:

Video dosyası yüklenirken veya durdurulduğunda gösterilecek "kapak görselini" ( thumbnail ) belirten bir URL niteliğidir.

Bu, kullanıcının boş bir alan görmesini engeller ve videonun içeriği hakkında ön bilgi vererek kullanıcıyı teşvik eder.

Width ve height:

Oynatıcının ekranda kaplayacağı boyutları piksel cinsinden ayarlar.

Bu niteliklerin HTML'e dahil edilmesi, sayfa yüklenir yüklenmez Düzen Kaymasını ( Layout Shift) önlemek için iyi bir pratiktir.

Preload:

Tarayıcıya, video dosyasının yüklenmeye nasıl başlayacağı konusunda ipucu verir ( auto, metadata, none ).

Bu, sayfa yükleme hızını optimize etmek açısından önemlidir.

<!DOCTYPE html>
            <html lang="tr">
            
            <head>
                <meta charset="UTF-8">
                <title>VIDEO Etiketi Örneği</title>
                <link rel="stylesheet" href="style.css?v=1.0.150">
            </head>
            
            <body>
            
                <div class="video-container">
                    <h3>Tanıtım Videosu</h3>
            
                    <video width="600" height="340" controls poster="/img/kapak-resim.jpg">
                        <source src="/media/tanitim.mp4" type="video/mp4">
                        <source src="/media/tanitim.webm" type="video/webm">
            
                        Tarayıcınız video oynatmayı desteklemiyor.
                    </video>
            
                    <p>
                        Video, **<code>controls</code>** ve yükleme öncesi **<code>poster</code>** ile hazırlandı.
                    </p>
                </div>
            
            </body>
            
            </html>

body {
                font-family: 'Verdana', sans-serif;
                background-color: #f9f9f9;
                padding: 30px;
            }
            
            .video-container {
                max-width: 600px;
                margin: auto;
                padding: 20px;
                border: 1px solid #bdbdbd;
                border-radius: 8px;
                background-color: #fff;
            }
            
            h3 {
                color: #d32f2f;
            }
            
            video {
                display: block;
                width: 100%;
                height: auto;
                border-radius: 6px;
            }
            
            .video-container p {
                text-align: center;
                font-size: 0.9em;
                margin-top: 10px;
                color: #666;
                border-top: 1px dashed #eee;
                padding-top: 10px;
            }