Html ile Web İşlemleri 21 - Medya Elemanları - Resim (İmaj) Kullanımı

Medya (Resim, Video ve Ses) Elemanları

Web sayfaları sadece yazılardan oluşmaz. Bir web sayfasını etkileyici hâle getirmek için fotoğraf, resim, video ve ses gibi donatılar kullanılır. Kullanılacak her içerik elemanı, barındırma alanında bir alan kaplar. Web sayfasında kullanılacak resim, video ve ses gibi dosyaların bulunacağı klasör yapısı, kodlamaya geçmeden önce oluşturulur (Görsel 3.30). HTML belgesi içeriğinde kullanılacak donatılar URL yazarak belgeye eklenir. HTML belgesi içeriğinde kullanılacak resim, video, ses gibi dosyalar kategorilerden oluşuyor ise bu kategoriler için alt klasörler oluşturulması, web barındırma alanının düzenli olmasını sağlar. Klasör isimlerinde Türkçe karakter kullanılmaz.

Görsel 3.30: Örnek klasör yapısı

1. HTML5 <img> Kullanımı

HTML belgesine resim (görsel) eklemek için <img> etiketi kullanılır. “img”, “görsel” anlamında kullanılan “image” kelimesinin kısaltmasıdır. HTML belgesine eklenecek görsel gif, jpg ve png formatında olmalıdır. <img> </img> şeklinde kullanım doğru değildir, <img> etiketi boş etikettir. <img> etiketinin kapama etiketi bulunmaz bunun yerine etiketin sonunda / (eğik çizgi) kullanılır. Resim eklemek için <img> etiketinin src özelliği kullanılır. src özelliği HTML belgesine eklenecek resmin yolunu gösterir (Görsel 3.31).

<img src="proje.jpg" />

Görsel 3.31: <img> kullanımı

Web alanında resim dosyaları HTML belgesi ile aynı klasörde veya alt klasörlerde yer alır. Resim dosyasını sadece dosya adı ile çağırmak için HTML belgesi ile resim dosyası aynı klasör içinde yer almalıdır. Alt veya üst klasörde bulunan bir resme ulaşmak için resim yolu doğru yazılmalıdır.

<img src="resimgaleri/arkadas/01.jpg" />

Görsel 3.32: src kullanımı

Alt klasörlere ulaşmak için dosya yolu ve dosya adı yazılır (Görsel 3.32). Üst klasördeki bir dosyaya ulaşmak için ../ kullanılır. Ulaşılacak üst klasör sayısı kadar ../ ifadesi tekrar edilir (Tablo 3.10).

Tablo 3.10: <img> Etiketi src Özelliği Kullanımı

<img> src kullanımı	HTML belgesi ile “resim.jpg” dosyası
<img src="resim.jpg">	Aynı klasörde
<img src="galeri/resim.jpg">	Bir alt klasörde
<img src="galeri/arkadas/resim.jpg">	İki alt klasörde
<img src="../resim.jpg">	Bir üst klasörde
<img src="../../resim.jpg">	İki üst klasörde

1.1. <img> Etiketinin Özellikleri

<img> etiketi ile kullanılabilecek özellikler Tablo 3.11’de verilmiştir.

Tablo 3.11: <img> Etiketinin Özellikleri

Özellik	Alacağı Değer	Açıklama
height	piksel	Resmin yüksekliğini belirtir.
ismap	ismap	Tıklanabilir alanlara sahip bir resim olduğunu belirtir.
src	URL	Resmin URL’sini ifade eder.
title	metin	Fare işaretçisi resmin üzerine geldiğinde bir ipucu görüntüler.
usemap	harita ismi	Tıklanabilir alanlara sahip resim haritası oluşturur.
width	piksel	Resmin genişliğini belirtir.
sizes	piksel	Görüntünün medya ortamına göre olması gereken boyutla­rını tanımlamamızı sağlar.

Sıra Sizde

Farklı klasörlerde bulunan görseller ile <img> etiketinin özelliklerini kullanarak HTML belgesi oluşturunuz ve tarayıcıda görüntüleyiniz.

Görsel 3.33: Border kullanımı

<img src="resim.jpg" width="400" height="200" border="6" title="Öğrenci"/>

Görsel 3.33’te CSS kullanılmadan <img> etiketi özellikleri ile yükseklik, genişlik, çerçeve kalınlığı ve alternatif metin özellikleri uygulanmıştır. Özellikler yazılırken aralarında en az bir boşluk bırakılır. <img> ögesine CSS aracılığıyla stil uygulanır. CSS kullanılarak kenarlık eklenir, resim opaklığı ayarlanır, köşeler yuvarlatılır, filtre uygulanır.

Aynı görüntü için farklı kaynakların bir listesini tanımlayarak tarayıcının, kullanılacak en iyi olanı seçmesi srcset özelliği kullanılarak sağlanır. Aşağıdaki uygulamada görüntü alanına uygun varsayılan görseli yükleyecek tarayıcının karar vermesini kolaylaştırmak için srcset özelliğinde görseller genişlikleri ile birlikte kullanılmıştır.

Sıra Sizde

srcset ve boyut özelliklerini kullanarak görsel ekleyiniz, oluşturduğunuz HTML belgesini tarayıcıda görüntüleyiniz.

<!—srcset ve boyut özelliklerinin kullanımı -->
<img src="/resimler/ogrenci.jpg"
title="Eğlenerek Öğrenme Etkinliği Görsel"
srcset=" /resimler/ogrenci-360.jpg 360w,
/resimler/ogrenci-720.jpg 720w,
/resimler/ogrenci-1440.jpg 1440w"
sizes="(min-width: 800px) 720px, 360px"/>

Görsel 3.34: Görsel tarayıcı tarafından görüntülenmiyor

Tarayıcı, görseli yüklerken veya görseli bulamadığında <img> etiketinin title özelliğindeki açıklama, tarayıcıda görüntülenir (Görsel 3.34).