Images in HTML

Kategori: HTML , 26 Ekim 2019 , JanFranco


Resimler websayfaları için oldukça önemlidir. Bir websayfasında resimleri gösterebilmek için img etiketini kullanırız. Resmi göstereceğimiz websayfasının bulunduğu klasörde bir images klasörü açalım ve içine bir resim taşıyalım. Bu resmi websayfasında gösterelim:
 


<img src="images/rabbits.jpg" />

img etiketini açtıktan sonra src attribute'ına resmin yolunu yazarız. Resim websayfamızla aynı klasörde bulunduğundan tam adres belirtmemize gerek yok. Klasörün ve resmin adını belirtmemiz yeterli. Bu şekilde resimleri gösterebiliriz. Ekstra açıklama için title ve alt etiketlerini kullanabiliriz:
 


<img alt="Rabbits" src="images/rabbits.jpg" title="Two sweet rabbits" />

Alt attribute'ı resim gözükmediği zaman beliren yazıdır. Title ise web tarayıcıda mouse ile resmin üzerine geldiğimizde çıkan ufak penceredeki yazıdır. Kullanıcıya yansıtılan kısım dışında, alt attribute'ı resmin açıklamasıdır. Bu açıklama ile web botları, örümcekler resmi anlayabilir. title attribute'ı ise adı üzerinde resmin başlığıdır, ismidir.

Resimlerin boyutunu değiştirerek sunabiliriz. Bunun için de width ve height attribute'larını kullanabiliriz. Resmin boyutunu CSS ile de değiştirebiliriz fakat bu yazı HTML ile alakalıdır:
 


<img alt="Rabbits" height="600" src="images/rabbits.jpg" title="Two sweet rabbits" width="600" />

HTML5 ile gelen figure etiketi ile makalelerde, yazılarımızda sıkça kullandığımız figürleri oluşturabiliriz. figcaption etiketi ile resmin alt açıklamasını oluşturabiliriz:
 

<figure>
	<img alt="Rabbits" height="600" src="images/rabbits.jpg" title="Two sweet rabbits" width="600" /><figcaption>An animal from mammal class</figcaption></figure>

html-images


Sonraki Yazı: Tables
Yorumlar

Henüz bir yorum bulunmuyor.
Yorum bırakın