HTML & CSS Resim Ekleme
Html sayfalarımıza <img> etiketi ile resimler ekleyerek içeriklerimizi çok daha farklı bir boyuta taşıyabiliriz. Resim ekliyor iken src= özelliği ile resmimizin yolunu göstermemiz gerekiyor daha sonra istenilirse genişlik yükseklik hizalama gibi farklı ayarlamaları yapılabilir eğer bu ayarlar yapılmaz ise de varsayılan ayarlar kullanılır örneğin boyutlandırma ayarlamaları yapılmaz ise resmin orijinal boyutları ile eklendiğini görürüz bu tasarımlar olarak bize sorunlar çıkarabilir.
Html sayfanıza resim eklemek için <img> etiketini kullanıyoruz.
<!DOCTYPE html> <html> <body> <h1>Html Sayfaya Resim Eklemek</h1> <img src="ramazanbiyikci-logo.jpg" alt="Logo" width="300"> </body> </html>
Kodun çıktısı;
Yukarıda uyguladığımız gibi img etiketi içerisindeki src ile ekleyeceğimiz görselin ismini ve dosya uzantısını yazıyoruz daha sonrasında genişlik ve yükseklik ayarlarını yaparak resmimizi boyutlandırıyoruz genişlik ve yükseklik ayarı yapmadan da görsel ekleyebiliriz fakat o zaman resmin çözünürlüğü ne kadar ise o boyutlarda sayfamıza ekleniyor bunun dezavantajı ise resim çözünürlüğü çok büyük ise bütün sayfanızı kaplıyor.
Benim örneğimde ben bir genişlik değeri yazdım ancak yükseklik değeri yazmadığım yükseklik otomatik ayarlanırken genişlik benim yazdığım doğrultuda 300px olarak ayarlandı. Önerim genişlik ve yükseklik ayarı yaparak fotoğrafınızı siteye eklemek. Burada yol belirtmediğimiz için dosyayı html dosyasının bulunduğu dizinde arayarak eklemeye çalışıyor.
Resim Görünmüyorsa
Kod satısındaki adımlara uyarak resim eklemeye çalıştınız ancak resim görünmüyorsa bunun tek sebebi vardır dosya yolu hatalıdır. Html dosyanızın bulunduğu dizinde ise resim direk resim adı ve uzantısı ile ekleyebilirsiniz ancak html ile aynı dizinde farklı bir klasörde ise örneğin img adında bir klasörde ise src=img/resim.jpg” şeklinde klasör ismi ve yolu ile resmi göstermelisiniz.
Bilgisayarımızın İçinde Farklı Bir Dizinden Resim Eklemek(ÖNERİLMEZ)
<html> <body> <img src="C:/Users/ugurkan/Desktopbeyazgul.jpg" width="100" height="100"> </body> </html>
Web deki bir kaynaktan dosyayı sayfamıza eklemek istersek
<html> <body> <img src="http://i.hizliresim.com/qPn8Od.jpg" width="100" height="100"> </body> </html>
Yukarıda görüldüğü gibi resmi ekleyeceğimiz sitenin tam adresini belirtmemiz gerekiyor aksi taktirde görselimiz sayfada görüntülenemeyecektir.
Yorum gönder