Neler yeni

Yeni mesajlar Yeni konular En çok mesaj En çok tepki En çok görüntülenen

HTML5 başlangıç yeni etiketleri tanıma

telays

🌱Yeni Üye🌱
Katılım
23 Tem 2012
Mesajlar
1
Tepkime puanı
0
HTML5 ile basit bir sayfa hazırladım. Bunuda sizlere kısaca anlatayım dedim.
HTML5 DOCTYPE kısa öz, diğerleri gibi değil.
HTML:
<!DOCTYPE html>
Charset dil tanımlaması ise ;
HTML:
 <meta charset="ISO-8859-9">
Yine meta etiketini incelersek 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

html5-4.png



Benim hazırladığım tasarım ise ;
Telays.Com
Kötü olduğuna bakmayın sadece örneklendirme olsun diye =)
html5-5.png





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ı.
ders1.png


HTML:
<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.
ders2.png


HTML:
<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.
ders3.png


HTML:
<article></article>

ASIDE ;
Kenar bilgisi sidebar gibi düşünebiliriz.
ders4.png


HTML:
<aside></aside>

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


HTML:
<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ı.
https://www.telays.com/showthread.php?t=89

MARK;
mark etiketinin daha önce anlatımı yapıldı.
HTML5 <mark> etiketinin kullanımı

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.

ders6.png


HTML:
<figure><img src="https://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.
ders7.png


HTML:
<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.
ders8.png


kullanımı ;
HTML:
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.
HTML:
<time>10.06.2012</time>

Tüm browserler desteklemeyebilir dikkatli olmanızı öneririm :)

Kaynak : HTML5 başlangıç yeni etiketleri tanıma
 
Üst