Resimler

Bu dersin sonunda sayfanıza doğru boyutta ve açıklamalı resimler ekleyebileceksiniz.

img etiketi

Resimler img etiketiyle eklenir. Bu etiket boş bir elemandır, kapanış etiketi yoktur.

• src Resmin yolu. Dosya Yolları dersinde öğrendiğiniz kurallar burada da geçerlidir.
• alt Resmin yazılı açıklaması.
• width ve height Resmin piksel olarak genişliği ve yüksekliği.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resimler</title>
</head>
<body>
  <img src="baldiyetapanadam.png" alt="Bir adam, oyun karakteri Baldi'nin önünde eğilmiş duruyor." width="320" height="190">
</body>
</html>

İyi bir alt metni yazmak

alt metni resim yüklenemediğinde görünür ve ekran okuyucular tarafından okunur.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alt metni</title>
</head>
<body>
  <img src="yanlis-dosya-adi.png" alt="Yüklenemeyen resmin açıklaması burada görünür.">
</body>
</html>

• Resimde önemli olanı anlatın: resim yerine Hapkod logosu yazın.
• “Resmi” veya “fotoğrafı” kelimelerini eklemenize gerek yoktur. Ekran okuyucu zaten bunun bir resim olduğunu söyler.
• Resim yalnızca süs amaçlıysa alt="" yazın. Niteliği silmeyin, boş bırakın.

Boyutlar

width ve height değerleri piksel cinsinden, yalnızca sayı olarak yazılır: width="320". Sonuna px eklenmez.

Bu iki değeri yazmanız, tarayıcının resim yüklenmeden yerini ayırmasını sağlar. Böylece sayfa yüklenirken yazılar yerinden zıplamaz.

Değerlerin oranı resmin gerçek oranıyla aynı olmalıdır, yoksa resim bozulur:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Boyutlar</title>
</head>
<body>
  <p>Doğru oran (640 x 380 resmin yarısı):</p>
  <img src="putin.jpg" alt="Doğru oranda gösterilen resim" width="320" height="190">
  <p>Yanlış oran:</p>
  <img src="putin.jpg" alt="Basık görünen resim" width="320" height="60">
</body>
</html>

Resim bağlantıları

Resmi a etiketinin içine alırsanız resim tıklanabilir olur.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resim bağlantısı</title>
</head>
<body>
  <a href="baldiyetapanadam.png">
    <img src="baldiyetapanadam.png" alt="Resmi büyük boyutta aç" width="160" height="95">
  </a>
</body>
</html>

Resim bir bağlantı olduğunda alt metni, bağlantının nereye gittiğini anlatmalıdır.

Dosya biçimleri

• JPG: Fotoğraflar için.
• PNG: Ekran görüntüleri ve şeffaf arka planlı görseller için.
• SVG: Logolar ve simgeler için. Büyütünce bozulmaz.
• WebP: Daha küçük dosya boyutu için modern biçim.
• GIF: Basit animasyonlar için.

<img src="baldiyetapanadam.png" alt="Eğilmiş duran bir adam" width="320" height="190">

Bu derste öğrendikleriniz

• Resimler <img src="..." alt="..."> şeklinde eklenir.
• alt metni, resimde önemli olanı anlatır.
• width ve height yalnızca sayı olarak yazılır ve resmin oranını korumalıdır.