Resim Ekleme ve Hizalama

Resim Ekleme:

Resimler web tasarımında sıklıkla kullanılan ve görüntü güzelliği sağlayan nesnelerdir.Bu dersimizde html dökümanlarına nasıl resim eklenir ve eklenen resimler sayfa içinde nasıl hizalanır, bunlar hakkında bilgi vereceğiz.

Resim ekleme işlemi için, <img src="url"> etiketi kullanlır.Url nin yazımında daha önceki derste anlattığımız göreceli adres yolu verme yönteminin kullanılması tercih edilir.Sayfamıza eklenecek resimlerin boyutlarını, sayfaya eklemeden ayarlayabileceğimiz gibi, bu işlemi resmimizi sayfamıza eklerken yazacağımız parametreler yardımıylada yapabiliriz.

height = yükseklik
width = genişlik

Yukarıdaki etiket sayesinde sayfaya yüksekliği 400 piksel, genişliği 475 piksel olan gunes.jpg isimli bir resim eklenmiş olur.

Resim seçiminde, seçtiğimiz resmin gif yada jpg formatında olması zorunluluğu dışında herhangi bir kısıtlama yoktur.Son zamanlarda gif ve jpg resim formatlarının eksikliklerini kapatmak için, png uzantılı resim dosyaları da web sayfalarında kullanılabilmektedir.

Hizalama:

Html dökümanımıza eklediğimiz resim, yazı, tablo ve benzeri nesneleri sayfa içinde istediğimiz yere yerleştirmek için hizalama işine yarayan yardımcı parametreler kullanılır.Bu parametreler ilgili etikete eklenerek, istenilen hizalamalar yapılabilir.

align = "left" : Sola hizalama için kullanılır.Varsayılan hizalama sola dayalıdır.Hiçbir şey belirtilmediği zaman nesneler sola dayalı olarak sayfaya eklenir.

align = "right" : Sağa hizalama için kullanılır.

align = "center" :Nesneleri ortalamak için kullanlır.Ortalama işlemi için <center>.....</center> etiketi de kullanılabilir, fakat bu etiket bazı browserlar tarafından yorumlanmayabilir.

Not :
<img> etiketi align="center" parametresini desteklemez.Yukarıdaki uygulamada <img src="../resimler/k_pau.jpg" align="right"> etiketindeki align parametresini align="center" olarak değişitiridiğinizde, resmin sola yaslandığını, yani align="center" parametresinin dikkate alınmadığını görebilirsiniz.Bu nedenle html dökümanlarında resimleri ortalamak için değişik yöntemler kullanılır.Bunlardan biri <center> etiketidir.

ile resimlerinizi rahatlıkla ortalayabilirsiniz.

Resme açıklama ekleme:

Sayfaya eklenen resmin üzerine gelindiğinde bir açıklama görünmesi için "alt" parametresi kullanılır.Aynı zamanda büyük boyutlu resimler yükleninceye kadar resmin olduğu alanda kırmızı çarpı işareti yerine, bir açıklamanın görüntülenmesi işleminde de kullanılır.Sizde yukarıdaki uygulamada img etiketini,

şeklinde değiştirerek, bu özelliğin yarattığı etkiyi rahatlıkla görebilirsiniz.