HTML5 Ders_5 HTML5'e Geçiş (Migration)

HTML'5 Geçiş

Bu derste, tipik bir HTML4 dökümanını HTML5'e nasıl dönüştürebileceğimizi öğreneceğiz. Bu işlemi de, dökümanımızın içeriğine zarar vermeden yapacağız.

Bahsedeceğimiz yöntemin tersini kullanarak da HTML5 dökümanlarını HTML4 veya daha eski versiyonlara dönüştürebilirsiniz.

Tipik HTML4 ElemanlarıTipik HTML5 Karşılıkları
<div id="header">
<header>
<div id="menu">
<nav>
<div id="content">
<section>
<div id="post">
<article>
<div id="footer">
<footer>

Tipik bir HTML4 Sayfası Kodlaması:

<!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>Pazar Postası</h1>
</div>

<div id="menu">
  <ul>
    <li>Haberler</li>
    <li>Spor</li>
    <li>Hava</li>
  </ul>
</div>

<div id="content">
<h2>Haber Bölümü</h2>

<div id="haber">
  <h2>Haber Makalesi</h2>
  <p>Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir.</p>
</div>

<div id="haber">
  <h2>Haber Makalesi</h2>
  <p>Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir.</p>
</div>

</div>

<div id="footer">
  <p>&amp;copy; 2015 Pazar Postası. Bütün hakları saklıdır</p>
</div>

</body>
</html>

Bu HTML4 sayfası şöyle görünür:

Haber Bölümü

Haber Makalesi

Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir.

Haber Makalesi

Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir.

HTML5'e Dönüştürmek:

Yukarıdaki sayfayı HTML5'e uyarlamak için önce DOCTYPE yapısını değiştirelim. DOCTYPE ilanı için:

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

HTML5'de çok daha kısaca: <!DOCTYPE html> kodlarını kullanırız.

Dil Kodlaması için de:

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

 HTML5'de ise kısaca: <meta charset="utf-8"> kodlarını kullanırız.

Shiv Ekleme

HTML5'in anlamsal elemanları, bütün modern tarayıcılar tarafından tanınır.

Eski tarayıcılara da bu elemanları tanıtmak mümkündür. 

 İnternet Explorer tarayıcısına bu elemanları tanıtmak için aşağıda verilen shiv kodunu eklemek yeterlidir:

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

HTML5 Anlamsal Elemanları İçin CSS Ekleme

Eski bir html sayfası için eklenmiş CSS'e bir göz atalım:

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;
}

 div elemanları ile hazırlanmış bu CSS, HTML5'de şöyle yazılır:

 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;
}

Divleri HTML5 <haeder> ve <footer> Elemanlarına Dönüştürme

id="header" ve id="footer" kimlikleri atanmış div elemanlarını tekrar görelim:

<div id="header">
  <h1>Pazar Postası</h1>
</div>
.
.
.
<div id="footer">
  <p>&amp;copy; 2015 Pazar Postası. Bütün hakları saklıdır</p>
</div>

 Bu divler kolaylıkla, <header> ve <footer> elemanlarına dönüşebilir. Aşağıda dönüşmüş halleri verilmiştir:

 <header>
  <h1>Pazar Postası</h1>
</header>
.
.
.
<footer>
  <p>&amp;copy; 2015 Pazar Postası. Bütün hakları saklıdır</p>
</footer>

Divleri HTML5 <nav> Elemanına Dönüştürme

id="menu" kimliği atanmış div elemanını tekrar görelim:

 <div id="menu">
  <ul>
    <li>Haberler</li>
    <li>Spor</li>
    <li>Hava</li>
  </ul>
</div>

 Bu divin html5 <nav> elamanına dönüşümü oldukça basittir:

 <nav>
  <ul>
    <li>Haberler</li>
    <li>Spor</li>
    <li>Hava</li>
  </ul>
</nav>

Divleri HTML5 <section> Elemanına Dönüştürme

<div id="content"> elemanını;

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

basitçe <section> elemanına dönüştürebiliriz:

 <section>
.
.
.
</section>

Divleri HTML5 <article> Elemanına Dönüştürme

<div id="haber"> elemanını;

 <div id="haber">
  <h2>Haber Makalesi</h2>
  <p>Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir.</p>
</div>
basitçe <article> elemanına dönüştürebiliriz:

 <article>
  <h2>Haber Makalesi</h2>
  <p>Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir.</p>
</article>

Artık şu CSS kodlarına da ihtiyacımız kalmadı:

 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;
}

Tipik Bir HTML5 Sayfası

<!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>Pazar Postası</h1>
</header>

<nav>
  <ul>
    <li>Haberler</li>
    <li>Spor</li>
    <li>Hava</li>
  </ul>
</nav>

<section>
<h2>News Section</h2>

<article>
  <h2>Haber Makalesi</h2>
  <p>Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir.</p>
</article>

<article>
<h2>Haber Makalesi</h2>
  <p>Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir.</p>
</article>

</section>

<footer>
  <p>&amp;copy; 2015 Pazar Postası. Bütün hakları saklıdır</p>
</footer>

</body>
</html>

 Bu kodlar, tarayıcımızda şöyle görünecektir:

Haber Bölümü

Haber Makalesi

Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir.

Haber Makalesi

Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir. Bu bir haber makalesidir.


<section>, <article> ve <div> Elemanları Arasındaki Farklar

HTML5 standarlarında, <section>, <article> ve <div> elemanları arasındaki farklarlar, biraz kafa karıştırıcı olabilir.

 <section> elamanı birbiri ile bağlantılı olan bir grup içeriği bir arada tanımlamak için kullanılır. Örneğin bir alış-veriş sitesinde, belli bir grup ürünü bir <section> bölgesinde sunabiliriz.

 <article> elemanı, kendine has bir içeriği, bir metni sunmak için kullanılır. Örenğin bir tanımıtım yazısı/makalesi bu eleman ile gösterilebilir.

 <div> elemanı ise, alt elemanları, içerikleri, bir blok halinde sunabilmek için kullanılır.

 Aşağıdaki örnekler, size, bahsettiğimiz bu durumlar ile ilgili bir fikir verecektir:

<article> içinde <article> örneği:


<article>

<h2>Ünlü Şehirler</h2>

<article>
<h2>Londra</h2>
<p>Londra güzel bir şehirdir. Londra güzel bir şehirdir. Londra güzel bir şehirdir. Londra güzel bir şehirdir. </p>
</article>

<article>
<h2>Paris</h2>
<p>Paris güzel bir şehirdir. Paris güzel bir şehirdir. Paris güzel bir şehirdir. Paris güzel bir şehirdir. </p>
</article>

<article>
<h2>Tokyo</h2>
<p>Tokyo güzel bir şehirdir. Tokyo güzel bir şehirdir. Tokyo güzel bir şehirdir. Tokya güzel bir şehirdir. </p>
</article>

</article>

<article> içinde <div> örneği:


<article>

<h2>Famous Cities</h2>

<div class="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</article>

<article> içinde <section> içinde <div> örneği:

<article>

<section>
<h2>Famous Cities</h2>

<div class="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>

<section>
<h2>Famous Countries</h2>

<div class="country">
<h2>England</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="country">
<h2>Japan</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>

</article>


Gönderen
Etiketler: , , , , , , ,

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)