HTML'de Görseller
Lisans:
Creative Commons
26.11.2020
tarihinde güncellendi
Bakabileceğiniz Etiketler:
Eğitmen:
Geleceği Yazanlar Ekibi
Tarayıcılar resim ve görüntü dosyalarını gösterebilir. İnternet'te yaygın olarak kullanılan dosya tipleri bitmap (.bmp), GIF, JPEG ve PNG şeklinde sıralanabilir. Bu eğitim içeriğinde web sayfanıza bir görseli nasıl ekleyeceğinizi göreceksiniz.
Kod şablonumuz şu şekilde olacak:
<img src="resimkonumu/resimadi">
Görsel dosyalar boyut anlamında büyük oldukları için yüklenmeleri metinlere göre daha fazla süre alır.
GorselAdı parametresi, yüklenecek görselin URL bilgisini içermektedir. Örneğin;
<img src="https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/2014_degerlendirme.jpg" />
Görsellerin boyutunu ayarlamak
Görüntülenecek olan görselin boyutları HTML kodu içinde belirtilebilir. height parametresiyle görselin piksel cinsinden yüksekliğini ve width parametresiyle de piksel cinsinden genişliğini belirtebilirsiniz.
Örneğin;
<img src="https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/2014_degerlendirme.jpg" width="50" height="50" />
Görselin sayfa üzerindeki konumunun belirlenmesi
Görselin sayfa üzerindeki konumunun belirlenmesi için align parametresini kullanabilirsiniz. Sola yaslamak için left, sağa yaslamak için right, ortalamak için center, üst için top, alt için ise bottom şeklinde konum tanımlanız yeterli olacaktır.
Örneğin sırasıyla,
<img src="https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/2014_degerlendirme.jpg" align="left" />
<img src="https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/2014_degerlendirme.jpg" align="right" />
<img src="https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/2014_degerlendirme.jpg" align="center" />
<img src="https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/2014_degerlendirme.jpg" align="top" />
<img src="https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/2014_degerlendirme.jpg" align="bottom" />