HTML5 Taşıma

HTML4'ten HTML5'e geçiş

Bu bölüm, bir tipik HTML4 sayfasını tipik HTML5 sayfasına nasıl taşıyacağınızı anlatır.

Bu bölüm, bir mevcut HTML4 sayfasını HTML5 sayfasına nasıl dönüştüreceğinizi, orijinal içeriği ve yapısını bozmadan gösterir.

Açıklama:Aynı teknikleri kullanarak HTML4 ve XHTML'den HTML5'e geçiş yapabilirsiniz.

Tipik HTML4 Tipik HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

Tipik HTML4 sayfası

Örnek

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
  body {font-family:Verdana,sans-serif;font-size:0.8em;}
  div#header,div#footer,div#content,div#post 
  {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
  div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
  div#content {background-color:#ddd;}
  div#menu ul {margin:0;padding:0;}
  div#menu ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<div id="header">
  <h1>Monday Times</h1>
</div>
<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</div>
<div id="content">
<h2>News Section</h2>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</div>
<div id="footer">
  <p>© 2014 Monday Times. Tüm hakları saklıdır.</p>
</div>
</body>
</html>

Kişisel olarak deneyin

HTML5 Doctype olarak değiştirin

Doküman türünü HTML4 doctype'tan değiştirin:

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

HTML5 doctype olarak değiştirin:

<!DOCTYPE html>

Kişisel olarak deneyin

HTML5 kodlaması olarak değiştirin

Kodlama bilgilerini HTML4'ten değiştirin:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

HTML5 olarak değiştirin:

<meta charset="utf-8">

Kişisel olarak deneyin

shiv ekleyin

Tüm modern tarayıcılar HTML5 anlamlı öğelerini destekler.

Ayrıca, eski tarayıcıların "bilinmeyen öğeleri" nasıl işlemesini "öğretebilirsiniz".

Internet Explorer destek için eklenen shiv:

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Kişisel olarak deneyin

Açıklama:shiv hakkında daha fazla bilgi için HTML5 tarayıcı desteklerinde okuyun.

HTML5 anlamlı öğeler için CSS ekleyin

Mevcut CSS stillerini görün:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}
HTML5 anlamlı öğeler için eşit CSS stilleriyle yineleyin:
header,footer,section,article {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul  {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}

Kişisel olarak deneyin

HTML5 <header> ve <footer> ile değiştirin

id="header" ve id="footer" olan <div> öğelerini:

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. Tüm haklar saklıdır.</p>
</div>

HTML5 semantik elementlerine <header> ve <footer> olarak değiştirin:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. Tüm haklar saklıdır.</p>
</footer>

Kişisel olarak deneyin

HTML5 <nav> olarak değiştirin

id="menu" olan <div> elementini:

<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</a></li>
    <li>Weather</li>
  </ul>
</div>

HTML5 semantik elementlerine <nav> olarak değiştirin:

<nav>
  <ul>
    <li>News</li>
    <li>Sports</a></li>
    <li>Weather</li>
  </ul>
</nav>

Kişisel olarak deneyin

HTML5 <section> olarak değiştirin

id="content" olan the <div> elementini:

<div id="content">
.
.
.
</div>

HTML5 semantik elementlerine <section> olarak değiştirin:

<section>
.
.
.
</section>

Kişisel olarak deneyin

HTML5 <article> olarak değiştirin

class="post" olan tüm <div> elementlerini:

<div class="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

HTML5 semantik elementlerine <article> olarak değiştirin:

<article>
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

Kişisel olarak deneyin

Bu 'artık gerekli olmayan' stilleri silin:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}

Kişisel olarak deneyin

Tipik HTML5 sayfası

Sonunda <head> etiketini silebilirsiniz. HTML5'te artık onlara ihtiyaç yok:

Örnek

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {
    font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
    border:1px solid grey;
    margin:5px;margin-bottom:15px;padding:8px;
    background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}
</style>
<body>
<header>
  <h1>Monday Times</h1>
</header>
<nav>
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</nav>
<section>
<h2>News Section</h2>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
<h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</section>
<footer>
  <p>© 2014 Monday Times. Tüm hakları saklıdır.</p>
</footer>
</body>
</html>

Kişisel olarak deneyin

article, section ve div arasındaki farklar

HTML5 standartlarında, article, section ve div arasındaki fark çok küçük ve karışık.

HTML5 standartlarında, section elementi ilgili elementlerin blok olarak tanımlanmıştır.

article elementi, ilgili elementlerin tamamen kendine ait içeren blok olarak tanımlanmıştır.

div elementi, alt elementlerin blok olarak tanımlanmıştır.

Bu nasıl anlaşılır?

Yukarıdaki örnekte, section'ı ilgili articles'in konteyneri olarak kullandık.

Ancak, article'ı makalenin konteyneri olarak da kullanabiliriz.

Aşağıda bazı farklı örnekler verilmiştir:

Article içinde <article>:
<article>
<h2>Ünlü Şehirler</h2>
<article>
<h2>London</h2>
<p>London, İngiltere'nin başkenti. İngiltere'nin nüfusu en fazla olan şehridir,</p>
<p>13 milyondan fazla nüfuslu bir metropol bölgesi ile.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris, Fransa'nın başkenti ve nüfusu en fazla olan şehridir.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo, Japonya'nın başkenti, Büyük Tokyo Bölgesi'nin merkezi,</p>
ve dünyanın nüfusu en fazla olan metropol bölgesi.</p>
</article>
</article>

Kişisel olarak deneyin

<article> içinde <div>：</div>
<article>
<h2>Ünlü Şehirler</h2>
<div class="city">
<h2>London</h2>
<p>London, İngiltere'nin başkenti. İngiltere'nin nüfusu en fazla olan şehridir,</p>
<p>13 milyondan fazla nüfuslu bir metropol bölgesi ile.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris, Fransa'nın başkenti ve nüfusu en fazla olan şehridir.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo, Japonya'nın başkenti, Büyük Tokyo Bölgesi'nin merkezi,</p>
ve dünyanın nüfusu en fazla olan metropol bölgesi.</p>
</div>
</article>

Kişisel olarak deneyin

<article> içinde <section> içinde <div>：</div>
<article>
<section>
<h2>Ünlü Şehirler</h2>
<div class="city">
<h2>London</h2>
<p>London, İngiltere'nin başkenti. İngiltere'nin nüfusu en fazla olan şehridir,</p>
<p>13 milyondan fazla nüfuslu bir metropol bölgesi ile.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris, Fransa'nın başkenti ve nüfusu en fazla olan şehridir.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo, Japonya'nın başkenti, Büyük Tokyo Bölgesi'nin merkezi,</p>
ve dünyanın nüfusu en fazla olan metropol bölgesi.</p>
</div>
</section>
<section>
<h2>Ünlü Ülkeler</h2>
<div class="country">
<h2>İngiltere</h2>
<p>London, İngiltere'nin başkenti. İngiltere'nin nüfusu en fazla olan şehridir,</p>
<p>13 milyondan fazla nüfuslu bir metropol bölgesi ile.</p>
</div>
<div class="country">
<h2>Fransa</h2>
<p>Paris, Fransa'nın başkenti ve nüfusu en fazla olan şehridir.</p>
</div>
<div class="country">
<h2>Japonya</h2>
<p>Tokyo, Japonya'nın başkenti, Büyük Tokyo Bölgesi'nin merkezi,</p>
ve dünyanın nüfusu en fazla olan metropol bölgesi.</p>
</div>
</section>
</article>

Kişisel olarak deneyin