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
1 | <img src="resim adresi"/> |
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.
1 | <img src="manzaralar/cicekler.jpg"/> |
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.
1 | <img src="https://www.kodkampusu.com/wp-content/uploads/2021/01/html-resim-ekleme-link.png"/> |
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”
1 | <img src="resim adresi" width="100px" height="100px"/> |
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.
1 | <img src="resim adresi" title="AÇIKLAMA METİNİ"/> |
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.
1 | <img src="resim adresi" align="right"/> |
Üstat çok güzel bir içerik olmuş hoşuma gitti takibe aldım.
Teşekkürler :)