Html5

Ders-10 Html’de Resim İşlemleri

Çok şükür Html’de 10. yazımıza ulaştık. Eğer bu yazıyı okuyorsan sana çok teşekkür ediyorum 🙂

Gelelim konumuza , evet arkadaşlar bu yazımızda size HTML5’te resim işlemlerini anlatmaya çalışacağım. Web sayfalarımızda kullanmak için Html kodlarımıza resim linkleri yerleştirir ve kaynağını belirterek sayfamıza resim ekleyiliriz . Başir bir örnekle başlayalım.

<img> etiketi ile resim ekleyeceğimizi belirtiriz. Src özniteliği ise resmin url’sini girmemize olanak sağlar. Bu url kendi bilgisayarımızda da olabilir veya bir internet sitesinden de alabiliriz. İlk önce kendi bilgisayarımızdaki resim dosyalarını yüklemeyi görelim.

<img src=”kunefecanavari.jpg”>

Dikkat edilmesi gereken husus eğer klasör ismi yazmayacaksak resmin Html dosyamız ile aynı dosya içerisinde olması gerekmektedir. Yukarıdaki kodun çıktısı aşağıdaki gibi olacaktır.

alt Özniteliği

alt Özniteliği ile kullanıcı bir nedenden dolayı resmi görüntüleyemiyorsa (yavaş yüklenme , kötü internet) resmin yerine çıkacak yazıyı belirtmemiz için kullanılır

Tarayıcımız eğer görüntü bulamazsa alt özniteliği içindeki yazıyı gösterir.

Resmin Genişlik ve Yüksekliğini belirtmek

Resmimizin genişlik ve yüksekliğini belirtmek için height özniteliğini kullanırız. Aynı şeyi Css ile de yapabiliriz onu Css yazılarımda anlattım bakabilirsiniz. Bu özelliğin kullanımı aşağıdaki gibidir

Genişlik ve yükseklik değerlerini pixel, %,em,rem vs şekilde belirtebiliriz

Resmin belirlediğimiz bir yerine link vermek

<map> Elementi bir görüntü haritası tanımlar. Tıklanabilir alanları belirtmemize imkan sağlar.

Yukarıdaki resmi Html dosyanıza ekleyin ve aşağıdaki kodları da yazın. Kahve , telefon ve bilgisayara link verildiğini göreceksiniz

Arkaplan Resmi (Background İmage)

Bir Html öğesine arkaplan eklemek için Css’te background-image özelliğini kullanırız. Bunu da bir örnekle açıklayayım.

Picture Elementi

Picture elementi Html5 ile gelen bir özelliktir. Responsive tasarımlar için ilaç gibi gelen bu etiket sayesinde istediğimiz genişlikte ve yüksekliklerde resmimizin istediğimiz gibi görünmesini sağlayabiliriz.

Yukarıdaki kodda 465 ile 650 piksel arasında bir resim 650 pikselden büyük genişlikler için ise başka bir resim göstermektedir.

Yorum yapmak için tıklayın

Cevap bırakın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

En üste