Turkcell | Geleceği Yazanlar

Web Programlama

Web Programlama

HTML'de Görseller

Lisans: Creative Commos (by-nc-sa)12.09.2019 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" />