Resim Dosyaları
Resim ve fotoğraf dosyaları genelde jpg, gif, png, bmp, tiff gibi uzantılara sahiptir. Web sayfalarımıza bu dosyaları eklemek için <img> etiketini kullanırız. Bu etiketin İngilizce image (resim, imaj) sözcüğünden geldiği bellidir. Bu etiketin aldığı en önemli özellik src’dir. İngilizce source (kaynak) sözcüğünden gelir ve resim dosyamızın bulunduğu konumu belirler.
Artık birden çok dosya ile çalışmaya başlayacağınız için tüm çalışma dosyalarımızı tek bir klasör içinde tutalım. İlk olarak masaüstünde www adıyla yeni bir klasör oluşturalım ve içinde aşağıdaki bağlantıdan ulaşabileceğimiz tbmm.png dosyamızı ekleyelim.
TBMM Kurumsal Logo - Tıkla ve açılan sayfada kaydet
(Yukarıdaki bağlantıyı sağ tıklayarak, "bağlantıyı farklı kaydet" seçeneği ile de bilgisayarınıza kayıt edebilirsiniz.)
TBMM logosunu www klasörümüzün içine tbmm.png dosya adı ile kaydettik. Şimdi aşağıdaki kodlarla yeni bir index.html dosyası oluşturalım ve yine www klasörü içine kaydedelim.
<html> <head> <meta charset="UTF-8"> <title>Resim dosyası eklemek</title> </head> <body> <img src="tbmm.png" alt="TBMM"/> </body> </html>
Bu kodlarda <img> etiketi içinde src dışında bir de alt özelliğinin bulunduğunu görüyorsunuz. Bu alt özelliğinin değeri de TBMM olarak belirlenmiş. Eğer bir hata sonucu src özelliğindeki resim dosyası görüntülenemezse, yerine alt özelliğinin değeri olan bu TBMM yazısı görüntülenecektir.
Dikkat:
Not: <img> etiketinin de <br/> etiketi gibi tek başına kapatıldığına dikkat edelim.
<img src="tbmm.png" alt="TBMM"/>
Resim dosyamız oldukça büyük pixel boyutlarında olduğu için herhangi bir ölçeklendirme yapmazsak sayfamızın da büyük kısmını kaplar. Aslında grafik programları ile böyle büyük resim dosyalarının boyutları küçültültülür ve hafızada daha az yer kaplayan, küçük resim dosyaları ile çalışılır. Ama elimizde böyle bir seçenek yoksa resim dosyamızı istediğimiz pixel boyutlarına değiştirebiliriz. Örneğin; <img src="tbmm.png" alt="TBMM" width="200" /> yazarak genişlik özelliğini 200 px olarak belirleyebiliriz.
Ya da height özelliğine istediğimiz pixel değerini yazarak resim dosyamızın, sayfamızda istediğimiz yükseklikte görüntülenmesini sağlayabiliriz. Sadece width veya height özelliğini kullanarak orantılı bir büyütme veya küçültme yapmış oluruz fakat eğer istersek hem width hem de height özelliklerini birlikte kullanabiliriz. Bu durumda büyük olasılıkla resim dosyamızın oranlarında değişiklikler olacaktır. <img> etiketine title özelliği ekleyerek değerini “TBMM logosu 200 px” olarak belirleyin.
Farenizle aşağıdaki TBMM logosu üzerine geldiğinizde ve bir süre üzerinde beklediğinizde bir değişiklik fark ediyor musunuz?
<img src="tbmm.png" alt="TBMM" width="200" title="TBMM logosu 200 px"/>
title özelliğinin işlevi hakkında ne gözlemlediniz?