Turkcell | Geleceği Yazanlar

101: HTML Başlangıç seviyesi derslerde Web Programlama uygulama geliştirme ortamını detaylı olarak inceliyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

HTML'de Görseller

Kategori : Mobil | Lisans : Creative Commons (by-nc-sa) | En son 12.09.2019 tarihinde güncellendi
Eğitmen : Geleceği Yazanlar Ekibi
Etiketler : web-programlama

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" />