Eski HTML Dosyasını HTML5 ‘e Taşıma!

Eski HTML Dosyasını HTML5 ‘e Taşıma!. Eski html sürümünüzü yeni HTML5 standardına nasıl çıkaracağınıza dair makalemize bir göz atın!

Eski HTML Dosyasını HTML5 'e Taşıma!
Eski HTML Dosyasını HTML5 ‘e Taşıma!

HTML4’ten HTML5’e geçiş

Eski HTML Dosyasını HTML5 ‘e Taşıma!. Bu bölümde html 4 ile kodlamış html belgemizi html5 e nasıl taşıyacağımızı öğreneceğiz.

Bu bölüm, orijinal içeriğin veya yapının hiçbirini bozmadan HTML4 sayfasının HTML5 sayfasına nasıl dönüştürüleceğini gösterir.

Aynı tarifi kullanarak XHTML’den HTML5’e geçiş yapabilirsiniz.

Eski HTML Dosyasını HTML5 ‘e Taşıma!

Tipik bir HTML4 Sayfası

<!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.9em;
}

div#header, div#footer {
  padding: 10px;
  color: white;
  background-color: black;
}

div#content {
  margin: 5px;
  padding: 10px;
  background-color: lightgrey;
}

div.article {
  margin: 5px;
  padding: 10px;
  background-color: white;
}

div#menu ul {
  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 class="article">
    <h2>News Article</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </div>
  <div class="article">
    <h2>News Article</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </div>
</div>

<div id="footer">
  <p>&amp;copy; 2016 Monday Times. All rights reserved.</p>
</div>

</body>
</html>

HTML5 Dokümanına Geç

Dokümanı değiştirin :

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

HTML5 dokümanı:

<!DOCTYPE html>

HTML5 Kodlamasına Geç

Kodlama bilgilerini değiştirin :

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

HTML5 kodlamasına:

<meta charset="utf-8">

HTML5Shiv’i ekleyin

Yeni HTML5 semantik öğeleri tüm modern tarayıcılarda desteklenir. Ayrıca, eski tarayıcılara “bilinmeyen öğelerin” nasıl ele alınacağını “öğretebilirsiniz”.

Bununla birlikte, IE8 ve öncesi, bilinmeyen öğelerin şekillendirilmesine izin vermez. Bu nedenle, HTML5Shiv, Internet Explorer sürümlerinde HTML5 öğelerinin 9 sürümünden önceki stilini etkinleştirmek için bir JavaScript geçici çözümdür.

HTML5Shiv’i ekleyin:

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

Hakkında daha fazlasını okuyun HTML5Shiv içinde HTML5 Tarayıcı Desteği .

HTML5 Anlamsal Öğelerine Geçiş

Mevcut CSS, öğeleri şekillendirmek için kimlikler ve sınıflar içerir:

body {
  font-family: Verdana,sans-serif;
  font-size: 0.9em;
}

div#header, div#footer {
  padding: 10px;
  color: white;
  background-color: black;
}

div#content {
  margin: 5px;
  padding: 10px;
  background-color: lightgrey;
}

div.article {
  margin: 5px;
  padding: 10px;
  background-color: white;
}

div#menu ul {
  padding: 0;
}

div#menu ul li {
  display: inline;
  margin: 5px;
}

HTML5 anlamsal öğeleri için eşit CSS stilleri ile değiştirin:

body {
  font-family: Verdana,sans-serif;
  font-size: 0.9em;
}

header, footer {
  padding: 10px;
  color: white;
  background-color: black;
}

section {
  margin: 5px;
  padding: 10px;
  background-color: lightgrey;
}

article {
  margin: 5px;
  padding: 10px;
  background-color: white;
}

nav ul {
  padding: 0;
}

nav ul li {
  display: inline;
  margin: 5px;
}

Son olarak, öğeleri HTML5 anlamsal öğelerine değiştirin:

<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>
  <article>
    <h2>News Article</h2>
    <p>Lorem ipsum dolor sit amet..</p>
  </article>
  <article>
    <h2>News Article</h2>
    <p>Lorem ipsum dolor sit amet..</p>
  </article>
</section>

<footer>
  <p>&copy; 2014 Monday Times. All rights reserved.</p>
</footer>

</body>

<article> , <section> ve <div> Arasındaki Fark

HTML5 te <article> <section>ve <div>etiketleri arasında fark vardır.

HTML5 standardında, <section>öğe ilgili öğelerin bir bloğu olarak tanımlanır.

<article> Elemanın ilgili elemanların tam, kendi kendine yeten bir blok olarak tanımlanır.

<div>Elemanı alt elemanlarının bir bloğu olarak tanımlanır.

Bunu nasıl yorumlayabilirim?

Yukarıdaki örnekte, <section>ilgili için bir kap olarak kullandık <article>.

Ancak, <article>makaleler için de bir konteyner olarak kullanabilirdik.

İşte bazı farklı örnekler:

<article> in <article>:

<article>

<h2>Famous Cities</h2>

<article>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
</article>

<article>
  <h2>Paris</h2>
  <p>Paris is the capital and most populous city of France.</p>
</article>

<article>
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</article>

</article>

<div> in <article>:

<article>

<h2>Famous Cities</h2>

<div class="city">
  <h2>London</h2>
  <p>London is the capital city of England.</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.</p>
</div>

</article>

<div> in <section> in <article>:

<article>

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

  <div class="city">
    <h2>London</h2>
    <p>London is the capital city of England.</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.</p>
  </div>
</section>

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

  <div class="country">
    <h2>England</h2>
    <p>London is the capital city of England.</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.</p>
  </div>
</section>

</article>

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …

HTML