Bu eğitimin başında yine vurgulamak gerekir ki, tanıtılan öğelerden mucizeler beklememelisiniz. Görsel olarak henüz çok etkileyici değiller. Ancak bunlar, belgelerinizi mantıklı ve anlamsal olarak yapılandırabileceğiniz arka plan açısından tabii ki ilginçtir.
Navigasyon Alanları
nav öğesiyle gezinti çubukları veya diğer ek öğeler için anlamsal olarak işaretlenebilir. Bu öğe genellikle diğer sayfalara veya ek bilgilere yönlendirebileceğiniz bağlantıları işaretlemek içindir.
Bir örnek:
<nav> <a href="index.html">Ana Sayfa</a> <a href="html5.html">HTML5 öğren</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>
nav içinde istediğiniz öğeleri kullanabilirsiniz. Yani gezinmeyi hala listeler aracılığıyla tanımlayabilirsiniz. Ancak diğer öğeler de sorunsuz bir şekilde nav içinde kullanılabilir. Ayrıca nav, bir belge içinde birden fazla kez de kullanılabilir.
Detayları Belirtmek
Bir diğer ilginç öğe details. Bu, içeriğe ilişkin ek bilgilerin belirtilebileceği anlamına gelen öğeden anlaşılabileceği gibi. details öğesi, summary öğesi ile birlikte kullanıldığında daha ilginç hale gelir. Bu öğe ile ilgili daha fazla bilgi sonraki kısımda verilecektir.
İlk olarak details öğesinin kullanımına ilişkin bir örnek:
<article>
<details>
<summary>Makaleye dair referanslar...</summary>
<ul>
<li><a href="referans1.html">Bağlantı 1</a></li>
<li><a href="referans2.html">Bağlantı 2</a></li>
<li><a href="referans3.html">Bağlantı 3</a></li>
</ul>
</details>
<details>
<summary>Makaleye dair kaynaklar ...</summary>
<ul>
<li><a href="kaynak1.html">Bağlantı 4</a></li>
<li><a href="kaynak2.html">Bağlantı 5</a></li>
<li><a href="kaynak3.html"">Bağlantı 6</a></li>
</ul>
</details>
</article>details öğesinin içeriği, içerdiği summary öğesi tıklanana kadar ziyaretçiye gösterilmez.
Bu özellik örneğin bir video oynatıcı ile ilişkilendirilebilir. Bu amaçla aşağıda da bir örnek bulunmaktadır:
<video id="video" genişlik="320" yükseklik="180" otomatikOynat>
<kaynak src="video.mp4" tür="video/mp4">
<kaynak src="video.webm" tür="video/webm">
<kaynak src="video.ogv" tür="video/ogg">
</video>
<details açık>
<summary>Video Oynatıcı Kontrollerini Göster/Gizle</summary>
<p>
<düğme id="başla" tıkla="başla()">Başla/Dur</button>
<düğme id="sessiz" tıkla="sessiz()">Sessiz</button>
<düğme id="sesele" tıkla="sesele()">Sesli</button>
<düğme id="sessizle" tıkla="sessizle()">Sessizi Azalt</button>
</p>
</details>
Sayfa yüklendiğinde, başlangıçta sadece oynatıcı penceresi görünür.
Ziyaretçi, summary tarafından tanımlanan içeriğe tıkladığında details içindeki bilgiler görüntülenir.
Belirtilen yerine ulaşılamadığında tarayıcıların bir varsayılan içerik göstermesi gerektiği belirtilmiştir.
Ayrıca details için open özniteliği de ilginçtir.
<details açık> … </details>
Bu özniteliği belirlediğinizde, sayfa yüklendiğinde summary öğesinin içeriği doğrudan görünecektir.
Özetler
Şimdi daha detaylı bir şekilde summary öğesine bir göz atalım.
<article>
<details>
<summary>Makaleye dair referanslar...</summary>
<ul>
<li><a href="referans1.html">Bağlantı 1</a></li>
<li><a href="referans2.html">Bağlantı 2</a></li>
<li><a href="referans3.html">Bağlantı 3</a></li>
</ul>
</details>
<details>
<summary>Makaleye dair kaynaklar ...</summary>
<ul>
<li><a href="kaynak1.html">Bağlantı 4</a></li>
<li><a href="kaynak2.html">Bağlantı 5</a></li>
<li><a href="kaynak3.html"">Bağlantı 6</a></li>
</ul>
</details>
</article>
Yani summary içinde details ile henüz açılmamış içerik tanımlanır. Dolayısıyla summary sayesinde sadece gerektiğinde görüntülenmesi gereken ek bilgiler ekleyebiliriz.
Katlanabilir ve açılabilir alanlar tabii ki JavaScript kullanılarak da kolayca oluşturulabilir. Ancak tarayıcıda JavaScript devre dışı bırakıldığında uygulama çalışmaz. Bu nedenle details ve summary'nin geniş bir şekilde desteklenmesi arzulanır.
Kenar Alanları ve Marjinal Alanlar
Ek bilgiler, marjinal alanlar, çapraz referanslar vb. HTML5'te aside öğesiyle belirlenebilir. Bu öğe aracılığıyla belirlenen içerik, genel belge ile bağlam içinde olmasına rağmen doğrudan ona ait değildir.
Lütfen unutmayın ki HTML5 özelliklerine göre aside ile belirlenen alan için hangi boyutun geçerli olacağı belirtilmemiştir. Dolayısıyla aside içeriği örneğin marjinali olarak da, kenar çubuğu olarak da görüntülenebilir.
Aşağıdaki örnek, bir aside alanının tanımını gösterir.
<body>
<header>
<h1>PSD-Tutorials.de</h1>
</header>
<article>
<h2>Web-Apps erstellen (Teil 10): jQuery mobile (2)</h2>
<p>Bu öğretici, ilk gerçek jQM sayfasının nasıl oluşturulacağını göstermektedir. Bunun için gereken şey, zaten öğrendiğiniz HTML temel yapısıdır.</p>
<aside>
<h3>Daha Fazla</h3>
<ul>
<li><a href="#/fn1">Daha fazla bilgi…</a></li>
</ul>
</aside>
</article>
<aside>
<nav>
<h2>Navigasyon</h2>
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="# ">İletişim</a></li>
</ul>
</nav>
</aside>
</body>Zamana ilişkin bilgiler eklemek
Zaman bilgileri, yeni time öğesi ile özel olarak belirtilebilir. Bu öğenin özelliği, zaman bilgilerinin insanlar ve makineler tarafından okunabilir olmasıdır.
İnsanlar için zaman bilgileri
<p>15 Nisan saat 19:00'da buluşuyoruz: <time datetime="2014-04-15 19:00">15 Nisan saat 19:00</time>. </p>
Burada tekrar hatırlatmakta fayda var: Bunun mevcut tarayıcılarda öncelikle herhangi bir görsel etkisi olmadığını, sadece zaman bilgilerini makinelerin okuyabileceği şekilde yapılandırıldığını unutmayın.
Metinleri vurgulama
mark öğesi ile kelimeleri veya tüm metin bölümlerini görsel olarak vurgulama olanağı vardır. HTML5 spesifikasyonunda, öğenin yalnızca metin içerikleri ile birlikte kullanılması gerektiği açıkça belirtilmiştir. Ayrıca belirli bir bağlama sahip olmalıdır.
Bir örnek:
<p>Bu öğreticide ilk gerçek jQM sayfası oluşturulurken gerekli olan <mark>HTML temel yapısı</mark> hakkında bilgi verilmektedir.</p>
Vurgulamanın tarayıcılar tarafından nasıl uygulandığı belirlenmemiştir.
Ancak Google Chrome ve Firefox, her ikisi de sarı bir arka plan kullanmaktadır.
Diğer İletişim Kutularını Belirleme
HTML5'te diğer iletişim kutularının ayrı olarak belirlenmesi de düşünülmüştür. Bunun için dialog öğesi bulunmaktadır. Şu anda dialog öğesi sadece Safari ve Google Canary tarafından, yani tarayıcının geliştirici sürümü tarafından desteklenmektedir.
Bunun için yine bir örnek:
<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>Bu kutunun içeriğidir.</p>
<button id="hide">Kapat</button>
</dialog>
<button id="show">İçeriği Göster</button>
</div>
<script type="text/JavaScript">
(function() {
var dialog = document.getElementById('dialog');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('hide').onclick = function() {
dialog.close();
};
})();
</script>
Düğmeye tıklandığında, iletişim kutusu görünecektir. Tüm bunların işlevsel olabilmesi için, önceki örnekte HTML5, CSS ve JavaScript kombinasyonu kullanılmıştır.
