HTML5 başlangıç yeni etiketleri tanıma

15-07-2012

HTML5 ile basit bir sayfa hazırladım. Bunuda sizlere kısaca anlatayım dedim.
HTML5 DOCTYPE kısa öz, [URL="http://en.wikipedia.org/wiki/Doctype"]diğerleri[/URL] gibi değil.

Kod:

<!DOCTYPE html>

Charset dil tanımlaması ise ;

Kod:

<meta charset="ISO-8859-9">

Yine [URL="http://www.w3schools.com/html5/tag_meta.asp"]meta etiketini incelersek [/URL] alabileceği değerleri görebiliriz. HTML eski sürümlerinde <meta> etiketine verilebilen scheme değeri HTML5 ile desteklenmemektedir.

Oluşturduğum sayfa ;

Header
Nav
Aside
Article
Footer

Benim hazırladığım tasarım ise ;
http://www.telays.com/replication/html5.html
Kötü olduğuna bakmayın sadece örneklendirme olsun diye =)
resim

Tanıyacağımız yeni HTML5 ile gelen etiketler ;

Kod:

<header>

<footer>

<article>

<aside>

<nav>

<video>

<mark>

<figure>

<figcaption>

<details>

<summary>

HEADER ;
header etiketi adından da anlaşılacağı üzere başlık için kullanılır. İlla sayfanın tepesinde olacak diye bir şey yok article içinde de kullanılabilirdi. Amaç başlık olması.
resim

Kod:

<header></header>

FOOTER ;
Yine footer etiketide header etiketi gibi belgede birden fazla kere bulunabilir. Alt bilgi içerir. Bu bilgilerde genel telif hakları, iletişim vb.
resim

Kod:

<footer></footer>

ARTICLE ;
article etiketi bir yazı dizisinde kullanılabilir. Site içinde etiket sayesinde herşeyden bağımsız belirtilir ve dağıtımı kolay olur.
resim

Kod:

<article></article>

ASIDE ;
Kenar bilgisi sidebar gibi düşünebiliriz.
resim

Kod:

<aside></aside>

NAV ;
nav genelde menü yapısı için kullanılır. Örnektede gördüğünüz gibi menü için kullanılmış.
resim

Kod:

<nav><a href="/html/">Programlama</a> |<a href="/html5/">Internet Admin</a> |<a href="/css/">E-Ticaret</a> |</nav>

VIDEO ;
video etiketinin daha önce anlatımı yapıldı.
http://www.telays.com/showthread.php?t=89

MARK;
mark etiketinin daha önce anlatımı yapıldı.
http://www.telays.com/showthread.php?t=93

FIGURE;
Figure etiketi içine aldığımız değerin kod bloğu,çizim,foto vb. olduğunu belirtir. figcaption ile bağlantılı kullanılabilir.

FIGCAPTION;
Figure etiketinde gösterilen olayın başlığını belirler.

resim

Kod:

<figure><img src="http://www.telays.com/telays.png" alt="Telays" />

<figcaption>Telays.Com Destek Banneri</figcaption>

</figure>

DETAILS ve SUMMARY ;
Details ve summary beraber kullanılırlar. Açılır kapanır panel şeklindedir.
resim

Kod:

<details><summary>Copyright 2012.</summary><p> Telays.Com</p><p> Webmaster Bilgi Merkezi</p></details>

METER ;
meter genelde bir olayın bir durumun tamamlanmasını bitiş durumunu, o anki durumu grafik ile gösterir.
resim

kullanımı ;

Kod:

Forum Skoru : <meter value="8" min="0" max="10"></meter><br />

Ticaret Puanı :  <meter min="0" low="40" high="90" max="100" value="95"></meter><br/>

TIME ;
Henüz hiç bir tarayıcı tarafından desteklenmiyor.

Kod:

<time>10.06.2012</time>

Tüm browserler desteklemeyebilir dikkatli olmanızı öneririm Gülümseme

Kaynak : http://www.telays.com/showthread.php?t=95

Konu ile Alakalı Benzer Konular
Konular		Yazar	Yorumlar	Okunma	Son Yorum
	BossTR HTML5 Teknolojisi [Makale]	BossTR	0	3,050	15-03-2014, Saat:21:48 Son Yorum: BossTR
	HTML5 Eğitim Dersleri	ardaduyan	1	3,676	23-12-2013, Saat:00:59 Son Yorum: Screwy

Sponsor Reklam