HTML-5 CSS-3 Ders 3 Yapısal Etiketler / Footer, Article, Nav, Aside, Figure Kullanımı
HTML5 Te <foooter> <article> <nav> <aside> <figure> etiketlerinin kullanılışı, aldığı değerler ve html 5 e ait diğer yapısal etiketler.
<footer>…</footer> Etiketi:
Önceki dersimizde de bahsettiğimiz gibi footer sayfanın alt bilgilerini tanımlama da kullanılır. Ama bir önceki derste sanırım not olarak geçmediğim bir şey varki. <footer>….</footer> etiketi sadece sitenin altında kullanılacak diye bir kaideyle yaratılmamıştır. Aslında çıkış amacı budur ama farklı etiketler içinde kullanılabilir.Bir makale alannında alt bilgi vermek istiyorsanız bunun için footer kullanabilirsiniz.
Footer Örnek
<article>
<p> Burası benim makale alanım. </p>
<footer>Burası makale alanım için düşündüğüm alt kısım. Yani makale alanımın alt bilgileri burada yer alacak. Mesela yazarı, neden yazıldığı gibi</footer>
</article>
Footer Örnek 2
<section>
sectin alanı içerik yazısı
<footer>
sectin alanı bilgi/içerik yazısı footer (altbilgi) kısmı
</footer>
</section>
NOT: Çoğu Tarayıcı <footer> etiketini aşağıdaki varsayılan değerler ile görüntülemektedir.
footer {display:block;}
Yani footer etiketini sayfanıza uyguladığınızda css varsayılan değeri bu şekilde olacaktır.
<footer> etiketinde neleri kullanabiliriz sorusuna tekrar gelecek olursak.
-Website copright bilgileri
– Hakkkımızda yazısı
– İletişim bilgileri
– Google map harita iletişim bilgisi
– Ana menünüzde kullanamadığınız bağlantılarınız
– Sosyal medya iconlarınız
……
Gibi çeşitlendirebiliriz.
Kullanımına dair örnek
<footer>
<p>Copyright birwebdesign.com</p>
<p>Tasarım : webledim.com</p>
<p>E-Posta: <a href=”mailto:bilgi@birwebdesign.com”>bilgi@birwebdesign.com </a>.</p>
</footer>
Destekleyen Tarayıcılar
Chrome : 6.0
Explorer : 9.0
Firefox : 4.0
Safari : 5.0
Opera : 11.1
<footer> etiketinin özellikleri
Özellik | Aldığı Değer | Açıklama |
Class | Class isimleri | Bir css sınıfı tanımlamak için kullanılır |
Dir | Rtl (right to left) ltr (left to right) | Metnin yönünün sağdan sola veya soldan sağamı olacağını tayin eder |
İd | İd isimleri | (unique) benzersiz element tanımlamak için kullanılır. |
Lang | Dil kodu | Dilin kodunu tanımlama da kullanılır. |
Style | Stil tanımlaması | Etikete inline tanımlama yapılmak istendiğinde kullanılır. |
Tabindex | Sayısal değer | Elementlerde TAB ile geçiş sırasını belirlemekte kullanılmaktadır. |
Title | Başlık tanımlaması | Mouse ile etiket üzerine gelindiğinde çıkacak açıklama bu alana yazılır. |