HTML’de resim ekleme için <img> etiketi kullanılır. Bu etiket kendi kendine kapanan (self-closing) bir etikettir ve birkaç temel niteliğe sahiptir. Görseller bir web sayfasının tasarım ve görünümünü iyileştirebilir. Resim göstermek için etiketin src niteliği kullanılır. src görüntünün dosya yolunu belirtir.
1 | <img src="resim.jpg"> |
Resimler teknik olarak bir web sayfasına eklenmez, resimler web sayfalarına bağlanır. <img> etiketi, başvurulan resim için bir tutma alanı oluşturur. Web sayfasını tasarlarken resme verilen başvurular mutlak veya göreceli olabilir. Başka bir web sayfasındaki resme mutlak bir bağlantı verilebilir ama o web sayfasındaki resim kaldırıldığı zaman bizim eklediğimiz bağlantı ilgili resme ulaşamayacağı için bizim sayfamızda da gösterilmez. Benzer şekilde kendi bilgisayarımız bulanan bir resme C:\resimler\resim.jpg şeklinde vereceğimiz bir bağlantı web sayfamız bizim bilgisayarımızda bulunduğu sürece gösterilecektir fakat web sayfamızı uzaktaki bir sunucuya yüklediğimizde o sunucuda C:\resimler\resim.jpg dosyasına ulaşamayacağı için resim gösterilemeyecektir. Web sayfasını tasarlarken kullanacağımız resimleri çalışma klasörüne taşımak ve oradan da göreceli link vermek önemlidir. Göreceli link verirken nasıl çalışmamız gerektiği ile ilgili örnekler konunun devamında anlatılacaktır.
Eğer resim dosyası bulunamazsa yukarıda gösterildiği gibi bir simge sayfamızda gösterilecektir. Bu durumda ise bu simge yerine bir açıklama eklersek resimler bulunamadığı zaman açıklaması sayfada gösterilir. Bunun için alt niteliği kullanılır.
1 | <img src="resim.jpg" alt="Resme ulaşılamıyor"> |
Genişlik ve Yükseklik Belirtme
Resimlere genişlik ve yükseklik belirtmek için width ve height nitelikleri kullanılabilir. Eğer genişlik ve yükseklik belirtmezsek resmin orijinal boyutlarıyla web sayfasında gösterilir. Resimlere verilen genişlik ve yükseklikler piksel cinsinden veya yüzde olarak verilebilir. Eğer yükseklik ve genişlik belirtmek istersek bunların oranlarının resmin orijinal boyutları ile orantılı olmasına dikkat etmek gerekir, aksi taktirde resimde sünmeler ve görüntü açısından bozukluklar meydana gelecektir.
1 | <img src="resim.jpg" width="300" height="200"> |
Başlık Ekleme
Web sayfasında gösterilen bir resmin fare ile üzerine geldiğimizde bir açıklama göstermek istersen img etiketinin title niteliği kullanılır. title, fare ile resmin üzerine gelindiğinde görünen bir bilgi balonudur.
1 | <img src="resim.jpg" title="Üzerine gelince görülecek metin"> |
Başka Bir Klasördeki Resimlerle Çalışma
Web sayfamıza eklemek istediğimiz resimler her zaman çalıştığımız sayfa ile aynı klasörde bulunmayabilir. Bu durumda resimleri eklerken klasör bilgisini de belirtmek gerekir.
Eğer resmi bulunduğu klasör sayfamız ile aynı seviyede klasörde yer alıyorsa aşağıdaki gibi kullanabiliriz. Görselde de görüldüğü üzere tasarımını yaptığımız sayfa1.html ve resimler klasörü aynı klasör olan calisma klasöründe yer almaktadır.
1 | <img src="resimler/resim.jpg"> |
Resmimiz çalıştığımız sayfanın üstünde başka bir klasörde yer alıyorsa aşağıdaki gibi kullanabiliriz. Görselde de görüldüğü üzere resimler ve sayfalar klasörü calisma klasöründe yer almaktadır. Yani resim.jpg sayfa1.html ile aynı klasörde değil, bir üst seviyede yer alan resimler klasöründe yer almaktadır.
1 | <img src="../resimler/resim.jpg"> |
