Bu yazımızda, bir HTML sayfasına resim ekleme işlemini nasıl gerçekleştirebileceğinizi anlatmaya çalışacağım.
HTML Resim Ekleme Yapısı
Bir HTML sayfasına resim eklerken <img> etiketini kullanırız. Bu etiket kapalıdır ve herhangi bir kapatma etiketi bulunmaz. Hemen görelim.
<img src="resim-adresi/resim-adı.jpg" />Bir HTML sayfasına en basit haliyle bu şekilde resim ekleyebilirsiniz. Src kısmında kullanacağımız resim hakkında tarayıcıya bilgiler veririz. Resim adresi yazan yer, resmimizin nerede yani hangi dosyada bulunduğu bilgisidir. Resim adı kısmı da, uzantısıyla birlikte resim adının yazıldığı yerdir.
HTML Resimlerde Alt Parametresi
Web sitesinde resmin üzerine mouse ile geldiğinizde gördüğünüz yazıdır. Ayrıca resmin yüklenmesinde bir problem olursa, kullanıcıya resim yerine bozuk bağlantı simgesi ve alternatif yazı gösterilir. Resimlere alternatif yazı eklemek için alt parametresini kullanırız. Hemen kullanımını görelim.
<img src="resim-adresi/resim-adı.jpg" alt="Alternetif Metin"/>HTML Resimlere Link Vermek
Bir HTML sayfasında resimlere link vermek için <img> etiketini, link etiketlerinin arasına yazmanız yeterlidir. Link verme konusunda eksikleriniz varsa buraya tıklayarak HTML sayfasında link verme dersimizi okuyabilirsiniz. Şimdi bir örnek görelim.
<a href="adres.html">
<img src="resim-adresi/resim-adı.jpg" alt="Alternetif Metin"/>
</a>HTML Resimlerde Yükseklik ve Genişlik
Web sayfamızda resimleri boyutlandırmamız gerekebilir. Bu gibi durumlarda yüksekliği belirlemek için ‘height’, genişliği belirlemek için ‘width’ kullanırız. Örnek kullanım görelim.
<img src="resim-adresi/resim-adı.jpg" alt="Alternetif Metin" width="300px" height="200px"/>Yani burada resmin boyu 200 piksel, yüksekliği ise 300 piksel olacaktır.
Bu yazımızda HTML resim ekleme, resimlerde alt parametresi, resimlere link verme ve yükseklik-genişlik kavramlarını anlatmaya çalıştım. Umarım faydalı olmuştur. Diğer HTML dersleri yazılarımızı okumak isterseniz buradan tümüne ulaşabilirsiniz.