HTML5 ile gelen birçok etiketin, kaynak kodun okunmasını ve yorumlanmasını kolaylaştırmak için geldiğini söylemekle başlamak istedim bu yazıma örn: Arama Motoru Örümcekleri.
Figure etiketi de yukarıda bahsedilen etiketler arasında yer alıyor, kod tarayıcı tarafından yorumlandığında, ekranda görsel olarak bu koda ait herhangi bir nesne göremezsiniz yani bir UI'e (User Interface / Kullanıcı Arayüzü) sahip değildir. Figcaption etiketinin durumu ise biraz farklı.
Figure etiketi resim (img), çizim (svg) gibi elemanları belirtmek için kullanılan etikettir, örnek kullanımı için aşağıdaki kodu inceleyebilirsiniz.
1 resim ile kullanım
<figure> <img src="resim1.jpg" alt="Resim Açıklaması"/> </figure>
Örneği incelemek için tıklayın
1'den fazla resim ile kullanım
<figure> <img src="resim1.jpg" alt="Resim Açıklaması"/> <img src="resim2.jpg" alt="Resim Açıklaması"/> <img src="resim3.jpg" alt="Resim Açıklaması"/> </figure>
Örneği incelemek için tıklayın
Figcaption etiketi <figure> etiketinin başlığını tanımlamamızı sağlar, figure kullanılan bir kodda figcaption kullanmak zorunda değilsiniz, w3c açısından böyle bir mecburiyet yok. Bu etikete css ile rütuşlar yapılarak çok güzel görünümler elde edilebiliyor. Örnek için aşağıdaki kodu inceleyebilirsiniz.
1 resim ile kullanım
<figure> <img src="resim1.jpg" alt="Resim Açıklaması"/> <figcaption>Buraya fotoğrafla ilgili açıklama gelecek.</figcaption> </figure>
Örneği incelemek için tıklayın
1'den fazla resim ile kullanım
<figure> <img src="resim1.jpg" alt="Resim Açıklaması"/> <img src="resim2.jpg" alt="Resim Açıklaması"/> <img src="resim3.jpg" alt="Resim Açıklaması"/> <figcaption>Buraya resimlerle ilgili açıklama gelecek.</figcaption> </figure>
Örneği incelemek için tıklayın
Ne tuhaftır ki piyasada en çok kullanılan editörler CKEditor, TinyMCE, jWYSIWYG ve hatta WordPress, Joomla gibi CMS'lerin bile metin editörleri figure ve figcaption etiketlerini hala desteklemiyor. Başka bir HTML5 yazısında görüşmek üzere.
Basitmiş bu ya. Standart html kodlarından ne artısı var acaba
Yazan Süleyman Yıldırım | Tarih : 16 Nisan 2015 , Perşembe 02:28
Resmin sol altta kalması için ne yapmam gerekiyor ACİL
Yazan Enes | Tarih : 6 Haziran 2015 , Cumartesi 20:05
@Enes CSS ile düzenleme yapabilirsin.
Yazan Yunus Başşahan | Tarih : 9 Haziran 2015 , Salı 10:44