Bölüm 4

Satıriçi (Inline) Elementler

Sayfa 4


Özel Grup Satırıçi Elementler

- <img> (resim) Elementi -

<img> (resim) Elementi

 

Resimler, bir Web sayfasına anlam katabilen öğelerdir. Resimlerle çalışmanın teknik bilgileri Ek-6 da incelenmişitir. Bu kısma geçmeden önce, bu bilgilerin okunması yararlı olacaktır.

<img> (image) elementinin DTD deki tanımı:

 

 

şeklindedir. Bu verilerden, <img> elementinin boş bir element olduğu, dolayısı ile başlangıç iminin kullanımın zorunlu olduğu fakat, bitiş iminin kullanımının yasaklanmış olduğu anlaşılır. Aynı bilgilerden, <img> elementinin sözdizimi,

<img                                      (Başlangıç imi : zorunlu )

Ortak Temel Nitelikler(Çekirdek Nitelikler, Uluslararasılaştırma Nitelikleri, Script Yazılabilecek Olaylar)

src="URI"  [TB]  Resmin kaynağı, kesin olarak belirtilmelidir

alt="metin" [YD] Resim indirilemezse görüntülenecek açıklayıcı metin

longdesc="URI"  [TB]  Resim indirilemezse görüntülenecek açıklayıcı uzun metin varsa, bu metnin bulunduğu kaynağın Internet adresi

name="CDATA" [YZ] Bu nitelik eskiye uyum için saklanmıştır. Güncel uygulamalarda id niteliğinin kullanılması gerekir

height="uzunluk" [YN] Resmin yüksekliği

width="uzunluk" [YN] Resmin genişliği

usemap="URI"  [TB]  Resim bir kullanıcı tarafı görüntü haritası olarak kullanılıyorsa bu <map> elementinin kaynak Internet adresi

ismap : Sunucu tarafı görüntü haritası bilgisi

>

İçerdiği elementler : Yok (boş element)

                                                (Bitiş imi: yasak ) (Boş elementlerin sonlama imlerinin kullanımı yasaklanmıştır).

İçerebilecek elementler :Blokdüzey ve satırıçi elementler (<pre> elementi hariç).

şeklinde olacaktır.

<img> (resim) Elementinin Nitelikleri

src="URI"  [TB]  Bu nitelik, resmin bulunduğu URI değeridir {src=source (kaynak)}.    Bu değerler mutlak veya göreli URI değerleri olabilir. Web tasarımcıları genel olarak kullandıkları resimleri toplu olarak bir ../resim klasöründe toplarlar ve buradan yükleme yaptırırlar.

alt="metin" [YD] Resimleri yükleyemeyen belge çözümleyiciler artık gerilerde kalmıştır. Buna rağmen LYNX gibi salt metin çözümleyiciler, görme engelliler ve resimlerin belirtilen yerde bulunmaması sonucunda resimlerin yüklenememesi sonucunda, kullanıcılar resimleri alt niteliğinin açıklayıcı metni ile tanıyacaklardır. Bu metinler açık ve açıklayıcı olmalıdır. alt="Şirket Merkezi" metni açıklayıcı değildir. alt="Barok bir mimariye sahip şirket merkezimizin ağaçlarla bezeli patika yolu ve uzaktan görüntüsü" daha açıklayıcıdır. Bazı durumlarda, resmin height ve width nitelikleri açık olarak verildiğinde, alt niteliğinin değeri olan metnin, resmin görüntüsü yerinde oluşacak bir gölge ile maskelendiği belirtilmektedir. Bu durumda yazarlar, height ve width niteliklerinin belirtilmesinden vazgeçebilirler.

longdesc="URI"  [TB]  Bu nitelik resmin üzerinde daha açıklayıcı bilgiler varsa, bu bilgilerin URI değeridir. Örnek olarak şirket merkezi tarihi bir bina ise, bu binanın tarihi, bir Web sayfası olarak düzenlenebilir ve bir sunucuya yerleştirilebilir. Ne yazık ki bugün hiç bir belge çözümleyici, longdesc niteliğini desteklememektedir. Bu bilgilerin verilmesinin bugün için en iyi yöntemi, resmin kenarına bir link vermek olabilir.

