1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (Bu yazıya puan verin.)
Loading...
Web Tasarım

HTML & CSS Resim Ekleme

Html sayfalarımıza img etiketi ile resimler ekleyerek içtiklerimizi ç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 default ayarlar kullanılır örneğin boyutlandırma ayarlamalarını yapmaz 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.

<html>
	<body>
		 <img src="beyazgul.jpg" width="100" height="100"> 
	</body>
</html>

Yukarıda uyguladığımız gibi img etiketi içerisindeki src ile ekleyeceğimiz in görselin ismini ve dosya uzantısını yazıyoruz daha sonrasında genişlik ve yükseklik ayarlarını yaparak resmimizi boyutlandırıyor uz  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 buyuk ise bütün sayfanızı kaplıyor. benim önerim genişlik ve yükseklik ayarı yaparak fotoğrafınızı siteye eklemek. Burada yol belirtmediğim iz için dosyayı html dosyasının bulunduğu dızinde arıyor

Bilgisayarımızın içinde farklı bir dizinden yol belirterek dosya eklemek için yapmamız gereken (Ö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ğe imiz sitenin tam adresini belirtmemiz gerekiyor aksi taktirde görsel imiz sayfada görüntülenemeyecek tir

html-resim-ekleme

Yorum Yap