HTML, web sayfalarının içeriğini oluşturmak için kullanılan temel bir işaretleme dilidir. Bu dilde görsellerin eklenmesi için kullanılan temel elementlerden biri <img> tagıdır. Bu makalede, <img> tagının detaylarını, kullanımı, öznitelikleri ve örneklerle birlikte inceleyeceğiz.

1- <img> Tagının Temel Kullanımı

<img> tagı, bir resmi sayfaya yerleştirmek için kullanılır. Bu tag, kendine özgü birkaç özniteliğe sahiptir ve bu özniteliklerin doğru bir şekilde kullanılması, görsellerin sayfadaki görünümünü etkiler.

2- src Özniteliği

src (source), görselin bulunduğu dosyanın yolunu belirtir. Bu öznitelik zorunludur; eğer sağlanmazsa, resim gösterilemez.

<img src="https://www.w3schools.com/w3css/img_snowtops.jpg" alt="Açıklayıcı Metin">

3- alt Özniteliği

alt (alternative), görselin yüklenememesi durumunda görünen alternatif metni tanımlar. Bu öznitelik, erişilebilirlik açısından önemlidir ve arama motorları tarafından da kullanılır.

<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="Görselin açıklaması">

4- width ve height Öznitelikleri

width ve height öznitelikleri, görselin boyutlarını piksel cinsinden belirler. Bu öznitelikler isteğe bağlıdır, ancak sayfa yükleme sürelerini iyileştirmek için önerilir.

<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="Görselin açıklaması" width="600" height="400">

5- title Özniteliği

title, görsele dair ek bilgiler sunan bir özniteliktir. Kullanıcı, görselin üzerine geldiğinde bu bilgi bir ipucu (tooltip) olarak görüntülenir.

<img src="https://www.w3schools.com/w3css/img_snowtops.jpg" alt="Görselin açıklaması" title="Bu görsel, doğayı temsil eder">

6- <figure> ve <figcaption> Tagları ile Kullanımı

Görsellerin daha iyi bir şekilde açıklanması için <figure> ve <figcaption> tagları kullanılabilir.<figure>, görseli temsil ederken, <figcaption> bu görselin altındaki açıklayıcı metni içerir.

<figure>
    <img src="gorsel.jpg" alt="Görselin açıklaması">
    <figcaption>Görselin açıklaması burada yer alır.</figcaption>
</figure>

7- Resim Formatları

HTML'de kullanılabilecek farklı resim formatları vardır. Bunlar arasında JPEG, PNG, GIF ve SVG gibi formatlar yer alır. Her bir formatın kendine özgü özellikleri ve kullanım alanları bulunmaktadır.

• JPEG: Fotoğraf ve gerçek dünya görüntüleri için idealdir.
• PNG: Şeffaflık desteği sunar ve grafikler için uygundur.
• GIF: Kısa animasyonlar için idealdir.
• SVG: Vektör tabanlı grafiklerdir ve ölçeklenebilirler.

8- CSS ile Görsel Stilleri

Görsellerin stilini CSS ile değiştirebiliriz. Kenar yuvarlama, gölge ve boyutlandırma gibi stiller uygulanabilir.

<style>
    .styled-image {
        border-radius: 10px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        width: 100%;
        height: auto;
    }
</style>

<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="Görselin açıklaması" class="styled-image">

Tüm Öğelerin Bir Arada Kullanıldığı Örnek

Aşağıda tüm özelliklerin bir arada kullanıldığı detaylı bir örnek verilmiştir:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML'de img Tagı Örneği</title>
    <style>
        .styled-image {
            border-radius: 10px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>HTML'de &lt;img&gt; Tagının Detaylı Anlatımı</h1>
    <p>&lt;img&gt; tagı, web sayfalarına görsel eklemek için kullanılır ve birçok özniteliği sayesinde özelleştirilebilir.</p>
    
    <h2>Temel Kullanım</h2>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="Örnek Görsel" class="styled-image">

    <h2>Öznitelikler</h2>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="Görselin Açıklaması" title="Bu bir örnek görseldir." width="300" height="200">
    
    <h2>Görsel Galerisi</h2>
    <figure>
        <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="Birinci Görsel" class="styled-image">
        <figcaption>Birinci Görsel Açıklaması</figcaption>
    </figure>
    <figure>
        <img src="https://www.w3schools.com/w3css/img_snowtops.jpg" alt="İkinci Görsel" class="styled-image">
        <figcaption>İkinci Görsel Açıklaması</figcaption>
    </figure>
</body>
</html>

Bu içerikte, HTML'de img tagının nasıl kullanılacağını ve özelliklerini detaylı bir şekilde açıklamak amacıyla hazırlanmıştır. Görsellerin web sayfalarında etkili bir şekilde yer alması, kullanıcı deneyimini artırır ve içeriğinizi zenginleştirir. Umarız bu bilgi, görselleri daha etkili bir şekilde kullanmanıza yardımcı olur.