HTML’de Resim Ekleme: Kapsamlı Bir Kılavuz
Giriş
Resimler, web sayfalarına görsel ilgi ve bilgi eklemenin güçlü bir yoludur. HTML’de resim eklemek, web geliştiricileri için temel bir beceridir ve bu kılavuz, bu işlemi adım adım açıklayacaktır.
Resim Dosya Formatları
HTML’de kullanılabilecek çeşitli resim dosya formatları vardır:
- JPEG (JPG): Sıkıştırılmış bir format, fotoğraflar ve karmaşık görüntüler için uygundur.
- PNG: Sıkıştırılmamış bir format, net kenarları olan görüntüler ve logolar için uygundur.
- GIF: Animasyonlu görüntüler için kullanılan bir format.
- SVG: Ölçeklenebilir vektör grafikleri, keskin kenarları olan ve herhangi bir boyuta ölçeklenebilen görüntüler için uygundur.
Resim Ekleme
Bir HTML belgesine resim eklemek için <img> etiketini kullanın. Bu etiket, aşağıdaki özniteliklere sahiptir:
- src: Resmin dosya yolunu belirtir.
- alt: Resmin alternatif metnini belirtir (görüntü yüklenmezse veya kullanıcı ekran okuyucu kullanıyorsa görüntülenir).
- width: Resmin genişliğini piksel cinsinden belirtir.
- height: Resmin yüksekliğini piksel cinsinden belirtir.
Örnek:
html
<img src="resim.jpg" alt="Bir kedinin resmi">
Resim Boyutlandırma
Resimlerin boyutunu, width ve height özniteliklerini kullanarak belirleyebilirsiniz. Bu öznitelikler piksel cinsinden değerler alır.
Örnek:
html
<img src="resim.jpg" alt="Bir kedinin resmi" width="200" height="150">
Resim Hizalama
Resimleri HTML belgesinde hizalamak için align özniteliğini kullanın. Bu öznitelik aşağıdaki değerleri alabilir:
- left: Resmi sola hizalar.
- center: Resmi ortaya hizalar.
- right: Resmi sağa hizalar.
Örnek:
html
<img src="resim.jpg" alt="Bir kedinin resmi" align="center">
Resim Bağlantıları
Resimleri, href özniteliğini kullanarak bağlantılara dönüştürebilirsiniz. Bu öznitelik, bağlantının hedef URL’sini belirtir.
Örnek:
html
<a href="https://www.example.com"><img src="resim.jpg" alt="Bir kedinin resmi"></a>
Faydalı Siteler ve Dosyalar