Html Resim Ekleme - Html Dersleri

[VexraDev]

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

Html ile web sayfalarımıza nasıl resim ekleriz?

Sayfaya resim eklemek için <a> etiketi kullanılır.

Kullanımı :

<img src="resim yolu" alt="resme alternatif yazı">

** src ile resmin yolunu belirtmemiz gerekiyor. Resim html sayfamızla aynı klasör içinde de olabilir ya da internet üzerinden de olabilir.



Örneğin, 1.jpg isimli bir resim dosyamız ve html dosyamız aynı dizin içindeyse ;

<img src="1.jpg" alt="resme alternatif yazı">

Örneğin, 1.jpg dosyamız img isimli klasör içinde olsun. img resim klasörümüzle html dosyamız aynı dizin içindeyse ;

<img src="img/1.jpg" alt="resme alternatif yazı">

Örneğin, resmi internet üzerinden almak istersek ;

<img src="https://www.pexels.com/photo/action-automobiles-automotive-car-show-173287" alt="resme alternatif yazı">

alt özelliği : eğer resim yolu yanlış ise resim sayfada gösterilemez ve resmin yerine alternatif olarak gösterilir.

<img src="img/1.jpg" alt="resim yok ise gösterilecek yazı">

Resim Genişlik ve Yüksekliği :

Resim boyutlarını ister width ve height özelikleriyle belirtiriz istersek de , style="width:500px; height:500px" şeklinde kullanabiliriz.

<img src="https://www.pexels.com/photo/action-automobiles-automotive-car-show-173287" alt="" width="300" height="300">


<img src="https://www.pexels.com/photo/action-automobiles-automotive-car-show-173287" alt="" style="width:300px;height:300px;">

Resmi link haline çevirmek :

<a href="turkmmo.com">
  <img src="https://www.pexels.com/photo/action-automobiles-automotive-car-show-173287" alt=""    
       style="width:400px;height:400px;">
</a>