<img>
HTML'de resim eklemek için image (resim) kelimesinin kısaltması olan <img> etiketini kullanıyoruz. IMG etiketi içeriğini dosya olarak aldığı için br ve hr etiketlerinde olduğu gibi açılıp kapanan etiketlerden değildir. Satır içi elemanlardandır.
Basit Kullanımı...
<img src="resim.jpg" />
IMG ÖZELLİKLERİ
Resim etiketleri farklı parametrelerle bazı özellikler alabilirler ..
- src
- title
- alt
- width
- height
- border
SRC
Source kelimesinin kısaltılmasıdır ve kaynak anlamına gelir. Dolayısıyla resim kaynağını yani dosya yolunu belirtir. Burada resmin adı ve uzantısı tam olarak belirtilmelidir. Ayrıca resmin yolu , klasörü var ise başta mutlaka yazılmalıdır.
Eğer resim ve html sayfa aynı klasör içerisinde ise , src için sadece resim adı ve uzantısını yazmamız resmin görünmesini sağlayacaktır.
<img src="resim.jpg" />
Eğer resim ayrı bir klasör içerisinde ise (örneğin resim klasörü), src için resim adı ve uzantısının başına klasör adını da eklememiz gerekecektir..
<img src="resim/resim.jpg" />
Eğer resim dosyası , klasör içerisinde başka bir klasörde ise (örneğin resim klasörü içerisindeki izmir klasörü olsun), bu kez izmir klasörünü de belirtmemiz gerekir.
<img src="izmir/resim/resim.jpg" />
Eğer resim dosyası, html sayfanın olduğu klasörün bir üst klasöründe ise , bu kez resim yolunun başına üst klasöre çıkma işareti olan "../" eklenir.
<img src="../resim.jpg" />
Eğer resim dosyası, html sayfanın olduğu klasörün iki üst klasöründe ise , bu kez resim yolunun başına iki tane üst klasöre çıkma işareti olan "../" eklenir.
<img src="../../resim.jpg" />
RESİM BAĞLANTISI
Resim dosyası, site klasörlerinde bir dosya olabileceği gibi internet üzerinden bir resim bağlantısı şeklinde de olabilir. Bu durumda resim yoluna doğrudan resmin bağlantı adresi eklenir. İnternet sayfalarındaki bir resmin bağlantısı almak için , resim üzerinde sağ yıklayarak açılan menüden , "resim adresini kopyala" seçebilirsiniz.
<img src="https://goztepektml.meb.k12.tr/icerikler/lets-upcycle-capture-the-future_15314183.html" />
ALT
ALt parametresi resim için bir açıklama (resmin ne olduğu) yazısı belirtir. Eğer resimler src le belirtilen yerde bulunamaz ise , yada sayfa açıldığında yüklenemezse , resmin açıklaması olarak resmin olması gerektiği yerde görünür..
<img src="resim.jpg" alt="İzmir" />
TITLE
Title parametreside alt parametresi gibi resim için bir açıklama (resmin ne olduğu) yazısı belirtir. ANcak alt'tan farklı olarak , resmin üzerine gelindiğinde görünür. Genelde tüm etiketler için kullanılır.
<img src="resim.jpg" alt="İzmir" title="İzmir" />
WIDTH
Resmin genişliğini width paramteresi ile belirtebiliriz. Varsayılan birimi "piksel" dir ancak farklı birimler kullanılabilir. %,rem,em gibi.. Birimler sağa yazıldığı için yüzde bir değer belirtilirken % işareti sayının sağına yazılır. Örneğin %50 giibi.
Bir resmin genişlik değeri değiştiğinde, resmin orjinal oranları korunacak şekilde yüksekliği otomatik olarak değişir.
<img src="resim.jpg" alt="İzmir" title="İzmir" width="30%" />
HEIGTH
Resmin yüksekliğini height paramteresi ile belirtebiliriz. Varsayılan birim "piksel" olur.
<img src="resim.jpg" alt="İzmir" title="İzmir" width="40%" height="100" />
BORDER
Resmin kenarlıklarını border ile ayarlayabiliriz. Sadece piksel cinsinden kenarlığın kalınlığı belirtilir.
<img src="resim.jpg" alt="İzmir" title="İzmir" width="200" height="200" border="5" />
RESİMLERİ ORTALAMA
İmg etiketi satır içi bir etikettir. Yani başka etiketlerle yanyana durabilir. Günümüz tasarımlarında hizalama işlemleri CSS ile ayarlanıyor ancak sadece HTML ile ortalamak istersek resmi blok bir eleman içerisine alarak align=center ile ortalayabiliriz. Yada doğrudan ortalama etiketi olan <center> etiketi içinde kullanabiliriz. Ancak <center> etiketi HTML 5 ile uyumlu değil. Bazı tarayıcılar hala desteklede kullanımı tavsiye edilmez..
Resmi P etiketi içerisine alarak ortalamak:
<p align="center">
<img src="resim.jpg" alt="İzmir" title="İzmir" width="40%" border="5" />
</p>
Resmi <center> içerisine alarak ortalamak:
<center>
<img src="resim.jpg" alt="İzmir" title="İzmir" width="40%" />
</center>
Her iki kullanımda da resim aşağıdaki gibi ortalanmış olur.
Görüşmek üzere..
