Hoş Geldin, Ziyaretçi!

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

HTML Resim Ekleme

  • Konbuyu başlatan Thous
  • Başlangıç tarihi
Thous

Thous

Yönetici
Yönetici
Katılım
28 Şub 2022
Mesajlar
366
Konum
Samsun
Web
tilki.net
Kredi
3,614
Points
532
Ticaret: 1 / 0 / 0
Bu yazımda HTML Resim Ekleme Kodu Oluşturma, boyutlandırma gibi işlemlerin nasıl yapıldığını hem öğrenmeye, hem de siz değerli Tilki.NET ailesine aktarmaya çalışacağım.

HTML Resim Ekleme Kodu​

HTML'de resim ekleme kodu olarak <img> etiketini kullanabiliriz. <img> etiketi diğer etiketler gibi </img> şeklinde kapanmaz. Eklediğimiz resimlere özellik kazandırmak için ise bazı yardımcı kodlar kullanırız.

HTML:
<img src="HTML Resim Yolu Buraya" alt="Buraya resim açıklaması yazılır.">

Yukarıda gördüğünüz üzere src bölümüne resim yolu, alt bölümüne ise alt yazı (resim açıklaması) yazılır. Bu şekilde kullanım sağladığınızda resim boyutlanmasında herhangi bir değişiklik olmayacak, orjinal resim boyutunda ekleme sağlamış olacaksınız.

HTML Resim ekleme işlemi gerçekleştirirken dilerseniz resminizin genişliğini ve yüksekliğini ayarlayarak boyutlandırma yapabilirsiniz. Bu işlemi 4 farklı varyasyon ile gerçekleştirebilirsiniz.

HTML Resim Boyutlandırma 1: Orjinal Boyut​

Ekleyeceğiniz resmin orjinal boyutta kalmasını istiyorsanız üst tarafta kullandığımız resim ekleme kodunu kullanabilirsiniz. Bu kod ile resim eklediğinizde resminiz orjinal boyutlarında gözükecektir.

HTML Resim Boyutlandırma 2: Genişlik (Width) ile Boyutlandırma​

Img etiketinin içine genişlik yani width etiketi ekleyerek boyutlandırma yapabiliriz. Bu şekilde boyutlandırdığımız resimlerin en boy oranında bozulma meydana gelmeyecektir.

HTML:
<img src="dosyayolu.png" alt="Tilki.NET Resim Boyutlandırma" width="300">

Yukarıda eklemiş olduğumuz kod, aşağıdaki şekilde gözükecektir.


Html resim boyutlandirma

HTML Resim Boyutlandırma 3: Genişlik (Height) ile Boyutlandırma​

Img etiketinin içine yükseklik yani height etiketi ekleyerek boyutlandırma yapabiliriz. Bu şekilde boyutlandırdığımız resimlerin en boy oranında bozulma meydana gelmeyecektir.

HTML:
<img src="dosyayolu.png" alt="Tilki.NET Logosu" height="150">

Yukarıda eklemiş olduğumuz kod, aşağıdaki şekilde gözükecektir.

Html resim ekleme


HTML Resim Boyutlandırma 4: Genişlik ve Yükseklik Etiketleri ile Boyutlandırma​

Img etiketinin içine genişlik ve yükseklik yani height, width etiketlerini aynı anda ekleyerek de boyutlandırma yapabiliriz. Bu şekilde boyutlandırdığımız resimlerin en boy oranında bozulma meydana gelebilir. Bunun önüne geçmek için görsel boyutunu tam olarak bilmemiz gerekmektedir. Önerilen bir yöntem değildir.


<img src="dosyayolu.png" alt="Tilki.NET Logosu" width="150" height="150">


Umarım işe yarayan güzel bir yazı olmuştur, iyi forumlar ♥