17 – Html Resim Kullanımı – Images

Html resim nasıl eklenir, link nasıl verilir, genişlik, yükseklik ayarları nasıl yapılır örneklerle inceleyelim.

Web sayfasında resim kullanımı sitenize görsellik katacak ve daha güzel gözükecektir. Html resim ekleme, link verme,

Html Resim <img> Etiketi Kullanımı

HTML <img> etiketi, bir görüntüyü bir web sayfasına gömmek için kullanılır.

<img> ‘ın kapanış etiketi yoktur.

<img> etiketinin iki özelliği vardır:

• src – Resmin yolunu belirtir
• alt – Resim için alternatif bir metin belirtir. Resim bir sebepten bulunamazsa bu yazı gösterilecektir.

Resim Yolu Gösterme

  <img src="resim/17-html-resim-02.webp" alt="Aile Resmi">

Resim Yerine Alternatif Metin Gösterme

 <p>Burada resim yollu belirttim, bir site üzerinden aldım. Ancak senaryomuza göre site resmi kaldırdı. Resmimiz gözükmüyor. Onun yerine alt ile yaptığımız "logo yerine çıkan yazı" diye gözüküyor.</p>
 <img src="https://www.yazilimdili.net/wp-content/html/html-ornek/logo_xxx.png" alt="Logo yerine çıkan yazı">

Resimde Yükseklik ve Genişlik Ayarı

width resmimizin genişliğini belirtir. height ise yüksekliğini belirtir.

img etiketimiz içerisinde width ve height kullanabiliriz.

Bir diğer yol ise style attribute kullanarak içerisinde width ve height özelliklerini kullanmak olacaktır.

Bir resmin yükseklik ve genişlik ayarlarını doğru yapmazsak resmimiz doğru orantıda gözükmeyecektir. Bu yüzden örneğin sadece genişlik ayarı vererek yüksekliğinin otomatik ayarlanmasını sağlayabiliriz.

Aşağıdaki örnekte editör üzerinde resim boyutu ile oynayabilirsiniz. Örnekte 400×400 boyutlarında bir resim kullandım.

 <img src="resim/17-html-resim-01.webp" width="400px" height="400px">

Başka Web Sayfasında Bulunan Resmi Gösterme

Yukarıdaki örnekte yerel bir resim kullandık. İstersek bir web sayfasında bulunan resmi kullanabiliriz. Ancak unutulmamalıdır ki başka bir web sayfasından aldığımız resim değişebilir, silinebilir, bu bizim için olumsuz sonuçlara yol açabiliriz.

  <img src="https://www.yazilimdili.net/wp-content/html/html-ornek/logo.png" alt="logo">

Resimde stlye attribute kullanarak yükseklik ve genişlik

Bir diğer kulanım şekli img etiketi içerisinde style attribute kullanarak, width ve heigh özellikleri ile genişlik ve yükseklik ayarını yapabiliriz.

Birçok html elemanının style özelliği mevcuttur. Bu yüzden genel kullanım bu şekildedir.

 <img src="resim/17-html-resim-01.webp" style="width:300px; height:300px;">

Animasyonlu Resim Kullanma

img etiketi animasyona sahip .jpg formatında resimlere izin vermektedir.

 <img src="resim/animasyon.gif" style="width:300px;">

En sık kullanılan resim formatları: jpg – jpeg – png – gif – webp – svg – ico

Tüm tarayıcılarda desteklenmektedir. (Chrome, Edge, Firefox, Safari, Opera) 

Resme Bağlantı Verme

<a> etiketi içerisinde resim etiketimizi <img> kullanarak link oluştururuz.

 <a href="/index.php">
    <img src="resim/logo.png" alt="Logo" width="300px">
 </a>