Perşembe, 20 Eylül 2012 04:14

HTML5'e giriş

Yazan 
Öğeyi Oyla
(0 oy)

HTML5 İLE GELEN YENİLİKLER

YENİ ETİKETLERGoogle'ın yaptığı bir araştırmaya göre dünya üzerindeki websitelerinin çoğunda kullanılan sınıf(class özelliği) isimleri footer,menu,nav,header, date gibi olduğu ortaya çıkmıştır. W3C bunuda dikkate alarak HTML5'e bu etiketleri ekledi.

SECTION ETİKETİ

Eğer amacınız bir kısım html kodunuzu sadece stillendirmek değilse ve şablonunuzun genel alanlarından birini oluşturan bir kısmı göstermek isterseniz section etiketini kullanabilirsiniz.

NAV ETİKETİ

Web sitenizin diğer sayfalarına bağlantıların bulunduğu bir htmle bölümünü göstermek için nav etiketini kullanabilirsiniz. Genellikle burada listelerle(ul,li gibi) birlikte bağlantılar kullanılsa da bu zorunlu değildir.

ARTICLE ETİKETİ

Bu etiket bir dokümanın içinde bulunması muhtemel tüm alanları barındırabilecek şekilde bir makale, bir blog, bir yorum gibi ayrık bir elemanı göstermek için kullanılabilir.

Örnek:

<article>
<header>
<h1>Blog Başlığı</h1>
<p>25/12/2070</p>
</header>
<p>Blog yazısı</p>
<p>...</p>
<section>
<h1>Yorumlar</h1>
<article>
<footer>
<p>Gönderen: <span>Ufuk Yıldırım</span></p>
<p>Zaman: 35 dakika önce</p>
</footer>
<p>Yorum yazızı buraya</p>
</article>
<article>
<footer>
<p>Gönderen: <span>Dilber Atmaca</span></p>
<p>Zaman: 25 dakika önce</p>
</footer>
<p>Başka bir yorum yazısı buraya</p>
</article>
</section>
</article>

aside ETİKETİ

Bu etiketi sayfanızın ana içeriği ile bağlantılı olan içerikleri koyabileceğiniz yerlerde kullanabilirsiniz. Kenar çubuğu (sidebar) bu etiketin en çok kullanılacağı yer olabilir. Sayfanızın ayak kısmında da (footer) kullanabilirsiniz. Bu etiketin içerisine örneğin facebook eklentilerini, sayfa içeriği ile ilgili reklam alanlarını veya sayfa içeriği ile ilgili etiket ve bağlantıları kullamak bu etiketin görevi ile uyumlu olur.

 

hgroup ETİKETİ

h1-h6 etiketli başlıklar sıralanıken bu etiket ile sarılır.

header ETİKETİ

header etiketi her hangi bir section etiketi ile açılmış alanın (zorunlu değil) başında kullanılabilir. İçerisinde h1-h6 etiketinin veya hgroup etiketinin kullanılması W3C tarafından tavsiye edilir. Çoğu kodda kullanılan "<div id='header' kodlarının yerine kullanılması için oluşturulmuştur.

 

footer ETİKETİ

footer etiketi header etiketinin tersi  gibidir. Ebeveyn etiketin en son çocuk elementi olarak kullanılır (child element). Bir html alanının ayak kısmında gösterilmesi gereken içerikler için kullanılır.

address ETİKETİ

İletişim bilgilerinin verildiği html etiketidir.

<footer>
 <address>
  Daha fazla bilgi için iletişime geçin
  <a>Ufuk Yıldırım</a>.
 </address>
 <p><small>© copyright 2038 Saadet Ltd. ve Şti.</small></p>
</footer>

 


DAHA AZ KOD İLE OKUNABİLİRLİK ARTTI

HTML4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 

HTML5:

<!DOCTYPE html>

HTML4: 

 <html xmlns=”http://www.w3.org/1999/xhtml” lang=”tr” xml:lang=”tr”>

HTML5:

<html lang="tr"> 

HTML4: 

<meta http-equiv=”Content-Type” content=”text/html;>

HTML5:

<meta charset=”UTF-8”>

HTML4: 

<link rel=”stylesheet” href=”style.css” type=”text/css”>

HTML5:

<link rel=”stylesheet” href=”style.css”>

Basit fakat HTML5 uyumlu bir şablon

 <!doctype html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>HTML5 şablon</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<h1>HTML5 Şablon</h1>
<h3>Standartlara uygundur</h3>
</hgroup>
<nav>
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">HTML5 hakkında</a></li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
<div class="footer_navigation">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">HTML5 Hakkında</a></li>
</ul>
</div>
<hgroup>
<h3>Ufuk Yıldırım</h3>
<h4>Ufuk ltd. şti.</h4>
</hgroup>
<address>
<a href="/">E-Posta</a>
</address>
</footer>
</body>
</html>
 
Okunma 2815 defa Son Düzenlenme Perşembe, 04 Ekim 2012 04:01
Ufuk Yıldırım

Yazılım Geliştirme Uzmanı

Web site: www.ufuk.biz

Yorum Ekle

Gerekli olan (*) işaretli alanlara gerekli bilgileri girdiğinizden emin olun. HTML kod izni yoktur.