HTML Resimler

HTML Resimler

HTML'de sayfamıza resim eklemek için img etiketi kullanılır. img etiketi inline etikettir. Aynı linklerde olduğu gibi resim dosyasının konumu parametre kullanılarak belirtilir. Resim eklenirken src parametresi ile resmin yolu belirtilir.
Örneğin sayfamız ile aynı konumda ornek_resim.jpg isminde bir dosyamız olsun ve bu dosyanın sayfamıza eklenmesi gerekiyor. Bu durumda aşağıdaki kodu eklememiz yeterlidir.

<img src="ornek_resim.jpg"> Resim dosyaları sayfaya eklenirken genel olarak yapılan hata resim dosyasının isminin yazılması ancak dosya uzantısının unutulmasıdır. Bu ayrıntı çok önemlidir.

Sayfaya eklenen dosyalarda dosya konumunu ve dosyanın uzantısını doğru yazmak hayati önem taşır. İç klasörde bulunan dosya için klasör_adı/dosya_adıyazılmalıdır.
Örnek: Bulunduğumuz konumda resimler isimli klasör ve bu klasörün içinde ornek_resim.jpg isminde bir resim dosyası bulunumaktadır. Bu resim dosyasını sayfamıza eklemek için aşağıdaki kodlar yazılmalıdır.

<img src="resimler/ornek_resim.jpg">

Bir üstte bulunan klasördeki resmen ulaşmak için ise ../klasör_adı yazılmalıdır.
Örnek: Bulunduğumuz konumdan bir üst klasörde resimler isimli klasör ve bu klasörün içinde ornek_resim.jpg isminde bir resim dosyası bulunumaktadır. Bu resim dosyasını sayfamıza eklemek için aşağıdaki kodlar yazılmalıdır.

<img src="../resimler/ornek_resim.jpg">

Resim dosyalarımızı kendi kök klasörümüzden sayfamıza ekleyebileceğimiz gibi internette var olan resim dosyalarını da sitemize ekleyebiliriz. Bunun için resim dosyasının URL'sini yazmak yeterlidir.

Kullanıcıların herhangi bir sebeple resmi görüntüleyemedikleri durumlarda kullanıcılara resim hakkında kısa bir açıklama yapabilmek için alt parametresi kullanılır. Örnek:

<img src="ornek_resim.jpg" alt="örnek resim">

Resimlerin en uzunluğunu değiştirmek içinwidth boy uzunluğunu değiştirmek için height parametreleri kullanılır.
Bu işlem yapılırken resmin en ve boy uzunluklarını değiştirirken en boy oranlarına dikkat edilmesi gerekir. Diğer durumlarda resmin görünümü bozulabilir.
Örnek:

<img src="resimler/ornek_resim.jpg" width="200" height="200">

Uygulama örneklerini çözdükçe konu çok daha iyi anlaşılacaktır.


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın