İlginizi Çekebilir

HTML Resim Ekleme

HTML Resim Ekleme

HTML ile Web sitelerimizi zenginleştirirken, yazıların haricinde görseller de kullanmalıyız. Çeşitli görsel eklemeleri yaparak göze güzel gözükmesi için düzenlemeler, eklemeler yapabiliriz. Bu yazımızda da sizlere html resim ekleme nasıl yapılır onu göstereceğim.
Resimleri eklerken, img tagını kullanmaktayız. img, İngilizce’de “image” yani resim kelimesinin kısaltımıdır. Ekleyeceğiniz resimin uzantıları jpg,png,gif uzantılarına sahip resim uzantılarından olmalıdır. Bütün html taglarında bildiğiniz gibi bir başlangıç tagı bir de bitiş tagı kullanmaktayız. Fakat resim ekleme tagını /img şekilnde kapatmıyoruz. Bunu birazdan uygulama kısmında daha iyi anlayacaksınız.

HTML Resim ekleme kodu

 
 
 

Dosya yoluyla resim ekleme

Ekleyeceğiniz resim, bilgisayarınızda bulunan bir görsel ise klasörismi/resimadi.jpg şeklinde yazmalısınız. Masaüstünde bulunan bir resimde ise direkt olarak resimadi.jpg yazmanız yeterli olacaktır.
Örneğin “manzaralar” klasörü içerisinde yer alan “cicekler.jpg” adında bir resimi eklemek istiyoruz.

HTML Resim Ekleme
 
 
 

Link ile resim ekleme

Resimleri aynı zamanda link olarak da ekleyebiliriz. Google üzerinde herhangi bir resimi seçerek, sağ tıklayıp bağlantı adresini kopyala diyerek linkini alabilirsiniz.

Html resim ekleme
 
 
 

Resim özellikleri

Eklenmiş olan resimlerin boyutlarını değiştirebiliriz, açıklama metini ekleyebiliriz, sağa,sola yaslı veya ortalanmış şekilde hizalayabiliriz.
 

Resim boyutu değiştirme

Resimlerin boyutunu width ve height yardımıyla değiştiremekteyiz.
Değiştireceğimiz boyutlandırma ölçüsü pixel “px” biçiminde olursa, daha net bir boyutlandırma olacaktır.
“width=genişlik” “height=yükseklik”

Html resim boyutlandırma
 
 
 

Resime açıklama metini ekleme

Eklediğiniz resimlere bir açıklama metini ekleyebilirsiniz. Fare ile üzerine geldiğiniz zaman bu açıklama metini görünür olacaktır. Açıklama metinini title ile eklemekteyiz.

Html resim açıklama
 
 
 

Resim hizalama

İçerik içerisinde eklemiş olduğunuz resimleri sağa yaslı, sola yaslı veya ortada duracak şekilde konumlandırmasını yapabilirsiniz. Bunu align ile yapmaktayız. Konum bilgisini, right/left/center şeklinde belirtmekteyiz.

Html resim hizalama

Yorum Yap

Yorum Yap

Yorumlar (2)

  1. Üstat çok güzel bir içerik olmuş hoşuma gitti takibe aldım.

Bir cevap yazın

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