Şimdiye kadar görüntü tanımınız yaklaşık olarak şu şekilde olmalıydı:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Ancak img öğesine (ve olmalı) bazı özellikler atanmalıdır. İlk olarak, bir tane alt özelliği olabilir. Burada tanımlanan metin, herhangi bir nedenden dolayı resim yüklenemediğinde tarayıcı tarafından gösterilir.
Ne yazık ki alt özelliğiyle ilgili sürekli yanlış anlaşılmalar meydana gelmektedir. alt özelliği gerçekten sadece resmin görüntülenmediği durum için hizmet verir. Ancak bazı tarayıcılar, fareyle bir resme geldiğinizde alt özelliğinin değerini bir araç ipucu penceresinde gösterir.
Bu davranış yanlıştır. Bu tür araç ipuçları için aslında title özelliği bulunmaktadır. Bu tür bir tanım aşağıdaki gibi görünebilir:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de'nin logosu" />
Bu durumda, title değeri alt değerini örtmektedir.
Boyut Bilgileri
HTML'de artık çok şey daha çok CSS kullanılarak çözülmektedir. Ancak boyut belirtme tanımı burada bulunmamaktadır. Genişlik ve yükseklik, width ve height özellikleriyle tanımlanır. Buna örnek:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de'nin logosu" width="200" height="150" />
width veya height değerine bir ölçü birimi belirtilmezse, tarayıcı tarafından sayı değerleri piksel olarak yorumlanır. Örneğin, önceki örnekteki resim 200 piksel genişliğinde ve 150 piksel yüksekliğindedir. Yüzde değeri de mümkündür.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de'nin logosu" width="20%" height="15%" />
% ifadeler mevcut görüntüleme alanına göre belirtilir. Boyut bilgileri belirtilmezse, tarayıcılar resimleri orijinal boyutlarında gösterir.
Resimler ve Metin Paragrafları
Metin içinde resim yerleştirirken dikkatli olmanız gerekir.
<p><img src="logo.png" alt="" width="180" height="150" /> Bu metin resmin yanında görüntülenir.</p>
img, bir satır içi öğesi olarak adlandırılır. Grafikler doğrudan metin içine yerleştirilebilir. Grafik, satır yüksekliğinden daha uzunsa tarayıcı metni satır içinde hizalar. Varsayılan olarak, metin hizalaması grafik alt kenarına göre otomatik yapılır.
Önceki HTML sürümlerinde hizalamayı align özelliğiyle etkileyebilirsiniz. Bu özelliği artık kullanmayın çünkü HTML5 standardından kaldırıldı. Bunun yerine CSS'in sunduğu imkanları kullanın. Bu sayede metni örneğin resmin etrafında akıtabilirsiniz.
Uzun Tanım
HTML size bir resim için detaylı bir açıklama belirtme imkanı sunar. Bu herhangi bir resim için açıklamaların gerçekten gerekli olduğu durumlarda kullanışlı olabilir. Ek bilgileri farklı yerlerde saklayabilir ve bunlara yönlendirme yapabilirsiniz.
Ek bilgiler çeşitli yerlerde olabilir.
<img src="bild1.png" alt="Diagram 1" title="Diagram 1" longdesc="#diagram" />
Bu, içeride diagram ID'li bir bölüm olduğu varsayımına dayanır.
En yaygın olan, bilgilerin dış bir dosyada saklandığı durumdur.
<img src="bild1.png" alt="Diagram 1" longdesc="diagram1.htm" />
Ancak tarayıcı desteği burada hala eksik. Ayrıca, bu özellik tarayıcı üreticilerini, bunu nasıl kolay bir şekilde uygulayabilecekleri konusunda sıkıntıya sokuyor gibi görünüyor.
Örneğin Firefox'taki uygulama, gerçekten hoş ve kolay anlaşılır değil. Bir resimde bir longdesc özelliği varsa, normal sayfa ziyaretçileri bunu başlangıçta fark etmezler. Aksine, resmi sağ tıklayarak görmeleri gerekir.
Ardından bağlam menüsünde Açıklamayı göster seçeneği görünecektir. Bu seçeneğe tıkladığınızda, longdesc özelliğinde belirtilen ek bilgi gösterilir. Dediğim gibi, bu Firefox'ta işe yarar, ancak kesinlikle zarif değil.
Opera'nın bunu oldukça benzer bir şekilde çözdüğünü belirtmek gerekir. Bu tarayıcıda resme sağ tıkladığınızda Uzun Açıklama girişini görebilirsiniz.
Bu giriş daha sonra belirtilen ek bilgilere yönlendirir.
WC3 ayrıca, Uzun Açıklamayı bir Veri URL'si biçiminde belirtmeyi önermektedir.
<img src="logo.png" alt="W3C" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E %3Chtml%3E%3Chead%3E%3Ctitle%3Eİnternet'in 40. Yılına Özel Google Logosu\u003C/title%3E%3C/head%3E %3Cbody%3E%3Cp%3EAslında semte dayalı bir doodle teması istedik ve loş bir arka planda bir yazı kutusu içine gönderilen erkek tipografik elle boyalı bir tasarım oldu%3C/body%3E%3C/html%3E" />
Bu Veri URL'leri hakkında henüz deneyim kazanmadıysanız, bu konuda detaylı bilgilere http://de.wikipedia.org/wiki/Data-URL adresinden ulaşabilirsiniz.
Resim açıklamalarını tanımlama
Şimdiye kadar HTML'de resim alt başlıklarını ve resim gruplarını tanımlamak için hiçbir imkan yoktu. İşte bu yön HTML5 ile değişti. Burada gerçekten de figure ve figcaption olmak üzere iki yeni öğe tanıtıldı.
Önceden belirtmek gerekirse: figure, yalnızca grafiklerle birlikte kullanım için değil. Aslında, bu öge her türlü belgeyi tamamlayan öğeler için kullanılabilir. Bunlar sadece resimler değil, aynı zamanda diyagramlar, kod örnekleri ve videolar da olabilir.
Figure'un yanı sıra figcaption da var. Burada belirli kullanıcı grupları için okunabilir olmayan içeriklere alternatif bir açıklama eklemek mümkün.
İşte figure ve figcaption ögelerinin kullanımına ilişkin bir örnek:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>Bu bizim yeni logomuz.</figcaption> </figure>
Tarayıcıda sonucu kontrol ettiğinizde şu sonucu elde edersiniz:
İki öğeyi tarayıcılar nasıl ele alacakları sonuçta onlara kalmıştır. Esasen tabii ki CSS ile görüntülemeyi yine de değiştirebilirsiniz.figure öğesi içinde dilediğiniz kadar resim veya başka öğe ekleyebilirsiniz. Ancak bir figure öğesinde yalnızca bir figcaption öğesi bulunabilir. Bu konuda da bir örnek:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <img src="logo_large.jpg" width="400" height="250" alt="PSD-Tutorials.de" /> <figcaption>Bu bizim yeni logomuz.</figcaption> </figure>
Bu şekilde birden fazla resmi bir figure öğesine yerleştirebilirsiniz.
Özellikle web sitelerinin veya içeriklerin mantıksal yapısı açısından HTML5'te birçok yenilik bulunmaktadır. Bu yenilikleri bu serinin ilerleyen bölümlerinde detaylı bir şekilde öğreneceksiniz.