height ve width (boyut nitelikleri) ="uzunluk" [YN] Normal olarak bir belge çözümleyicisi, indireceği resmin boyutlarını hesaplayabilir. Bu hesaplama belki biraz belgenin indirilme süresini arttırabilir, fakat en resim en iyi şekilde görüntülenmeiş olur. İndirilme süresinin kısaltılması ve görüntü boyutlarının önceden bilinmesi için resmin açık boyutlarının verilmesi yararlı olabilir. Verilen boyutların resmin tam boyutuna denk olması gereklidir. Resmin orijinal boyutlarından farklı boyutlarda görüntülenme istenmesi, alınacak görüntünün kalitesini bozar. Büyük bir resim için küçük bir görüntü alanı belirtilmesi, resmin indirilme süresini kısaltmaz. Resim yine tüm olarak orijinal büyüklüğü ile indirilir fakat daha küçük olarak görüntülenir. Eğer resmin boyutları, görüntülenmesi istenen boyutlardan farklı ise, en iyi yöntem indirilecek resmi bir resim düzenleme programından yararlanarak yeniden düzenleyip, indirileceği adrese yerleştirmektir.

usemap="URI"  [TB]  Bu nitelik navigasyon amacı ile bir resmin çeşitli kısımlarının kullanılması anlamına gelen, görüntü haritalarının kullanımı ile ilgilidir.

<img> (resim) Elementinin Uygulanması

Belge çözümleyiciler, <img> (resim) elementine rastladıkları anda, resmi aynı satıra koyacaklardır. Normal olarak metin resmin iki tarafında aynı satırda akacaktır. Üst satır resmin üstünde kalacaktır. Bu konuda bir uygulama b4s4Uygulama1.htm dosyasında görülebilir.

CSS 2.1 ve CSS3 uygulamaları ile sola, ortaya veya sağa yanaştırılan bir resmin kenarından metin akabilecektir. Buna yüzen resim adı verilir. Bu konudaki bir uygulama, b4s4Uygulama2.htm dosyasında görülebilir.

Resimlerin önemli kullanım alanlarından biri de navigasyon düğmelerinin oluşturulmasıdır. Basit hareketsiz navigasyon düğmelerinin oluşturulması için, çapa elementinin, <img> elementini içerebilmesinden yararlanılabilir. Daha gösterişli rollover düğmelerinin oluşturulması için, önce bu düğmelerin bir resim düzenleyici platform kullanılarak oluşturulması, sonra da bu düğmelerin navigasyon özelliklerini kazanmaları için gerekli olan karmaşık scriptlerin yazılmasına gerek duyulur. Bu scriptler, sayfanın boyunu arttırıp yükleme süresini yükselttikleri gibi, ek bir işlem yükü oluşturup sayfanın görüntülenmesini de geciktirebilirler. Yine de, iyi tasarlanmış güzel rollover düğmelerinin sitenin görünüşüne ve kullanışlılığına olumlu katkılarının olacağı yadsınamaz. HTML 4.01 kesin spesifikasyonunda tanımlı <button> elementi çekici, etkili, sade görünüşlü rollover etkili standart butonları oluşturabildiğini belirtelim. Bu standart düğmelerin kullanıçıların hazırladıkları rollover düğmelerinin güzelliği ile yarışamayacaklarını fakat rollover etkilerinin hiç bekleme zamanı olmaksızın gerçekleşeceğini belirtelim.

