Eğitimin başında bir kez daha belirtmek gerekir ki, sunulan unsurlardan mucizevi bir şey beklememelisiniz. Görsel olarak pek bir etki yaratmazlar. Ancak, belgelerinizi mantıksal ve anlamsal olarak yapılandırmak için kullanabileceğiniz için ilginçtirler.
Navigasyon alanları
nav öğesi, gezinme çubuklarını veya ek öğeler için diğer alanları semantik olarak etiketlemek için kullanılabilir. Bu öğe esas olarak diğer sayfalara veya ek bilgilere giden köprüleri işaretlemek için tasarlanmıştır.
Bir örnek:
<nav> <a href="index.html">Ana sayfa</a> <a href="html5.html">Learn HTML5</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>
nav içinde herhangi bir öğe kullanabilirsiniz. Navigasyonu hala listeleri kullanarak tanımlayabilirsiniz. Ancak, diğer öğeler de nav içinde sorunsuzca kullanılabilir. nav ayrıca bir belge içinde birden çok kez görünebilir.
Ayrıntıları belirtme
Bir başka ilginç unsur da ayrıntılardır. Öğe adından da anlaşılacağı gibi, içerik hakkında ek bilgiler belirtmek için kullanabilirsiniz. Ayrıntılar öğesinin yalnızca özet öğesiyle birlikte gerçekten ilginç hale geldiğini lütfen unutmayın. Bu öğe hakkında daha fazla bilgiyi aşağıda bulabilirsiniz.
İlk olarak detayların kullanımına bir örnek:
<article> <details> <summary>References to the article...</summary> <ul> <li><a href="references1.html">Link 1</a></li> <li><a href="references2.html">Link 2</a></li> <li><a href="links3.html">Link 3</a></li> </ul> </details> <details> <summary>Madde için kaynak bilgisi ...</summary> <ul> <li><a href="quelle1.html">Link 4</a></li> <li><a href="quelle2.html">link 5</a></li> <li><a href="quelle3.html"">link 6</a></li> </ul> </details> </article>
Ayrıntılar öğesinin içeriği, ayrıntılar içinde yer alan özet öğesine tıklayana kadar ziyaretçiden gizlenir.
Bu, örneğin bir video oynatıcı ile bağlantılı olarak ilginç olabilir. İşte başka bir örnek:
<video id="film" width="320" height="180" autoplay> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> </video> <details open> <summary>Video oynatıcı kontrollerini gizle/göster</summary> <p> <button id="start" onClick="start()">Start/pause</button> <button id="mute" onClick="mute()">Mute</button> <button id="louder" onClick="louder()">Louder</button> <button id="quieter" onClick="quieter()">Quieter</button> </p> </details>
Sayfa çağrıldığında, başlangıçta yalnızca oynatıcı penceresi görünür.
Ancak, bir ziyaretçi göster/gizle bağlantısına tıklarsa, özet içinde tanımlanan içerik görüntülenir.
Spesifikasyona göre, özet öğesi bulunamazsa tarayıcılar standart içeriği görüntülemelidir.
Ayrıntılar için open niteliği de ilginçtir.
<details open> ... </details>
Bu nitelik ayarlanırsa, özet öğesinin içeriği sayfa yüklendiğinde doğrudan görülebilir.
Özetler
Şimdi özet öğesine bir kez daha ayrıntılı olarak bakalım.
<article> <details> <summary>Makalenin referansları...</summary> <ul> <li><a href="references1.html">Link 1</a></li> <li><a href="references2.html">Link 2</a></li> <li><a href="links3.html">Link 3</a></li> </ul> </details> <details> <summary>Madde için kaynak bilgisi ...</summary> <ul> <li><a href="quelle1.html">Link 4</a></li> <li><a href="quelle2.html">link 5</a></li> <li><a href="quelle3.html"">link 6</a></li> </ul> </details> </article>
Henüz açılmamış içerik, ayrıntılarla bağlantılı olarak özet içinde tanımlanır. Özet sayesinde, yalnızca gerektiğinde görüntülenen ek bilgiler dahil edilebilir.
Kuşkusuz, JavaScript kullanarak genişletilebilir ve daraltılabilir alanları da kolayca gerçekleştirebilirsiniz. Ancak tarayıcıda JavaScript devre dışı bırakılırsa uygulama çalışmayacaktır. Bu nedenle, yakın gelecekte ayrıntılar ve özet için geniş destek arzu edilmektedir.
Marjinal alanlar ve marjinaller
Ek bilgiler, kenar notları, çapraz referanslar vb. HTML5'te aside öğesi ile etiketlenebilir. Bu şekilde işaretlenen içerik genel belge bağlamında olsa da doğrudan belgeyle ilişkili değildir.
HTML5 spesifikasyonunun aside ile işaretlenmiş bir alana hangi boyutun uygulanacağını belirtmediğini lütfen unutmayın. Bu nedenle kenar içeriği, örneğin kenar boşluğu olarak görüntülenebileceği gibi kenar çubuğu olarak da görüntülenebilir.
Aşağıdaki örnekte bir kenar alanının tanımı gösterilmektedir.
<body> <header> <h1>PSD-Tutorials.de</h1> </header> <article> <h2>Web uygulamaları oluşturma (bölüm 10): jQuery mobile (2)</h2> <p>Bu eğitimde ilk gerçek jQM sayfası oluşturulmaktadır. Bunun için ön koşul, daha önce öğrendiğiniz temel HTML çerçevesidir.</p> <aside> <h3>Daha fazla bilgi</h3> <ul> <li><a href="#/fn1">Daha fazla bilgi için...</a></li> </ul> </aside> </article> <aside> <nav> <h2>Navigasyon</h2> <ul> <li><a href="#">Ana sayfa</a></li> <li><a href="#">İletişim</a></li> </ul> </nav> </aside> </body>
Zaman bilgisi ekleyin
Zaman bilgisi, yeni zaman öğesi kullanılarak özel olarak etiketlenebilir. Bu elemanın özelliği, zaman bilgisinin insanlar ve makineler tarafından okunabilmesidir.
İnsanlar için zaman bilgisi time elementi içinde yazılır. Zaman elementinin datetime özelliği tarayıcılara da zaman bilgisini okuma fırsatı vermek için kullanılır.
<p> <time datetime="2014-04-15 19:00">15 Nisan saat 7'de buluşacağız</time>.</p>
Bu noktada, bunun mevcut tarayıcılarda görsel bir etkisi olmadığını, yalnızca zaman bilgisini makine tarafından okunabilir hale getirmeyi amaçladığını bir kez daha belirtmek isteriz.
Metinleri vurgulayın
İşaret öğesi ile kelimeleri veya tüm metin pasajlarını görsel olarak vurgulamak mümkündür. HTML5 spesifikasyonu, bu öğenin yalnızca metin içeriğiyle birlikte kullanılması gerektiğini açıkça belirtmektedir. Ayrıca bağlamla belirli bir ilişkisi olmalıdır.
Bir örnek:
<p>Bu eğitimde, ilk gerçek jQM sayfası oluşturulmaktadır. Bunun için ön koşul, daha önce öğrendiğiniz <mark>HTML framework</mark>'tür.</p>
Tarayıcıların vurgulamayı nasıl uyguladığı sabit değildir.
Ancak, Google Chrome ve Firefox'un her ikisi de sarı bir arka plan kullanır.
Vurgulama diyalogları
HTML5 ayrıca diyalogları ayrı ayrı vurgulamak için de tasarlanmıştır. Diyalog öğesi bu amaç için mevcuttur. Ancak diyalog öğesi şu anda yalnızca Safari ve Google Canary, yani tarayıcının geliştirici sürümü tarafından desteklenmektedir.
İşte başka bir örnek:
<dialogue id="dialogue" style="width:50%;background-color:#F4FFEF;border:1px dotted black;"> <p>Bu kutunun içeriğidir.</p> <button id="hide">Close</button> </dialogue> <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ıklanır tıklanmaz diyalog görüntülenir. Her şeyin çalışması için önceki örnekte HTML5, CSS ve JavaScript'in bir kombinasyonu kullanılmıştır.
