html öne çıkan görsel

HTML Görsel Etiketi

Merhaba arkadaşlar, bu yazımda görselleri web sayfamıza nasıl ekleyebiliriz onu anlatacağım.

<img> Etiketi

Görselleri eklemek için kullanırız. Bu etiketimizin de kapanışı yoktur. Yalnızca özelliklerden oluşur. Görseli bir kaynak(source) vererek tanımlarız.

Örnek bir görsel ekleme kodumuz:

<img src=”Gorselin/Yolu/GorselinAdi.jpg” />

Burada da çok önemli bir özelliğimiz daha var. Google bildiğiniz üzere görsel okumuyor, görselin yerine alternatif bir metin ekliyoruz onu okuyor. Bu alternatif metinleri vermek de şu şekilde yapılmaktadır.

<img src=”Gorselin/Yolu/GorselinAdi.jpg” alt =”Ornek Alternatif Metin”/>

Bu alternatif metin sadece arama motorları tarafından okunması için değil ayrıca interneti yavaş kullanıcılar görseli yükleyemediklerinde de alternatif metin görüntülenir.

Eğer html dosyamızla görselimiz aynı dosya içerisinde ise tam kaynak yolunu değil sadece adını verebiliriz.

<img src=”sadeceGorselAdi.jpg” />

Görüntüyü Yeniden Boyutlandırma

Sayfanıza eklediğiniz görüntüleri yeniden boyutlandırabilirsiniz. Bunun için yükseklik(height) ve genişlik(width) değerleri ekliyoruz. Bazı büyük resimler yüksek boyutlarda olabilir. Bu sebepten ötürü bu yükseklik ve genişlik değerleri önemlidir. Örnek bir kod ekleyeceğim:

Bu ikisinin farkını kendiniz deneyebilirsiniz. Online olarak görmek istiyorsanız buraya tıklayabilirsiniz.

Görsele Çerçeve Ekleme

Bunların yanı sıra görselin kenarlarını siyah bir çerçeveye alabiliriz. Bunun için kenarlık anlamına gelen border özelliğini kullanırız.

<img src=”gorsel.jpg” height=”100px” width=”100px” border=“2px alt=”kenarlık” />

[the_ad id=”1292″]

Bu çerçeve de bazı tarayıcılarda siz tanımlamaz iseniz varsayılan olarak gelmektedir. Görsel etiketi de bu kadar. Umarım faydalı olmuştur.

 

 

Bir cevap yazın