HTML Görsel Ekleme

HTML Görsel (Resim) Nasıl Eklenir?

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

<img> Etiketi herhangi bir kapanış etiketi almaz. 

<img> Etiketi, iki ana niteliğe sahiptir. Bunlar;

• src - Resmin yolunu belirtir.
• alt - Görüntü için alternatif bir metin belirtir. 

Sözdizimi şu şekildedir:

<img src="url" alt="metin">

Src Özelliği

Bu özellik web sayfasında kullanacağımız görselin yolunu belirtir.

<img src="avatar.jpg" alt="Onur KUL">

Alt Özelliği

Bu özellik ile görselimize metin tanımlarız. Eğer bir durumdan dolayı sayfamızdaki görsel görüntülenemezse, bu tanımlamış olduğumuz metin görüntülenecektir.

<img src="avatar.jpg" alt="Onur KUL">

Görsel Boyutu Ayarlama

Web sayfamızda kullanmış olduğumuz görselin boyutunu ayarlamak istiyorsak width ve height nitelikleri ile görsel boyutumuzu ayarlayabiliriz. Bu nitelikleri 2 şekilde kullanabiliriz gelin örnekler ile inceleyelim.

Örnek 1:

<img src="avatar.jpg" alt="Onur KUL" style="width:500px;height:600px;">

Örnek 2:

<img src="avatar.jpg" alt="Onur KUL" width="500" height="600">

Başka Klasördeki Görseli Kullanma

Görsellerimiz bir alt klasörde bulunuyorsa, src özelliğine klasör adını eklememiz gerekecektir. 

<img src="/img/avatar.jpg" alt="Onur KUL" style="width:128px;height:128px;">

Başka Sunucudaki / Web Sitesindeki Görüntüleri Kullanma

Başka bir sunucudaki bir görseli kullanmak istiyorsak, src özelliğinin içerisine görselimizin URL'sini eklememiz gerekiyor.

<img src="https://onurkul.com.tr/img/avatar.jpg" alt="Onur KUL">