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:
<html>
<head>
<title>Görsel Örneği</title>
</head>
<body>
<img src="tree.jpg" height="150px" width="150px" alt="Ağaç resmi" />
<!-- Ya da % vererek ekleme -->
<img src="tree.jpg" height="50%" width="50%" alt="" />
</body>
</html>
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” />
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.