Kullanıcıların hazırladığı düğmeler, yerel bilgisyarlarda çalışan deneme amaçlı sayfalarda çok güzel görülebilir. Fakat, gerçek yaşamda, sunuculardan yayın yapılan sayfalarda, rollover resimlerinin yüklenmesi metin kısmlardan daha yavaş gerçekleşir. Bu asenkron yüklenme, sayfaların ilk görüntülerinin, resimler yerinde boşluklar olarak görüntülenmeye başlaması ve bu görüntülerin hiç çekici olmaması ile sonuçlanabilir. Sayfanın yüklenmesi ilerledikçe, resimler yerlerine yerleşir ve görüntü istenilen şekle ancak ulaşabilmiş olur. Gerçek sunucular üstünde, rollover düğmelerin, basmaya karşı tepkileri de çok yavaş olabilir. Çünkü düğmeye basılınca, bir rollover resminin yerine yenisi yüklenmeye çalışır, bu da çok yavaş gerçekleşebilir ve bu süre içinde okuyucu sanki bir tepki alamamış gibi olur. Ayrıca rollover düğmelerinin Javascript kodlarının sayfaların yüklenme sırasını bellekte tutan history bilgileirini tahrip edbildikleri ve kullanıcıların geçtikleri sayfalara yeniden dönmekte zorluk yaşayabilecekleri de bildirilmiştir. Bütün bunlar rollover düğmelerinin kullanılmasında olağanüstü dikkat ve çekinceli hareket edilmesi için pozitif uyarılardır. Günümüzde, büyük şirketlerin ve bankaların rollover düğmelerini az kullandıkları da belirtilmelidir.

Aşağıdaki örnekte ilk olarak basit hareketsiz bir düğme, ikinci olarak basit bir rollover düğme, son olarak da <button> elementinden yararlanılarak oluşturulmuş bir standart düğme görülmektedir :

fixedrollover2

Bu düğmelerin tek bir sayfada uygulanmasını görmek için lütfen bu düğmelere tıklayınız. Başka bir örnek, b4s4uygulama3.htm sayfasında verilmiştir. Tekrar edelim, bu örneklerde görülen rollover düğmelerinin olan görüntüleri yerel sunucudan alındığı için basma etkisinin tepkisinin alınmasında iletişim süresi yoktur ve hızlı tepki veren rollover düğmesinin görüntüsü ilk bakışta çekici gelebilir. Gerçek yaşamda ise, uzak sunucudan kod indirilip yerel makinede değerlendirildiği için, yerel makinede verilecek bir düğme basma etkisi önce uzak sunucuya iletiletilecek, uzak sunucu bu komuta uygun olarak yer değiştirme (roll over) resmini gönderecek, yerel makine bunu çözümleyip görüntüleyecek ve kullanıcı da yaptığı etkinin tepkisini hissedebilecektir. Bu süreç ne kadar uzun olursa, rollover düğmeleri de o kadar etkileyici olmaktan uzaklaşacaktır. <button> Elementinin ürettiği standart düğmelerde ise yükleme süresi sorunu yoktur ve bu düğmelerin yayınlanmış sayfalarda görüntüleri daha güzel olabilmektedir.

Yukarıda belirtilen tüm çekincelere karşın rollover düğmeleri dahil her türlü düğmeler çok yararlı araçlardır. Gelişkin çizim araçları ile her türlü gözalıcı düğme üretilebilir, karmaşık rollover scriptlerinin yazımı da atık yazarlık araçlarının standart olarak verdikleri programlar haline gelmiştir. Bunların rollover butonu karakterini kazanması da zor sayılmayacak bir çalışma olabilir. Burada yazarlara düşen görev, oluşturulan düğme görüntülerinin sayfanın sadeliği, ciddiliği ve inandırıcılığına katkıda bulunmasıdır. Düğme gibi tüm navigasyon araçlarında, daima sayfanın genel görüntüsü ile uyumlu, daha çok pastel renklerin kullanıldığı, sade formların kullanılmasında yarar bulunmaktadır. Eğer amaç bir eğlence sitesi oluşturmak değilse, okuyucunun gözünü alacak tasarımlardan kaçınılmalı ve okuyucunun belgeyi okuması sırasında konsantrasyonunu bozacak şekillerden uzak durulmalıdır.

Resimlerin sayfa içine konumlanması ile ilgili çalışmalar, stil sayfalarının incelenmesi sırasında yapılacaktır.

 

Son Güncellenme Tarihi : 21.09.2005 21:06  

validate in W3C !Valid HTML 4.01!