HMTL RESİM (IMG) ETİKETİ

<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..