Merhaba,

Bu yazıda HTML’de görsel kullanımını göreceğiz. Görseller web de kullanılan ilk yazı dışı ögelerdir. Bilgisayarınızda da kullandığınız en yaygın görsel formatları .jpg , .png (transparan veya arkaplanlı) , .gif (hareketli veya hareketsiz) ve dahası web tarayıcınızda çalışabilir.

HTML’de sayfamıza bir görsel eklemek için <img> etiketini kullanırız. Bu etiket daha önce gördüğümüz kendi kendine kapanan etiketlerdendir. Yani bir açılış ve bir kapanış etiketine ayrı ayrı sahip değildir. 

<img> etiketini kullanırken görselimizi kod satırları içerisine yerleştiremeyeceğimiz için görselin kendisini değil, görselin bulunduğu konumu src özelliği ile belirtiriz. Web tarayıcımız da bu işaretlemeden, src konumunda bulunan görsel dosyasını görüntülemesi gerektiğini anlar.

<p>
   Türk Bayrağı, Türkiye'nin ulusal ve resmî bayrağı.
   <br>
   <img src="turk-bayragi.jpg">
</p>

Görünümü:

Görselimizin dosya yolu olarak turk-bayragi.jpg olarak yazdık. O halde bu görsel çalıştırdığımız HTML dosyası ile aynı klasör dizininde bulunmalı.

Eğer HTML dosyamız anadizinde, görselimiz gorseller adında bir klasörün içinde olsaydı

 <img src="gorseller/turk-bayragi.jpg">

şeklinde yazmamız gerekirdi.

Eğer görsel dosyamız bir başka web sitesinde olsaydı veya absolute URL şeklinde yazmak isteseydik

 <img src="https://www.oktetik.com/gorseller/turk-bayragi.jpg">

gibi bir şekilde kullanmamız gerekirdi. 

Boyutlar

Az önce görebilmeniz için yerleştirdiğim önizleme görseli 800 pixel genişliğinde 533 pixel yüksekliğinde idi. Ancak görselin yazı içerisine sığabilmesi için daha küçük boyutlarda yerleştirdim. 

Her görsel bir genişlik (width) ve bir yükseklik (height) değerine sahiptir. HTML sayfanıza bir görsel eklerken boyut belirtmeniz gerekmez. Görseliniz otomatik olarak sahip olduğu gerçek boyutlarda gösterilir. Ancak siz görseli orjinal boyutlarında kullanmak istemiyorsanız width ve height özelliklerini kullanarak bunu değiştirebilirsiniz.

<img src=”turk-bayragi.jpg” width=”400px” height=”250px”>

Bu şekilde kullandığımız zaman artık web tarayıcımız görseli kendi boyutlarında değil 400×250 px boyutlarında gösterecektir. Burada boyutlandırma yaparken görselin boyut ölçeği üzerinde orantılı bir büyütme veya küçültme yapılmaz ise görselin görünümü bozulacaktır.

Web sayfamızda kullandığımız görseller web sayfamızın yüklenme hızını etkileyecektir. Bu sebeple kullanacağınız görselleri mümkün olduğu sürece önce bir görsel düzenleme programında (Photoshop, Paint vb.) kullanmak istediğiniz ölçülerde küçülterek kaydetmeniz ve o şekilde kullanmanız gerekir.

Görsel etiketleri inline etiketlerdir. Dolayısı ile bulundukları satırı komple kaplamazlar. Bir paragraf etiketinin içerisine görsel etiketi yerleştirdiğimiz yerde görsel alt satırdan devam etmez. Inline olduğu için görsel etiketi içerisinde başka bir etiket kullanmak da mümkün değildir. Fakat başka etiketler içerisinde görsel etiketi kullanılabilir. <a> etiketi içerisinde görsel kullanılarak görselin üzerine link verilebilir, veya <p> etiketi içerisinde yazılarak yazımızın içerisinde görsel kullanabiliriz.

HTML sayfalarımızda en sık kullanacağımız etiketlerden biri olan görsel etiketlerini de bu yazımızda görmüş olduk. Bir sonraki yazıda, bir başka HTML ögesi olan tabloları inceleyeceğiz.